@cloudscape-design/components-themeable 3.0.639 → 3.0.640

package/lib/internal/template/input/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AA8JD,wBAA+C"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AAiKD,wBAA+C"}

package/lib/internal/template/input/internal.js

@@ -28,7 +28,9 @@ function InternalInput(_a, ref) {
     __rightIcon = __rightIcon !== null && __rightIcon !== void 0 ? __rightIcon : searchProps.__rightIcon;
     __onRightIconClick = __onRightIconClick !== null && __onRightIconClick !== void 0 ? __onRightIconClick : searchProps.__onRightIconClick;
     const formFieldContext = useFormFieldContext(rest);
-    const { ariaLabelledby, ariaDescribedby, controlId, invalid } = __inheritFormFieldProps ? formFieldContext : rest;
+    const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps
+        ? formFieldContext
+        : rest;
     const attributes = Object.assign({ 'aria-label': ariaLabel, 
         // aria-labelledby has precedence over aria-label in accessible name calculation.
         // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.
@@ -38,6 +40,7 @@ function InternalInput(_a, ref) {
         autoFocus, id: controlId, className: clsx(styles.input, type && styles[`input-type-${type}`], __rightIcon && styles['input-has-icon-right'], __leftIcon && styles['input-has-icon-left'], __noBorderRadius && styles['input-has-no-border-radius'], {
             [styles['input-readonly']]: readOnly,
             [styles['input-invalid']]: invalid,
+            [styles['input-warning']]: warning && !invalid,
         }), autoComplete: convertAutoComplete(autoComplete), disabled,
         readOnly,
         type,

package/lib/internal/template/input/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/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, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport InternalButton from '../button/internal';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../i18n/context';\n\nexport interface InternalInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    Omit<InputProps, 'type'>,\n    InputAutoCorrect,\n    FormFieldValidationControlProps,\n    InternalBaseComponentProps {\n  type?: InputProps['type'] | 'visualSearch';\n  __leftIcon?: IconProps['name'];\n  __leftIconVariant?: IconProps['variant'];\n  __onLeftIconClick?: () => void;\n\n  __rightIcon?: IconProps['name'];\n  __onRightIconClick?: () => void;\n\n  __nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;\n  __noBorderRadius?: boolean;\n\n  __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n  __inheritFormFieldProps?: boolean;\n}\n\nfunction InternalInput(\n  {\n    type = 'text',\n    step,\n    inputMode,\n    autoComplete = true,\n    ariaLabel,\n    clearAriaLabel: clearAriaLabelOverride,\n    name,\n    value,\n    placeholder,\n    autoFocus,\n    disabled,\n    readOnly,\n    disableBrowserAutocorrect,\n    spellcheck,\n    __noBorderRadius,\n\n    __leftIcon,\n    __leftIconVariant = 'subtle',\n    __onLeftIconClick,\n\n    ariaRequired,\n\n    __rightIcon,\n    __onRightIconClick,\n\n    onKeyDown,\n    onKeyUp,\n    onChange,\n    __onDelayedInput,\n    __onBlurWithDetail,\n    onBlur,\n    onFocus,\n    __nativeAttributes,\n    __internalRootRef,\n    __inheritFormFieldProps,\n    ...rest\n  }: InternalInputProps,\n  ref: Ref<HTMLInputElement>\n) {\n  const baseProps = getBaseProps(rest);\n  const i18n = useInternalI18n('input');\n  const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n  const handleChange = (value: string) => {\n    fireDelayedInput(value);\n    fireNonCancelableEvent(onChange, { value });\n  };\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n  __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n  __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n  __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n  const formFieldContext = useFormFieldContext(rest);\n  const { ariaLabelledby, ariaDescribedby, controlId, invalid } = __inheritFormFieldProps ? formFieldContext : rest;\n\n  const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n    'aria-label': ariaLabel,\n    // aria-labelledby has precedence over aria-label in accessible name calculation.\n    // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n    // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n    'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    name,\n    placeholder,\n    autoFocus,\n    id: controlId,\n    className: clsx(\n      styles.input,\n      type && styles[`input-type-${type}`],\n      __rightIcon && styles['input-has-icon-right'],\n      __leftIcon && styles['input-has-icon-left'],\n      __noBorderRadius && styles['input-has-no-border-radius'],\n      {\n        [styles['input-readonly']]: readOnly,\n        [styles['input-invalid']]: invalid,\n      }\n    ),\n    autoComplete: convertAutoComplete(autoComplete),\n    disabled,\n    readOnly,\n    type,\n    step,\n    inputMode,\n    spellCheck: spellcheck,\n    onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n    onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n    // We set a default value on the component in order to force it into the controlled mode.\n    value: value ?? '',\n    onChange: onChange && (event => handleChange(event.target.value)),\n    onBlur: e => {\n      onBlur && fireNonCancelableEvent(onBlur);\n      __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n    },\n    onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n    ...__nativeAttributes,\n  };\n\n  if (type === 'number') {\n    // Chrome and Safari have a weird built-in behavior of letting focused\n    // number inputs be controlled by scrolling on them. However, they don't\n    // lock the browser's scroll, so it's very easy to accidentally increment\n    // the input while scrolling down the page.\n    attributes.onWheel = event => event.currentTarget.blur();\n  }\n\n  if (disableBrowserAutocorrect) {\n    attributes.autoCorrect = 'off';\n    attributes.autoCapitalize = 'off';\n  }\n\n  // ensure aria properties are string literal \"true\"\n  if (ariaRequired) {\n    attributes['aria-required'] = 'true';\n  }\n  if (invalid) {\n    attributes['aria-invalid'] = 'true';\n  }\n\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  // type = \"visualSearch\" renders a type=\"text' input\n  if (attributes.type === 'visualSearch') {\n    attributes.type = 'text';\n  }\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n      {__leftIcon && (\n        <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n          <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n        </span>\n      )}\n      <input ref={mergedRef} {...attributes} />\n      {__rightIcon && (\n        <span className={styles['input-icon-right']}>\n          <InternalButton\n            // Used for test utils\n            // eslint-disable-next-line react/forbid-component-props\n            className={styles['input-button-right']}\n            variant=\"inline-icon\"\n            formAction=\"none\"\n            iconName={__rightIcon}\n            onClick={__onRightIconClick}\n            ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n            disabled={disabled}\n          />\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/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, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport InternalButton from '../button/internal';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../i18n/context';\n\nexport interface InternalInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    Omit<InputProps, 'type'>,\n    InputAutoCorrect,\n    FormFieldValidationControlProps,\n    InternalBaseComponentProps {\n  type?: InputProps['type'] | 'visualSearch';\n  __leftIcon?: IconProps['name'];\n  __leftIconVariant?: IconProps['variant'];\n  __onLeftIconClick?: () => void;\n\n  __rightIcon?: IconProps['name'];\n  __onRightIconClick?: () => void;\n\n  __nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;\n  __noBorderRadius?: boolean;\n\n  __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n  __inheritFormFieldProps?: boolean;\n}\n\nfunction InternalInput(\n  {\n    type = 'text',\n    step,\n    inputMode,\n    autoComplete = true,\n    ariaLabel,\n    clearAriaLabel: clearAriaLabelOverride,\n    name,\n    value,\n    placeholder,\n    autoFocus,\n    disabled,\n    readOnly,\n    disableBrowserAutocorrect,\n    spellcheck,\n    __noBorderRadius,\n\n    __leftIcon,\n    __leftIconVariant = 'subtle',\n    __onLeftIconClick,\n\n    ariaRequired,\n\n    __rightIcon,\n    __onRightIconClick,\n\n    onKeyDown,\n    onKeyUp,\n    onChange,\n    __onDelayedInput,\n    __onBlurWithDetail,\n    onBlur,\n    onFocus,\n    __nativeAttributes,\n    __internalRootRef,\n    __inheritFormFieldProps,\n    ...rest\n  }: InternalInputProps,\n  ref: Ref<HTMLInputElement>\n) {\n  const baseProps = getBaseProps(rest);\n  const i18n = useInternalI18n('input');\n  const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n  const handleChange = (value: string) => {\n    fireDelayedInput(value);\n    fireNonCancelableEvent(onChange, { value });\n  };\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n  __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n  __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n  __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n  const formFieldContext = useFormFieldContext(rest);\n  const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n    ? formFieldContext\n    : rest;\n\n  const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n    'aria-label': ariaLabel,\n    // aria-labelledby has precedence over aria-label in accessible name calculation.\n    // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n    // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n    'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    name,\n    placeholder,\n    autoFocus,\n    id: controlId,\n    className: clsx(\n      styles.input,\n      type && styles[`input-type-${type}`],\n      __rightIcon && styles['input-has-icon-right'],\n      __leftIcon && styles['input-has-icon-left'],\n      __noBorderRadius && styles['input-has-no-border-radius'],\n      {\n        [styles['input-readonly']]: readOnly,\n        [styles['input-invalid']]: invalid,\n        [styles['input-warning']]: warning && !invalid,\n      }\n    ),\n    autoComplete: convertAutoComplete(autoComplete),\n    disabled,\n    readOnly,\n    type,\n    step,\n    inputMode,\n    spellCheck: spellcheck,\n    onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n    onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n    // We set a default value on the component in order to force it into the controlled mode.\n    value: value ?? '',\n    onChange: onChange && (event => handleChange(event.target.value)),\n    onBlur: e => {\n      onBlur && fireNonCancelableEvent(onBlur);\n      __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n    },\n    onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n    ...__nativeAttributes,\n  };\n\n  if (type === 'number') {\n    // Chrome and Safari have a weird built-in behavior of letting focused\n    // number inputs be controlled by scrolling on them. However, they don't\n    // lock the browser's scroll, so it's very easy to accidentally increment\n    // the input while scrolling down the page.\n    attributes.onWheel = event => event.currentTarget.blur();\n  }\n\n  if (disableBrowserAutocorrect) {\n    attributes.autoCorrect = 'off';\n    attributes.autoCapitalize = 'off';\n  }\n\n  // ensure aria properties are string literal \"true\"\n  if (ariaRequired) {\n    attributes['aria-required'] = 'true';\n  }\n  if (invalid) {\n    attributes['aria-invalid'] = 'true';\n  }\n\n  const mergedRef = useMergeRefs(ref, inputRef);\n\n  // type = \"visualSearch\" renders a type=\"text' input\n  if (attributes.type === 'visualSearch') {\n    attributes.type = 'text';\n  }\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n      {__leftIcon && (\n        <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n          <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n        </span>\n      )}\n      <input ref={mergedRef} {...attributes} />\n      {__rightIcon && (\n        <span className={styles['input-icon-right']}>\n          <InternalButton\n            // Used for test utils\n            // eslint-disable-next-line react/forbid-component-props\n            className={styles['input-button-right']}\n            variant=\"inline-icon\"\n            formAction=\"none\"\n            iconName={__rightIcon}\n            onClick={__onRightIconClick}\n            ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n            disabled={disabled}\n          />\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}

package/lib/internal/template/input/styles.css.js

@@ -1,17 +1,18 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_2rhyz_1p4ga_99",
-  "input": "awsui_input_2rhyz_1p4ga_103",
-  "input-readonly": "awsui_input-readonly_2rhyz_1p4ga_153",
-  "input-invalid": "awsui_input-invalid_2rhyz_1p4ga_220",
-  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1p4ga_231",
-  "input-type-search": "awsui_input-type-search_2rhyz_1p4ga_236",
-  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1p4ga_252",
-  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1p4ga_255",
-  "input-container": "awsui_input-container_2rhyz_1p4ga_262",
-  "input-icon-left": "awsui_input-icon-left_2rhyz_1p4ga_267",
-  "input-icon-right": "awsui_input-icon-right_2rhyz_1p4ga_274",
-  "input-button-right": "awsui_input-button-right_2rhyz_1p4ga_280"
+  "root": "awsui_root_2rhyz_2m90q_99",
+  "input": "awsui_input_2rhyz_2m90q_103",
+  "input-readonly": "awsui_input-readonly_2rhyz_2m90q_153",
+  "input-invalid": "awsui_input-invalid_2rhyz_2m90q_220",
+  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_2m90q_231",
+  "input-warning": "awsui_input-warning_2rhyz_2m90q_236",
+  "input-type-search": "awsui_input-type-search_2rhyz_2m90q_252",
+  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_2m90q_268",
+  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_2m90q_271",
+  "input-container": "awsui_input-container_2rhyz_2m90q_278",
+  "input-icon-left": "awsui_input-icon-left_2rhyz_2m90q_283",
+  "input-icon-right": "awsui_input-icon-right_2rhyz_2m90q_290",
+  "input-button-right": "awsui_input-button-right_2rhyz_2m90q_296"
 };
   

package/lib/internal/template/input/styles.scoped.css

@@ -96,11 +96,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_root_2rhyz_1p4ga_99:not(#\9) {
+.awsui_root_2rhyz_2m90q_99:not(#\9) {
   /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
 }
 
-.awsui_input_2rhyz_1p4ga_103:not(#\9) {
+.awsui_input_2rhyz_2m90q_103:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -151,36 +151,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--line-height-body-m-2zx78l, 22px);
   block-size: var(--size-vertical-input-ubbp77, 32px);
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-readonly_2rhyz_1p4ga_153:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-readonly_2rhyz_2m90q_153:not(#\9) {
   background-color: var(--color-background-input-default-w7mbz6, #ffffff);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9)::-webkit-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9)::-webkit-input-placeholder {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9)::-ms-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9)::-ms-input-placeholder {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9)::-moz-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9)::-moz-placeholder {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
   opacity: 1;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):-ms-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):-ms-input-placeholder {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):-moz-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):-moz-placeholder {
   color: var(--color-text-input-placeholder-epedqe, #687078);
   font-style: italic;
   opacity: 1;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):focus {
+.awsui_input_2rhyz_2m90q_103:not(#\9):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
@@ -190,7 +190,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-input-hy50dp, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0k725q, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled {
   background-color: var(--color-background-input-disabled-zfoobi, #eaeded);
   border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
   border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
@@ -198,29 +198,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: auto;
   cursor: default;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-webkit-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-webkit-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-ms-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-ms-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-moz-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-moz-placeholder {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
   opacity: 1;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled:-ms-input-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled:-ms-input-placeholder {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):disabled:-moz-placeholder {
+.awsui_input_2rhyz_2m90q_103:not(#\9):disabled:-moz-placeholder {
   color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
   opacity: 1;
 }
-.awsui_input_2rhyz_1p4ga_103:not(#\9):invalid {
+.awsui_input_2rhyz_2m90q_103:not(#\9):invalid {
   box-shadow: none;
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220:not(#\9) {
   color: var(--color-text-status-error-ofc4yr, #d13212);
   border-color: var(--color-text-status-error-ofc4yr, #d13212);
   padding-inline-start: calc(
@@ -228,58 +228,74 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 );
   border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220:not(#\9):focus {
+.awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220:not(#\9):focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220.awsui_input-has-icon-left_2rhyz_1p4ga_231:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
   padding-inline-start: calc(
         var(--space-field-icon-offset-llp3ak, 32px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
       );
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236:not(#\9) {
+  color: var(--color-text-status-warning-azn00c, #906806);
+  border-color: var(--color-text-status-warning-azn00c, #906806);
+  padding-inline-start: calc(
+  var(--space-field-horizontal-cy5q05, 8px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
+);
+  border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
+}
+.awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236:not(#\9):focus {
+  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
+}
+.awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
+  padding-inline-start: calc(
+        var(--space-field-icon-offset-llp3ak, 32px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
+      );
+}
+.awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9) {
   box-sizing: border-box;
   -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-ms-clear {
+.awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-ms-clear {
   display: none;
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-webkit-search-decoration {
+.awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-webkit-search-decoration {
   -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-webkit-search-cancel-button {
+.awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-webkit-search-cancel-button {
   display: none;
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-has-icon-left_2rhyz_1p4ga_231:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
   padding-inline-start: var(--space-field-icon-offset-llp3ak, 32px);
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-has-icon-right_2rhyz_1p4ga_252:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-has-icon-right_2rhyz_2m90q_268:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-llp3ak, 32px);
 }
-.awsui_input_2rhyz_1p4ga_103.awsui_input-has-no-border-radius_2rhyz_1p4ga_255:not(#\9) {
+.awsui_input_2rhyz_2m90q_103.awsui_input-has-no-border-radius_2rhyz_2m90q_271:not(#\9) {
   border-start-start-radius: var(--border-radius-dropdown-cw0ldi, 0px);
   border-start-end-radius: var(--border-radius-dropdown-cw0ldi, 0px);
   border-end-start-radius: var(--border-radius-dropdown-cw0ldi, 0px);
   border-end-end-radius: var(--border-radius-dropdown-cw0ldi, 0px);
 }
 
-.awsui_input-container_2rhyz_1p4ga_262:not(#\9) {
+.awsui_input-container_2rhyz_2m90q_278:not(#\9) {
   display: flex;
   position: relative;
 }
 
-.awsui_input-icon-left_2rhyz_1p4ga_267:not(#\9) {
+.awsui_input-icon-left_2rhyz_2m90q_283:not(#\9) {
   position: absolute;
   pointer-events: none;
   inset-inline-start: var(--space-field-horizontal-cy5q05, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
 }
 
-.awsui_input-icon-right_2rhyz_1p4ga_274:not(#\9) {
+.awsui_input-icon-right_2rhyz_2m90q_290:not(#\9) {
   position: absolute;
   inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
   inset-inline-end: calc(var(--space-field-horizontal-cy5q05, 8px) - var(--space-xxs-9rrxti, 4px));
 }
 
-.awsui_input-button-right_2rhyz_1p4ga_280:not(#\9) {
+.awsui_input-button-right_2rhyz_2m90q_296:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/input/styles.selectors.js

@@ -2,17 +2,18 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_2rhyz_1p4ga_99",
-  "input": "awsui_input_2rhyz_1p4ga_103",
-  "input-readonly": "awsui_input-readonly_2rhyz_1p4ga_153",
-  "input-invalid": "awsui_input-invalid_2rhyz_1p4ga_220",
-  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1p4ga_231",
-  "input-type-search": "awsui_input-type-search_2rhyz_1p4ga_236",
-  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1p4ga_252",
-  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1p4ga_255",
-  "input-container": "awsui_input-container_2rhyz_1p4ga_262",
-  "input-icon-left": "awsui_input-icon-left_2rhyz_1p4ga_267",
-  "input-icon-right": "awsui_input-icon-right_2rhyz_1p4ga_274",
-  "input-button-right": "awsui_input-button-right_2rhyz_1p4ga_280"
+  "root": "awsui_root_2rhyz_2m90q_99",
+  "input": "awsui_input_2rhyz_2m90q_103",
+  "input-readonly": "awsui_input-readonly_2rhyz_2m90q_153",
+  "input-invalid": "awsui_input-invalid_2rhyz_2m90q_220",
+  "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_2m90q_231",
+  "input-warning": "awsui_input-warning_2rhyz_2m90q_236",
+  "input-type-search": "awsui_input-type-search_2rhyz_2m90q_252",
+  "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_2m90q_268",
+  "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_2m90q_271",
+  "input-container": "awsui_input-container_2rhyz_2m90q_278",
+  "input-icon-left": "awsui_input-icon-left_2rhyz_2m90q_283",
+  "input-icon-right": "awsui_input-icon-right_2rhyz_2m90q_290",
+  "input-button-right": "awsui_input-button-right_2rhyz_2m90q_296"
 };
   

package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts

@@ -1,33 +1,33 @@
 import React from 'react';
 import { FunnelStepContextValue, FunnelSubStepContextValue } from '../context/analytics-context';
-import { AnalyticsMetadata, FunnelProps, FunnelStepProps, StepConfiguration } from '../interfaces';
+import { AnalyticsMetadata, FunnelStartProps, FunnelStepProps, StepConfiguration } from '../interfaces';
 export declare const FUNNEL_VERSION = "1.4";
 interface AnalyticsFunnelProps {
     children?: React.ReactNode;
     stepConfiguration?: StepConfiguration[];
     funnelNameSelectors?: string[];
-    funnelType: FunnelProps['funnelType'];
-    optionalStepNumbers: FunnelProps['optionalStepNumbers'];
-    totalFunnelSteps: FunnelProps['totalFunnelSteps'];
-    instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
-    flowType?: AnalyticsMetadata['flowType'];
-    errorContext?: AnalyticsMetadata['errorContext'];
+    funnelType: FunnelStartProps['funnelType'];
+    optionalStepNumbers: FunnelStartProps['optionalStepNumbers'];
+    totalFunnelSteps: FunnelStartProps['totalFunnelSteps'];
+    funnelIdentifier?: AnalyticsMetadata['instanceIdentifier'];
+    funnelFlowType?: AnalyticsMetadata['flowType'];
+    funnelErrorContext?: AnalyticsMetadata['errorContext'];
 }
 export declare const AnalyticsFunnel: (props: AnalyticsFunnelProps) => JSX.Element;
 export declare const CREATION_EDIT_FLOW_DONE_EVENT_NAME = "awsui-creation-edit-flow-done";
 interface AnalyticsFunnelStepProps {
-    instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
-    errorContext?: AnalyticsMetadata['errorContext'];
+    stepIdentifier?: AnalyticsMetadata['instanceIdentifier'];
+    stepErrorContext?: AnalyticsMetadata['errorContext'];
     children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);
     stepNameSelector?: FunnelStepProps['stepNameSelector'];
     stepNumber: FunnelStepProps['stepNumber'];
 }
 export declare const AnalyticsFunnelStep: (props: AnalyticsFunnelStepProps) => JSX.Element;
 interface AnalyticsFunnelSubStepProps {
-    instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
-    errorContext?: AnalyticsMetadata['errorContext'];
+    subStepIdentifier?: AnalyticsMetadata['instanceIdentifier'];
+    subStepErrorContext?: AnalyticsMetadata['errorContext'];
     children?: React.ReactNode | ((props: FunnelSubStepContextValue) => React.ReactNode);
 }
-export declare const AnalyticsFunnelSubStep: ({ children, instanceIdentifier }: AnalyticsFunnelSubStepProps) => JSX.Element;
+export declare const AnalyticsFunnelSubStep: ({ children, subStepIdentifier, subStepErrorContext, }: AnalyticsFunnelSubStepProps) => JSX.Element;
 export {};
 //# sourceMappingURL=analytics-funnel.d.ts.map

package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAavB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,mBAAmB,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACxD,gBAAgB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAkLlF,UAAU,wBAAwB;IAChC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AA4KF,UAAU,2BAA2B;IACnC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,qCAAsC,2BAA2B,gBAkGnG,CAAC"}
+{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAavB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC3C,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAsMlF,UAAU,wBAAwB;IAChC,cAAc,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AAyLF,UAAU,2BAA2B;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,0DAIhC,2BAA2B,gBAmG7B,CAAC"}

package/lib/internal/template/internal/analytics/components/analytics-funnel.js

@@ -35,11 +35,11 @@ const dispatchCreateEditFlowDoneEvent = () => {
         // probably because of cross-origin error, then do not dispatch the event
     }
 };
-const onFunnelCancelled = ({ funnelInteractionId }) => {
-    FunnelMetrics.funnelCancelled({ funnelInteractionId });
+const onFunnelCancelled = ({ funnelInteractionId, funnelIdentifier, }) => {
+    FunnelMetrics.funnelCancelled({ funnelInteractionId, funnelIdentifier });
 };
-const onFunnelComplete = ({ funnelInteractionId }) => {
-    FunnelMetrics.funnelComplete({ funnelInteractionId });
+const onFunnelComplete = ({ funnelInteractionId, funnelIdentifier, }) => {
+    FunnelMetrics.funnelComplete({ funnelInteractionId, funnelIdentifier });
     dispatchCreateEditFlowDoneEvent();
 };
 function evaluateSelectors(selectors, defaultSelector) {
@@ -88,17 +88,22 @@ const InnerAnalyticsFunnel = (_a) => {
             // Reset the state, in case the component was re-mounted.
             funnelState.current = 'default';
             const singleStepFlowStepConfiguration = [
-                { number: 1, isOptional: false, name: (_a = getNameFromSelector(funnelNameSelector.current)) !== null && _a !== void 0 ? _a : '' },
+                {
+                    number: 1,
+                    isOptional: false,
+                    name: (_a = getNameFromSelector(funnelNameSelector.current)) !== null && _a !== void 0 ? _a : '',
+                    stepIdentifier: props.funnelIdentifier,
+                },
             ];
             funnelInteractionId = FunnelMetrics.funnelStart({
-                instanceIdentifier: props.instanceIdentifier,
-                flowType: props.flowType,
+                funnelIdentifier: props.funnelIdentifier,
+                flowType: props.funnelFlowType,
                 funnelNameSelector: funnelNameSelector.current,
                 optionalStepNumbers: props.optionalStepNumbers,
                 funnelType: props.funnelType,
                 totalFunnelSteps: props.totalFunnelSteps,
                 componentVersion: PACKAGE_VERSION,
-                theme: isVisualRefresh ? 'vr' : 'classic',
+                componentTheme: isVisualRefresh ? 'vr' : 'classic',
                 funnelVersion: FUNNEL_VERSION,
                 stepConfiguration: stepConfiguration !== null && stepConfiguration !== void 0 ? stepConfiguration : singleStepFlowStepConfiguration,
             });
@@ -115,14 +120,14 @@ const InnerAnalyticsFunnel = (_a) => {
             }
             if (funnelState.current === 'validating') {
                 // Finish the validation phase early.
-                onFunnelComplete({ funnelInteractionId });
+                onFunnelComplete({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
                 funnelState.current = 'complete';
             }
             if (funnelState.current === 'complete') {
-                FunnelMetrics.funnelSuccessful({ funnelInteractionId });
+                FunnelMetrics.funnelSuccessful({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
             }
             else {
-                onFunnelCancelled({ funnelInteractionId });
+                onFunnelCancelled({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
                 funnelState.current = 'cancelled';
             }
         };
@@ -166,6 +171,9 @@ const InnerAnalyticsFunnel = (_a) => {
     const funnelCancel = () => { };
     const funnelContextValue = {
         funnelInteractionId,
+        funnelIdentifier: props.funnelIdentifier,
+        funnelFlowType: props.funnelFlowType,
+        funnelErrorContext: props.funnelErrorContext,
         setFunnelInteractionId,
         funnelType: props.funnelType,
         optionalStepNumbers: props.optionalStepNumbers,
@@ -194,11 +202,13 @@ export const AnalyticsFunnelStep = (props) => {
 function getSubStepConfiguration() {
     const subSteps = Array.from(document.querySelectorAll(getSubStepAllSelector()));
     const subStepConfiguration = subSteps.map((substep, index) => {
-        var _a, _b, _c;
-        const name = (_c = (_b = (_a = substep.querySelector(getSubStepNameSelector())) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+        var _a, _b, _c, _d, _e;
+        const subStepIdentifier = (_b = (_a = substep === null || substep === void 0 ? void 0 : substep.__awsuiMetadata__) === null || _a === void 0 ? void 0 : _a.analytics) === null || _b === void 0 ? void 0 : _b.instanceIdentifier;
+        const name = (_e = (_d = (_c = substep.querySelector(getSubStepNameSelector())) === null || _c === void 0 ? void 0 : _c.innerText) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : '';
         return {
             name,
             number: index + 1,
+            subStepIdentifier,
         };
     });
     return subStepConfiguration;
@@ -238,8 +248,8 @@ function useStepChangeListener(stepNumber, handler) {
     return { onStepChange: stepChangeCallback, subStepConfiguration };
 }
 const InnerAnalyticsFunnelStep = (_a) => {
-    var { children, stepNumber, instanceIdentifier } = _a, rest = __rest(_a, ["children", "stepNumber", "instanceIdentifier"]);
-    const { funnelInteractionId, funnelNameSelector, funnelState, funnelType } = useFunnel();
+    var { children, stepNumber, stepIdentifier, stepErrorContext } = _a, rest = __rest(_a, ["children", "stepNumber", "stepIdentifier", "stepErrorContext"]);
+    const { funnelInteractionId, funnelIdentifier, funnelNameSelector, funnelState, funnelType } = useFunnel();
     const parentStep = useFunnelStep();
     const parentStepExists = parentStep.isInStep;
     const parentStepFunnelInteractionId = parentStep.funnelInteractionId;
@@ -247,16 +257,14 @@ const InnerAnalyticsFunnelStep = (_a) => {
     const subStepCount = useRef(0);
     const stepNameSelector = rest.stepNameSelector || funnelNameSelector;
     const { onStepChange, subStepConfiguration } = useStepChangeListener(stepNumber, subStepConfiguration => {
-        var _a;
         if (!funnelInteractionId) {
             return;
         }
-        const stepName = (_a = getNameFromSelector(stepNameSelector)) !== null && _a !== void 0 ? _a : '';
         FunnelMetrics.funnelStepChange({
-            instanceIdentifier,
+            stepIdentifier,
+            funnelIdentifier,
             funnelInteractionId,
             stepNumber,
-            stepName,
             stepNameSelector,
             subStepAllSelector: getSubStepAllSelector(),
             totalSubSteps: subStepCount.current,
@@ -283,7 +291,8 @@ const InnerAnalyticsFunnelStep = (_a) => {
         const stepName = getNameFromSelector(stepNameSelector);
         if (funnelState.current === 'default') {
             FunnelMetrics.funnelStepStart({
-                instanceIdentifier,
+                stepIdentifier,
+                funnelIdentifier,
                 funnelInteractionId,
                 stepNumber,
                 stepName,
@@ -297,8 +306,9 @@ const InnerAnalyticsFunnelStep = (_a) => {
             // eslint-disable-next-line react-hooks/exhaustive-deps
             if (funnelState.current !== 'cancelled') {
                 FunnelMetrics.funnelStepComplete({
-                    instanceIdentifier,
+                    funnelIdentifier,
                     funnelInteractionId,
+                    stepIdentifier,
                     stepNumber,
                     stepName,
                     stepNameSelector,
@@ -309,7 +319,8 @@ const InnerAnalyticsFunnelStep = (_a) => {
             }
         };
     }, [
-        instanceIdentifier,
+        stepIdentifier,
+        funnelIdentifier,
         funnelInteractionId,
         stepNumber,
         stepNameSelector,
@@ -319,7 +330,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
         parentStepFunnelInteractionId,
     ]);
     const contextValue = {
-        instanceIdentifier,
+        stepIdentifier,
         stepNumber,
         stepNameSelector,
         funnelStepProps,
@@ -328,6 +339,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
         funnelInteractionId,
         onStepChange,
         subStepConfiguration,
+        stepErrorContext,
     };
     /*
       If this step is inside another step which already reports events as part of an active
@@ -337,7 +349,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
     const effectiveContextValue = parentStepExists && parentStepFunnelInteractionId ? parentStep : contextValue;
     return (React.createElement(FunnelStepContext.Provider, { value: effectiveContextValue }, typeof children === 'function' ? children(effectiveContextValue) : children));
 };
-export const AnalyticsFunnelSubStep = ({ children, instanceIdentifier }) => {
+export const AnalyticsFunnelSubStep = ({ children, subStepIdentifier, subStepErrorContext, }) => {
     const subStepId = useUniqueId('substep');
     const subStepSelector = getSubStepSelector(subStepId);
     const subStepNameSelector = getSubStepNameSelector(subStepId);
@@ -349,7 +361,8 @@ export const AnalyticsFunnelSubStep = ({ children, instanceIdentifier }) => {
     const { funnelState, funnelInteractionId } = useFunnel();
     const { stepNumber, stepNameSelector } = useFunnelStep();
     const newContext = {
-        instanceIdentifier,
+        subStepIdentifier,
+        subStepErrorContext,
         subStepSelector,
         subStepNameSelector,
         subStepId,