npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.639 → 3.0.640 - Mend

@cloudscape-design/components-themeable 3.0.639 → 3.0.640

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/lib/internal/template/form-field/internal.d.ts CHANGED Viewed

@@ -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/lib/internal/template/form-field/internal.d.ts.map CHANGED Viewed

	@@ -1 +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,eAqBvF;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~~"}
1	+ {"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/lib/internal/template/form-field/internal.js CHANGED Viewed

@@ -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';
@@ -26,31 +27,48 @@ export function FormFieldError({ id, children, errorIconAriaLabel }) {
         React.createElement("div", { id: id, className: styles.error },
             React.createElement("div", { className: styles['error-icon-shake-wrapper'] },
                 React.createElement("div", { role: "img", "aria-label": i18nErrorIconAriaLabel, className: styles['error-icon-scale-wrapper'] },
-                    React.createElement(InternalIcon, { name: "status-warning", size: "small" }))),
+                    React.createElement(InternalIcon, { name: "status-negative", size: "small" }))),
             React.createElement("span", { className: styles.error__message, ref: contentRef }, children)),
         React.createElement(LiveRegion, { assertive: true, source: [i18nErrorIconAriaLabel, 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 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, 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,
@@ -67,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 () => {
@@ -95,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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId \|\| instanceUniqueId;\n const formFieldId = controlId \|\| generatedControlId;\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) \|\| undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) \|\| undefined,\n invalid: !!errorText \|\| !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText \|\| errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement \| null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId \|\| instanceUniqueId;\n const formFieldId = controlId \|\| generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\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 slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) \|\| undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) \|\| undefined,\n invalid: !!errorText \|\| !!parentInvalid,\n warning: (!!warningText && !errorText) \|\| (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText \|\| errorText \|\| warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText \|\| !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}

package/lib/internal/template/form-field/styles.css.js CHANGED Viewed

@@ -1,24 +1,28 @@
     import './styles.scoped.css';
     export default {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_zqt7u_103",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_zqt7u_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_zqt7u_130",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_zqt7u_1",
-  "error": "awsui_error_14mhv_zqt7u_103",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_zqt7u_1",
-  "root": "awsui_root_14mhv_zqt7u_174",
-  "label": "awsui_label_14mhv_zqt7u_210",
-  "info": "awsui_info_14mhv_zqt7u_224",
-  "description": "awsui_description_14mhv_zqt7u_229",
-  "constraint": "awsui_constraint_14mhv_zqt7u_230",
-  "hints": "awsui_hints_14mhv_zqt7u_237",
-  "constraint-has-error": "awsui_constraint-has-error_14mhv_zqt7u_238",
-  "secondary-control": "awsui_secondary-control_14mhv_zqt7u_242",
-  "controls": "awsui_controls_14mhv_zqt7u_246",
-  "label-hidden": "awsui_label-hidden_14mhv_zqt7u_246",
-  "control": "awsui_control_14mhv_zqt7u_246",
-  "error__message": "awsui_error__message_14mhv_zqt7u_264",
-  "visually-hidden": "awsui_visually-hidden_14mhv_zqt7u_268"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3pp2p_103",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3pp2p_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3pp2p_134",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3pp2p_1",
+  "warning": "awsui_warning_14mhv_3pp2p_104",
+  "error": "awsui_error_14mhv_3pp2p_103",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3pp2p_1",
+  "root": "awsui_root_14mhv_3pp2p_186",
+  "label": "awsui_label_14mhv_3pp2p_222",
+  "info": "awsui_info_14mhv_3pp2p_236",
+  "description": "awsui_description_14mhv_3pp2p_241",
+  "constraint": "awsui_constraint_14mhv_3pp2p_242",
+  "hints": "awsui_hints_14mhv_3pp2p_249",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3pp2p_250",
+  "secondary-control": "awsui_secondary-control_14mhv_3pp2p_254",
+  "controls": "awsui_controls_14mhv_3pp2p_258",
+  "label-hidden": "awsui_label-hidden_14mhv_3pp2p_258",
+  "control": "awsui_control_14mhv_3pp2p_258",
+  "error__message": "awsui_error__message_14mhv_3pp2p_285",
+  "warning__message": "awsui_warning__message_14mhv_3pp2p_286",
+  "visually-hidden": "awsui_visually-hidden_14mhv_3pp2p_290"
 };

