@npm_leadtech/legal-lib-components 7.106.17 → 7.106.32

package/dist/css/styles.css

@@ -1039,9 +1039,6 @@ html[data-theme=primarygreen] .e-button.--primary-3 {
   color: var(--neutral-neutral-1);
   pointer-events: none;
 }
-.e-button.--processing {
-  pointer-events: none;
-}
 .e-button.--error {
   border-color: var(--error-main);
   color: var(--error-main);

package/dist/src/components/atoms/Button/Button.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Spinner } from '../Spinner';
-const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, isProcessing = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
+const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink = false, noLinkNoFunc = false, onClick = undefined, functionParameters, color = 'primary', error, disabled = false, fluid, givenClass, children, size = undefined, isExternal = false, centered = false, gtmTag = undefined, hasNoFollow = false, target = '_self' }) => {
     const sizes = {
         S: 'button--small',
         M: 'button--medium'
@@ -25,14 +24,11 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
         '--styleless': color === 'styleless',
         '--transparent': color === 'transparent',
         '--disabled': disabled,
-        '--processing': isProcessing,
         'button--center': centered,
         '--error': error,
         'e-button--fluid': fluid
     });
     const onButtonClick = () => {
-        if (isProcessing)
-            return;
         if (onClick !== undefined)
             onClick(functionParameters);
         if (gtmTag !== undefined) {
@@ -44,25 +40,16 @@ const Button = ({ label, dataQa, labelMobile, link, LinkComponent = null, noLink
             });
         }
     };
-    const onAnchorClick = (event) => {
-        if (isProcessing) {
-            event?.preventDefault();
-            return;
-        }
-        onButtonClick();
-    };
-    const ariaProcessing = isProcessing || undefined;
-    const labelContent = labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }));
-    const buttonContent = (_jsxs(_Fragment, { children: [isProcessing ? _jsx(Spinner, {}) : null, children && label === '' ? (children) : (_jsxs(_Fragment, { children: [children ?? null, labelContent] }))] }));
+    const buttonContent = (_jsxs(_Fragment, { children: [children ?? null, labelMobile !== undefined ? (_jsxs(_Fragment, { children: [_jsx("label", { className: 'e-button-labelMobile', children: labelMobile }), _jsx("label", { className: 'e-button-labelDesktop', children: label })] })) : (_jsx("label", { children: label }))] }));
     if (isExternal || (!LinkComponent && link)) {
-        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
+        return (_jsx("a", { className: `e-button ${classnames}`, href: link ?? '', onClick: onButtonClick, "data-qa": dataQa, rel: hasNoFollow ? 'nofollow' : '', target: target, children: children && label === '' ? children : buttonContent }));
     }
     if (noLink) {
-        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
+        return (_jsx("button", { className: `e-button --noLink ${classnames}`, "data-qa": dataQa, onClick: onButtonClick, children: children && label === '' ? children : buttonContent }));
     }
     if (noLinkNoFunc) {
-        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, disabled: isProcessing, "aria-busy": ariaProcessing, children: buttonContent }));
+        return (_jsx("button", { className: `e-button --noLinkNoFunc ${classnames}`, "data-qa": dataQa, children: children && label === '' ? children : buttonContent }));
     }
-    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onAnchorClick, "data-qa": dataQa, tabIndex: isProcessing ? -1 : undefined, "aria-busy": ariaProcessing, "aria-disabled": ariaProcessing, children: buttonContent }));
+    return (_jsx(LinkComponent, { className: `e-button ${classnames}`, to: link ?? '', onClick: onButtonClick, "data-qa": dataQa, children: buttonContent }));
 };
 export default Button;

package/dist/src/components/atoms/Button/Button.scss

@@ -222,10 +222,6 @@ html[data-theme='primarygreen'] {
     pointer-events: none;
   }
 
