@cloudscape-design/components 3.0.1127 → 3.0.1129

package/progress-bar/index.js

@@ -1,58 +1,18 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-'use client';
-import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
-import clsx from 'clsx';
-import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
-import { getBaseProps } from '../internal/base-component';
-import { fireNonCancelableEvent } from '../internal/events';
-import useBaseComponent from '../internal/hooks/use-base-component';
+import React from 'react';
+
+import CoreComponent from './internal-do-not-use-core';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { joinStrings } from '../internal/utils/strings';
-import { throttle } from '../internal/utils/throttle';
-import InternalLiveRegion from '../live-region/internal';
-import { Progress, ResultState, SmallText } from './internal';
-import styles from './styles.css.js';
-const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
-export default function ProgressBar(_a) {
-    var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
-    const { __internalRootRef } = useBaseComponent('ProgressBar', {
-        props: { variant },
-    });
-    const baseProps = getBaseProps(rest);
-    const generatedName = useUniqueId('awsui-progress-bar-');
-    const labelId = `${generatedName}-label`;
-    const isInFlash = variant === 'flash';
-    const isInProgressState = status === 'in-progress';
-    const descriptionId = useUniqueId('progressbar-description-');
-    const additionalInfoId = useUniqueId('progressbar-additional-info-');
-    const [announcedValue, setAnnouncedValue] = useState('');
-    const throttledAssertion = useMemo(() => {
-        return throttle((value) => {
-            setAnnouncedValue(`${value}%`);
-        }, ASSERTION_FREQUENCY);
-    }, []);
-    useEffect(() => {
-        throttledAssertion(value);
-    }, [throttledAssertion, value]);
-    if (isInFlash && resultButtonText) {
-        warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');
-    }
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
-        React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
-            React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
-            description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
-            React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
-                React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash }),
-                React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", delay: 0 },
-                    label,
-                    label ? ': ' : null,
-                    announcedValue))) : (React.createElement(InternalLiveRegion, { hidden: false, tagName: "span", delay: 0 },
-                React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
-                        fireNonCancelableEvent(onResultButtonClick);
-                    } }))))),
-        additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined, id: additionalInfoId }, additionalInfo))));
-}
+import { validateProps } from '@cloudscape-design/component-toolkit/internal';
+
+
+
+const ProgressBar = (props) => {
+    validateProps('ProgressBar', props, ["style"], {}, 'console');
+    return React.createElement(CoreComponent, props);
+};
+
+
 applyDisplayName(ProgressBar, 'ProgressBar');
-//# sourceMappingURL=index.js.map
+export default ProgressBar;

package/progress-bar/interfaces.d.ts

@@ -68,8 +68,26 @@ export interface ProgressBarProps extends BaseComponentProps {
    * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.
    */
   onResultButtonClick?: NonCancelableEventHandler;
+  /**
+   * @awsuiSystem core
+   */
 }
 export declare namespace ProgressBarProps {
   type Status = 'in-progress' | 'success' | 'error';
   type Variant = 'standalone' | 'flash' | 'key-value';
+  interface Style {
+    progressBar?: {
+      backgroundColor?: string;
+      borderRadius?: string;
+      height?: string;
+    };
+    progressValue?: {
+      backgroundColor?: string;
+    };
+    progressPercentage?: {
+      color?: string;
+      fontSize?: string;
+      fontWeight?: string;
+    };
+  }
 }

package/progress-bar/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;IAE3D,UAAiB,KAAK;QACpB,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,eAAe,CAAC,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,kBAAkB,CAAC,EAAE;YACnB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH;CACF"}

package/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\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\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 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"]}

package/progress-bar/internal-do-not-use-core.js

