@cloudscape-design/components 3.0.623 → 3.0.625

package/file-upload/internal.js

@@ -14,7 +14,7 @@ import { Dropzone, useDropzoneVisible } from './dropzone';
 import FileInput from './file-input';
 import TokenList from '../internal/components/token-list';
 import { Token } from '../token-group/token';
-import { ConstraintText, FormFieldError } from '../form-field/internal';
+import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { joinStrings } from '../internal/utils/strings';
@@ -23,10 +23,11 @@ import InternalBox from '../box/internal';
 export default React.forwardRef(InternalFileUpload);
 function InternalFileUpload(_a, externalRef) {
     var _b;
-    var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, fileErrors } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "fileErrors"]);
+    var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, warningText, fileErrors, fileWarnings } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "warningText", "fileErrors", "fileWarnings"]);
     const baseProps = getBaseProps(restProps);
     const metadata = { showFileSize, showFileLastModified, showFileThumbnail };
     const errorId = useUniqueId('error-');
+    const warningId = useUniqueId('warning-');
     const constraintTextId = useUniqueId('constraint-text-');
     const fileInputRef = useRef(null);
     const ref = useMergeRefs(fileInputRef, externalRef);
@@ -49,21 +50,26 @@ function InternalFileUpload(_a, externalRef) {
         }
     };
     const isDropzoneVisible = useDropzoneVisible(multiple);
+    const showWarning = warningText && !errorText;
+    if (warningText && errorText) {
+        warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');
+    }
     const formFieldContext = useFormFieldContext(restProps);
