npm - @hh.ru/magritte-ui-input - Versions diffs - 5.0.15 → 5.0.17 - Mend

@hh.ru/magritte-ui-input 5.0.15 → 5.0.17

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 (15) hide show

package/BaseInput.js +4 -4
package/BaseInput.js.map +1 -1
package/DateTimeInput.js +1 -1
package/Input.js +1 -1
package/NumberInput.js +1 -1
package/PasswordInput.js +1 -1
package/SearchInput.js +1 -1
package/UncontrolledDateTimeInput.js +1 -1
package/UncontrolledInput.js +1 -1
package/UncontrolledNumberInput.js +1 -1
package/UncontrolledPasswordInput.js +1 -1
package/UncontrolledSearchInput.js +1 -1
package/index.css +145 -108
package/index.js +1 -1
package/package.json +5 -5

package/BaseInput.js CHANGED Viewed

@@ -5,15 +5,15 @@ import classnames from 'classnames';
 import { Selection } from '@hh.ru/magritte-common-text-selection';
 import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
-import { FieldHint } from '@hh.ru/magritte-internal-field-hint';
 import { Action } from '@hh.ru/magritte-ui-action';
 import { Counter } from '@hh.ru/magritte-ui-counter';
+import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
 import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { useFocus } from './useFocus.js';
 import { useInputAriaProps } from './useInputAriaProps.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-var styles = {"input":"magritte-input___LVTID_5-0-15","label":"magritte-label___YlOQk_5-0-15","elevated":"magritte-elevated___kPcsM_5-0-15","focused":"magritte-focused___dxrHD_5-0-15","invalid":"magritte-invalid___L5MVa_5-0-15","disabled":"magritte-disabled___0NH6E_5-0-15","position-container":"magritte-position-container___kZnvZ_5-0-15","positionContainer":"magritte-position-container___kZnvZ_5-0-15","field":"magritte-field___9S8Tw_5-0-15","hint":"magritte-hint___EFGK0_5-0-15","additional-value":"magritte-additional-value___9Kyap_5-0-15","additionalValue":"magritte-additional-value___9Kyap_5-0-15","label_elevated":"magritte-label_elevated___PVcpC_5-0-15","labelElevated":"magritte-label_elevated___PVcpC_5-0-15","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_5-0-15","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_5-0-15","icon":"magritte-icon___HEDsQ_5-0-15","focus-visible":"magritte-focus-visible___QvCO1_5-0-15","focusVisible":"magritte-focus-visible___QvCO1_5-0-15","right-container":"magritte-right-container___N0B0o_5-0-15","rightContainer":"magritte-right-container___N0B0o_5-0-15","with-icon":"magritte-with-icon___TPBe2_5-0-15","withIcon":"magritte-with-icon___TPBe2_5-0-15","large":"magritte-large___9frRh_5-0-15","rigging-container":"magritte-rigging-container___Up9Lb_5-0-15","riggingContainer":"magritte-rigging-container___Up9Lb_5-0-15","input__mask":"magritte-input__mask___CHda2_5-0-15","inputMask":"magritte-input__mask___CHda2_5-0-15","value-ghost":"magritte-value-ghost___IXNZj_5-0-15","valueGhost":"magritte-value-ghost___IXNZj_5-0-15","hint-container":"magritte-hint-container___rGsD8_5-0-15","hintContainer":"magritte-hint-container___rGsD8_5-0-15","with-right":"magritte-with-right___NUNiP_5-0-15","withRight":"magritte-with-right___NUNiP_5-0-15","content-container":"magritte-content-container___s-0kX_5-0-15","contentContainer":"magritte-content-container___s-0kX_5-0-15","counter":"magritte-counter___Bld3Q_5-0-15","value-container":"magritte-value-container___6ReT7_5-0-15","valueContainer":"magritte-value-container___6ReT7_5-0-15"};