@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import { __rest } from "tslib";
+import React, { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import { fireNonCancelableEvent } from '../internal/events';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { joinStrings } from '../internal/utils/strings';
+import { throttle } from '../internal/utils/throttle';
+import InternalLiveRegion from '../live-region/internal';
+import { Progress, ResultState, SmallText } from './internal';
+import styles from './styles.css.js';
+const ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements
+export default function ProgressBar(_a) {
+    var { value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, style } = _a, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "description", "additionalInfo", "resultText", "onResultButtonClick", "style"]);
+    const { __internalRootRef } = useBaseComponent('ProgressBar', {
+        props: { variant },
+    });
+    const baseProps = getBaseProps(rest);
+    const generatedName = useUniqueId('awsui-progress-bar-');
+    const labelId = `${generatedName}-label`;
+    const isInFlash = variant === 'flash';
+    const isInProgressState = status === 'in-progress';
+    const descriptionId = useUniqueId('progressbar-description-');
+    const additionalInfoId = useUniqueId('progressbar-additional-info-');
+    const [announcedValue, setAnnouncedValue] = useState('');
+    const throttledAssertion = useMemo(() => {
+        return throttle((value) => {
+            setAnnouncedValue(`${value}%`);
+        }, ASSERTION_FREQUENCY);
+    }, []);
+    useEffect(() => {
+        throttledAssertion(value);
+    }, [throttledAssertion, value]);
+    if (isInFlash && resultButtonText) {
+        warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');
+    }
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
+        React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
+            React.createElement("div", { className: clsx(styles['word-wrap'], styles[`label-${variant}`]), id: labelId }, label),
+            description && (React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined, id: descriptionId }, description)),
+            React.createElement("div", null, isInProgressState ? (React.createElement(React.Fragment, null,
+                React.createElement(Progress, { value: value, ariaLabel: ariaLabel, ariaLabelledby: joinStrings(labelId, ariaLabelledby), ariaDescribedby: joinStrings(description ? descriptionId : undefined, additionalInfo ? additionalInfoId : undefined, ariaDescribedby), isInFlash: isInFlash, style: style }),
+                React.createElement(InternalLiveRegion, { hidden: true, tagName: "span", delay: 0 },
+                    label,
+                    label ? ': ' : null,
+                    announcedValue))) : (React.createElement(InternalLiveRegion, { hidden: false, tagName: "span", delay: 0 },
+                React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
+                        fireNonCancelableEvent(onResultButtonClick);
+                    } }))))),
+        additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined, id: additionalInfoId }, additionalInfo))));
+}
+applyDisplayName(ProgressBar, 'ProgressBar');
+//# sourceMappingURL=internal-do-not-use-core.js.map

package/progress-bar/internal-do-not-use-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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\n'use client';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport { throttle } from '../internal/utils/throttle';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  style,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar', {\n    props: { variant },\n  });\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  const descriptionId = useUniqueId('progressbar-description-');\n  const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n  const [announcedValue, setAnnouncedValue] = useState('');\n  const throttledAssertion = useMemo(() => {\n    return throttle((value: ProgressBarProps['value']) => {\n      setAnnouncedValue(`${value}%`);\n    }, ASSERTION_FREQUENCY);\n  }, []);\n\n  useEffect(() => {\n    throttledAssertion(value);\n  }, [throttledAssertion, value]);\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && (\n          <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n            {description}\n          </SmallText>\n        )}\n        <div>\n          {isInProgressState ? (\n            <>\n              <Progress\n                value={value}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n                ariaDescribedby={joinStrings(\n                  description ? descriptionId : undefined,\n                  additionalInfo ? additionalInfoId : undefined,\n                  ariaDescribedby\n                )}\n                isInFlash={isInFlash}\n                style={style}\n              />\n              <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n                {label}\n                {label ? ': ' : null}\n                {announcedValue}\n              </InternalLiveRegion>\n            </>\n          ) : (\n            <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n              <ResultState\n                resultText={resultText}\n                isInFlash={isInFlash}\n                resultButtonText={resultButtonText}\n                status={status}\n                onClick={() => {\n                  fireNonCancelableEvent(onResultButtonClick);\n                }}\n              />\n            </InternalLiveRegion>\n          )}\n        </div>\n      </div>\n      {additionalInfo && (\n        <SmallText\n          className={styles['additional-info']}\n          color={isInFlash ? 'inherit' : undefined}\n          id={additionalInfoId}\n        >\n          {additionalInfo}\n        </SmallText>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/progress-bar/internal.d.ts

