@cloudscape-design/components 3.0.1155 → 3.0.1157

package/progress-bar/index.js

@@ -1,18 +1,56 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+'use client';
+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 { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const ProgressBar = (props) => {
-    validateProps('ProgressBar', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+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({ value = 0, status = 'in-progress', variant = 'standalone', resultButtonText, label, ariaLabel, ariaLabelledby, ariaDescribedby, description, additionalInfo, resultText, onResultButtonClick, style, ...rest }) {
+    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", { ...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');
-export default ProgressBar;
+//# sourceMappingURL=index.js.map

package/progress-bar/interfaces.d.ts

@@ -71,6 +71,7 @@ export interface ProgressBarProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
+  style?: ProgressBarProps.Style;
 }
 export declare namespace ProgressBarProps {
   type Status = 'in-progress' | 'success' | 'error';

package/progress-bar/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "progress": "awsui_progress_11huc_n4v1m_189",
-  "result-state": "awsui_result-state_11huc_n4v1m_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_n4v1m_1",
-  "root": "awsui_root_11huc_n4v1m_225",
-  "with-result-button": "awsui_with-result-button_11huc_n4v1m_257",
-  "result-text": "awsui_result-text_11huc_n4v1m_261",
-  "result-container-error": "awsui_result-container-error_11huc_n4v1m_265",
-  "result-container-success": "awsui_result-container-success_11huc_n4v1m_265",
-  "result-button": "awsui_result-button_11huc_n4v1m_269",
-  "word-wrap": "awsui_word-wrap_11huc_n4v1m_275",
-  "label-flash": "awsui_label-flash_11huc_n4v1m_280",
-  "label-key-value": "awsui_label-key-value_11huc_n4v1m_284",
-  "flash": "awsui_flash_11huc_n4v1m_292",
-  "progress-container": "awsui_progress-container_11huc_n4v1m_296",
-  "percentage-container": "awsui_percentage-container_11huc_n4v1m_303",
-  "percentage": "awsui_percentage_11huc_n4v1m_303",
-  "complete": "awsui_complete_11huc_n4v1m_349",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_n4v1m_362",
-  "additional-info": "awsui_additional-info_11huc_n4v1m_375"
+  "progress": "awsui_progress_11huc_134zk_189",
+  "result-state": "awsui_result-state_11huc_134zk_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_134zk_1",
+  "root": "awsui_root_11huc_134zk_225",
+  "with-result-button": "awsui_with-result-button_11huc_134zk_257",
+  "result-text": "awsui_result-text_11huc_134zk_261",
+  "result-container-error": "awsui_result-container-error_11huc_134zk_265",
+  "result-container-success": "awsui_result-container-success_11huc_134zk_265",
+  "result-button": "awsui_result-button_11huc_134zk_269",
+  "word-wrap": "awsui_word-wrap_11huc_134zk_275",
+  "label-flash": "awsui_label-flash_11huc_134zk_280",
+  "label-key-value": "awsui_label-key-value_11huc_134zk_284",
+  "flash": "awsui_flash_11huc_134zk_292",
+  "progress-container": "awsui_progress-container_11huc_134zk_296",
+  "percentage-container": "awsui_percentage-container_11huc_134zk_303",
+  "percentage": "awsui_percentage_11huc_134zk_303",
+  "complete": "awsui_complete_11huc_134zk_349",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_134zk_362",
+  "additional-info": "awsui_additional-info_11huc_134zk_375"
 };
   

package/progress-bar/styles.scoped.css

@@ -186,27 +186,27 @@ 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_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-value {
   -webkit-transition: width var(--motion-duration-moderate-c9utmg, 135ms) linear;
   transition: width var(--motion-duration-moderate-c9utmg, 135ms) linear;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-value {
+  .awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-value {
     animation: none;
     -webkit-transition: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-value {
+.awsui-motion-disabled .awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-value {
   animation: none;
   -webkit-transition: none;
   transition: none;
 }
 
-.awsui_result-state_11huc_n4v1m_203:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_11huc_n4v1m_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+.awsui_result-state_11huc_134zk_203:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_11huc_134zk_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_11huc_n4v1m_1 {
+@keyframes awsui_awsui-motion-fade-in_11huc_134zk_1 {
   from {
     opacity: 0.2;
   }
@@ -215,17 +215,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_result-state_11huc_n4v1m_203:not(#\9) {
+  .awsui_result-state_11huc_134zk_203:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_result-state_11huc_n4v1m_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_n4v1m_203:not(#\9) {
+.awsui-motion-disabled .awsui_result-state_11huc_134zk_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_134zk_203:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_11huc_n4v1m_225:not(#\9) {
+.awsui_root_11huc_134zk_225:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -257,53 +257,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_with-result-button_11huc_n4v1m_257:not(#\9) {
+.awsui_with-result-button_11huc_134zk_257:not(#\9) {
   padding-inline-end: var(--space-m-dsumyt, 16px);
 }
 
-.awsui_result-text_11huc_n4v1m_261:not(#\9) {
+.awsui_result-text_11huc_134zk_261:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-container-error_11huc_n4v1m_265:not(#\9), .awsui_result-container-success_11huc_n4v1m_265:not(#\9) {
+.awsui_result-container-error_11huc_134zk_265:not(#\9), .awsui_result-container-success_11huc_134zk_265:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_result-button_11huc_n4v1m_269:not(#\9) {
+.awsui_result-button_11huc_134zk_269:not(#\9) {
   display: inline-block;
   margin-block: var(--space-scaled-xxs-pfm1nx, 4px);
   margin-inline: 0;
 }
 
-.awsui_word-wrap_11huc_n4v1m_275:not(#\9) {
+.awsui_word-wrap_11huc_134zk_275:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
 
-.awsui_label-flash_11huc_n4v1m_280:not(#\9) {
+.awsui_label-flash_11huc_134zk_280:not(#\9) {
   color: inherit;
   font-weight: 700;
 }
-.awsui_label-key-value_11huc_n4v1m_284:not(#\9) {
+.awsui_label-key-value_11huc_134zk_284:not(#\9) {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
   font-weight: var(--font-display-label-weight-zavpeo, 700);
-  color: var(--color-text-label-8248dg, #0f141a);
+  color: var(--color-text-label-28gfmc, #0f141a);
   margin-block-end: var(--space-scaled-xxxs-oo06c7, 2px);
 }
 
-.awsui_flash_11huc_n4v1m_292:not(#\9) {
+.awsui_flash_11huc_134zk_292:not(#\9) {
   color: inherit;
 }
 
-.awsui_progress-container_11huc_n4v1m_296:not(#\9) {
+.awsui_progress-container_11huc_134zk_296:not(#\9) {
   display: flex;
   align-items: center;
   max-inline-size: 800px;
   block-size: var(--line-height-body-m-2mh3ke, 20px);
 }
 
-.awsui_percentage-container_11huc_n4v1m_303:not(#\9) {
+.awsui_percentage-container_11huc_134zk_303:not(#\9) {
   inline-size: 33px;
   flex-shrink: 0;
   white-space: nowrap;
@@ -313,11 +313,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: var(--letter-spacing-body-s-gq78ok, 0.005em);
 }
 
-.awsui_percentage_11huc_n4v1m_303:not(#\9) {
+.awsui_percentage_11huc_134zk_303:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_progress_11huc_n4v1m_189:not(#\9) {
+.awsui_progress_11huc_134zk_189:not(#\9) {
   inline-size: 100%;
   margin-inline-end: var(--space-s-tvghoh, 12px);
   min-inline-size: 0;
@@ -331,7 +331,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-default-z3ipl1, #ebebf0));
 }
-.awsui_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-bar {
+.awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-bar {
   block-size: var(--awsui-progress-bar-height-d43v8n, 4px);
   border-block: 0;
   border-inline: none;
@@ -342,39 +342,39 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-default-z3ipl1, #ebebf0));
 }
-.awsui_progress_11huc_n4v1m_189:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_134zk_189:not(#\9)::-webkit-progress-value {
   border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-start-end-radius: 0;
   border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-end-end-radius: 0;
   background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-default-il6sg6, #006ce0));
 }
-.awsui_progress_11huc_n4v1m_189.awsui_complete_11huc_n4v1m_349:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_134zk_189.awsui_complete_11huc_134zk_349:not(#\9)::-webkit-progress-value {
   border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-start-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-end-end-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
 }
-.awsui_progress_11huc_n4v1m_189:not(#\9)::-moz-progress-bar {
+.awsui_progress_11huc_134zk_189:not(#\9)::-moz-progress-bar {
   border-start-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-start-end-radius: 0;
   border-end-start-radius: var(--awsui-progress-bar-border-radius-d43v8n, 10px);
   border-end-end-radius: 0;
   background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-default-il6sg6, #006ce0));
 }
-.awsui_progress_11huc_n4v1m_189.awsui_progress-in-flash_11huc_n4v1m_362:not(#\9) {
+.awsui_progress_11huc_134zk_189.awsui_progress-in-flash_11huc_134zk_362:not(#\9) {
   background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-in-flash-wssh6k, rgba(255, 255, 255, 0.25)));
 }
-.awsui_progress_11huc_n4v1m_189.awsui_progress-in-flash_11huc_n4v1m_362:not(#\9)::-moz-progress-bar {
+.awsui_progress_11huc_134zk_189.awsui_progress-in-flash_11huc_134zk_362:not(#\9)::-moz-progress-bar {
   background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-in-flash-98s7uz, #ffffff));
 }
-.awsui_progress_11huc_n4v1m_189.awsui_progress-in-flash_11huc_n4v1m_362:not(#\9)::-webkit-progress-bar {
+.awsui_progress_11huc_134zk_189.awsui_progress-in-flash_11huc_134zk_362:not(#\9)::-webkit-progress-bar {
   background-color: var(--awsui-progress-bar-background-color-d43v8n, var(--color-background-progress-bar-layout-in-flash-wssh6k, rgba(255, 255, 255, 0.25)));
 }
-.awsui_progress_11huc_n4v1m_189.awsui_progress-in-flash_11huc_n4v1m_362:not(#\9)::-webkit-progress-value {
+.awsui_progress_11huc_134zk_189.awsui_progress-in-flash_11huc_134zk_362:not(#\9)::-webkit-progress-value {
   background-color: var(--awsui-progress-value-background-color-d43v8n, var(--color-background-progress-bar-content-in-flash-98s7uz, #ffffff));
 }
 
-.awsui_additional-info_11huc_n4v1m_375:not(#\9) {
+.awsui_additional-info_11huc_134zk_375:not(#\9) {
   /* used in test-utils */
 }

package/progress-bar/styles.selectors.js

@@ -2,24 +2,24 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "progress": "awsui_progress_11huc_n4v1m_189",
-  "result-state": "awsui_result-state_11huc_n4v1m_203",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_n4v1m_1",
-  "root": "awsui_root_11huc_n4v1m_225",
-  "with-result-button": "awsui_with-result-button_11huc_n4v1m_257",
-  "result-text": "awsui_result-text_11huc_n4v1m_261",
-  "result-container-error": "awsui_result-container-error_11huc_n4v1m_265",
-  "result-container-success": "awsui_result-container-success_11huc_n4v1m_265",
-  "result-button": "awsui_result-button_11huc_n4v1m_269",
-  "word-wrap": "awsui_word-wrap_11huc_n4v1m_275",
-  "label-flash": "awsui_label-flash_11huc_n4v1m_280",
-  "label-key-value": "awsui_label-key-value_11huc_n4v1m_284",
-  "flash": "awsui_flash_11huc_n4v1m_292",
-  "progress-container": "awsui_progress-container_11huc_n4v1m_296",
-  "percentage-container": "awsui_percentage-container_11huc_n4v1m_303",
-  "percentage": "awsui_percentage_11huc_n4v1m_303",
-  "complete": "awsui_complete_11huc_n4v1m_349",
-  "progress-in-flash": "awsui_progress-in-flash_11huc_n4v1m_362",
-  "additional-info": "awsui_additional-info_11huc_n4v1m_375"
+  "progress": "awsui_progress_11huc_134zk_189",
+  "result-state": "awsui_result-state_11huc_134zk_203",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_134zk_1",
+  "root": "awsui_root_11huc_134zk_225",
+  "with-result-button": "awsui_with-result-button_11huc_134zk_257",
+  "result-text": "awsui_result-text_11huc_134zk_261",
+  "result-container-error": "awsui_result-container-error_11huc_134zk_265",
+  "result-container-success": "awsui_result-container-success_11huc_134zk_265",
+  "result-button": "awsui_result-button_11huc_134zk_269",
+  "word-wrap": "awsui_word-wrap_11huc_134zk_275",
+  "label-flash": "awsui_label-flash_11huc_134zk_280",
+  "label-key-value": "awsui_label-key-value_11huc_134zk_284",
+  "flash": "awsui_flash_11huc_134zk_292",
+  "progress-container": "awsui_progress-container_11huc_134zk_296",
+  "percentage-container": "awsui_percentage-container_11huc_134zk_303",
+  "percentage": "awsui_percentage_11huc_134zk_303",
+  "complete": "awsui_complete_11huc_134zk_349",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_134zk_362",
+  "additional-info": "awsui_additional-info_11huc_134zk_375"
 };
   

package/prompt-input/index.js

@@ -1,18 +1,26 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const PromptInput = React.forwardRef((props, ref) => {
-    validateProps('PromptInput', props, ["nativeTextareaAttributes","style","customPrimaryAction"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalPromptInput from './internal';
+const PromptInput = React.forwardRef(({ autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck, readOnly, actionButtonIconName, minRows = 1, maxRows = 3, ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('PromptInput', {
+        props: {
+            readOnly,
+            autoComplete,
+            autoFocus,
+            disableBrowserAutocorrect,
+            disableActionButton,
+            spellcheck,
+            actionButtonIconName,
+            minRows,
+            maxRows,
+        },
+    });
+    return (React.createElement(InternalPromptInput, { readOnly: readOnly, autoComplete: autoComplete, autoFocus: autoFocus, disableBrowserAutocorrect: disableBrowserAutocorrect, disableActionButton: disableActionButton, spellcheck: spellcheck, actionButtonIconName: actionButtonIconName, minRows: minRows, maxRows: maxRows, ...props, ...baseComponentProps, ref: ref }));
 });
-
-
 applyDisplayName(PromptInput, 'PromptInput');
 export default PromptInput;
+//# sourceMappingURL=index.js.map

package/prompt-input/interfaces.d.ts

@@ -6,7 +6,7 @@ import { BaseKeyDetail, NonCancelableEventHandler } from '../internal/events';
 /**
  * @awsuiSystem core
  */
-
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
 export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttributes'>, InputKeyEvents, InputAutoCorrect, InputAutoComplete, InputSpellcheck, BaseComponentProps, FormFieldValidationControlProps {
   /**
    * Called whenever a user clicks the action button or presses the "Enter" key.
@@ -75,7 +75,7 @@ export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttri
    *
    * @awsuiSystem core
    */
-
+  customPrimaryAction?: React.ReactNode;
   /**
    * Use this slot to add secondary actions to the prompt input.
    */
@@ -102,10 +102,11 @@ export interface PromptInputProps extends Omit<BaseInputProps, 'nativeInputAttri
    *
    * @awsuiSystem core
    */
-
+  nativeTextareaAttributes?: NativeAttributes<React.TextareaHTMLAttributes<HTMLTextAreaElement>>;
   /**
    * @awsuiSystem core
    */
+  style?: PromptInputProps.Style;
 }
 export declare namespace PromptInputProps {
   type KeyDetail = BaseKeyDetail;

package/radio-button/index.js

@@ -1,6 +1,21 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-
-export default function RadioButton(props) {
-    throw new Error('The component RadioButton is not supported in this package');
-}
+'use client';
+import React from 'react';
+import clsx from 'clsx';
+import InternalRadioButton from '../internal/components/radio-button';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import styles from './styles.css.js';
+const RadioButton = React.forwardRef((props, ref) => {
+    const baseComponentProps = useBaseComponent('RadioButton', {
+        props: { readOnly: Boolean(props.readOnly), disabled: Boolean(props.disabled) },
+    });
+    return (React.createElement(InternalRadioButton, { ...props, ...baseComponentProps, className: clsx(props.className, styles['radio-button']), ref: ref }));
+});
+applyDisplayName(RadioButton, 'RadioButton');
+/**
+ * @awsuiSystem core
+ */
+export default RadioButton;
+//# sourceMappingURL=index.js.map

package/radio-group/index.js

@@ -1,18 +1,27 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const RadioGroup = React.forwardRef((props, ref) => {
-    validateProps('RadioGroup', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, {ref,...props});
+import InternalRadioGroup from './internal';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
+const RadioGroup = React.forwardRef(({ direction = 'vertical', ...rest }, ref) => {
+    const baseComponentProps = useBaseComponent('RadioGroup', {
+        props: { readOnly: rest.readOnly, direction: direction !== null && direction !== void 0 ? direction : 'vertical' },
+    });
+    return (React.createElement(InternalRadioGroup, { ref: ref, direction: direction, ...rest, ...baseComponentProps, ...getAnalyticsMetadataAttribute({
+            component: {
+                name: 'awsui.RadioGroup',
+                label: { root: 'self' },
+                properties: {
+                    value: `${rest.value}`,
+                    valueLabel: `.${analyticsSelectors.selected}`,
+                },
+            },
+        }) }));
 });
-
-
 applyDisplayName(RadioGroup, 'RadioGroup');
 export default RadioGroup;
+//# sourceMappingURL=index.js.map

package/radio-group/interfaces.d.ts

@@ -54,7 +54,7 @@ export interface RadioGroupProps extends BaseComponentProps, FormFieldControlPro
   /**
    * @awsuiSystem core
    */
-
+  style?: RadioGroupProps.Style;
   /**
    * Defines the direction in which the radio buttons are laid out.
    */

package/segmented-control/index.js

@@ -1,18 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+'use client';
 import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
+import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const SegmentedControl = (props) => {
-    validateProps('SegmentedControl', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
+import InternalSegmentedControl from './internal';
+export default function SegmentedControl(props) {
+    var _a;
+    const baseComponentProps = useBaseComponent('SegmentedControl', {
+        props: {},
+        metadata: {
+            hasDisabledReasons: ((_a = props.options) !== null && _a !== void 0 ? _a : []).some(option => Boolean(option.disabledReason)),
+        },
+    });
+    return React.createElement(InternalSegmentedControl, { ...props, ...baseComponentProps });
+}
 applyDisplayName(SegmentedControl, 'SegmentedControl');
-export default SegmentedControl;
+//# sourceMappingURL=index.js.map

package/segmented-control/interfaces.d.ts

@@ -39,6 +39,7 @@ export interface SegmentedControlProps extends BaseComponentProps {
   /**
    * @awsuiSystem core
    */
+  style?: SegmentedControlProps.Style;
 }
 export declare namespace SegmentedControlProps {
   interface Option {

package/select/interfaces.d.ts

@@ -112,7 +112,7 @@ export interface BaseSelectProps extends BaseDropdownHostProps, BaseComponentPro
    * Overrides the element that is announced to screen readers
    * when the highlighted option changes. By default, this announces
    * the option's name and properties, and its selected state if
-   * the `selectedLabel` property is defined.
+   * the `selectedAriaLabel` property is defined.
    * The highlighted option is provided, and its group (if groups
    * are used and it differs from the group of the previously highlighted option).
    *

package/select/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   *\n   * #### OptionGroup\n   * - `value` (string) - Used to locate option group in test utils.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * #### Shared Option and OptionGroup properties\n   * - `label` (string) - (Optional) Option or group text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option or group.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.\n   * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n   * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: SelectProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   *\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  filteringClearAriaLabel?: string;\n  /**\n   * @deprecated Has no effect.\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   * @i18n\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Adds a small label inline with the input for saving vertical space in the UI.\n   * For use with collection select filters only.\n   */\n  inlineLabelText?: string;\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/select/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport {\n  BaseDropdownHostProps,\n  OptionsFilteringType,\n  OptionsLoadItemsDetail,\n} from '../internal/components/dropdown/interfaces';\nimport { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';\nimport { OptionDefinition, OptionGroup as OptionGroupDefinition } from '../internal/components/option/interfaces';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface BaseSelectProps\n  extends BaseDropdownHostProps,\n    BaseComponentProps,\n    FormFieldValidationControlProps,\n    DropdownStatusProps {\n  /**\n   * Specifies an array of options that are displayed to the user as a dropdown list.\n   * The options can be grouped using `OptionGroup` objects.\n   *\n   * #### Option\n   * - `value` (string) - The returned value of the option when selected.\n   *\n   * #### OptionGroup\n   * - `value` (string) - Used to locate option group in test utils.\n   * - `options` (Option[]) - (Optional) The options under this group.\n   *\n   * #### Shared Option and OptionGroup properties\n   * - `label` (string) - (Optional) Option or group text displayed to the user.\n   * - `lang` (string) - (Optional) The language of the option or group, provided as a BCP 47 language tag.\n   * - `description` (string) - (Optional) Further information about the option or group that appears below the label.\n   * - `disabled` (boolean) - (Optional) Determines whether the option or group is disabled.\n   * - `disabledReason` (string) - (Optional) Displays tooltip near the item when disabled. Use to provide additional context.\n   * - `labelTag` (string) - (Optional) A label tag that provides additional guidance, shown next to the label.\n   * - `tags` [string[]] - (Optional) A list of tags giving further guidance about the option or group.\n   * - `filteringTags` [string[]] - (Optional) A list of additional tags used for automatic filtering.\n   * - `iconName` (string) - (Optional) Specifies the name of an [icon](/components/icon/) to display in the option or group.\n   * - `iconAriaLabel` (string) - (Optional) Specifies alternate text for the icon. We recommend that you provide this for accessibility.\n   * - `iconAlt` (string) - (Optional) **Deprecated**, replaced by \\`iconAriaLabel\\`. Specifies alternate text for a custom icon, for use with `iconUrl`.\n   * - `iconUrl` (string) - (Optional) URL of a custom icon.\n   * - `iconSvg` (ReactNode) - (Optional) Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n   *\n   * Note: Only one level of option nesting is supported.\n   *\n   * If you want to use the built-in filtering capabilities of this component, provide\n   * a list of all valid options here and they will be automatically filtered based on the user's filtering input.\n   *\n   * Alternatively, you can listen to the `onChange` or `onLoadItems` event and set new options\n   * on your own.\n   **/\n  options?: SelectProps.Options;\n  /**\n   * Determines how filtering is applied to the list of `options`:\n   *\n   * * `auto` - The component will automatically filter options based on user input.\n   * * `manual` - You will set up `onChange` or `onLoadItems` event listeners and filter options on your side or request\n   * them from server.\n   *\n   * By default the component will filter the provided `options` based on the value of the filtering input field.\n   * Only options that have a `value`, `label`, `description` or `labelTag` that contains the input value as a substring\n   * are displayed in the list of options.\n   *\n   * If you set this property to `manual`, this default filtering mechanism is disabled and all provided `options` are\n   * displayed in the dropdown list. In that case make sure that you use the `onChange` or `onLoadItems` events in order\n   * to set the `options` property to the options that are relevant for the user, given the filtering input value.\n   *\n   * Note: Manual filtering doesn't disable match highlighting.\n   **/\n  filteringType?: OptionsFilteringType;\n\n  /**\n   * Determines whether the whole select component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Specifies the placeholder to display in the filtering input if filtering is enabled.\n   */\n  filteringPlaceholder?: string;\n\n  /**\n   * Specifies the text to display with the number of matches at the bottom of the dropdown menu while filtering.\n   */\n  filteringResultsText?: (matchesCount: number, totalCount: number) => string;\n  /**\n   * Adds an `aria-label` on the built-in filtering input if filtering is enabled.\n   */\n  filteringAriaLabel?: string;\n  /**\n   * Adds an `aria-label` to the clear button inside the search input.\n   * @i18n\n   */\n  filteringClearAriaLabel?: string;\n  /**\n   * @deprecated Has no effect.\n   */\n  name?: string;\n  /**\n   * Specifies the hint text that's displayed in the field when no option has been selected.\n   */\n  placeholder?: string;\n  /**\n   * Specifies the ID for the trigger component. It uses an automatically generated ID by default.\n   */\n  controlId?: string;\n  /**\n   * Adds `aria-required` to the native input element.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Adds `aria-label` to the select element.\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n  /**\n   * Specifies the localized string that describes an option as being selected.\n   * This is required to provide a good screen reader experience. For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   * @i18n\n   */\n  selectedAriaLabel?: string;\n  /**\n   * Overrides the element that is announced to screen readers\n   * when the highlighted option changes. By default, this announces\n   * the option's name and properties, and its selected state if\n   * the `selectedAriaLabel` property is defined.\n   * The highlighted option is provided, and its group (if groups\n   * are used and it differs from the group of the previously highlighted option).\n   *\n   * For more information, see the\n   * [accessibility guidelines](/components/select/?tabId=usage#accessibility-guidelines).\n   */\n  renderHighlightedAriaLive?: SelectProps.ContainingOptionAndGroupString;\n  /**\n   * Displayed for `filteringType=\"auto\"` when there are no matches for the filtering.\n   */\n  noMatch?: React.ReactNode;\n  /**\n   * Called when input focus is removed from the UI control.\n   */\n  onBlur?: NonCancelableEventHandler;\n  /**\n   * Called when input focus is set onto the UI control.\n   */\n  onFocus?: NonCancelableEventHandler;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from both modifying the value and opening the dropdown. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport interface SelectProps extends BaseSelectProps {\n  /**\n   * Adds a small label inline with the input for saving vertical space in the UI.\n   * For use with collection select filters only.\n   */\n  inlineLabelText?: string;\n  /**\n   * Adds `aria-labelledby` to the component. If you're using this component within a form field,\n   * don't set this property because the form field component automatically sets it.\n   *\n   * Use this property if the component isn't using `inlineLabelText` and isn't surrounded by a form field, or you want to override the value\n   * automatically set by the form field (for example, if you have two components within a single form field).\n   *\n   * To use it correctly, define an ID for the element you want to use as label and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n  /**\n   * Defines the variant of the trigger. You can use a simple label or the entire option (`label | option`)\n   */\n  triggerVariant?: SelectProps.TriggerVariant;\n  /**\n   * Specifies the currently selected option.\n   * If you want to clear the selection, use `null`.\n   */\n  selectedOption: SelectProps.Option | null;\n  /**\n   * Called when the user selects an option.\n   * The event `detail` contains the current `selectedOption`.\n   */\n  onChange?: NonCancelableEventHandler<SelectProps.ChangeDetail>;\n\n  /**\n   * Automatically focuses the trigger when component is mounted.\n   */\n  autoFocus?: boolean;\n}\n\nexport namespace SelectProps {\n  export type FilteringType = OptionsFilteringType;\n  export type TriggerVariant = 'label' | 'option';\n\n  export type Option = OptionDefinition;\n  export type OptionGroup = OptionGroupDefinition;\n  export type Options = ReadonlyArray<Option | OptionGroup>;\n\n  export type LoadItemsDetail = OptionsLoadItemsDetail;\n\n  export interface ChangeDetail {\n    selectedOption: Option;\n  }\n\n  export interface ContainingOptionAndGroupString {\n    (option: Option, group?: OptionGroup): string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the element without opening the dropdown or showing a visual focus indicator.\n     */\n    focus(): void;\n  }\n}\n"]}