+var styles = {"input":"magritte-input___LVTID_5-0-17","label":"magritte-label___YlOQk_5-0-17","elevated":"magritte-elevated___kPcsM_5-0-17","focused":"magritte-focused___dxrHD_5-0-17","invalid":"magritte-invalid___L5MVa_5-0-17","disabled":"magritte-disabled___0NH6E_5-0-17","position-container":"magritte-position-container___kZnvZ_5-0-17","positionContainer":"magritte-position-container___kZnvZ_5-0-17","field":"magritte-field___9S8Tw_5-0-17","hint":"magritte-hint___EFGK0_5-0-17","additional-value":"magritte-additional-value___9Kyap_5-0-17","additionalValue":"magritte-additional-value___9Kyap_5-0-17","label_elevated":"magritte-label_elevated___PVcpC_5-0-17","labelElevated":"magritte-label_elevated___PVcpC_5-0-17","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_5-0-17","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_5-0-17","icon":"magritte-icon___HEDsQ_5-0-17","focus-visible":"magritte-focus-visible___QvCO1_5-0-17","focusVisible":"magritte-focus-visible___QvCO1_5-0-17","right-container":"magritte-right-container___N0B0o_5-0-17","rightContainer":"magritte-right-container___N0B0o_5-0-17","with-icon":"magritte-with-icon___TPBe2_5-0-17","withIcon":"magritte-with-icon___TPBe2_5-0-17","large":"magritte-large___9frRh_5-0-17","rigging-container":"magritte-rigging-container___Up9Lb_5-0-17","riggingContainer":"magritte-rigging-container___Up9Lb_5-0-17","input__mask":"magritte-input__mask___CHda2_5-0-17","inputMask":"magritte-input__mask___CHda2_5-0-17","value-ghost":"magritte-value-ghost___IXNZj_5-0-17","valueGhost":"magritte-value-ghost___IXNZj_5-0-17","hint-container":"magritte-hint-container___rGsD8_5-0-17","hintContainer":"magritte-hint-container___rGsD8_5-0-17","with-right":"magritte-with-right___NUNiP_5-0-17","withRight":"magritte-with-right___NUNiP_5-0-17","content-container":"magritte-content-container___s-0kX_5-0-17","contentContainer":"magritte-content-container___s-0kX_5-0-17","counter":"magritte-counter___Bld3Q_5-0-17","value-container":"magritte-value-container___6ReT7_5-0-17","valueContainer":"magritte-value-container___6ReT7_5-0-17"};
 const BaseInputComponent = ({ onChange, onFocus, onBlur, value, placeholder, disabled = false, postfix, size = 'medium', elevatePlaceholder = false, invalid = false, description, errorMessage, formatter, buttonIcon, clearable = false, clearableOnFocus, onButtonClick, buttonDataQa, buttonRef, inputIcon, wrapperRef, counter, fixedPlaceholder, maxLength, hint, showHintAlways = false, ...restProps }, ref) => {
     const wrapperCurrentRef = useRef(null);
@@ -111,12 +111,12 @@ const BaseInputComponent = ({ onChange, onFocus, onBlur, value, placeholder, dis
             [styles.disabled]: isComponentDisabled,
             [styles.large]: size === 'large',
             [styles.elevated]: placeholderCanElevated,
-            [styles.invalid]: !!invalid && !isFocused,
+            [styles.invalid]: !!invalid,
             [styles.withRight]: !!buttonIcon || showClearButton || counter,
             [styles.withIcon]: !!inputIcon,
         }), onFocus: clearableOnFocus ? handleWrapperFocus : undefined, onBlur: clearableOnFocus ? handleWrapperBlur : undefined, children: [jsxs("div", { className: styles.positionContainer, children: [jsxs("div", { className: styles.hintContainer, children: [jsxs("div", { className: styles.contentContainer, children: [!!InputIconComponent && (jsx("div", { className: styles.icon, children: jsx(InputIconComponent, {}) })), jsxs("div", { className: styles.valueContainer, children: [jsx("input", { ...restProps, ...ariaProps, maxLength: maxLength, disabled: isComponentDisabled, suppressHydrationWarning: true, className: styles.field, value: currentValue, onInput: changeHandler, onFocus: focusHandler, onBlur: blurHandler, ref: inputRefCallback }), jsx("div", { className: styles.additionalValue, children: jsxs(Text, { Element: "span", typography: "label-2-regular", children: [jsx("span", { className: styles.valueGhost, children: currentValue }), showFixedPlaceholder && (jsx("span", { className: styles.fixedPlaceholder, children: fixedPlaceholder.slice(value.length) })), showPostfix && (jsxs(Fragment, { children: ['\u00A0', postfix] }))] }) })] }), jsx("div", { className: styles.riggingContainer, children: showLabel && (jsx("label", { className: classnames(styles.label, {
                                                 [styles.labelElevated]: placeholderIsElevated,
-                                            }), id: ariaProps['aria-labelledby'], children: placeholder })) })] }), showHint && (jsx("div", { className: styles.hint, ref: hintWrapperRefCallback, "data-qa": "input-hint", children: jsx(Text, { Element: "span", typography: "label-3-regular", children: jsx("span", { ref: hintRef, children: hint }) }) }))] }), (buttonIcon || showClearButton || counter) && (jsxs("div", { className: styles.rightContainer, children: [(buttonIcon || showClearButton) && (jsx(Action, { "data-qa": buttonQaLabel, mode: "secondary", onMouseDown: (event) => event.preventDefault(), onClick: showClearButton ? clearClickHandler : onButtonClick, icon: showClearButton ? CrossOutlinedSize24 : buttonIcon, disabled: isComponentDisabled, ref: buttonRef })), counter && (jsx("span", { className: styles.counter, children: jsx(Counter, { label: counter }) }))] }))] }), jsx(FieldHint, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, focused: isFocused, invalid: invalid })] }));
+                                            }), id: ariaProps['aria-labelledby'], children: placeholder })) })] }), showHint && (jsx("div", { className: styles.hint, ref: hintWrapperRefCallback, "data-qa": "input-hint", children: jsx(Text, { Element: "span", typography: "label-3-regular", children: jsx("span", { ref: hintRef, children: hint }) }) }))] }), (buttonIcon || showClearButton || counter) && (jsxs("div", { className: styles.rightContainer, children: [(buttonIcon || showClearButton) && (jsx(Action, { "data-qa": buttonQaLabel, mode: "secondary", onMouseDown: (event) => event.preventDefault(), onClick: showClearButton ? clearClickHandler : onButtonClick, icon: showClearButton ? CrossOutlinedSize24 : buttonIcon, disabled: isComponentDisabled, ref: buttonRef })), counter && (jsx("span", { className: styles.counter, children: jsx(Counter, { label: counter }) }))] }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalid })] }));
 };
 const BaseInput = forwardRef(BaseInputComponent);
 BaseInput.displayName = 'BaseInput';