@@ -7,13 +7,15 @@ interface ProgressProps {
   ariaLabel?: string;
   ariaLabelledby?: string;
   ariaDescribedby?: string;
+  style?: ProgressBarProps.Style;
 }
 export declare const Progress: ({
   value,
   isInFlash,
   ariaLabel,
   ariaLabelledby,
-  ariaDescribedby
+  ariaDescribedby,
+  style
 }: ProgressProps) => JSX.Element;
 interface SmallTextProps {
   color?: BoxProps.Color;

package/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;AAUhD,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;CAC1B;AACD,eAAO,MAAM,QAAQ,GAAI,kEAAkE,aAAa,gBA0BvG,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,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"}

package/progress-bar/internal.js

@@ -5,18 +5,22 @@ import clsx from 'clsx';
 import InternalBox from '../box/internal';
 import { InternalButton } from '../button/internal';
 import InternalStatusIndicator from '../status-indicator/internal';
+import { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';
 import styles from './styles.css.js';
 const MAX_VALUE = 100;
 const clamp = (value, lowerLimit, upperLimit) => {
     return Math.max(Math.min(value, upperLimit), lowerLimit);
 };
-export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }) => {
+export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }) => {
     const roundedValue = Math.round(value);
     const progressValue = clamp(roundedValue, 0, MAX_VALUE);
+    const progressBarStyles = getProgressStyles(style);
+    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 }),
+        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: Object.assign(Object.assign({}, (progressBarStyles || {})), (progressValueStyles || {})) }),
         React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
-            React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
+            React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined, nativeAttributes: progressPercentageStyles ? { style: progressPercentageStyles } : undefined }, `${progressValue}%`))));
 };
 export const SmallText = ({ color, children, className, id }) => {
     return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color, id: id }, children));

package/progress-bar/internal.js.map

@@ -1 +1 @@
-{"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';\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}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\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      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\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(\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"]}

package/progress-bar/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_19vty_189",
-  "result-state": "awsui_result-state_11huc_19vty_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_19vty_1",
-  "root": "awsui_root_11huc_19vty_225",
-  "with-result-button": "awsui_with-result-button_11huc_19vty_257",
-  "result-text": "awsui_result-text_11huc_19vty_261",
-  "result-container-error": "awsui_result-container-error_11huc_19vty_265",
-  "result-container-success": "awsui_result-container-success_11huc_19vty_265",
-  "result-button": "awsui_result-button_11huc_19vty_269",
-  "word-wrap": "awsui_word-wrap_11huc_19vty_275",
-  "label-flash": "awsui_label-flash_11huc_19vty_280",
-  "label-key-value": "awsui_label-key-value_11huc_19vty_284",
-  "flash": "awsui_flash_11huc_19vty_292",
-  "progress-container": "awsui_progress-container_11huc_19vty_296",
-  "percentage-container": "awsui_percentage-container_11huc_19vty_303",
-  "percentage": "awsui_percentage_11huc_19vty_303",
-  "complete": "awsui_complete_11huc_19vty_349",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_19vty_362",
-  "additional-info": "awsui_additional-info_11huc_19vty_375"
+  "progress": "awsui_progress_11huc_2e4fw_189",
+  "result-state": "awsui_result-state_11huc_2e4fw_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_2e4fw_1",
+  "root": "awsui_root_11huc_2e4fw_225",
+  "with-result-button": "awsui_with-result-button_11huc_2e4fw_257",
+  "result-text": "awsui_result-text_11huc_2e4fw_261",
+  "result-container-error": "awsui_result-container-error_11huc_2e4fw_265",
+  "result-container-success": "awsui_result-container-success_11huc_2e4fw_265",
+  "result-button": "awsui_result-button_11huc_2e4fw_269",
+  "word-wrap": "awsui_word-wrap_11huc_2e4fw_275",
+  "label-flash": "awsui_label-flash_11huc_2e4fw_280",
+  "label-key-value": "awsui_label-key-value_11huc_2e4fw_284",
+  "flash": "awsui_flash_11huc_2e4fw_292",
+  "progress-container": "awsui_progress-container_11huc_2e4fw_296",
+  "percentage-container": "awsui_percentage-container_11huc_2e4fw_303",
+  "percentage": "awsui_percentage_11huc_2e4fw_303",
+  "complete": "awsui_complete_11huc_2e4fw_349",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_2e4fw_362",
+  "additional-info": "awsui_additional-info_11huc_2e4fw_375"
 };
   

