@cloudscape-design/components-themeable 3.0.1197 → 3.0.1198

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -1411,18 +1411,10 @@ module.exports.preset = {
         "light": "{colorPrimary600}",
         "dark": "{colorPrimary400}"
       },
-      "colorBackgroundProgressBarValueInFlash": {
-        "light": "{colorWhite}",
-        "dark": "{colorWhite}"
-      },
       "colorBackgroundProgressBarDefault": {
         "light": "{colorNeutral250}",
         "dark": "{colorNeutral700}"
       },
-      "colorBackgroundProgressBarInFlash": {
-        "light": "{colorGreyOpaque25}",
-        "dark": "{colorGreyOpaque25}"
-      },
       "colorBackgroundSegmentActive": {
         "light": "{colorPrimary600}",
         "dark": "{colorPrimary400}"
@@ -3728,18 +3720,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -5053,18 +5037,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -6311,18 +6287,10 @@ module.exports.preset = {
             "dark": "{colorNeutral800}"
           },
           "colorBackgroundProgressBarValueDefault": {
-            "light": "{colorPrimary600}",
-            "dark": "{colorPrimary400}"
-          },
-          "colorBackgroundProgressBarValueInFlash": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
           "colorBackgroundProgressBarDefault": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral700}"
-          },
-          "colorBackgroundProgressBarInFlash": {
             "light": "{colorGreyOpaque25}",
             "dark": "{colorGreyOpaque25}"
           },
@@ -7457,18 +7425,10 @@ module.exports.preset = {
             "dark": "{colorNeutral800}"
           },
           "colorBackgroundProgressBarValueDefault": {
-            "light": "{colorPrimary600}",
-            "dark": "{colorPrimary400}"
-          },
-          "colorBackgroundProgressBarValueInFlash": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
           },
           "colorBackgroundProgressBarDefault": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral700}"
-          },
-          "colorBackgroundProgressBarInFlash": {
             "light": "{colorGreyOpaque10}",
             "dark": "{colorGreyOpaque10}"
           },