-    const ariaDescribedBy = joinStrings((_b = restProps.ariaDescribedby) !== null && _b !== void 0 ? _b : formFieldContext.ariaDescribedby, errorText ? errorId : undefined, constraintText ? constraintTextId : undefined);
+    const ariaDescribedBy = joinStrings((_b = restProps.ariaDescribedby) !== null && _b !== void 0 ? _b : formFieldContext.ariaDescribedby, errorText ? errorId : undefined, showWarning ? warningId : undefined, constraintText ? constraintTextId : undefined);
     const hasError = Boolean(errorText || (fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors.filter(Boolean).length));
     const invalid = restProps.invalid || formFieldContext.invalid || hasError;
     return (React.createElement(InternalSpaceBetween, Object.assign({}, baseProps, { size: "xs", className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef }),
         React.createElement(InternalBox, null,
             isDropzoneVisible ? (React.createElement(Dropzone, { onChange: handleFilesChange }, i18nStrings.dropzoneText(multiple))) : (React.createElement(FileInput, Object.assign({ ref: ref, accept: accept, ariaRequired: ariaRequired, multiple: multiple, onChange: handleFilesChange, value: value }, restProps, { ariaDescribedby: ariaDescribedBy, invalid: invalid }), i18nStrings.uploadButtonText(multiple))),
-            (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
+            (constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
                 errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
-                constraintText && (React.createElement(ConstraintText, { id: constraintTextId, hasError: !!errorText }, constraintText))))),
+                showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
+                constraintText && (React.createElement(ConstraintText, { id: constraintTextId, hasValidationText: !!errorText || !!warningText }, constraintText))))),
         !multiple && value.length > 0 ? (React.createElement(InternalBox, null,
-            React.createElement(Token, { ariaLabel: value[0].name, dismissLabel: i18nStrings.removeFileAriaLabel(0), onDismiss: () => onFileRemove(0), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[0], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, "data-index": 0 },
+            React.createElement(Token, { ariaLabel: value[0].name, dismissLabel: i18nStrings.removeFileAriaLabel(0), onDismiss: () => onFileRemove(0), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[0], warningText: fileWarnings === null || fileWarnings === void 0 ? void 0 : fileWarnings[0], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, warningIconAriaLabel: i18nStrings.warningIconAriaLabel, "data-index": 0 },
                 React.createElement(FileOption, { file: value[0], metadata: metadata, i18nStrings: i18nStrings })))) : null,
         multiple && value.length > 0 ? (React.createElement(InternalBox, null,
-            React.createElement(TokenList, { alignment: "vertical", items: value, renderItem: (file, fileIndex) => (React.createElement(Token, { ariaLabel: file.name, dismissLabel: i18nStrings.removeFileAriaLabel(fileIndex), onDismiss: () => onFileRemove(fileIndex), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[fileIndex], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, "data-index": fileIndex },
+            React.createElement(TokenList, { alignment: "vertical", items: value, renderItem: (file, fileIndex) => (React.createElement(Token, { ariaLabel: file.name, dismissLabel: i18nStrings.removeFileAriaLabel(fileIndex), onDismiss: () => onFileRemove(fileIndex), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[fileIndex], warningText: fileWarnings === null || fileWarnings === void 0 ? void 0 : fileWarnings[fileIndex], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, warningIconAriaLabel: i18nStrings.warningIconAriaLabel, "data-index": fileIndex },
                     React.createElement(FileOption, { file: file, metadata: metadata, i18nStrings: i18nStrings }))), limit: tokenLimit, i18nStrings: {
                     limitShowFewer: i18nStrings.limitShowFewer,
                     limitShowMore: i18nStrings.limitShowMore,

package/file-upload/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/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\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport { FileUploadProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { FileOption } from './file-option';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport clsx from 'clsx';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from '../token-group/token';\nimport { ConstraintText, FormFieldError } from '../form-field/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport InternalBox from '../box/internal';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n  {\n    accept,\n    ariaRequired,\n    multiple = false,\n    onChange,\n    value,\n    tokenLimit,\n    showFileSize,\n    showFileLastModified,\n    showFileThumbnail,\n    i18nStrings,\n    __internalRootRef = null,\n    constraintText,\n    errorText,\n    fileErrors,\n    ...restProps\n  }: InternalFileUploadProps,\n  externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n  const baseProps = getBaseProps(restProps);\n  const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n  const errorId = useUniqueId('error-');\n  const constraintTextId = useUniqueId('constraint-text-');\n\n  const fileInputRef = useRef<ButtonProps.Ref>(null);\n  const ref = useMergeRefs(fileInputRef, externalRef);\n\n  const [removedFileIndex, setRemovedFileIndex] = useState<null | number>(null);\n\n  checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n  if (!multiple && value.length > 1) {\n    warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n  }\n\n  const handleFilesChange = (newFiles: File[]) => {\n    const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n    fireNonCancelableEvent(onChange, { value: newValue });\n  };\n\n  const onFileRemove = (removeFileIndex: number) => {\n    const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n    fireNonCancelableEvent(onChange, { value: newValue });\n    setRemovedFileIndex(removeFileIndex);\n    if (value.length === 1) {\n      fileInputRef.current?.focus();\n    }\n  };\n\n  const isDropzoneVisible = useDropzoneVisible(multiple);\n\n  const formFieldContext = useFormFieldContext(restProps);\n  const ariaDescribedBy = joinStrings(\n    restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n    errorText ? errorId : undefined,\n    constraintText ? constraintTextId : undefined\n  );\n\n  const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n  const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n  return (\n    <InternalSpaceBetween\n      {...baseProps}\n      size=\"xs\"\n      className={clsx(baseProps.className, styles.root)}\n      __internalRootRef={__internalRootRef}\n    >\n      <InternalBox>\n        {isDropzoneVisible ? (\n          <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n        ) : (\n          <FileInput\n            ref={ref}\n            accept={accept}\n            ariaRequired={ariaRequired}\n            multiple={multiple}\n            onChange={handleFilesChange}\n            value={value}\n            {...restProps}\n            ariaDescribedby={ariaDescribedBy}\n            invalid={invalid}\n          >\n            {i18nStrings.uploadButtonText(multiple)}\n          </FileInput>\n        )}\n\n        {(constraintText || errorText) && (\n          <div className={styles.hints}>\n            {errorText && (\n              <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n                {errorText}\n              </FormFieldError>\n            )}\n            {constraintText && (\n              <ConstraintText id={constraintTextId} hasError={!!errorText}>\n                {constraintText}\n              </ConstraintText>\n            )}\n          </div>\n        )}\n      </InternalBox>\n\n      {!multiple && value.length > 0 ? (\n        <InternalBox>\n          <Token\n            ariaLabel={value[0].name}\n            dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n            onDismiss={() => onFileRemove(0)}\n            errorText={fileErrors?.[0]}\n            errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n            data-index={0}\n          >\n            <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n          </Token>\n        </InternalBox>\n      ) : null}\n\n      {multiple && value.length > 0 ? (\n        <InternalBox>\n          <TokenList\n            alignment=\"vertical\"\n            items={value}\n            renderItem={(file, fileIndex) => (\n              <Token\n                ariaLabel={file.name}\n                dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n                onDismiss={() => onFileRemove(fileIndex)}\n                errorText={fileErrors?.[fileIndex]}\n                errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n                data-index={fileIndex}\n              >\n                <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n              </Token>\n            )}\n            limit={tokenLimit}\n            i18nStrings={{\n              limitShowFewer: i18nStrings.limitShowFewer,\n              limitShowMore: i18nStrings.limitShowMore,\n            }}\n            moveFocusNextToIndex={removedFileIndex}\n          />\n        </InternalBox>\n      ) : null}\n    </InternalSpaceBetween>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/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\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport { FileUploadProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nimport { FileOption } from './file-option';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport clsx from 'clsx';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { Dropzone, useDropzoneVisible } from './dropzone';\nimport FileInput from './file-input';\nimport TokenList from '../internal/components/token-list';\nimport { Token } from '../token-group/token';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport InternalBox from '../box/internal';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n  {\n    accept,\n    ariaRequired,\n    multiple = false,\n    onChange,\n    value,\n    tokenLimit,\n    showFileSize,\n    showFileLastModified,\n    showFileThumbnail,\n    i18nStrings,\n    __internalRootRef = null,\n    constraintText,\n    errorText,\n    warningText,\n    fileErrors,\n    fileWarnings,\n    ...restProps\n  }: InternalFileUploadProps,\n  externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n  const baseProps = getBaseProps(restProps);\n  const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n  const errorId = useUniqueId('error-');\n  const warningId = useUniqueId('warning-');\n  const constraintTextId = useUniqueId('constraint-text-');\n\n  const fileInputRef = useRef<ButtonProps.Ref>(null);\n  const ref = useMergeRefs(fileInputRef, externalRef);\n\n  const [removedFileIndex, setRemovedFileIndex] = useState<null | number>(null);\n\n  checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n  if (!multiple && value.length > 1) {\n    warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n  }\n\n  const handleFilesChange = (newFiles: File[]) => {\n    const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles : [...value];\n    fireNonCancelableEvent(onChange, { value: newValue });\n  };\n\n  const onFileRemove = (removeFileIndex: number) => {\n    const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n    fireNonCancelableEvent(onChange, { value: newValue });\n    setRemovedFileIndex(removeFileIndex);\n    if (value.length === 1) {\n      fileInputRef.current?.focus();\n    }\n  };\n\n  const isDropzoneVisible = useDropzoneVisible(multiple);\n\n  const showWarning = warningText && !errorText;\n\n  if (warningText && errorText) {\n    warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n  }\n\n  const formFieldContext = useFormFieldContext(restProps);\n  const ariaDescribedBy = joinStrings(\n    restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n    errorText ? errorId : undefined,\n    showWarning ? warningId : undefined,\n    constraintText ? constraintTextId : undefined\n  );\n\n  const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n  const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n  return (\n    <InternalSpaceBetween\n      {...baseProps}\n      size=\"xs\"\n      className={clsx(baseProps.className, styles.root)}\n      __internalRootRef={__internalRootRef}\n    >\n      <InternalBox>\n        {isDropzoneVisible ? (\n          <Dropzone onChange={handleFilesChange}>{i18nStrings.dropzoneText(multiple)}</Dropzone>\n        ) : (\n          <FileInput\n            ref={ref}\n            accept={accept}\n            ariaRequired={ariaRequired}\n            multiple={multiple}\n            onChange={handleFilesChange}\n            value={value}\n            {...restProps}\n            ariaDescribedby={ariaDescribedBy}\n            invalid={invalid}\n          >\n            {i18nStrings.uploadButtonText(multiple)}\n          </FileInput>\n        )}\n\n        {(constraintText || errorText || warningText) && (\n          <div className={styles.hints}>\n            {errorText && (\n              <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n                {errorText}\n              </FormFieldError>\n            )}\n            {showWarning && (\n              <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n                {warningText}\n              </FormFieldWarning>\n            )}\n            {constraintText && (\n              <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n                {constraintText}\n              </ConstraintText>\n            )}\n          </div>\n        )}\n      </InternalBox>\n\n      {!multiple && value.length > 0 ? (\n        <InternalBox>\n          <Token\n            ariaLabel={value[0].name}\n            dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n            onDismiss={() => onFileRemove(0)}\n            errorText={fileErrors?.[0]}\n            warningText={fileWarnings?.[0]}\n            errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n            warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n            data-index={0}\n          >\n            <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n          </Token>\n        </InternalBox>\n      ) : null}\n\n      {multiple && value.length > 0 ? (\n        <InternalBox>\n          <TokenList\n            alignment=\"vertical\"\n            items={value}\n            renderItem={(file, fileIndex) => (\n              <Token\n                ariaLabel={file.name}\n                dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n                onDismiss={() => onFileRemove(fileIndex)}\n                errorText={fileErrors?.[fileIndex]}\n                warningText={fileWarnings?.[fileIndex]}\n                errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n                warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n                data-index={fileIndex}\n              >\n                <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n              </Token>\n            )}\n            limit={tokenLimit}\n            i18nStrings={{\n              limitShowFewer: i18nStrings.limitShowFewer,\n              limitShowMore: i18nStrings.limitShowMore,\n            }}\n            moveFocusNextToIndex={removedFileIndex}\n          />\n        </InternalBox>\n      ) : null}\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAoBrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAyB1E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAazC,OAAO,EAAE,SAAS,EAAE,CAAC;AA+CrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,OAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,eAyB1E"}

package/form/index.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useEffect } from 'react';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalForm from './internal';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -11,9 +11,10 @@ import { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/ana
 import formStyles from './styles.css.js';
 import headerStyles from '../header/styles.css.js';
 import { getAnalyticsMetadataProps } from '../internal/base-component';
+import { FunnelMetrics } from '../internal/analytics';
 const FormWithAnalytics = (_a) => {
-    var { variant = 'full-page', actions } = _a, props = __rest(_a, ["variant", "actions"]);
-    const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();
+    var { variant = 'full-page', actions, errorText } = _a, props = __rest(_a, ["variant", "actions", "errorText"]);
+    const { funnelIdentifier, funnelInteractionId, funnelProps, funnelSubmit, funnelNextOrSubmitAttempt, errorCount, submissionAttempt, funnelErrorContext, } = useFunnel();
     const { funnelStepProps } = useFunnelStep();
     const handleActionButtonClick = ({ variant }) => {
         if (variant === 'primary') {
@@ -21,8 +22,18 @@ const FormWithAnalytics = (_a) => {
             funnelSubmit();
         }
     };
+    useEffect(() => {
+        if (funnelInteractionId && errorText) {
+            errorCount.current++;
+            FunnelMetrics.funnelError({ funnelInteractionId, funnelIdentifier, funnelErrorContext });
+            return () => {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                errorCount.current--;
+            };
+        }
+    }, [funnelInteractionId, funnelIdentifier, errorText, submissionAttempt, errorCount, funnelErrorContext]);
     return (React.createElement(ButtonContext.Provider, { value: { onClick: handleActionButtonClick } },
-        React.createElement(InternalForm, Object.assign({ variant: variant, actions: actions }, props, funnelProps, funnelStepProps))));
+        React.createElement(InternalForm, Object.assign({ variant: variant, actions: actions, errorText: errorText }, props, funnelProps, funnelStepProps))));
 };
 export default function Form(_a) {
     var { variant = 'full-page' } = _a, props = __rest(_a, ["variant"]);
@@ -30,8 +41,8 @@ export default function Form(_a) {
     const baseComponentProps = useBaseComponent('Form', { props: { variant } }, analyticsMetadata);
     const inheritedFunnelNameSelector = useFunnelNameSelector();
     const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;
-    return (React.createElement(AnalyticsFunnel, { instanceIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, flowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${formStyles.header}`] },
-        React.createElement(AnalyticsFunnelStep, { instanceIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
+    return (React.createElement(AnalyticsFunnel, { funnelIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, funnelFlowType: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.flowType, funnelErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, funnelType: "single-page", optionalStepNumbers: [], totalFunnelSteps: 1, funnelNameSelectors: [funnelNameSelector, `.${formStyles.header}`] },
+        React.createElement(AnalyticsFunnelStep, { stepIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier, stepErrorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext, stepNumber: 1 },
             React.createElement(FormWithAnalytics, Object.assign({ variant: variant }, props, baseComponentProps)))));
 }
 applyDisplayName(Form, 'Form');

package/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/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\nimport React from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\nimport formStyles from './styles.css.js';\nimport headerStyles from '../header/styles.css.js';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, ...props }: FormProps) => {\n  const { funnelProps, funnelSubmit, funnelNextOrSubmitAttempt } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n\n  const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  return (\n    <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>\n      <InternalForm variant={variant} actions={actions} {...props} {...funnelProps} {...funnelStepProps} />\n    </ButtonContext.Provider>\n  );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent('Form', { props: { variant } }, analyticsMetadata);\n  const inheritedFunnelNameSelector = useFunnelNameSelector();\n  const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;\n\n  return (\n    <AnalyticsFunnel\n      instanceIdentifier={analyticsMetadata?.instanceIdentifier}\n      flowType={analyticsMetadata?.flowType}\n      errorContext={analyticsMetadata?.errorContext}\n      funnelType=\"single-page\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={[funnelNameSelector, `.${formStyles.header}`]}\n    >\n      <AnalyticsFunnelStep\n        instanceIdentifier={analyticsMetadata?.instanceIdentifier}\n        errorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Form, 'Form');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/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\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FormProps } from './interfaces';\nimport InternalForm from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nimport { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { ButtonContext, ButtonContextProps } from '../internal/context/button-context';\nimport { useFunnel, useFunnelNameSelector, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\n\nimport formStyles from './styles.css.js';\nimport headerStyles from '../header/styles.css.js';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport { FunnelMetrics } from '../internal/analytics';\n\nexport { FormProps };\n\nconst FormWithAnalytics = ({ variant = 'full-page', actions, errorText, ...props }: FormProps) => {\n  const {\n    funnelIdentifier,\n    funnelInteractionId,\n    funnelProps,\n    funnelSubmit,\n    funnelNextOrSubmitAttempt,\n    errorCount,\n    submissionAttempt,\n    funnelErrorContext,\n  } = useFunnel();\n  const { funnelStepProps } = useFunnelStep();\n\n  const handleActionButtonClick: ButtonContextProps['onClick'] = ({ variant }) => {\n    if (variant === 'primary') {\n      funnelNextOrSubmitAttempt();\n      funnelSubmit();\n    }\n  };\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      errorCount.current++;\n      FunnelMetrics.funnelError({ funnelInteractionId, funnelIdentifier, funnelErrorContext });\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n  }, [funnelInteractionId, funnelIdentifier, errorText, submissionAttempt, errorCount, funnelErrorContext]);\n\n  return (\n    <ButtonContext.Provider value={{ onClick: handleActionButtonClick }}>\n      <InternalForm\n        variant={variant}\n        actions={actions}\n        errorText={errorText}\n        {...props}\n        {...funnelProps}\n        {...funnelStepProps}\n      />\n    </ButtonContext.Provider>\n  );\n};\n\nexport default function Form({ variant = 'full-page', ...props }: FormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent('Form', { props: { variant } }, analyticsMetadata);\n  const inheritedFunnelNameSelector = useFunnelNameSelector();\n  const funnelNameSelector = inheritedFunnelNameSelector || `.${headerStyles['heading-text']}`;\n\n  return (\n    <AnalyticsFunnel\n      funnelIdentifier={analyticsMetadata?.instanceIdentifier}\n      funnelFlowType={analyticsMetadata?.flowType}\n      funnelErrorContext={analyticsMetadata?.errorContext}\n      funnelType=\"single-page\"\n      optionalStepNumbers={[]}\n      totalFunnelSteps={1}\n      funnelNameSelectors={[funnelNameSelector, `.${formStyles.header}`]}\n    >\n      <AnalyticsFunnelStep\n        stepIdentifier={analyticsMetadata?.instanceIdentifier}\n        stepErrorContext={analyticsMetadata?.errorContext}\n        stepNumber={1}\n      >\n        <FormWithAnalytics variant={variant} {...props} {...baseComponentProps} />\n      </AnalyticsFunnelStep>\n    </AnalyticsFunnel>\n  );\n}\n\napplyDisplayName(Form, 'Form');\n"]}

package/form/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAkDnB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAqCnB"}

package/form/internal.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../internal/base-component';
 import InternalAlert from '../alert/internal';
@@ -10,24 +10,11 @@ import InternalContentLayout from '../content-layout/internal';
 import styles from './styles.css.js';
 import LiveRegion from '../internal/components/live-region';
 import { useInternalI18n } from '../i18n/context';
-import { useFunnel } from '../internal/analytics/hooks/use-funnel';
-import { FunnelMetrics } from '../internal/analytics';
 export default function InternalForm(_a) {
     var { children, header, errorText, errorIconAriaLabel: errorIconAriaLabelOverride, actions, secondaryActions, variant, __internalRootRef } = _a, props = __rest(_a, ["children", "header", "errorText", "errorIconAriaLabel", "actions", "secondaryActions", "variant", "__internalRootRef"]);
     const baseProps = getBaseProps(props);
     const i18n = useInternalI18n('form');
     const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);
-    const { funnelInteractionId, submissionAttempt, errorCount } = useFunnel();
-    useEffect(() => {
-        if (funnelInteractionId && errorText) {
-            errorCount.current++;
-            FunnelMetrics.funnelError({ funnelInteractionId });
-            return () => {
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                errorCount.current--;
-            };
-        }
-    }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);
     return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
         React.createElement(FormLayout, { header: header && React.createElement("div", { className: clsx(styles.header, variant === 'full-page' && styles['full-page']) }, header), variant: variant },
             children && React.createElement("div", { className: styles.content }, children),

package/form/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/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, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../i18n/context';\n\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n  children,\n  header,\n  errorText,\n  errorIconAriaLabel: errorIconAriaLabelOverride,\n  actions,\n  secondaryActions,\n  variant,\n  __internalRootRef,\n  ...props\n}: InternalFormProps) {\n  const baseProps = getBaseProps(props);\n  const i18n = useInternalI18n('form');\n  const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n  const { funnelInteractionId, submissionAttempt, errorCount } = useFunnel();\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText) {\n      errorCount.current++;\n      FunnelMetrics.funnelError({ funnelInteractionId });\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        errorCount.current--;\n      };\n    }\n  }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n  return (\n    <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n      <FormLayout\n        header={\n          header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n        }\n        variant={variant}\n      >\n        {children && <div className={styles.content}>{children}</div>}\n        {errorText && (\n          <InternalBox margin={{ top: 'l' }}>\n            <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n              <div className={styles.error}>{errorText}</div>\n            </InternalAlert>\n          </InternalBox>\n        )}\n        {(actions || secondaryActions) && (\n          <div className={styles.footer}>\n            <div className={styles['actions-section']}>\n              {actions && <div className={styles.actions}>{actions}</div>}\n              {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n            </div>\n          </div>\n        )}\n        {errorText && (\n          <LiveRegion assertive={true}>\n            {errorIconAriaLabel}, {errorText}\n          </LiveRegion>\n        )}\n      </FormLayout>\n    </div>\n  );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n  return variant === 'full-page' && header ? (\n    <InternalContentLayout header={header}>{children}</InternalContentLayout>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAUjB;QAViB,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,OAEC,EADf,KAAK,cAT2B,wHAUpC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;IAElF,OAAO,CACL,6CAAS,SAAS,IAAE,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;QAC3F,oBAAC,UAAU,IACT,MAAM,EACJ,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,KAAK,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC,IAAG,MAAM,CAAO,EAE/G,OAAO,EAAE,OAAO;YAEf,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;YAC5D,SAAS,IAAI,CACZ,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;gBAC/B,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,mBAAmB,EAAE,kBAAkB;oBACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,SAAS,CAAO,CACjC,CACJ,CACf;YACA,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gBAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;oBACtC,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;oBAC1D,gBAAgB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACtF,CACF,CACP;YACA,SAAS,IAAI,CACZ,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI;gBACxB,kBAAkB;;gBAAI,SAAS,CACrB,CACd,CACU,CACT,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAmB;IAChE,OAAO,OAAO,KAAK,WAAW,IAAI,MAAM,CAAC,CAAC,CAAC,CACzC,oBAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,IAAG,QAAQ,CAAyB,CAC1E,CAAC,CAAC,CAAC,CACF;QACG,MAAM;QACN,QAAQ,CACR,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../i18n/context';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n  children,\n  header,\n  errorText,\n  errorIconAriaLabel: errorIconAriaLabelOverride,\n  actions,\n  secondaryActions,\n  variant,\n  __internalRootRef,\n  ...props\n}: InternalFormProps) {\n  const baseProps = getBaseProps(props);\n  const i18n = useInternalI18n('form');\n  const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n  return (\n    <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n      <FormLayout\n        header={\n          header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n        }\n        variant={variant}\n      >\n        {children && <div className={styles.content}>{children}</div>}\n        {errorText && (\n          <InternalBox margin={{ top: 'l' }}>\n            <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n              <div className={styles.error}>{errorText}</div>\n            </InternalAlert>\n          </InternalBox>\n        )}\n        {(actions || secondaryActions) && (\n          <div className={styles.footer}>\n            <div className={styles['actions-section']}>\n              {actions && <div className={styles.actions}>{actions}</div>}\n              {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n            </div>\n          </div>\n        )}\n        {errorText && (\n          <LiveRegion assertive={true}>\n            {errorIconAriaLabel}, {errorText}\n          </LiveRegion>\n        )}\n      </FormLayout>\n    </div>\n  );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n  return variant === 'full-page' && header ? (\n    <InternalContentLayout header={header}>{children}</InternalContentLayout>\n  ) : (\n    <>\n      {header}\n      {children}\n    </>\n  );\n}\n"]}

package/form-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAO9E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,eAa9E"}

package/form-field/index.js

@@ -8,8 +8,9 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { getAnalyticsMetadataProps } from '../internal/base-component';
 export default function FormField(_a) {
     var { stretch = false } = _a, props = __rest(_a, ["stretch"]);
-    const baseComponentProps = useBaseComponent('FormField', { props: { stretch } }, getAnalyticsMetadataProps(props));
-    return React.createElement(InternalFormField, Object.assign({ stretch: stretch }, props, { __hideLabel: false }, baseComponentProps));
+    const analyticsMetadata = getAnalyticsMetadataProps(props);
+    const baseComponentProps = useBaseComponent('FormField', { props: { stretch } }, analyticsMetadata);
+    return (React.createElement(InternalFormField, Object.assign({ stretch: stretch }, props, { __hideLabel: false, __analyticsMetadata: analyticsMetadata }, baseComponentProps)));
 }
 applyDisplayName(FormField, 'FormField');
 //# sourceMappingURL=index.js.map

package/form-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAMvG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAA6C;QAA7C,EAAE,OAAO,GAAG,KAAK,OAA4B,EAAvB,KAAK,cAA3B,WAA6B,CAAF;IAC3D,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,WAAW,EACX,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EACtB,yBAAyB,CAAC,KAAuC,CAAC,CACnE,CAAC;IACF,OAAO,oBAAC,iBAAiB,kBAAC,OAAO,EAAE,OAAO,IAAM,KAAK,IAAE,WAAW,EAAE,KAAK,IAAM,kBAAkB,EAAI,CAAC;AACxG,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalFormField from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nimport { FormFieldProps } from './interfaces';\n\nexport { FormFieldProps };\n\nexport default function FormField({ stretch = false, ...props }: FormFieldProps) {\n  const baseComponentProps = useBaseComponent(\n    'FormField',\n    { props: { stretch } },\n    getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata)\n  );\n  return <InternalFormField stretch={stretch} {...props} __hideLabel={false} {...baseComponentProps} />;\n}\n\napplyDisplayName(FormField, 'FormField');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form-field/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAMvG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAA6C;QAA7C,EAAE,OAAO,GAAG,KAAK,OAA4B,EAAvB,KAAK,cAA3B,WAA6B,CAAF;IAC3D,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,iBAAiB,CAAC,CAAC;IAEpG,OAAO,CACL,oBAAC,iBAAiB,kBAChB,OAAO,EAAE,OAAO,IACZ,KAAK,IACT,WAAW,EAAE,KAAK,EAClB,mBAAmB,EAAE,iBAAiB,IAClC,kBAAkB,EACtB,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalFormField from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nimport { FormFieldProps } from './interfaces';\n\nexport { FormFieldProps };\n\nexport default function FormField({ stretch = false, ...props }: FormFieldProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n  const baseComponentProps = useBaseComponent('FormField', { props: { stretch } }, analyticsMetadata);\n\n  return (\n    <InternalFormField\n      stretch={stretch}\n      {...props}\n      __hideLabel={false}\n      __analyticsMetadata={analyticsMetadata}\n      {...baseComponentProps}\n    />\n  );\n}\n\napplyDisplayName(FormField, 'FormField');\n"]}

package/form-field/interfaces.d.ts

@@ -1,6 +1,7 @@
 import { BaseComponentProps } from '../internal/base-component';
 import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { AnalyticsMetadata } from '../internal/analytics/interfaces';
 export interface FormFieldProps extends BaseComponentProps {
     /**
      * The ID of the primary form control. You can use this to set the
@@ -55,10 +56,15 @@ export interface FormFieldProps extends BaseComponentProps {
      */
     constraintText?: React.ReactNode;
     /**
-     * Text that displays as a validation message. If this is set to a
+     * Text that displays as a validation error message. If this is set to a
      * non-empty string, it will render the form field as invalid.
      */
     errorText?: React.ReactNode;
+    /**
+     * Text that displays as a validation warning message. If this is set to a
+     * non-empty string, it will render the form field in a warning state.
+     */
+    warningText?: React.ReactNode;
 }
 export declare namespace FormFieldProps {
     interface I18nStrings {
@@ -66,6 +72,10 @@ export declare namespace FormFieldProps {
          * Provides a text alternative for the error icon in the error message.
          */
         errorIconAriaLabel?: string;
+        /**
+         * Provides a text alternative for the warning icon in the warning message.
+         */
+        warningIconAriaLabel?: string;
     }
 }
 export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps<HTMLDivElement> {
@@ -77,5 +87,6 @@ export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComp
      * Disable the gutter applied by default.
      */
     __disableGutters?: boolean;
+    __analyticsMetadata?: AnalyticsMetadata;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/form-field/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B,CAAC,cAAc,CAAC;IACxG;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B,CAAC,cAAc,CAAC;IACxG;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC"}

package/form-field/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n  /**\n   * The ID of the primary form control. You can use this to set the\n   * `for` attribute of a label for accessibility.\n   *\n   * If you don't set this property, the control group automatically sets\n   * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n   * This only works well if you're using a single control in the form field.\n   */\n  controlId?: string;\n\n  /**\n   * Determines whether the primary control should expand to 12 columns.\n   *\n   * By default (or when this property is set to `false`), the primary control\n   * occupies 9 columns. The secondary control uses the remaining 3 columns.\n   * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n   *\n   * If this property is set to `true`, the primary control uses the full\n   * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n   * controls stack on top of each other.\n   */\n  stretch?: boolean;\n\n  /**\n   * The main label for the form field.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: FormFieldProps.I18nStrings;\n\n  /**\n   * Use to display an 'Info' link next to the label.\n   */\n  info?: React.ReactNode;\n\n  /**\n   * The primary form control (for example, input, textarea, etc.).\n   * @displayname control\n   */\n  children?: React.ReactNode;\n\n  /**\n   * A secondary control. You can use this for custom actions and content.\n   */\n  secondaryControl?: React.ReactNode;\n\n  /**\n   * Detailed information about the form field that's displayed below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Constraint text that's displayed below the control. Use this to provide\n   * additional information about valid formats, etc.\n   */\n  constraintText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation message. If this is set to a\n   * non-empty string, it will render the form field as invalid.\n   */\n  errorText?: React.ReactNode;\n}\n\nexport namespace FormFieldProps {\n  export interface I18nStrings {\n    /**\n     * Provides a text alternative for the error icon in the error message.\n     */\n    errorIconAriaLabel?: string;\n  }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps<HTMLDivElement> {\n  /**\n   * Visually hide the label.\n   */\n  __hideLabel?: boolean;\n\n  /**\n   * Disable the gutter applied by default.\n   */\n  __disableGutters?: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { AnalyticsMetadata } from '../internal/analytics/interfaces';\n\nexport interface FormFieldProps extends BaseComponentProps {\n  /**\n   * The ID of the primary form control. You can use this to set the\n   * `for` attribute of a label for accessibility.\n   *\n   * If you don't set this property, the control group automatically sets\n   * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n   * This only works well if you're using a single control in the form field.\n   */\n  controlId?: string;\n\n  /**\n   * Determines whether the primary control should expand to 12 columns.\n   *\n   * By default (or when this property is set to `false`), the primary control\n   * occupies 9 columns. The secondary control uses the remaining 3 columns.\n   * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n   *\n   * If this property is set to `true`, the primary control uses the full\n   * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n   * controls stack on top of each other.\n   */\n  stretch?: boolean;\n\n  /**\n   * The main label for the form field.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: FormFieldProps.I18nStrings;\n\n  /**\n   * Use to display an 'Info' link next to the label.\n   */\n  info?: React.ReactNode;\n\n  /**\n   * The primary form control (for example, input, textarea, etc.).\n   * @displayname control\n   */\n  children?: React.ReactNode;\n\n  /**\n   * A secondary control. You can use this for custom actions and content.\n   */\n  secondaryControl?: React.ReactNode;\n\n  /**\n   * Detailed information about the form field that's displayed below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Constraint text that's displayed below the control. Use this to provide\n   * additional information about valid formats, etc.\n   */\n  constraintText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation error message. If this is set to a\n   * non-empty string, it will render the form field as invalid.\n   */\n  errorText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation warning message. If this is set to a\n   * non-empty string, it will render the form field in a warning state.\n   */\n  warningText?: React.ReactNode;\n}\n\nexport namespace FormFieldProps {\n  export interface I18nStrings {\n    /**\n     * Provides a text alternative for the error icon in the error message.\n     */\n    errorIconAriaLabel?: string;\n\n    /**\n     * Provides a text alternative for the warning icon in the warning message.\n     */\n    warningIconAriaLabel?: string;\n  }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps<HTMLDivElement> {\n  /**\n   * Visually hide the label.\n   */\n  __hideLabel?: boolean;\n\n  /**\n   * Disable the gutter applied by default.\n   */\n  __disableGutters?: boolean;\n  __analyticsMetadata?: AnalyticsMetadata;\n}\n"]}

package/form-field/internal.d.ts

@@ -5,12 +5,18 @@ interface FormFieldErrorProps {
     children?: React.ReactNode;
     errorIconAriaLabel?: string;
 }
+interface FormFieldWarningProps {
+    id?: string;
+    children?: React.ReactNode;
+    warningIconAriaLabel?: string;
+}
 export declare function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps): JSX.Element;
-export declare function ConstraintText({ id, hasError, children, }: {
+export declare function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps): JSX.Element;
+export declare function ConstraintText({ id, hasValidationText, children, }: {
     id?: string;
-    hasError: boolean;
+    hasValidationText: boolean;
     children: React.ReactNode;
 }): JSX.Element;
-export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, __hideLabel, __internalRootRef, __disableGutters, ...rest }: InternalFormFieldProps): JSX.Element;
+export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, warningText, __hideLabel, __internalRootRef, __disableGutters, __analyticsMetadata, ...rest }: InternalFormFieldProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/form-field/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAajD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAgBtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAwBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eAgIxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAgBtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,qBAAqB;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAqBvF;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAE,EAAE,qBAAqB,eAqB7F;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,mBAA+B,EAC/B,GAAG,IAAI,EACR,EAAE,sBAAsB,eA0JxB"}

package/form-field/internal.js

@@ -7,6 +7,7 @@ import { getBaseProps } from '../internal/base-component';
 import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import InternalGrid from '../grid/internal';
 import InternalIcon from '../icon/internal';
 import { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';
@@ -21,35 +22,53 @@ import LiveRegion from '../internal/components/live-region';
 export function FormFieldError({ id, children, errorIconAriaLabel }) {
     const i18n = useInternalI18n('form-field');
     const contentRef = useRef(null);
+    const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { id: id, className: styles.error },
             React.createElement("div", { className: styles['error-icon-shake-wrapper'] },
-                React.createElement("div", { role: "img", "aria-label": i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel), className: styles['error-icon-scale-wrapper'] },
-                    React.createElement(InternalIcon, { name: "status-warning", size: "small" }))),
+                React.createElement("div", { role: "img", "aria-label": i18nErrorIconAriaLabel, className: styles['error-icon-scale-wrapper'] },
+                    React.createElement(InternalIcon, { name: "status-negative", size: "small" }))),
             React.createElement("span", { className: styles.error__message, ref: contentRef }, children)),
-        React.createElement(LiveRegion, { assertive: true, source: [errorIconAriaLabel, contentRef] })));
+        React.createElement(LiveRegion, { assertive: true, source: [i18nErrorIconAriaLabel, contentRef] })));
+}
+export function FormFieldWarning({ id, children, warningIconAriaLabel }) {
+    const i18n = useInternalI18n('form-field');
+    const contentRef = useRef(null);
+    const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { id: id, className: styles.warning },
+            React.createElement("div", { className: styles['warning-icon-shake-wrapper'] },
+                React.createElement("div", { role: "img", "aria-label": i18nWarningIconAriaLabel, className: styles['warning-icon-scale-wrapper'] },
+                    React.createElement(InternalIcon, { name: "status-warning", size: "small" }))),
+            React.createElement("span", { className: styles.warning__message, ref: contentRef }, children)),
+        React.createElement(LiveRegion, { assertive: true, source: [i18nWarningIconAriaLabel, contentRef] })));
 }
-export function ConstraintText({ id, hasError, children, }) {
-    return (React.createElement("div", { id: id, className: clsx(styles.constraint, hasError && styles['constraint-has-error']) }, children));
+export function ConstraintText({ id, hasValidationText, children, }) {
+    return (React.createElement("div", { id: id, className: clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text']) }, children));
 }
 export default function InternalFormField(_a) {
-    var { controlId, stretch = false, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, __hideLabel, __internalRootRef = null, __disableGutters = false } = _a, rest = __rest(_a, ["controlId", "stretch", "label", "info", "i18nStrings", "children", "secondaryControl", "description", "constraintText", "errorText", "__hideLabel", "__internalRootRef", "__disableGutters"]);
+    var { controlId, stretch = false, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, warningText, __hideLabel, __internalRootRef = null, __disableGutters = false, __analyticsMetadata = undefined } = _a, rest = __rest(_a, ["controlId", "stretch", "label", "info", "i18nStrings", "children", "secondaryControl", "description", "constraintText", "errorText", "warningText", "__hideLabel", "__internalRootRef", "__disableGutters", "__analyticsMetadata"]);
     const baseProps = getBaseProps(rest);
     const isRefresh = useVisualRefresh();
     const instanceUniqueId = useUniqueId('formField');
     const generatedControlId = controlId || instanceUniqueId;
     const formFieldId = controlId || generatedControlId;
-    const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
-    const { stepNumber, stepNameSelector } = useFunnelStep();
-    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
-    const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
+    const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
+    const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();
+    const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();
+    const showWarning = warningText && !errorText;
+    if (warningText && errorText) {
+        warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');
+    }
+    const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText, showWarning ? warningText : undefined);
     const ariaDescribedBy = getAriaDescribedBy(slotIds);
     const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
-    const { ariaLabelledby: parentAriaLabelledby, ariaDescribedby: parentAriaDescribedby, invalid: parentInvalid, } = useFormFieldContext({});
+    const { ariaLabelledby: parentAriaLabelledby, ariaDescribedby: parentAriaDescribedby, invalid: parentInvalid, warning: parentWarning, } = useFormFieldContext({});
     const contextValuesWithoutControlId = {
         ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,
         ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,
         invalid: !!errorText || !!parentInvalid,
+        warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),
     };
     const analyticsAttributes = {
         [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,
@@ -66,15 +85,21 @@ export default function InternalFormField(_a) {
             if (errorIsVisible) {
                 FunnelMetrics.funnelSubStepError({
                     funnelInteractionId,
+                    funnelIdentifier,
                     subStepSelector,
                     subStepName,
                     subStepNameSelector,
+                    subStepIdentifier,
                     stepNumber,
                     stepName,
                     stepNameSelector,
+                    stepIdentifier,
+                    subStepErrorContext,
                     fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,
                     fieldLabelSelector: getFieldSlotSeletor(slotIds.label),
                     subStepAllSelector: getSubStepAllSelector(),
+                    fieldIdentifier: __analyticsMetadata === null || __analyticsMetadata === void 0 ? void 0 : __analyticsMetadata.instanceIdentifier,
+                    fieldErrorContext: __analyticsMetadata === null || __analyticsMetadata === void 0 ? void 0 : __analyticsMetadata.errorContext,
                 });
             }
             return () => {
@@ -94,8 +119,9 @@ export default function InternalFormField(_a) {
                 React.createElement(FormFieldContext.Provider, { value: Object.assign({ controlId: generatedControlId }, contextValuesWithoutControlId) }, children && React.createElement("div", { className: styles.control }, children)),
                 secondaryControl && (React.createElement(FormFieldContext.Provider, { value: contextValuesWithoutControlId },
                     React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
-        (constraintText || errorText) && (React.createElement("div", { className: styles.hints },
+        (constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
             errorText && (React.createElement(FormFieldError, { id: slotIds.error, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
-            constraintText && (React.createElement(ConstraintText, { id: slotIds.constraint, hasError: !!errorText }, constraintText))))));
+            showWarning && (React.createElement(FormFieldWarning, { id: slotIds.warning, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
+            constraintText && (React.createElement(ConstraintText, { id: slotIds.constraint, hasValidationText: !!errorText || !!warningText }, constraintText))))));
 }
 //# sourceMappingURL=internal.js.map