package/lib/internal/template/form-field/styles.scoped.css CHANGED Viewed

@@ -100,10 +100,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_error-icon-shake-wrapper_14mhv_zqt7u_103:not(#\9) {
-  animation: awsui_awsui-motion-shake-horizontally_14mhv_zqt7u_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
+.awsui_error-icon-shake-wrapper_14mhv_3pp2p_103:not(#\9),
+.awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_3pp2p_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_14mhv_zqt7u_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_3pp2p_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -117,20 +118,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-shake-wrapper_14mhv_zqt7u_103:not(#\9) {
+  .awsui_error-icon-shake-wrapper_14mhv_3pp2p_103:not(#\9),
+  .awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_zqt7u_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_zqt7u_103:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_3pp2p_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_3pp2p_103:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_error-icon-scale-wrapper_14mhv_zqt7u_130:not(#\9) {
-  animation: awsui_awsui-motion-scale-popup_14mhv_zqt7u_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
+.awsui_error-icon-scale-wrapper_14mhv_3pp2p_134:not(#\9),
+.awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_3pp2p_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-scale-popup_14mhv_zqt7u_1 {
+@keyframes awsui_awsui-motion-scale-popup_14mhv_3pp2p_1 {
   0% {
     transform: scale(0.95);
   }
@@ -139,20 +142,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error-icon-scale-wrapper_14mhv_zqt7u_130:not(#\9) {
+  .awsui_error-icon-scale-wrapper_14mhv_3pp2p_134:not(#\9),
+  .awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_zqt7u_130:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_zqt7u_130:not(#\9) {
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_3pp2p_134:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_3pp2p_134:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_error_14mhv_zqt7u_103:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_14mhv_zqt7u_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
+.awsui_warning_14mhv_3pp2p_104:not(#\9),
+.awsui_error_14mhv_3pp2p_103:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_3pp2p_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_14mhv_zqt7u_1 {
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_3pp2p_1 {
   from {
     opacity: 0;
   }
@@ -161,17 +166,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_error_14mhv_zqt7u_103:not(#\9) {
+  .awsui_warning_14mhv_3pp2p_104:not(#\9),
+  .awsui_error_14mhv_3pp2p_103:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_error_14mhv_zqt7u_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_zqt7u_103:not(#\9) {
+.awsui-motion-disabled .awsui_warning_14mhv_3pp2p_104:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_3pp2p_104:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_3pp2p_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_3pp2p_103:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_root_14mhv_zqt7u_174:not(#\9) {
+.awsui_root_14mhv_3pp2p_186:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,7 +214,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
-.awsui_label_14mhv_zqt7u_210:not(#\9) {
+.awsui_label_14mhv_3pp2p_222:not(#\9) {
   box-sizing: border-box;
   color: var(--color-text-form-label-3ubxwt, #16191f);
   display: inline;
@@ -217,43 +223,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-display-label-weight-2njs7q, 400);
   margin-inline-end: var(--space-xs-xf5ch3, 8px);
 }
-.awsui_label_14mhv_zqt7u_210:not(#\9):only-child {
+.awsui_label_14mhv_3pp2p_222:not(#\9):only-child {
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_info_14mhv_zqt7u_224:not(#\9) {
+.awsui_info_14mhv_3pp2p_236:not(#\9) {
   padding-inline-start: var(--space-xs-xf5ch3, 8px);
   border-inline-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
 }
-.awsui_description_14mhv_zqt7u_229:not(#\9),
-.awsui_constraint_14mhv_zqt7u_230:not(#\9) {
+.awsui_description_14mhv_3pp2p_241:not(#\9),
+.awsui_constraint_14mhv_3pp2p_242:not(#\9) {
   color: var(--color-text-form-secondary-rh78tu, #687078);
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
   letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
 }
-.awsui_hints_14mhv_zqt7u_237:not(#\9),
-.awsui_constraint-has-error_14mhv_zqt7u_238:not(#\9) {
+.awsui_hints_14mhv_3pp2p_249:not(#\9),
+.awsui_constraint-has-validation-text_14mhv_3pp2p_250:not(#\9) {
   padding-block-start: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_secondary-control_14mhv_zqt7u_242:not(#\9) {
+.awsui_secondary-control_14mhv_3pp2p_254:not(#\9) {
   /* used in test-utils */
 }
-.awsui_controls_14mhv_zqt7u_246:not(#\9):not(.awsui_label-hidden_14mhv_zqt7u_246) {
+.awsui_controls_14mhv_3pp2p_258:not(#\9):not(.awsui_label-hidden_14mhv_3pp2p_258) {
   padding-block-start: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_control_14mhv_zqt7u_246:not(#\9) {
+.awsui_control_14mhv_3pp2p_258:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
 }
-.awsui_error_14mhv_zqt7u_103:not(#\9) {
+.awsui_error_14mhv_3pp2p_103:not(#\9) {
   color: var(--color-text-status-error-ofc4yr, #d13212);
   font-size: var(--font-size-body-s-533prh, 12px);
   line-height: var(--line-height-body-s-n0pazd, 16px);
@@ -262,11 +268,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: flex-start;
 }
-.awsui_error__message_14mhv_zqt7u_264:not(#\9) {
+.awsui_warning_14mhv_3pp2p_104:not(#\9) {
+  color: var(--color-text-status-warning-azn00c, #906806);
+  font-size: var(--font-size-body-s-533prh, 12px);
+  line-height: var(--line-height-body-s-n0pazd, 16px);
+  letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
+  display: flex;
+  align-items: flex-start;
+}
+.awsui_error__message_14mhv_3pp2p_285:not(#\9),
+.awsui_warning__message_14mhv_3pp2p_286:not(#\9) {
   margin-inline-start: var(--space-xxs-9rrxti, 4px);
 }
-.awsui_visually-hidden_14mhv_zqt7u_268:not(#\9) {
+.awsui_visually-hidden_14mhv_3pp2p_290:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;

package/lib/internal/template/form-field/styles.selectors.js CHANGED Viewed

@@ -2,24 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_zqt7u_103",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_zqt7u_1",
-  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_zqt7u_130",
-  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_zqt7u_1",
-  "error": "awsui_error_14mhv_zqt7u_103",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_zqt7u_1",
-  "root": "awsui_root_14mhv_zqt7u_174",
-  "label": "awsui_label_14mhv_zqt7u_210",
-  "info": "awsui_info_14mhv_zqt7u_224",
-  "description": "awsui_description_14mhv_zqt7u_229",
-  "constraint": "awsui_constraint_14mhv_zqt7u_230",
-  "hints": "awsui_hints_14mhv_zqt7u_237",
-  "constraint-has-error": "awsui_constraint-has-error_14mhv_zqt7u_238",
-  "secondary-control": "awsui_secondary-control_14mhv_zqt7u_242",
-  "controls": "awsui_controls_14mhv_zqt7u_246",
-  "label-hidden": "awsui_label-hidden_14mhv_zqt7u_246",
-  "control": "awsui_control_14mhv_zqt7u_246",
-  "error__message": "awsui_error__message_14mhv_zqt7u_264",
-  "visually-hidden": "awsui_visually-hidden_14mhv_zqt7u_268"
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_3pp2p_103",
+  "warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_3pp2p_104",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_3pp2p_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_3pp2p_134",
+  "warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_3pp2p_135",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_3pp2p_1",
+  "warning": "awsui_warning_14mhv_3pp2p_104",
+  "error": "awsui_error_14mhv_3pp2p_103",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_3pp2p_1",
+  "root": "awsui_root_14mhv_3pp2p_186",
+  "label": "awsui_label_14mhv_3pp2p_222",
+  "info": "awsui_info_14mhv_3pp2p_236",
+  "description": "awsui_description_14mhv_3pp2p_241",
+  "constraint": "awsui_constraint_14mhv_3pp2p_242",
+  "hints": "awsui_hints_14mhv_3pp2p_249",
+  "constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_3pp2p_250",
+  "secondary-control": "awsui_secondary-control_14mhv_3pp2p_254",
+  "controls": "awsui_controls_14mhv_3pp2p_258",
+  "label-hidden": "awsui_label-hidden_14mhv_3pp2p_258",
+  "control": "awsui_control_14mhv_3pp2p_258",
+  "error__message": "awsui_error__message_14mhv_3pp2p_285",
+  "warning__message": "awsui_warning__message_14mhv_3pp2p_286",
+  "visually-hidden": "awsui_visually-hidden_14mhv_3pp2p_290"
 };

package/lib/internal/template/form-field/util.d.ts CHANGED Viewed

@@ -5,9 +5,10 @@ interface FormFieldIds {
     description?: string;
     constraint?: string;
     error?: string;
+    warning?: string;
 }
-export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode): FormFieldIds;
-export declare function getAriaDescribedBy({ error, description, constraint }: FormFieldIds): string | undefined;
+export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode, warningText?: React.ReactNode): FormFieldIds;
+export declare function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds): string | undefined;
 export declare function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean): {
     colspan: GridProps.BreakpointMapping | number;
 }[];

package/lib/internal/template/form-field/util.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;~~CAChB~~;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,~~gBAU5B~~;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,YAAY,~~sBAIlF~~;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,UAAU,iBAAiB,GAAG,MAAM;IAenE"}
1	+ {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,EAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,gBAW9B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,YAAY,sBAI3F;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,UAAU,iBAAiB,GAAG,MAAM;IAenE"}

package/lib/internal/template/form-field/util.js CHANGED Viewed

@@ -4,17 +4,18 @@ function makeSlotId(prop, formFieldId, propName) {
     }
     return `${formFieldId}-${propName}`;
 }
-export function getSlotIds(formFieldId, label, description, constraintText, errorText) {
+export function getSlotIds(formFieldId, label, description, constraintText, errorText, warningText) {
     const ids = {
         label: makeSlotId(label, formFieldId, 'label'),
         description: makeSlotId(description, formFieldId, 'description'),
         constraint: makeSlotId(constraintText, formFieldId, 'constraint'),
         error: makeSlotId(errorText, formFieldId, 'error'),
+        warning: makeSlotId(warningText, formFieldId, 'warning'),
     };
     return ids;
 }
-export function getAriaDescribedBy({ error, description, constraint }) {
-    const describedByAttributes = [error, description, constraint].filter(e => !!e);
+export function getAriaDescribedBy({ error, warning, description, constraint }) {
+    const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);
     const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;
     return describedBy;
 }

package/lib/internal/template/form-field/util.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"~~AAWA~~,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,SAA2B;~~IAE3B~~,MAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;~~KACnD~~,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAgB;~~IACjF~~,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;~~IAChF~~,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;KAC9C;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;SAAM;QACL,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;IAED,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n label?: string;\n description?: string;\n constraint?: string;\n error?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string \| undefined {\n if (!prop) {\n return undefined;\n }\n\n return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n formFieldId: string,\n label?: React.ReactNode,\n description?: React.ReactNode,\n constraintText?: React.ReactNode,\n errorText?: React.ReactNode\n) {\n const ids: FormFieldIds = {\n label: makeSlotId(label, formFieldId, 'label'),\n description: makeSlotId(description, formFieldId, 'description'),\n constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n error: makeSlotId(errorText, formFieldId, 'error'),\n };\n\n return ids;\n}\n\nexport function getAriaDescribedBy({ error, description, constraint }: FormFieldIds) {\n const describedByAttributes = [error, description, constraint].filter(e => !!e);\n const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n let columns: Array<{ colspan: GridProps.BreakpointMapping \| number }>;\n\n if (stretch) {\n columns = [{ colspan: 12 }, { colspan: 12 }];\n } else if (isRefresh) {\n columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n } else {\n columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n }\n\n if (!secondaryControlPresent) {\n return [columns[0]];\n }\n\n return columns;\n}\n"]}
1	+ {"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAYA,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,SAA2B,EAC3B,WAA6B;IAE7B,MAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;QAClD,OAAO,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC;KACzD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAgB;IAC1F,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzF,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;KAC9C;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;SAAM;QACL,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;KACtF;IAED,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n label?: string;\n description?: string;\n constraint?: string;\n error?: string;\n warning?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string \| undefined {\n if (!prop) {\n return undefined;\n }\n\n return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n formFieldId: string,\n label?: React.ReactNode,\n description?: React.ReactNode,\n constraintText?: React.ReactNode,\n errorText?: React.ReactNode,\n warningText?: React.ReactNode\n) {\n const ids: FormFieldIds = {\n label: makeSlotId(label, formFieldId, 'label'),\n description: makeSlotId(description, formFieldId, 'description'),\n constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n error: makeSlotId(errorText, formFieldId, 'error'),\n warning: makeSlotId(warningText, formFieldId, 'warning'),\n };\n\n return ids;\n}\n\nexport function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds) {\n const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);\n const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n let columns: Array<{ colspan: GridProps.BreakpointMapping \| number }>;\n\n if (stretch) {\n columns = [{ colspan: 12 }, { colspan: 12 }];\n } else if (isRefresh) {\n columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n } else {\n columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n }\n\n if (!secondaryControlPresent) {\n return [columns[0]];\n }\n\n return columns;\n}\n"]}

package/lib/internal/template/input/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,~~mFAuFV~~,CAAC;AAGF,eAAe,KAAK,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAyFV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/lib/internal/template/input/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ import styles from './styles.css.js';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 const Input = React.forwardRef((_a, ref) => {
-    var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, controlId, clearAriaLabel } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "controlId", "clearAriaLabel"]);
+    var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, warning, controlId, clearAriaLabel } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "warning", "controlId", "clearAriaLabel"]);
     const baseComponentProps = useBaseComponent('Input', {
         props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },
     });
@@ -47,6 +47,7 @@ const Input = React.forwardRef((_a, ref) => {
         ariaDescribedby,
         ariaLabelledby,
         invalid,
+        warning,
         controlId,
         clearAriaLabel }), { className: clsx(styles.root, baseProps.className), __inheritFormFieldProps: true })));
 });

package/lib/internal/template/input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,~~EA0Ba~~,EACb,GAAwB,EACxB,EAAE;~~QA5BF~~,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,SAAS,EACT,cAAc,OAEH,EADR,IAAI,~~cAzBT~~,~~kUA0BC~~,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,SAAS;QACT,cAAc,OAEhB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,IAC7B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalInput from './internal';\nimport { InputProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n controlId,\n clearAriaLabel,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n controlId,\n clearAriaLabel,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EA2Ba,EACb,GAAwB,EACxB,EAAE;QA7BF,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,OAEH,EADR,IAAI,cA1BT,6UA2BC,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,OAAO;QACP,SAAS;QACT,cAAc,OAEhB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,IAC7B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalInput from './internal';\nimport { InputProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}