-  &.--processing {
-    pointer-events: none;
-  }
-
   &.--error {
     border-color: var(--error-main);
     color: var(--error-main);

package/dist/src/components/atoms/Button/Button.tsx

@@ -2,7 +2,6 @@
 import React, { type FC } from 'react'
 import classNames from 'classnames'
 
-import { Spinner } from '../Spinner'
 import { type ButtonProps } from './ButtonProps.types'
 
 const Button: FC<ButtonProps> = ({
@@ -18,7 +17,6 @@ const Button: FC<ButtonProps> = ({
   color = 'primary',
   error,
   disabled = false,
-  isProcessing = false,
   fluid,
   givenClass,
   children,
@@ -54,14 +52,12 @@ const Button: FC<ButtonProps> = ({
     '--styleless': color === 'styleless',
     '--transparent': color === 'transparent',
     '--disabled': disabled,
-    '--processing': isProcessing,
     'button--center': centered,
     '--error': error,
     'e-button--fluid': fluid
   })
 
   const onButtonClick = (): void => {
-    if (isProcessing) return
     if (onClick !== undefined) onClick(functionParameters)
     if (gtmTag !== undefined) {
       if (typeof window !== 'undefined') {
@@ -73,36 +69,16 @@ const Button: FC<ButtonProps> = ({
     }
   }
 
-  const onAnchorClick = (event?: React.MouseEvent<HTMLAnchorElement>): void => {
-    if (isProcessing) {
-      event?.preventDefault()
-      return
-    }
-    onButtonClick()
-  }
-
-  const ariaProcessing = isProcessing || undefined
-
-  const labelContent =
-    labelMobile !== undefined ? (
-      <>
-        <label className='e-button-labelMobile'>{labelMobile}</label>
-        <label className='e-button-labelDesktop'>{label}</label>
-      </>
-    ) : (
-      <label>{label}</label>
-    )
-
   const buttonContent = (
     <>
-      {isProcessing ? <Spinner /> : null}
-      {children && label === '' ? (
-        children
-      ) : (
+      {children ?? null}
+      {labelMobile !== undefined ? (
         <>
-          {children ?? null}
-          {labelContent}
+          <label className='e-button-labelMobile'>{labelMobile}</label>
+          <label className='e-button-labelDesktop'>{label}</label>
         </>
+      ) : (
+        <label>{label}</label>
       )}
     </>
   )
@@ -112,56 +88,34 @@ const Button: FC<ButtonProps> = ({
       <a
         className={`e-button ${classnames}`}
         href={link ?? ''}
-        onClick={onAnchorClick}
+        onClick={onButtonClick}
         data-qa={dataQa}
         rel={hasNoFollow ? 'nofollow' : ''}
         target={target}
-        tabIndex={isProcessing ? -1 : undefined}
-        aria-busy={ariaProcessing}
-        aria-disabled={ariaProcessing}
       >
-        {buttonContent}
+        {children && label === '' ? children : buttonContent}
       </a>
     )
   }
 
   if (noLink) {
     return (
-      <button
-        className={`e-button --noLink ${classnames}`}
-        data-qa={dataQa}
-        onClick={onButtonClick}
-        disabled={isProcessing}
-        aria-busy={ariaProcessing}
-      >
-        {buttonContent}
+      <button className={`e-button --noLink ${classnames}`} data-qa={dataQa} onClick={onButtonClick}>
+        {children && label === '' ? children : buttonContent}
       </button>
     )
   }
 
   if (noLinkNoFunc) {
     return (
-      <button
-        className={`e-button --noLinkNoFunc ${classnames}`}
-        data-qa={dataQa}
-        disabled={isProcessing}
-        aria-busy={ariaProcessing}
-      >
-        {buttonContent}
+      <button className={`e-button --noLinkNoFunc ${classnames}`} data-qa={dataQa}>
+        {children && label === '' ? children : buttonContent}
       </button>
     )
   }
 
   return (
-    <LinkComponent
-      className={`e-button ${classnames}`}
-      to={link ?? ''}
-      onClick={onAnchorClick}
-      data-qa={dataQa}
-      tabIndex={isProcessing ? -1 : undefined}
-      aria-busy={ariaProcessing}
-      aria-disabled={ariaProcessing}
-    >
+    <LinkComponent className={`e-button ${classnames}`} to={link ?? ''} onClick={onButtonClick} data-qa={dataQa}>
       {buttonContent}
     </LinkComponent>
   )

package/dist/src/components/atoms/Button/ButtonProps.types.d.ts

@@ -12,7 +12,6 @@ export interface ButtonProps {
     color?: Colors;
     error?: boolean;
     disabled?: boolean;
-    isProcessing?: boolean;
     fluid?: boolean;
     givenClass?: string;
     children?: React.ReactNode;

package/dist/src/components/atoms/Button/ButtonProps.types.ts

@@ -30,7 +30,6 @@ export interface ButtonProps {
   color?: Colors
   error?: boolean
   disabled?: boolean
-  isProcessing?: boolean
   fluid?: boolean
   givenClass?: string
   children?: React.ReactNode

package/dist/src/components/atoms/Spinner/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SpinnerStyled } from './Spinner.styled';
 const Spinner = ({ className = '', big = false }) => {
-    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
+    return !big ? (_jsx(SpinnerStyled, { className: `e-spinner ${className}`, width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) })) : (_jsx(SpinnerStyled, { className: `e-spinner big ${className}`, viewBox: '0 0 24 24', fill: 'none', children: _jsx("path", { d: 'M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z', fill: '#6D7275' }) }));
 };
 export default Spinner;

package/dist/src/components/atoms/Spinner/Spinner.tsx

@@ -5,21 +5,14 @@ import { SpinnerStyled } from './Spinner.styled'
 
 const Spinner: FC<SpinnerProps> = ({ className = '', big = false }) => {
   return !big ? (
-    <SpinnerStyled
-      className={`e-spinner ${className}`}
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      aria-hidden='true'
-    >
+    <SpinnerStyled className={`e-spinner ${className}`} width='24' height='24' viewBox='0 0 24 24' fill='none'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'
       />
     </SpinnerStyled>
   ) : (
-    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none' aria-hidden='true'>
+    <SpinnerStyled className={`e-spinner big ${className}`} viewBox='0 0 24 24' fill='none'>
       <path
         d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 11.3864 2.49746 10.8889 3.11111 10.8889C3.72476 10.8889 4.22222 11.3864 4.22222 12C4.22222 16.2955 7.70445 19.7778 12 19.7778C16.2955 19.7778 19.7778 16.2955 19.7778 12C19.7778 7.70445 16.2955 4.22222 12 4.22222C11.3864 4.22222 10.8889 3.72476 10.8889 3.11111C10.8889 2.49746 11.3864 2 12 2Z'
         fill='#6D7275'

package/dist/src/components/molecules/TextInput/Input.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type EnterKeyHint } from './TextInputProps.types';
 interface InputProps {
     name: string;
     placeholder: string;
@@ -15,6 +16,7 @@ interface InputProps {
     onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     country: string;
     currencySymbol?: string;
+    enterKeyHint?: EnterKeyHint;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/components/molecules/TextInput/Input.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg';
 import eyeIcon from '../../../../images/svg/eye-24-px.svg';
 import percent from '../../../../images/svg/percent.svg';
-export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currencySymbol }, ref) => {
+export const Input = React.forwardRef(({ value, name, placeholder, className, onChange, onClick, onBlur, onKeyDown, onKeyUp, disabled, type = 'text', maxLength, country, prefix, currencySymbol, enterKeyHint }, ref) => {
     const isShortInput = Boolean(maxLength && maxLength <= 5);
     const [hidden, setHidden] = useState(true);
     const showPassword = () => {
@@ -24,7 +24,7 @@ export const Input = React.forwardRef(({ value, name, placeholder, className, on
     else if (isPercent) {
         finalClassName += ' has-percent-suffix';
     }
-    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: `${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
+    return (_jsxs(_Fragment, { children: [isCurrency && !!prefix && otherCurrency && currencySymbol && (_jsx("div", { className: 'input-icon-currency-prefix', children: _jsx("span", { children: currencySymbol }) })), _jsx("input", { type: !hidden && type === 'password' ? 'text' : type, name: name, id: name, className: `${finalClassName} ${isShortInput ? 'e-text-input__short' : ''}`, maxLength: maxLength, placeholder: placeholder, onChange: onChange, onClick: onClick, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onBlur, value: value, "data-qa": name, disabled: disabled, enterKeyHint: enterKeyHint, ref: ref }), type === 'password' && (_jsx("button", { type: 'button', className: 'input-icon-password-button', onClick: showPassword, onKeyDown: (e) => {
                     if (e.key === 'Enter')
                         showPassword();
                 }, children: _jsx("img", { src: hidden ? eyeIcon : eyeCloseIcon, alt: '' }) })), isCurrency

package/dist/src/components/molecules/TextInput/Input.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import eyeCloseIcon from '../../../../images/svg/eye-close.svg'
 import eyeIcon from '../../../../images/svg/eye-24-px.svg'
 import percent from '../../../../images/svg/percent.svg'
+import { type EnterKeyHint } from './TextInputProps.types'
 
 interface InputProps {
   name: string
@@ -20,6 +21,7 @@ interface InputProps {
   onKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => void
   country: string
   currencySymbol?: string
+  enterKeyHint?: EnterKeyHint
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -39,7 +41,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       maxLength,
       country,
       prefix,
-      currencySymbol
+      currencySymbol,
+      enterKeyHint
     }: InputProps,
     ref
   ) => {
@@ -87,6 +90,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           value={value}
           data-qa={name}
           disabled={disabled}
+          enterKeyHint={enterKeyHint}
           ref={ref}
         />
         {type === 'password' && (

package/dist/src/components/molecules/TextInput/TextInput.js

@@ -6,7 +6,7 @@ import { Input } from './Input';
 import { TextInputLabel } from './TextInputLabel';
 import { TextInputMessage } from './TextInputMessage';
 import { TextInputTooltip } from './TextInputTooltip';
-const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country, currencySymbol }, ref) => {
+const TextInput = React.forwardRef(({ label, value, validate = true, isValidGroup = true, format = undefined, name, placeholder, onChange, onClick, onBlur, onKeyDown, onKeyUp, prefix = '', disabled, type = 'text', maxLength, errorMessage = '', notes, dialogMenuTip, tooltip = '', givenClass = '', children, country, currencySymbol, enterKeyHint }, ref) => {
     const classnames = classNames('e-text', {
         [givenClass]: givenClass,
         'e-text--is-invalid': !validate,
@@ -24,9 +24,9 @@ const TextInput = React.forwardRef(({ label, value, validate = true, isValidGrou
     };
     const renderInput = () => {
         if (Boolean(format) && type !== 'number' && type !== 'tel') {
-            return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', onChange: onChange, onClick: onClick, value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur }));
+            return (_jsx(NumericFormat, { name: name, id: name, placeholder: placeholder, className: 'e-text-input', onChange: onChange, onClick: onClick, value: value, "data-qa": name, disabled: disabled, maxLength: maxLength, onBlur: onBlur, enterKeyHint: enterKeyHint }));
         }
-        return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country, currencySymbol: currencySymbol }));
+        return (_jsx(Input, { name: name ?? '', type: type, prefix: prefix, placeholder: placeholder ?? '', className: 'e-text-input', onChange: handleChange, onClick: onClick ?? (() => { }), value: value, "data-qa": name, disabled: disabled ?? false, maxLength: maxLength, onBlur: onBlur ?? (() => { }), ref: ref, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, country: country, currencySymbol: currencySymbol, enterKeyHint: enterKeyHint }));
     };
     return (_jsxs("div", { className: classnames, children: [Boolean(children) && _jsx("div", { className: 'e-text__children', children: children }), _jsx(TextInputTooltip, { tooltip: tooltip }), _jsx(TextInputMessage, { errorMessage: errorMessage, validate: validate }), renderInput(), _jsx(TextInputLabel, { label: label, htmlFor: name, notes: notes, dialogMenuTip: dialogMenuTip })] }));
 });

package/dist/src/components/molecules/TextInput/TextInput.tsx

@@ -34,7 +34,8 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       givenClass = '',
       children,
       country,
-      currencySymbol
+      currencySymbol,
+      enterKeyHint
     }: TextInputProps,
     ref
   ) => {
@@ -72,6 +73,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             disabled={disabled}
             maxLength={maxLength}
             onBlur={onBlur}
+            enterKeyHint={enterKeyHint}
           />
         )
       }
@@ -95,6 +97,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           onKeyUp={handleKeyUp}
           country={country}
           currencySymbol={currencySymbol}
+          enterKeyHint={enterKeyHint}
         />
       )
     }

package/dist/src/components/molecules/TextInput/TextInputProps.types.d.ts

@@ -1,3 +1,4 @@
+export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export interface TextInputProps {
     label?: string;
     name?: string;
@@ -24,4 +25,5 @@ export interface TextInputProps {
     children?: React.ReactNode;
     country: string;
     currencySymbol?: string;
+    enterKeyHint?: EnterKeyHint;
 }

package/dist/src/components/molecules/TextInput/TextInputProps.types.ts

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
+
 export interface TextInputProps {
   label?: string
   name?: string
@@ -25,4 +27,5 @@ export interface TextInputProps {
   children?: React.ReactNode
   country: string
   currencySymbol?: string
+  enterKeyHint?: EnterKeyHint
 }

package/dist/src/components/molecules/TextInput/stories/TextInput.stories.tsx

@@ -189,3 +189,14 @@ export const SmallMaxLength: Story = {
     maxLength: 5
   }
 }
+
+export const WithEnterKeyHint: Story = {
+  args: {
+    value: '',
+    name: 'first_name',
+    placeholder: 'First name',
+    label: 'First name',
+    type: 'text',
+    enterKeyHint: 'next'
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "7.106.17",
+  "version": "7.106.32",
   "license": "ISC",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",