package/progress-bar/styles.d.ts

@@ -0,0 +1,15 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { ProgressBarProps } from './interfaces';
+export declare function getProgressStyles(style: ProgressBarProps['style']): {
+  [customCssProps.progressBarBackgroundColor]: string | undefined;
+  [customCssProps.progressBarBorderRadius]: string | undefined;
+  [customCssProps.progressBarHeight]: string | undefined;
+} | undefined;
+export declare function getProgressValueStyles(style: ProgressBarProps['style']): {
+  [customCssProps.progressValueBackgroundColor]: string | undefined;
+} | undefined;
+export declare function getProgressPercentageStyles(style: ProgressBarProps['style']): {
+  color: string | undefined;
+  fontSize: string | undefined;
+  fontWeight: string | undefined;
+} | undefined;

package/progress-bar/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAM9D,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAmC;IAC9E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAgC;IACxE,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA0B;cAE/D;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAMnE,CAAC,cAAc,CAAC,4BAA4B,CAAC,qBAAqC;cAErF;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;cAU3E"}

package/progress-bar/styles.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getProgressStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressBar)) {
+        return undefined;
+    }
+    return {
+        [customCssProps.progressBarBackgroundColor]: style.progressBar.backgroundColor,
+        [customCssProps.progressBarBorderRadius]: style.progressBar.borderRadius,
+        [customCssProps.progressBarHeight]: style.progressBar.height,
+    };
+}
+export function getProgressValueStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressValue)) {
+        return undefined;
+    }
+    return {
+        [customCssProps.progressValueBackgroundColor]: style.progressValue.backgroundColor,
+    };
+}
+export function getProgressPercentageStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressPercentage)) {
+        return undefined;
+    }
+    return {
+        color: style.progressPercentage.color,
+        fontSize: style.progressPercentage.fontSize,
+        fontWeight: style.progressPercentage.fontWeight,
+    };
+}
+//# sourceMappingURL=styles.js.map

package/progress-bar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/progress-bar/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,iBAAiB,CAAC,KAAgC;IAChE,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,EAAE,CAAC;QAC7C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,eAAe;QAC9E,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY;QACxE,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM;KAC7D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,KAAgC;IACrE,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAA,EAAE,CAAC;QAC/C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe;KACnF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,KAAgC;IAC1E,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,kBAAkB,CAAA,EAAE,CAAC;QACpD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,KAAK;QACrC,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,QAAQ;QAC3C,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,UAAU;KAChD,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { ProgressBarProps } from './interfaces';\n\nexport function getProgressStyles(style: ProgressBarProps['style']) {\n  if (SYSTEM !== 'core' || !style?.progressBar) {\n    return undefined;\n  }\n\n  return {\n    [customCssProps.progressBarBackgroundColor]: style.progressBar.backgroundColor,\n    [customCssProps.progressBarBorderRadius]: style.progressBar.borderRadius,\n    [customCssProps.progressBarHeight]: style.progressBar.height,\n  };\n}\n\nexport function getProgressValueStyles(style: ProgressBarProps['style']) {\n  if (SYSTEM !== 'core' || !style?.progressValue) {\n    return undefined;\n  }\n\n  return {\n    [customCssProps.progressValueBackgroundColor]: style.progressValue.backgroundColor,\n  };\n}\n\nexport function getProgressPercentageStyles(style: ProgressBarProps['style']) {\n  if (SYSTEM !== 'core' || !style?.progressPercentage) {\n    return undefined;\n  }\n\n  return {\n    color: style.progressPercentage.color,\n    fontSize: style.progressPercentage.fontSize,\n    fontWeight: style.progressPercentage.fontWeight,\n  };\n}\n"]}