@@ -8606,18 +8566,10 @@ module.exports.preset = {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral250}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
@@ -9754,18 +9706,10 @@ module.exports.preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -10963,9 +10907,7 @@ module.exports.preset = {
       "colorBackgroundNotificationStackBarHover": "color",
       "colorBackgroundPopover": "color",
       "colorBackgroundProgressBarValueDefault": "color",
-      "colorBackgroundProgressBarValueInFlash": "color",
       "colorBackgroundProgressBarDefault": "color",
-      "colorBackgroundProgressBarInFlash": "color",
       "colorBackgroundSegmentActive": "color",
       "colorBackgroundSegmentDefault": "color",
       "colorBackgroundSegmentDisabled": "color",
@@ -12599,9 +12541,7 @@ module.exports.preset = {
     "colorBackgroundNotificationStackBarHover": "color-background-notification-stack-bar-hover",
     "colorBackgroundPopover": "color-background-popover",
     "colorBackgroundProgressBarValueDefault": "color-background-progress-bar-value-default",
-    "colorBackgroundProgressBarValueInFlash": "color-background-progress-bar-value-in-flash",
     "colorBackgroundProgressBarDefault": "color-background-progress-bar-default",
-    "colorBackgroundProgressBarInFlash": "color-background-progress-bar-in-flash",
     "colorBackgroundSegmentActive": "color-background-segment-active",
     "colorBackgroundSegmentDefault": "color-background-segment-default",
     "colorBackgroundSegmentDisabled": "color-background-segment-disabled",
@@ -13419,10 +13359,8 @@ module.exports.preset = {
     "colorBackgroundNotificationStackBarActive": "--color-background-notification-stack-bar-active-a4h9r8",
     "colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-jh82oo",
     "colorBackgroundPopover": "--color-background-popover-e20fy8",
-    "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-9zs42p",
-    "colorBackgroundProgressBarValueInFlash": "--color-background-progress-bar-value-in-flash-q2h8w5",
-    "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-4755ec",
-    "colorBackgroundProgressBarInFlash": "--color-background-progress-bar-in-flash-f4k60b",
+    "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-69ydqg",
+    "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-j8kyxd",
     "colorBackgroundSegmentActive": "--color-background-segment-active-1u2ldl",
     "colorBackgroundSegmentDefault": "--color-background-segment-default-b0r494",
     "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-m2a5t7",

package/lib/internal/template/internal/generated/theming/index.js

@@ -1411,18 +1411,10 @@ export var preset = {
         "light": "{colorPrimary600}",
         "dark": "{colorPrimary400}"
       },
-      "colorBackgroundProgressBarValueInFlash": {
-        "light": "{colorWhite}",
-        "dark": "{colorWhite}"
-      },
       "colorBackgroundProgressBarDefault": {
         "light": "{colorNeutral250}",
         "dark": "{colorNeutral700}"
       },
-      "colorBackgroundProgressBarInFlash": {
-        "light": "{colorGreyOpaque25}",
-        "dark": "{colorGreyOpaque25}"
-      },
       "colorBackgroundSegmentActive": {
         "light": "{colorPrimary600}",
         "dark": "{colorPrimary400}"
@@ -3728,18 +3720,10 @@ export var preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -5053,18 +5037,10 @@ export var preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -6311,18 +6287,10 @@ export var preset = {
             "dark": "{colorNeutral800}"
           },
           "colorBackgroundProgressBarValueDefault": {
-            "light": "{colorPrimary600}",
-            "dark": "{colorPrimary400}"
-          },
-          "colorBackgroundProgressBarValueInFlash": {
             "light": "{colorWhite}",
             "dark": "{colorWhite}"
           },
           "colorBackgroundProgressBarDefault": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral700}"
-          },
-          "colorBackgroundProgressBarInFlash": {
             "light": "{colorGreyOpaque25}",
             "dark": "{colorGreyOpaque25}"
           },
@@ -7457,18 +7425,10 @@ export var preset = {
             "dark": "{colorNeutral800}"
           },
           "colorBackgroundProgressBarValueDefault": {
-            "light": "{colorPrimary600}",
-            "dark": "{colorPrimary400}"
-          },
-          "colorBackgroundProgressBarValueInFlash": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
           },
           "colorBackgroundProgressBarDefault": {
-            "light": "{colorNeutral250}",
-            "dark": "{colorNeutral700}"
-          },
-          "colorBackgroundProgressBarInFlash": {
             "light": "{colorGreyOpaque10}",
             "dark": "{colorGreyOpaque10}"
           },
@@ -8606,18 +8566,10 @@ export var preset = {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral250}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary600}",
             "dark": "{colorPrimary400}"
@@ -9754,18 +9706,10 @@ export var preset = {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
           },
-          "colorBackgroundProgressBarValueInFlash": {
-            "light": "{colorWhite}",
-            "dark": "{colorWhite}"
-          },
           "colorBackgroundProgressBarDefault": {
             "light": "{colorNeutral700}",
             "dark": "{colorNeutral700}"
           },