package/BaseInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseInput.js","sources":["../src/BaseInput.tsx"],"sourcesContent":["import {\n InputHTMLAttributes,\n forwardRef,\n ForwardedRef,\n useCallback,\n useId,\n useRef,\n useState,\n useEffect,\n RefCallback,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon/src/iconTypes';\nimport { BaseInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './input.less';\n\nconst BaseInputComponent = (\n {\n onChange,\n onFocus,\n onBlur,\n value,\n placeholder,\n disabled = false,\n postfix,\n size = 'medium',\n elevatePlaceholder = false,\n invalid = false,\n description,\n errorMessage,\n formatter,\n buttonIcon,\n clearable = false,\n clearableOnFocus,\n onButtonClick,\n buttonDataQa,\n buttonRef,\n inputIcon,\n wrapperRef,\n counter,\n fixedPlaceholder,\n maxLength,\n hint,\n showHintAlways = false,\n ...restProps\n }: BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputProps>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const wrapperCurrentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isActionVisible, setActionVisible] = useState(false);\n const inputRefCallback = useMultipleRefs(ref, inputRef);\n const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);\n const descriptionId = useId();\n const labelId = useId();\n const hintRef = useRef<HTMLDivElement>(null);\n const hintMaxWidthRef = useRef<{ width: number; text: string } \| null>(null);\n const change = useCallback(\n (newValue: string) => {\n if (inputRef.current && formatter) {\n const caretPosition = Selection.getCaretPosition(inputRef.current);\n const formatResult = formatter(value, newValue, caretPosition \|\| 0);\n requestAnimationFrame(() => {\n if (inputRef.current) {\n Selection.setCaretPosition(inputRef.current, formatResult.caretPosition);\n }\n });\n onChange(formatResult.outputValue);\n return;\n }\n onChange(newValue);\n },\n [formatter, onChange, value, inputRef]\n );\n\n const clearClickHandler = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n onChange('');\n inputRef.current && inputRef.current.focus();\n onButtonClick?.(event);\n },\n [onChange, inputRef, onButtonClick]\n );\n\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled \|\| !!disabled;\n\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);\n const placeholderCanElevated = size === 'large' && !!elevatePlaceholder && !!placeholder;\n const [isFocusVisible, setFocusVisible] = useState(false);\n const currentValue = formatter?.('', value, 0).formattedValue \|\| value;\n const buttonQaLabel = buttonDataQa \|\| `input-${clearable ? 'clearable-' : ''}button`;\n const ariaProps = useInputAriaProps({\n invalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const handleWrapperFocus = () => {\n setActionVisible(true);\n };\n\n const handleWrapperBlur = () => {\n requestAnimationFrame(() => {\n if (!wrapperCurrentRef.current?.contains(document.activeElement)) {\n setActionVisible(false);\n }\n });\n };\n\n const focusedOrFilled = isFocused \|\| value !== '';\n const placeholderIsElevated = focusedOrFilled && placeholderCanElevated;\n const showPostfix = !!postfix && (placeholderIsElevated \|\| value !== '');\n const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;\n const showLabel = placeholderCanElevated \|\| (value === '' && !showFixedPlaceholder);\n\n const InputIconComponent = inputIcon \|\| null;\n const showClearButton = value.length > 0 && (clearable \|\| (!!clearableOnFocus && isActionVisible));\n const showHint = !!hint && (showHintAlways \|\| value.length > 0);\n\n const hintWrapperRefCallback: RefCallback<HTMLDivElement> = useCallback(\n (element) => {\n if (element && hintRef.current) {\n const text = hintRef.current.innerText;\n if (text.length > 30) {\n let maxWidth;\n if (text !== hintMaxWidthRef.current?.text) {\n const newText = text.slice(0, 30);\n hintRef.current.innerText = newText;\n maxWidth = hintRef.current.offsetWidth;\n hintRef.current.innerText = text;\n hintMaxWidthRef.current = {\n width: maxWidth,\n text,\n };\n } else {\n maxWidth = hintMaxWidthRef.current.width;\n }\n\n element.style.maxWidth = `${maxWidth}px`;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [hint]\n );\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n return (\n <div\n ref={wrapperRefCallback}\n className={classnames(styles.input, {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: isComponentDisabled,\n [styles.large]: size === 'large',\n [styles.elevated]: placeholderCanElevated,\n [styles.invalid]: !!invalid && !isFocused,\n [styles.withRight]: !!buttonIcon \|\| showClearButton \|\| counter,\n [styles.withIcon]: !!inputIcon,\n })}\n onFocus={clearableOnFocus ? handleWrapperFocus : undefined}\n onBlur={clearableOnFocus ? handleWrapperBlur : undefined}\n >\n <div className={styles.positionContainer}>\n <div className={styles.hintContainer}>\n <div className={styles.contentContainer}>\n {!!InputIconComponent && (\n <div className={styles.icon}>\n <InputIconComponent />\n </div>\n )}\n <div className={styles.valueContainer}>\n <input\n {...restProps}\n {...ariaProps}\n maxLength={maxLength}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={styles.field}\n value={currentValue}\n onInput={changeHandler} // maskito требует onInput, (https://maskito.dev/frameworks/react) который работает аналогично onChange\n onFocus={focusHandler}\n onBlur={blurHandler}\n ref={inputRefCallback}\n />\n <div className={styles.additionalValue}>\n <Text Element=\"span\" typography=\"label-2-regular\">\n <span className={styles.valueGhost}>{currentValue}</span>\n {showFixedPlaceholder && (\n <span className={styles.fixedPlaceholder}>\n {fixedPlaceholder.slice(value.length)}\n </span>\n )}\n {showPostfix && (\n <>\n {'\\u00A0'}\n {postfix}\n </>\n )}\n </Text>\n </div>\n </div>\n <div className={styles.riggingContainer}>\n {showLabel && (\n <label\n className={classnames(styles.label, {\n [styles.labelElevated]: placeholderIsElevated,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n )}\n </div>\n </div>\n {showHint && (\n <div className={styles.hint} ref={hintWrapperRefCallback} data-qa=\"input-hint\">\n <Text Element=\"span\" typography=\"label-3-regular\">\n <span ref={hintRef}>{hint}</span>\n </Text>\n </div>\n )}\n </div>\n {(buttonIcon \|\| showClearButton \|\| counter) && (\n <div className={styles.rightContainer}>\n {(buttonIcon \|\| showClearButton) && (\n <Action\n data-qa={buttonQaLabel}\n mode=\"secondary\"\n onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n onClick={showClearButton ? clearClickHandler : (onButtonClick as () => void)}\n icon={\n showClearButton ? CrossOutlinedSize24 : (buttonIcon as IconWrapperComponentSize24)\n }\n disabled={isComponentDisabled}\n ref={buttonRef}\n />\n )}\n {counter && (\n <span className={styles.counter}>\n <Counter label={counter} />\n </span>\n )}\n </div>\n )}\n </div>\n <FieldHint\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n focused={isFocused}\n invalid={invalid}\n />\n </div>\n );\n};\n\nconst BaseInput = forwardRef(BaseInputComponent);\n\nBaseInput.displayName = 'BaseInput';\n\nexport { BaseInput };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"BaseInput.js","sources":["../src/BaseInput.tsx"],"sourcesContent":["import {\n InputHTMLAttributes,\n forwardRef,\n ForwardedRef,\n useCallback,\n useId,\n useRef,\n useState,\n useEffect,\n RefCallback,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Action } from '@hh.ru/magritte-ui-action';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon/src/iconTypes';\nimport { BaseInputProps } from '@hh.ru/magritte-ui-input/types';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './input.less';\n\nconst BaseInputComponent = (\n {\n onChange,\n onFocus,\n onBlur,\n value,\n placeholder,\n disabled = false,\n postfix,\n size = 'medium',\n elevatePlaceholder = false,\n invalid = false,\n description,\n errorMessage,\n formatter,\n buttonIcon,\n clearable = false,\n clearableOnFocus,\n onButtonClick,\n buttonDataQa,\n buttonRef,\n inputIcon,\n wrapperRef,\n counter,\n fixedPlaceholder,\n maxLength,\n hint,\n showHintAlways = false,\n ...restProps\n }: BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputProps>,\n ref: ForwardedRef<HTMLInputElement>\n) => {\n const wrapperCurrentRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isActionVisible, setActionVisible] = useState(false);\n const inputRefCallback = useMultipleRefs(ref, inputRef);\n const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);\n const descriptionId = useId();\n const labelId = useId();\n const hintRef = useRef<HTMLDivElement>(null);\n const hintMaxWidthRef = useRef<{ width: number; text: string } \| null>(null);\n const change = useCallback(\n (newValue: string) => {\n if (inputRef.current && formatter) {\n const caretPosition = Selection.getCaretPosition(inputRef.current);\n const formatResult = formatter(value, newValue, caretPosition \|\| 0);\n requestAnimationFrame(() => {\n if (inputRef.current) {\n Selection.setCaretPosition(inputRef.current, formatResult.caretPosition);\n }\n });\n onChange(formatResult.outputValue);\n return;\n }\n onChange(newValue);\n },\n [formatter, onChange, value, inputRef]\n );\n\n const clearClickHandler = useCallback(\n (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n onChange('');\n inputRef.current && inputRef.current.focus();\n onButtonClick?.(event);\n },\n [onChange, inputRef, onButtonClick]\n );\n\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled \|\| !!disabled;\n\n const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);\n const placeholderCanElevated = size === 'large' && !!elevatePlaceholder && !!placeholder;\n const [isFocusVisible, setFocusVisible] = useState(false);\n const currentValue = formatter?.('', value, 0).formattedValue \|\| value;\n const buttonQaLabel = buttonDataQa \|\| `input-${clearable ? 'clearable-' : ''}button`;\n const ariaProps = useInputAriaProps({\n invalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const handleWrapperFocus = () => {\n setActionVisible(true);\n };\n\n const handleWrapperBlur = () => {\n requestAnimationFrame(() => {\n if (!wrapperCurrentRef.current?.contains(document.activeElement)) {\n setActionVisible(false);\n }\n });\n };\n\n const focusedOrFilled = isFocused \|\| value !== '';\n const placeholderIsElevated = focusedOrFilled && placeholderCanElevated;\n const showPostfix = !!postfix && (placeholderIsElevated \|\| value !== '');\n const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;\n const showLabel = placeholderCanElevated \|\| (value === '' && !showFixedPlaceholder);\n\n const InputIconComponent = inputIcon \|\| null;\n const showClearButton = value.length > 0 && (clearable \|\| (!!clearableOnFocus && isActionVisible));\n const showHint = !!hint && (showHintAlways \|\| value.length > 0);\n\n const hintWrapperRefCallback: RefCallback<HTMLDivElement> = useCallback(\n (element) => {\n if (element && hintRef.current) {\n const text = hintRef.current.innerText;\n if (text.length > 30) {\n let maxWidth;\n if (text !== hintMaxWidthRef.current?.text) {\n const newText = text.slice(0, 30);\n hintRef.current.innerText = newText;\n maxWidth = hintRef.current.offsetWidth;\n hintRef.current.innerText = text;\n hintMaxWidthRef.current = {\n width: maxWidth,\n text,\n };\n } else {\n maxWidth = hintMaxWidthRef.current.width;\n }\n\n element.style.maxWidth = `${maxWidth}px`;\n }\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [hint]\n );\n\n useEffect(() => {\n if (inputRef.current) {\n setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n return (\n <div\n ref={wrapperRefCallback}\n className={classnames(styles.input, {\n [styles.focused]: isFocused,\n [styles.focusVisible]: isFocusVisible,\n [styles.disabled]: isComponentDisabled,\n [styles.large]: size === 'large',\n [styles.elevated]: placeholderCanElevated,\n [styles.invalid]: !!invalid,\n [styles.withRight]: !!buttonIcon \|\| showClearButton \|\| counter,\n [styles.withIcon]: !!inputIcon,\n })}\n onFocus={clearableOnFocus ? handleWrapperFocus : undefined}\n onBlur={clearableOnFocus ? handleWrapperBlur : undefined}\n >\n <div className={styles.positionContainer}>\n <div className={styles.hintContainer}>\n <div className={styles.contentContainer}>\n {!!InputIconComponent && (\n <div className={styles.icon}>\n <InputIconComponent />\n </div>\n )}\n <div className={styles.valueContainer}>\n <input\n {...restProps}\n {...ariaProps}\n maxLength={maxLength}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={styles.field}\n value={currentValue}\n onInput={changeHandler} // maskito требует onInput, (https://maskito.dev/frameworks/react) который работает аналогично onChange\n onFocus={focusHandler}\n onBlur={blurHandler}\n ref={inputRefCallback}\n />\n <div className={styles.additionalValue}>\n <Text Element=\"span\" typography=\"label-2-regular\">\n <span className={styles.valueGhost}>{currentValue}</span>\n {showFixedPlaceholder && (\n <span className={styles.fixedPlaceholder}>\n {fixedPlaceholder.slice(value.length)}\n </span>\n )}\n {showPostfix && (\n <>\n {'\\u00A0'}\n {postfix}\n </>\n )}\n </Text>\n </div>\n </div>\n <div className={styles.riggingContainer}>\n {showLabel && (\n <label\n className={classnames(styles.label, {\n [styles.labelElevated]: placeholderIsElevated,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n )}\n </div>\n </div>\n {showHint && (\n <div className={styles.hint} ref={hintWrapperRefCallback} data-qa=\"input-hint\">\n <Text Element=\"span\" typography=\"label-3-regular\">\n <span ref={hintRef}>{hint}</span>\n </Text>\n </div>\n )}\n </div>\n {(buttonIcon \|\| showClearButton \|\| counter) && (\n <div className={styles.rightContainer}>\n {(buttonIcon \|\| showClearButton) && (\n <Action\n data-qa={buttonQaLabel}\n mode=\"secondary\"\n onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n onClick={showClearButton ? clearClickHandler : (onButtonClick as () => void)}\n icon={\n showClearButton ? CrossOutlinedSize24 : (buttonIcon as IconWrapperComponentSize24)\n }\n disabled={isComponentDisabled}\n ref={buttonRef}\n />\n )}\n {counter && (\n <span className={styles.counter}>\n <Counter label={counter} />\n </span>\n )}\n </div>\n )}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n invalid={invalid}\n />\n </div>\n );\n};\n\nconst BaseInput = forwardRef(BaseInputComponent);\n\nBaseInput.displayName = 'BaseInput';\n\nexport { BaseInput };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAM,kBAAkB,GAAG,CACvB,EACI,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GAAG,KAAK,EACf,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,IAAI,EACJ,cAAc,GAAG,KAAK,EACtB,GAAG,SAAS,EACqE,EACrF,GAAmC,KACnC;AACA,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,eAAe,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;AAC1E,IAAA,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;AAC9B,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;AACxB,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,eAAe,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;AAC7E,IAAA,MAAM,MAAM,GAAG,WAAW,CACtB,CAAC,QAAgB,KAAI;AACjB,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,SAAS,EAAE;YAC/B,MAAM,aAAa,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACnE,YAAA,MAAM,YAAY,GAAG,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,CAAC;YACpE,qBAAqB,CAAC,MAAK;gBACvB,IAAI,QAAQ,CAAC,OAAO,EAAE;oBAClB,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;AAC5E,iBAAA;AACL,aAAC,CAAC,CAAC;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YACnC,OAAO;AACV,SAAA;QACD,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACtB,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CACzC,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,KAAsD,KAAI;QACvD,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC7C,QAAA,aAAa,GAAG,KAAK,CAAC,CAAC;KAC1B,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CACtC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC;AAExD,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAClG,IAAA,MAAM,sBAAsB,GAAG,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,WAAW,CAAC;IACzF,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,YAAY,GAAG,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK,CAAC;AACvE,IAAA,MAAM,aAAa,GAAG,YAAY,IAAI,SAAS,SAAS,GAAG,YAAY,GAAG,EAAE,QAAQ,CAAC;IACrF,MAAM,SAAS,GAAG,iBAAiB,CAAC;QAChC,OAAO;QACP,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,aAAa;QACb,OAAO;AACV,KAAA,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,MAAK;QAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAK;QAC3B,qBAAqB,CAAC,MAAK;YACvB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC9D,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC3B,aAAA;AACL,SAAC,CAAC,CAAC;AACP,KAAC,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,SAAS,IAAI,KAAK,KAAK,EAAE,CAAC;AAClD,IAAA,MAAM,qBAAqB,GAAG,eAAe,IAAI,sBAAsB,CAAC;AACxE,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,KAAK,qBAAqB,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;AACzE,IAAA,MAAM,oBAAoB,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,CAAC;AACnE,IAAA,MAAM,SAAS,GAAG,sBAAsB,KAAK,KAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;AAEpF,IAAA,MAAM,kBAAkB,GAAG,SAAS,IAAI,IAAI,CAAC;AAC7C,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,SAAS,KAAK,CAAC,CAAC,gBAAgB,IAAI,eAAe,CAAC,CAAC,CAAC;AACnG,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAEhE,IAAA,MAAM,sBAAsB,GAAgC,WAAW,CACnE,CAAC,OAAO,KAAI;AACR,QAAA,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;AAC5B,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;AACvC,YAAA,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC;AACb,gBAAA,IAAI,IAAI,KAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE;oBACxC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAClC,oBAAA,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;AACpC,oBAAA,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;AACvC,oBAAA,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;oBACjC,eAAe,CAAC,OAAO,GAAG;AACtB,wBAAA,KAAK,EAAE,QAAQ;wBACf,IAAI;qBACP,CAAC;AACL,iBAAA;AAAM,qBAAA;AACH,oBAAA,QAAQ,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;AAC5C,iBAAA;gBAED,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAG,EAAA,QAAQ,IAAI,CAAC;AAC5C,aAAA;AACJ,SAAA;KACJ;;IAED,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;AACtF,SAAA;AACL,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEhB,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS;AAC3B,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,cAAc;AACrC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,mBAAmB;AACtC,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,KAAK,OAAO;AAChC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,sBAAsB;AACzC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO;YAC3B,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,IAAI,eAAe,IAAI,OAAO;AAC9D,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,SAAS,EAC1D,MAAM,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,SAAS,EAAA,QAAA,EAAA,CAExDA,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,aACpCA,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAClC,QAAA,EAAA,CAAA,CAAC,CAAC,kBAAkB,KACjBC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAG,EAAA,CAAA,EAAA,CACpB,CACT,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,QAAA,EAAA,CACjCC,kBACQ,SAAS,EAAA,GACT,SAAS,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,mBAAmB,EAC7B,wBAAwB,EAAA,IAAA,EACxB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,gBAAgB,GACvB,EACFA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,QAAA,EAClCD,KAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAC7C,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAG,YAAY,EAAQ,CAAA,EACxD,oBAAoB,KACjBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA,CAClC,CACV,EACA,WAAW,KACRD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,QAAQ,EACR,OAAO,CAAA,EAAA,CACT,CACN,CACE,EAAA,CAAA,EAAA,CACL,IACJ,EACND,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAClC,SAAS,KACNA,eACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,gDAAA,CAAC,MAAM,CAAC,aAAa,GAAG,qBAAqB;AAChD,6CAAA,CAAC,EACF,EAAE,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAE/B,QAAA,EAAA,WAAW,GACR,CACX,EAAA,CACC,IACJ,EACL,QAAQ,KACLA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,sBAAsB,EAAU,SAAA,EAAA,YAAY,YAC1EA,GAAC,CAAA,IAAI,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAC7CA,cAAM,GAAG,EAAE,OAAO,EAAA,QAAA,EAAG,IAAI,EAAQ,CAAA,EAAA,CAC9B,GACL,CACT,CAAA,EAAA,CACC,EACL,CAAC,UAAU,IAAI,eAAe,IAAI,OAAO,MACtCD,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,QAAA,EAAA,CAAA,CAAC,UAAU,IAAI,eAAe,MAC3BC,IAAC,MAAM,EAAA,EAAA,SAAA,EACM,aAAa,EACtB,IAAI,EAAC,WAAW,EAChB,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,EAC9C,OAAO,EAAE,eAAe,GAAG,iBAAiB,GAAI,aAA4B,EAC5E,IAAI,EACA,eAAe,GAAG,mBAAmB,GAAI,UAAyC,EAEtF,QAAQ,EAAE,mBAAmB,EAC7B,GAAG,EAAE,SAAS,GAChB,CACL,EACA,OAAO,KACJA,cAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAC3B,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAC,EAAA,KAAK,EAAE,OAAO,EAAA,CAAI,GACxB,CACV,CAAA,EAAA,CACC,CACT,CACC,EAAA,CAAA,EACNA,IAAC,UAAU,EAAA,EACP,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAAC,EAC5C,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAClB,CAAA,CAAA,EAAA,CACA,EACR;AACN,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,UAAU,CAAC,kBAAkB,EAAE;AAEjD,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/DateTimeInput.js CHANGED Viewed

@@ -8,9 +8,9 @@ import { useDateTimeMask } from './useDateTimeMask.js';
 import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/Input.js CHANGED Viewed

@@ -6,9 +6,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import './useFocus.js';
 import './useInputAriaProps.js';

package/NumberInput.js CHANGED Viewed

@@ -9,9 +9,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import './useFocus.js';
 import './useInputAriaProps.js';

package/PasswordInput.js CHANGED Viewed

@@ -8,9 +8,9 @@ import { Input } from './Input.js';
 import './BaseInput.js';
 import 'classnames';
 import '@hh.ru/magritte-common-use-disabled';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/SearchInput.js CHANGED Viewed

@@ -7,9 +7,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/UncontrolledDateTimeInput.js CHANGED Viewed

@@ -9,9 +9,9 @@ import './BaseInput.js';
 import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/UncontrolledInput.js CHANGED Viewed

@@ -8,9 +8,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import './useFocus.js';
 import './useInputAriaProps.js';

package/UncontrolledNumberInput.js CHANGED Viewed

@@ -10,9 +10,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import './useFocus.js';
 import './useInputAriaProps.js';

package/UncontrolledPasswordInput.js CHANGED Viewed

@@ -10,9 +10,9 @@ import './Input.js';
 import './BaseInput.js';
 import 'classnames';
 import '@hh.ru/magritte-common-use-disabled';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/UncontrolledSearchInput.js CHANGED Viewed

@@ -9,9 +9,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';

package/index.css CHANGED Viewed

@@ -1,12 +1,11 @@
 :root{
   --magritte-color-text-primary-v18-1-2:#000000;
-  --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#CCD5DF;
   --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
   --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
   --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
+  --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
   --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#EEF1F7;
   --magritte-color-component-input-background-field-v18-1-2:#ffffff;
-  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#ffffff;
   --magritte-color-component-input-background-state-field-focused-v18-1-2:#ffffff;
   --magritte-color-component-input-background-state-field-invalid-v18-1-2:#ffffff;
   --magritte-color-component-input-background-state-field-disabled-v18-1-2:#F4F6FB;
@@ -15,23 +14,19 @@
   --magritte-color-component-input-text-state-label-disabled-v18-1-2:#AABBCA;
   --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#AABBCA;
   --magritte-color-component-input-text-state-description-disabled-v18-1-2:#AABBCA;
-  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#000000;
   --magritte-color-component-input-text-state-content-focused-v18-1-2:#000000;
   --magritte-color-component-input-text-state-content-invalid-v18-1-2:#000000;
-  --magritte-color-component-input-text-state-label-hovered-v18-1-2:#768694;
   --magritte-color-component-input-text-state-label-focused-v18-1-2:#768694;
   --magritte-color-component-input-text-state-label-invalid-v18-1-2:#768694;
-  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#768694;
   --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#AABBCA;
   --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#AABBCA;
-  --magritte-color-component-input-text-state-description-hovered-v18-1-2:#768694;
   --magritte-color-component-input-text-state-description-focused-v18-1-2:#768694;
+  --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
   --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
   --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
   --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
   --magritte-color-component-input-counter-text-content-v18-1-2:#8293a2;
   --magritte-color-component-input-icon-content-v18-1-2:#6a7885;
-  --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#6a7885;
   --magritte-color-component-input-icon-state-content-focused-v18-1-2:#000000;
   --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#6a7885;
   --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#AABBCA;
@@ -63,13 +58,12 @@
 }
 .magritte-night-theme{
   --magritte-color-text-primary-v18-1-2:#ffffff;
-  --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#3B3B3B;
   --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
   --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
   --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
+  --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
   --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#111;
   --magritte-color-component-input-background-field-v18-1-2:#1B1B1B;
-  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#1B1B1B;
   --magritte-color-component-input-background-state-field-focused-v18-1-2:#1B1B1B;
   --magritte-color-component-input-background-state-field-invalid-v18-1-2:#1B1B1B;
   --magritte-color-component-input-background-state-field-disabled-v18-1-2:#111;
@@ -82,43 +76,39 @@
   --magritte-color-component-input-text-state-label-disabled-v18-1-2:#474747;
   --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#474747;
   --magritte-color-component-input-text-state-description-disabled-v18-1-2:#535353;
-  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#ffffff;
   --magritte-color-component-input-text-state-content-focused-v18-1-2:#ffffff;
   --magritte-color-component-input-text-state-content-invalid-v18-1-2:#ffffff;
-  --magritte-color-component-input-text-state-label-hovered-v18-1-2:#919191;
   --magritte-color-component-input-text-state-label-focused-v18-1-2:#919191;
   --magritte-color-component-input-text-state-label-invalid-v18-1-2:#919191;
-  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#5E5E5E;
   --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#535353;
   --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#535353;
-  --magritte-color-component-input-text-state-description-hovered-v18-1-2:#535353;
   --magritte-color-component-input-text-state-description-focused-v18-1-2:#535353;
+  --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
   --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
   --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
   --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
   --magritte-color-component-input-counter-text-content-v18-1-2:#6a7885;
-  --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#5E5E5E;
   --magritte-color-component-input-icon-state-content-focused-v18-1-2:#ffffff;
   --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#767676;
   --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#474747;
   --magritte-color-component-input-icon-content-v18-1-2:#ABABAB;
 }
-.magritte-input___LVTID_5-0-15{
+.magritte-input___LVTID_5-0-17{
   display:inline-block;
   width:100%;
   --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
   --animation-200-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15:has(input:autofill) .magritte-label___YlOQk_5-0-15{
+.magritte-input___LVTID_5-0-17:has(input:autofill) .magritte-label___YlOQk_5-0-17{
   display:none;
 }
-.magritte-input___LVTID_5-0-15.magritte-elevated___kPcsM_5-0-15:has(input:autofill) .magritte-label___YlOQk_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-elevated___kPcsM_5-0-17:has(input:autofill) .magritte-label___YlOQk_5-0-17{
   display:block;
   transform:translateY(calc(0px - ((var(--magritte-typography-label-4-regular-line-height-v18-1-2) + var(--magritte-typography-label-2-regular-line-height-v18-1-2)) / 2) + (var(--magritte-typography-label-4-regular-line-height-v18-1-2) / 2)));
   transition-duration:0ms;
   color:var(--magritte-color-component-input-text-label-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-elevated___kPcsM_5-0-15:has(input:autofill) .magritte-label___YlOQk_5-0-15 > *{
+.magritte-input___LVTID_5-0-17.magritte-elevated___kPcsM_5-0-17:has(input:autofill) .magritte-label___YlOQk_5-0-17 > *{
   font-family:var(--magritte-typography-label-4-regular-font-family-v18-1-2);
   font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-1-2);
   line-height:var(--magritte-typography-label-4-regular-line-height-v18-1-2);
@@ -129,153 +119,200 @@
   text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v18-1-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover{
+    --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-field___9S8Tw_5-0-15{
-    color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
-    -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-position-container___kZnvZ_5-0-17{
+    background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
+  }
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-field___9S8Tw_5-0-17{
+    color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
+    -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
     opacity:1;
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-hint___EFGK0_5-0-15{
-    --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
-    color:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-hint___EFGK0_5-0-17{
+    --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
+    color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-additional-value___9Kyap_5-0-15{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-additional-value___9Kyap_5-0-17{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-label_elevated___PVcpC_5-0-15{
-    color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-label_elevated___PVcpC_5-0-17{
+    color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-label___YlOQk_5-0-15:not(.magritte-label_elevated___PVcpC_5-0-15),
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-fixed-placeholder___PYJIH_5-0-15{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-fixed-placeholder___PYJIH_5-0-17{
+    color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
   }
-  body.magritte-old-layout .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-icon___HEDsQ_5-0-15{
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
+  body.magritte-old-layout .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-icon___HEDsQ_5-0-17{
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover{
+    --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
+  }
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-position-container___kZnvZ_5-0-17{
+    background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-field___9S8Tw_5-0-15{
-    color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
-    -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-field___9S8Tw_5-0-17{
+    color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
+    -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
     opacity:1;
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-hint___EFGK0_5-0-15{
-    --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
-    color:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-hint___EFGK0_5-0-17{
+    --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
+    color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-additional-value___9Kyap_5-0-15{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-additional-value___9Kyap_5-0-17{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-label_elevated___PVcpC_5-0-15{
-    color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-label_elevated___PVcpC_5-0-17{
+    color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-label___YlOQk_5-0-15:not(.magritte-label_elevated___PVcpC_5-0-15),
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-fixed-placeholder___PYJIH_5-0-15{
-    color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-fixed-placeholder___PYJIH_5-0-17{
+    color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-15:not(.magritte-focused___dxrHD_5-0-15):not(.magritte-invalid___L5MVa_5-0-15):not(.magritte-disabled___0NH6E_5-0-15) .magritte-position-container___kZnvZ_5-0-15:hover .magritte-icon___HEDsQ_5-0-15{
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
+  body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-17:not(.magritte-focused___dxrHD_5-0-17):not(.magritte-invalid___L5MVa_5-0-17):not(.magritte-disabled___0NH6E_5-0-17):hover .magritte-icon___HEDsQ_5-0-17{
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
   }
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17{
+  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-field___9S8Tw_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-field___9S8Tw_5-0-17{
   color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
   opacity:1;
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-hint___EFGK0_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-hint___EFGK0_5-0-17{
   --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-focused';
   color:var(--magritte-color-component-input-text-state-description-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-additional-value___9Kyap_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label_elevated___PVcpC_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-label_elevated___PVcpC_5-0-17{
   color:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label___YlOQk_5-0-15:not(.magritte-label_elevated___PVcpC_5-0-15),
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-fixed-placeholder___PYJIH_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-fixed-placeholder___PYJIH_5-0-17{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focused___dxrHD_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-icon___HEDsQ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-icon___HEDsQ_5-0-17{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17{
+  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-field___9S8Tw_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-field___9S8Tw_5-0-17{
   color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
   opacity:1;
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-hint___EFGK0_5-0-15{
-  --magritte-ui-text-color-override:'magritte-color-component-input-text-description';
-  color:var(--magritte-color-component-input-text-description-v18-1-2);
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-hint___EFGK0_5-0-17{
+  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
+  color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-additional-value___9Kyap_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label_elevated___PVcpC_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-label_elevated___PVcpC_5-0-17{
   color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label___YlOQk_5-0-15:not(.magritte-label_elevated___PVcpC_5-0-15),
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-fixed-placeholder___PYJIH_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-fixed-placeholder___PYJIH_5-0-17{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-invalid___L5MVa_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-icon___HEDsQ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-icon___HEDsQ_5-0-17{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-focus-visible___QvCO1_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17{
+  --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
+  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
+  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-field___9S8Tw_5-0-17{
+  color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
+  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
+  opacity:1;
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-hint___EFGK0_5-0-17{
+  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
+  color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-label_elevated___PVcpC_5-0-17{
+  color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-fixed-placeholder___PYJIH_5-0-17{
+  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-invalid___L5MVa_5-0-17.magritte-focused___dxrHD_5-0-17 .magritte-icon___HEDsQ_5-0-17{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-focus-visible___QvCO1_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-focus-visible___QvCO1_5-0-17.magritte-invalid___L5MVa_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
+  outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17{
+  --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v18-1-2);
+}
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-field___9S8Tw_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-field___9S8Tw_5-0-17{
   color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
   -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
   opacity:1;
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-hint___EFGK0_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-hint___EFGK0_5-0-17{
   --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-disabled';
   color:var(--magritte-color-component-input-text-state-description-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-additional-value___9Kyap_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label_elevated___PVcpC_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-label_elevated___PVcpC_5-0-17{
   color:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-label___YlOQk_5-0-15:not(.magritte-label_elevated___PVcpC_5-0-15),
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-fixed-placeholder___PYJIH_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-label___YlOQk_5-0-17:not(.magritte-label_elevated___PVcpC_5-0-17),
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-fixed-placeholder___PYJIH_5-0-17{
   color:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-position-container___kZnvZ_5-0-15 .magritte-icon___HEDsQ_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-icon___HEDsQ_5-0-17{
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-2);
 }
-.magritte-input___LVTID_5-0-15.magritte-disabled___0NH6E_5-0-15 .magritte-right-container___N0B0o_5-0-15{
+.magritte-input___LVTID_5-0-17.magritte-disabled___0NH6E_5-0-17 .magritte-right-container___N0B0o_5-0-17{
   --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-2);
   --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-2);
 }
 @media (prefers-reduced-motion){
-  .magritte-input___LVTID_5-0-15{
+  .magritte-input___LVTID_5-0-17{
     --animation-100-duration:1ms;
     --animation-200-duration:1ms;
   }
 }
-.magritte-position-container___kZnvZ_5-0-15{
+.magritte-position-container___kZnvZ_5-0-17{
   display:flex;
   align-items:center;
   position:relative;
@@ -285,20 +322,20 @@
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-1-2);
   padding:4px 4px 4px 16px;
 }
-.magritte-with-icon___TPBe2_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-with-icon___TPBe2_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   padding-left:12px;
 }
-.magritte-large___9frRh_5-0-15 .magritte-position-container___kZnvZ_5-0-15{
+.magritte-large___9frRh_5-0-17 .magritte-position-container___kZnvZ_5-0-17{
   padding:8px 8px 8px 16px;
 }
-.magritte-right-container___N0B0o_5-0-15{
+.magritte-right-container___N0B0o_5-0-17{
   display:flex;
   align-items:center;
   justify-content:center;
   --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-2);
   --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-2);
 }
-.magritte-field___9S8Tw_5-0-15{
+.magritte-field___9S8Tw_5-0-17{
   position:absolute;
   inset:0;
   background:none;
@@ -320,7 +357,7 @@
   text-transform:var(--magritte-typography-label-2-regular-text-transform-v18-1-2);
   text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v18-1-2);
 }
-.magritte-icon___HEDsQ_5-0-15{
+.magritte-icon___HEDsQ_5-0-17{
   display:flex;
   align-items:center;
   position:absolute;
@@ -329,14 +366,14 @@
   pointer-events:none;
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-2);
 }
-.magritte-with-icon___TPBe2_5-0-15 .magritte-field___9S8Tw_5-0-15,
-.magritte-with-icon___TPBe2_5-0-15 .magritte-additional-value___9Kyap_5-0-15{
+.magritte-with-icon___TPBe2_5-0-17 .magritte-field___9S8Tw_5-0-17,
+.magritte-with-icon___TPBe2_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
   padding-left:calc(24px + 12px);
 }
-.magritte-with-icon___TPBe2_5-0-15 .magritte-rigging-container___Up9Lb_5-0-15{
+.magritte-with-icon___TPBe2_5-0-17 .magritte-rigging-container___Up9Lb_5-0-17{
   left:calc(24px + 12px);
 }
-.magritte-rigging-container___Up9Lb_5-0-15{
+.magritte-rigging-container___Up9Lb_5-0-17{
   display:flex;
   align-items:center;
   position:absolute;
@@ -344,8 +381,8 @@
   inset:0;
   pointer-events:none;
 }
-.magritte-label___YlOQk_5-0-15,
-.magritte-fixed-placeholder___PYJIH_5-0-15{
+.magritte-label___YlOQk_5-0-17,
+.magritte-fixed-placeholder___PYJIH_5-0-17{
   font-family:var(--magritte-typography-label-2-regular-font-family-v18-1-2);
   font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-1-2);
   line-height:var(--magritte-typography-label-2-regular-line-height-v18-1-2);
@@ -363,11 +400,11 @@
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
   color:var(--magritte-color-component-input-text-placeholder-v18-1-2);
 }
-.magritte-label___YlOQk_5-0-15{
+.magritte-label___YlOQk_5-0-17{
   display:block;
   transition-property:transform, color, font-size, letter-spacing;
 }
-.magritte-label_elevated___PVcpC_5-0-15{
+.magritte-label_elevated___PVcpC_5-0-17{
   font-family:var(--magritte-typography-label-4-regular-font-family-v18-1-2);
   font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-1-2);
   line-height:var(--magritte-typography-label-4-regular-line-height-v18-1-2);
@@ -379,7 +416,7 @@
   color:var(--magritte-color-component-input-text-label-v18-1-2);
   transform:translateY(calc(0px - ((var(--magritte-typography-label-4-regular-line-height-v18-1-2) + var(--magritte-typography-label-2-regular-line-height-v18-1-2)) / 2) + (var(--magritte-typography-label-4-regular-line-height-v18-1-2) / 2)));
 }
-.magritte-input__mask___CHda2_5-0-15{
+.magritte-input__mask___CHda2_5-0-17{
   position:absolute;
   width:100%;
   pointer-events:none;
@@ -389,11 +426,11 @@
   text-overflow:ellipsis;
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-2);
 }
-.magritte-value-ghost___IXNZj_5-0-15{
+.magritte-value-ghost___IXNZj_5-0-17{
   visibility:hidden;
   white-space:pre;
 }
-.magritte-hint-container___rGsD8_5-0-15{
+.magritte-hint-container___rGsD8_5-0-17{
   display:flex;
   flex-grow:1;
   align-items:center;
@@ -401,10 +438,10 @@
   gap:12px;
   min-width:0;
 }
-.magritte-with-right___NUNiP_5-0-15 .magritte-hint-container___rGsD8_5-0-15{
+.magritte-with-right___NUNiP_5-0-17 .magritte-hint-container___rGsD8_5-0-17{
   padding-right:4px;
 }
-.magritte-hint___EFGK0_5-0-15{
+.magritte-hint___EFGK0_5-0-17{
   --magritte-ui-text-color-override:var(--magritte-color-component-input-text-description-v18-1-2);
   color:var(--magritte-color-component-input-text-description-v18-1-2);
   overflow:hidden;
@@ -412,25 +449,25 @@
   text-overflow:ellipsis;
   flex:0 1 auto;
 }
-.magritte-content-container___s-0kX_5-0-15{
+.magritte-content-container___s-0kX_5-0-17{
   position:relative;
   flex:1 0 auto;
   display:flex;
   padding:8px 0;
   max-width:100%;
 }
-.magritte-elevated___kPcsM_5-0-15 .magritte-content-container___s-0kX_5-0-15{
+.magritte-elevated___kPcsM_5-0-17 .magritte-content-container___s-0kX_5-0-17{
   padding:18px 0 0;
 }
-.magritte-counter___Bld3Q_5-0-15{
+.magritte-counter___Bld3Q_5-0-17{
   padding:0 8px;
 }
-.magritte-value-container___6ReT7_5-0-15{
+.magritte-value-container___6ReT7_5-0-17{
   position:relative;
   display:grid;
   width:100%;
 }
-.magritte-additional-value___9Kyap_5-0-15{
+.magritte-additional-value___9Kyap_5-0-17{
   display:flex;
   align-items:center;
   grid-area:1 / 1;
@@ -440,6 +477,6 @@
   color:transparent;
   min-height:24px;
 }
-.magritte-elevated___kPcsM_5-0-15 .magritte-additional-value___9Kyap_5-0-15{
+.magritte-elevated___kPcsM_5-0-17 .magritte-additional-value___9Kyap_5-0-17{
   min-height:22px;
 }

package/index.js CHANGED Viewed

@@ -20,9 +20,9 @@ import 'classnames';
 import '@hh.ru/magritte-common-text-selection';
 import '@hh.ru/magritte-common-use-disabled';
 import '@hh.ru/magritte-common-use-multiple-refs';
-import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-action';
 import '@hh.ru/magritte-ui-counter';
+import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import './useFocus.js';
 import '@hh.ru/magritte-ui-typography';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-input",
-  "version": "5.0.15",
+  "version": "5.0.17",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,11 +29,11 @@
     "@hh.ru/magritte-common-use-disabled": "1.0.8",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
     "@hh.ru/magritte-design-tokens": "18.1.2",
-    "@hh.ru/magritte-internal-field-hint": "1.2.27",
-    "@hh.ru/magritte-ui-action": "4.3.5",
+    "@hh.ru/magritte-ui-action": "4.3.6",
     "@hh.ru/magritte-ui-breakpoint": "4.0.1",
     "@hh.ru/magritte-ui-counter": "4.0.9",
-    "@hh.ru/magritte-ui-icon": "7.1.5",
+    "@hh.ru/magritte-ui-form-helper": "1.0.1",
+    "@hh.ru/magritte-ui-icon": "7.1.6",
     "@hh.ru/magritte-ui-mock-component": "1.0.10",
     "@hh.ru/magritte-ui-theme-provider": "1.1.22",
     "@hh.ru/magritte-ui-typography": "3.0.9",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f983d20d02117bd1e412d635d854ab7c47492692"
+  "gitHead": "77a359961872f43d688f9507b225fa72ba99a3e8"
 }