-          "colorBackgroundProgressBarInFlash": {
-            "light": "{colorGreyOpaque25}",
-            "dark": "{colorGreyOpaque25}"
-          },
           "colorBackgroundSegmentActive": {
             "light": "{colorPrimary400}",
             "dark": "{colorPrimary400}"
@@ -10963,9 +10907,7 @@ export var preset = {
       "colorBackgroundNotificationStackBarHover": "color",
       "colorBackgroundPopover": "color",
       "colorBackgroundProgressBarValueDefault": "color",
-      "colorBackgroundProgressBarValueInFlash": "color",
       "colorBackgroundProgressBarDefault": "color",
-      "colorBackgroundProgressBarInFlash": "color",
       "colorBackgroundSegmentActive": "color",
       "colorBackgroundSegmentDefault": "color",
       "colorBackgroundSegmentDisabled": "color",
@@ -12599,9 +12541,7 @@ export var preset = {
     "colorBackgroundNotificationStackBarHover": "color-background-notification-stack-bar-hover",
     "colorBackgroundPopover": "color-background-popover",
     "colorBackgroundProgressBarValueDefault": "color-background-progress-bar-value-default",
-    "colorBackgroundProgressBarValueInFlash": "color-background-progress-bar-value-in-flash",
     "colorBackgroundProgressBarDefault": "color-background-progress-bar-default",
-    "colorBackgroundProgressBarInFlash": "color-background-progress-bar-in-flash",
     "colorBackgroundSegmentActive": "color-background-segment-active",
     "colorBackgroundSegmentDefault": "color-background-segment-default",
     "colorBackgroundSegmentDisabled": "color-background-segment-disabled",
@@ -13419,10 +13359,8 @@ export var preset = {
     "colorBackgroundNotificationStackBarActive": "--color-background-notification-stack-bar-active-a4h9r8",
     "colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-jh82oo",
     "colorBackgroundPopover": "--color-background-popover-e20fy8",
-    "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-9zs42p",
-    "colorBackgroundProgressBarValueInFlash": "--color-background-progress-bar-value-in-flash-q2h8w5",
-    "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-4755ec",
-    "colorBackgroundProgressBarInFlash": "--color-background-progress-bar-in-flash-f4k60b",
+    "colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-69ydqg",
+    "colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-j8kyxd",
     "colorBackgroundSegmentActive": "--color-background-segment-active-1u2ldl",
     "colorBackgroundSegmentDefault": "--color-background-segment-default-b0r494",
     "colorBackgroundSegmentDisabled": "--color-background-segment-disabled-m2a5t7",

package/lib/internal/template/progress-bar/interfaces.d.ts

@@ -16,7 +16,7 @@ export interface ProgressBarProps extends BaseComponentProps {
     /**
      * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:
      *
-     * - `"flash"` - Use this variatn when using the progress bar within a flash component.
+     * - `"flash"` - Use this variant when using the progress bar within a flash component.
      *              Note that the result button isn't displayed when using this variant.
      *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.
      * - `"key-value"` - Use this variant when using the progress bar within the key-value pairs pattern.

package/lib/internal/template/progress-bar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/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 interface ProgressBarProps extends BaseComponentProps {\n  /**\n   * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n   */\n  value?: number;\n\n  /**\n   * Specifies the status of the progress bar. You can set it to one of the following:\n   *\n   * - `\"in-progress\"` - Displays a progress bar.\n   * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n   * `resultText`, and a result button.\n   */\n  status?: ProgressBarProps.Status;\n\n  /**\n   * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n   *\n   * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n   *              Note that the result button isn't displayed when using this variant.\n   *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n   * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n   * - `\"standalone\"` Use in all other cases. This is the default value.\n   */\n  variant?: ProgressBarProps.Variant;\n\n  /**\n   * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n   * If `resultButtonText` is empty, the result button isn't displayed.\n   *\n   * Note: If you use the `flash` variant, the result button isn't displayed.\n   * Add a button using the `action` property of the flashbar item instead.\n   */\n  resultButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the progress bar.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-labelledby` to the progress bar.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the progress bar.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Short description of the operation that appears at the top of the component.\n   *\n   * Make sure that you always provide a label for accessibility.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * More detailed information about the operation that appears below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Information that's displayed below the progress bar or status text.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Content that's displayed when `status` is set to `error` or `success`.\n   */\n  resultText?: React.ReactNode;\n\n  /**\n   * Called when the user clicks the result state button.\n   *\n   * Note: If you are using the `flash` variant, the result button isn't displayed.\n   * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n   */\n  onResultButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\n\n  export interface Style {\n    progressBar?: {\n      backgroundColor?: string;\n      borderRadius?: string;\n      height?: string;\n    };\n    progressValue?: {\n      backgroundColor?: string;\n    };\n    progressPercentage?: {\n      color?: string;\n      fontSize?: string;\n      fontWeight?: string;\n    };\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/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 interface ProgressBarProps extends BaseComponentProps {\n  /**\n   * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n   */\n  value?: number;\n\n  /**\n   * Specifies the status of the progress bar. You can set it to one of the following:\n   *\n   * - `\"in-progress\"` - Displays a progress bar.\n   * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n   * `resultText`, and a result button.\n   */\n  status?: ProgressBarProps.Status;\n\n  /**\n   * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n   *\n   * - `\"flash\"` - Use this variant when using the progress bar within a flash component.\n   *              Note that the result button isn't displayed when using this variant.\n   *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n   * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n   * - `\"standalone\"` Use in all other cases. This is the default value.\n   */\n  variant?: ProgressBarProps.Variant;\n\n  /**\n   * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n   * If `resultButtonText` is empty, the result button isn't displayed.\n   *\n   * Note: If you use the `flash` variant, the result button isn't displayed.\n   * Add a button using the `action` property of the flashbar item instead.\n   */\n  resultButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the progress bar.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-labelledby` to the progress bar.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the progress bar.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Short description of the operation that appears at the top of the component.\n   *\n   * Make sure that you always provide a label for accessibility.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * More detailed information about the operation that appears below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Information that's displayed below the progress bar or status text.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Content that's displayed when `status` is set to `error` or `success`.\n   */\n  resultText?: React.ReactNode;\n\n  /**\n   * Called when the user clicks the result state button.\n   *\n   * Note: If you are using the `flash` variant, the result button isn't displayed.\n   * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n   */\n  onResultButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\n\n  export interface Style {\n    progressBar?: {\n      backgroundColor?: string;\n      borderRadius?: string;\n      height?: string;\n    };\n    progressValue?: {\n      backgroundColor?: string;\n    };\n    progressPercentage?: {\n      color?: string;\n      fontSize?: string;\n      fontWeight?: string;\n    };\n  }\n}\n"]}

package/lib/internal/template/progress-bar/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAuC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAmC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}

package/lib/internal/template/progress-bar/internal.js

@@ -18,7 +18,7 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDesc
     const progressValueStyles = getProgressValueStyles(style);
     const progressPercentageStyles = getProgressPercentageStyles(style);
     return (React.createElement("div", { className: styles['progress-container'] },
-        React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: {
+        React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: {
                 ...(progressBarStyles || {}),
                 ...(progressValueStyles || {}),
             } }),

package/lib/internal/template/progress-bar/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElG,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAC3D,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,EAAiB,EAAE,EAAE;IACjH,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;IAExD,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,wBAAwB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC;QAC1C,kCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,aAAa,IAAI,SAAS,IAAI,MAAM,CAAC,QAAQ,EAC7C,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CACzC,EACD,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,aAAa,gBACR,SAAS,qBAEJ,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,sBACtC,eAAe,EACjC,KAAK,EAAE;gBACL,GAAG,CAAC,iBAAiB,IAAI,EAAE,CAAC;gBAC5B,GAAG,CAAC,mBAAmB,IAAI,EAAE,CAAC;aAC/B,GACD;QACF,6CAAkB,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAChE,oBAAC,WAAW,IACV,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,CAAC,CAAC,SAAS,IAE3F,GAAG,aAAa,GAAG,CACR,CACT,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAkB,EAAE,EAAE;IAC9E,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAC/G,QAAQ,CACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAC1D,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;QACrC,oBAAC,cAAc,IAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,IAC/C,QAAQ,CACM,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAoB,EAAE,EAAE;IAC5G,MAAM,eAAe,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAE3C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC;YAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAAG,UAAU,CAAQ,CACvD,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC;QAClD,8BAAM,SAAS,EAAE,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;YACpE,oBAAC,uBAAuB,IAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;gBACvE,8BAAM,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAAG,UAAU,CAAQ,CACnC,CACrB;QACN,eAAe,IAAI,oBAAC,YAAY,IAAC,OAAO,EAAE,OAAO,IAAG,gBAAgB,CAAgB,CACjF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  const progressBarStyles = getProgressStyles(style);\n  const progressValueStyles = getProgressValueStyles(style);\n  const progressPercentageStyles = getProgressPercentageStyles(style);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-label={ariaLabel}\n        // Ensures aria-label takes precedence over aria-labelledby\n        aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        style={{\n          ...(progressBarStyles || {}),\n          ...(progressValueStyles || {}),\n        }}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox\n          className={styles.percentage}\n          variant=\"small\"\n          color={isInFlash ? 'inherit' : undefined}\n          nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n        >\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  id?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n  return (\n    <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/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';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  const progressBarStyles = getProgressStyles(style);\n  const progressValueStyles = getProgressValueStyles(style);\n  const progressPercentageStyles = getProgressPercentageStyles(style);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete)}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-label={ariaLabel}\n        // Ensures aria-label takes precedence over aria-labelledby\n        aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        style={{\n          ...(progressBarStyles || {}),\n          ...(progressValueStyles || {}),\n        }}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox\n          className={styles.percentage}\n          variant=\"small\"\n          color={isInFlash ? 'inherit' : undefined}\n          nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n        >\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  id?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n  return (\n    <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}

package/lib/internal/template/progress-bar/styles.css.js

@@ -1,24 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_a3ynd_189",
-  "result-state": "awsui_result-state_11huc_a3ynd_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_a3ynd_1",
-  "root": "awsui_root_11huc_a3ynd_225",
-  "with-result-button": "awsui_with-result-button_11huc_a3ynd_257",
-  "result-text": "awsui_result-text_11huc_a3ynd_261",
-  "result-container-error": "awsui_result-container-error_11huc_a3ynd_265",
-  "result-container-success": "awsui_result-container-success_11huc_a3ynd_265",
-  "result-button": "awsui_result-button_11huc_a3ynd_269",
-  "word-wrap": "awsui_word-wrap_11huc_a3ynd_275",
-  "label-flash": "awsui_label-flash_11huc_a3ynd_280",
-  "label-key-value": "awsui_label-key-value_11huc_a3ynd_284",
-  "flash": "awsui_flash_11huc_a3ynd_292",
-  "progress-container": "awsui_progress-container_11huc_a3ynd_296",
-  "percentage-container": "awsui_percentage-container_11huc_a3ynd_303",
-  "percentage": "awsui_percentage_11huc_a3ynd_303",
-  "complete": "awsui_complete_11huc_a3ynd_349",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_a3ynd_362",
-  "additional-info": "awsui_additional-info_11huc_a3ynd_375"
+  "progress": "awsui_progress_11huc_9eel8_189",
+  "result-state": "awsui_result-state_11huc_9eel8_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_9eel8_1",
+  "root": "awsui_root_11huc_9eel8_225",
+  "with-result-button": "awsui_with-result-button_11huc_9eel8_257",
+  "result-text": "awsui_result-text_11huc_9eel8_261",
+  "result-container-error": "awsui_result-container-error_11huc_9eel8_265",
+  "result-container-success": "awsui_result-container-success_11huc_9eel8_265",
+  "result-button": "awsui_result-button_11huc_9eel8_269",
+  "word-wrap": "awsui_word-wrap_11huc_9eel8_275",
+  "label-flash": "awsui_label-flash_11huc_9eel8_280",
+  "label-key-value": "awsui_label-key-value_11huc_9eel8_284",
+  "flash": "awsui_flash_11huc_9eel8_292",
+  "progress-container": "awsui_progress-container_11huc_9eel8_296",
+  "percentage-container": "awsui_percentage-container_11huc_9eel8_303",
+  "percentage": "awsui_percentage_11huc_9eel8_303",
+  "complete": "awsui_complete_11huc_9eel8_349",
+  "additional-info": "awsui_additional-info_11huc_9eel8_363"
 };