@hh.ru/magritte-ui-input 5.0.20 → 5.0.22

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 (5) hide show
  1. package/BaseInput.js +3 -3
  2. package/BaseInput.js.map +1 -1
  3. package/index.css +308 -308
  4. package/package.json +9 -9
  5. package/types.d.ts +1 -0
package/BaseInput.js CHANGED
@@ -6,14 +6,14 @@ import { Selection } from '@hh.ru/magritte-common-text-selection';
6
6
  import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
7
7
  import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
8
8
  import { Action } from '@hh.ru/magritte-ui-action';
9
- import { Counter } from '@hh.ru/magritte-ui-counter';
9
+ import { DeprecatedCounter } from '@hh.ru/magritte-ui-counter';
10
10
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
11
11
  import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
12
12
  import { useFocus } from './useFocus.js';
13
13
  import { useInputAriaProps } from './useInputAriaProps.js';
14
14
  import { Text } from '@hh.ru/magritte-ui-typography';
15
15
 
16
- var styles = {"input":"magritte-input___LVTID_5-0-20","label":"magritte-label___YlOQk_5-0-20","elevated":"magritte-elevated___kPcsM_5-0-20","focused":"magritte-focused___dxrHD_5-0-20","invalid":"magritte-invalid___L5MVa_5-0-20","disabled":"magritte-disabled___0NH6E_5-0-20","position-container":"magritte-position-container___kZnvZ_5-0-20","positionContainer":"magritte-position-container___kZnvZ_5-0-20","field":"magritte-field___9S8Tw_5-0-20","hint":"magritte-hint___EFGK0_5-0-20","additional-value":"magritte-additional-value___9Kyap_5-0-20","additionalValue":"magritte-additional-value___9Kyap_5-0-20","label_elevated":"magritte-label_elevated___PVcpC_5-0-20","labelElevated":"magritte-label_elevated___PVcpC_5-0-20","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_5-0-20","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_5-0-20","icon":"magritte-icon___HEDsQ_5-0-20","focus-visible":"magritte-focus-visible___QvCO1_5-0-20","focusVisible":"magritte-focus-visible___QvCO1_5-0-20","right-container":"magritte-right-container___N0B0o_5-0-20","rightContainer":"magritte-right-container___N0B0o_5-0-20","with-icon":"magritte-with-icon___TPBe2_5-0-20","withIcon":"magritte-with-icon___TPBe2_5-0-20","large":"magritte-large___9frRh_5-0-20","rigging-container":"magritte-rigging-container___Up9Lb_5-0-20","riggingContainer":"magritte-rigging-container___Up9Lb_5-0-20","input__mask":"magritte-input__mask___CHda2_5-0-20","inputMask":"magritte-input__mask___CHda2_5-0-20","value-ghost":"magritte-value-ghost___IXNZj_5-0-20","valueGhost":"magritte-value-ghost___IXNZj_5-0-20","hint-container":"magritte-hint-container___rGsD8_5-0-20","hintContainer":"magritte-hint-container___rGsD8_5-0-20","with-right":"magritte-with-right___NUNiP_5-0-20","withRight":"magritte-with-right___NUNiP_5-0-20","content-container":"magritte-content-container___s-0kX_5-0-20","contentContainer":"magritte-content-container___s-0kX_5-0-20","counter":"magritte-counter___Bld3Q_5-0-20","value-container":"magritte-value-container___6ReT7_5-0-20","valueContainer":"magritte-value-container___6ReT7_5-0-20"};
16
+ var styles = {"input":"magritte-input___LVTID_5-0-22","label":"magritte-label___YlOQk_5-0-22","elevated":"magritte-elevated___kPcsM_5-0-22","focused":"magritte-focused___dxrHD_5-0-22","invalid":"magritte-invalid___L5MVa_5-0-22","disabled":"magritte-disabled___0NH6E_5-0-22","position-container":"magritte-position-container___kZnvZ_5-0-22","positionContainer":"magritte-position-container___kZnvZ_5-0-22","field":"magritte-field___9S8Tw_5-0-22","hint":"magritte-hint___EFGK0_5-0-22","additional-value":"magritte-additional-value___9Kyap_5-0-22","additionalValue":"magritte-additional-value___9Kyap_5-0-22","label_elevated":"magritte-label_elevated___PVcpC_5-0-22","labelElevated":"magritte-label_elevated___PVcpC_5-0-22","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_5-0-22","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_5-0-22","icon":"magritte-icon___HEDsQ_5-0-22","focus-visible":"magritte-focus-visible___QvCO1_5-0-22","focusVisible":"magritte-focus-visible___QvCO1_5-0-22","right-container":"magritte-right-container___N0B0o_5-0-22","rightContainer":"magritte-right-container___N0B0o_5-0-22","with-icon":"magritte-with-icon___TPBe2_5-0-22","withIcon":"magritte-with-icon___TPBe2_5-0-22","large":"magritte-large___9frRh_5-0-22","rigging-container":"magritte-rigging-container___Up9Lb_5-0-22","riggingContainer":"magritte-rigging-container___Up9Lb_5-0-22","input__mask":"magritte-input__mask___CHda2_5-0-22","inputMask":"magritte-input__mask___CHda2_5-0-22","value-ghost":"magritte-value-ghost___IXNZj_5-0-22","valueGhost":"magritte-value-ghost___IXNZj_5-0-22","hint-container":"magritte-hint-container___rGsD8_5-0-22","hintContainer":"magritte-hint-container___rGsD8_5-0-22","with-right":"magritte-with-right___NUNiP_5-0-22","withRight":"magritte-with-right___NUNiP_5-0-22","content-container":"magritte-content-container___s-0kX_5-0-22","contentContainer":"magritte-content-container___s-0kX_5-0-22","counter":"magritte-counter___Bld3Q_5-0-22","value-container":"magritte-value-container___6ReT7_5-0-22","valueContainer":"magritte-value-container___6ReT7_5-0-22"};
17
17
 
18
18
  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) => {
19
19
  const wrapperCurrentRef = useRef(null);
@@ -116,7 +116,7 @@ const BaseInputComponent = ({ onChange, onFocus, onBlur, value, placeholder, dis
116
116
  [styles.withIcon]: !!inputIcon,
117
117
  }), 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, {
118
118
  [styles.labelElevated]: placeholderIsElevated,
119
- }), 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 })] }));
119
+ }), 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(DeprecatedCounter, { label: counter }) }))] }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalid })] }));
120
120
  };
121
121
  const BaseInput = forwardRef(BaseInputComponent);
122
122
  BaseInput.displayName = 'BaseInput';
package/BaseInput.js.map CHANGED
@@ -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 { 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":"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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 { DeprecatedCounter } 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 <DeprecatedCounter 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":"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"}
package/index.css CHANGED
@@ -1,355 +1,355 @@
1
1
  :root{
2
- --magritte-color-text-primary-v18-1-2:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
8
- --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#EEF1F7;
9
- --magritte-color-component-input-background-field-v18-1-2:#ffffff;
10
- --magritte-color-component-input-background-state-field-hovered-v18-1-2:#ffffff;
11
- --magritte-color-component-input-background-state-field-focused-v18-1-2:#ffffff;
12
- --magritte-color-component-input-background-state-field-invalid-v18-1-2:#ffffff;
13
- --magritte-color-component-input-background-state-field-disabled-v18-1-2:#F4F6FB;
14
- --magritte-color-component-input-stroke-field-v18-1-2:#DCE3EB;
15
- --magritte-color-component-input-text-state-content-disabled-v18-1-2:#AABBCA;
16
- --magritte-color-component-input-text-state-label-disabled-v18-1-2:#AABBCA;
17
- --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#AABBCA;
18
- --magritte-color-component-input-text-state-description-disabled-v18-1-2:#AABBCA;
19
- --magritte-color-component-input-text-state-content-hovered-v18-1-2:#000000;
20
- --magritte-color-component-input-text-state-content-focused-v18-1-2:#000000;
21
- --magritte-color-component-input-text-state-content-invalid-v18-1-2:#000000;
22
- --magritte-color-component-input-text-state-label-hovered-v18-1-2:#768694;
23
- --magritte-color-component-input-text-state-label-focused-v18-1-2:#768694;
24
- --magritte-color-component-input-text-state-label-invalid-v18-1-2:#768694;
25
- --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#768694;
26
- --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#AABBCA;
27
- --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#AABBCA;
28
- --magritte-color-component-input-text-state-description-hovered-v18-1-2:#768694;
29
- --magritte-color-component-input-text-state-description-focused-v18-1-2:#768694;
30
- --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
31
- --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
32
- --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
33
- --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
34
- --magritte-color-component-input-counter-text-content-v18-1-2:#8293a2;
35
- --magritte-color-component-input-icon-content-v18-1-2:#6a7885;
36
- --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#6a7885;
37
- --magritte-color-component-input-icon-state-content-focused-v18-1-2:#000000;
38
- --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#6a7885;
39
- --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#AABBCA;
40
- --magritte-color-component-input-text-content-v18-1-2:#000000;
41
- --magritte-color-component-input-text-label-v18-1-2:#768694;
42
- --magritte-color-component-input-text-placeholder-v18-1-2:#AABBCA;
43
- --magritte-color-component-input-text-description-v18-1-2:#768694;
2
+ --magritte-color-text-primary-v18-2-0:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v18-2-0:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v18-2-0:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v18-2-0:#ff4d3a;
7
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
8
+ --magritte-color-component-input-stroke-state-field-disabled-v18-2-0:#EEF1F7;
9
+ --magritte-color-component-input-background-field-v18-2-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-hovered-v18-2-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-focused-v18-2-0:#ffffff;
12
+ --magritte-color-component-input-background-state-field-invalid-v18-2-0:#ffffff;
13
+ --magritte-color-component-input-background-state-field-disabled-v18-2-0:#F4F6FB;
14
+ --magritte-color-component-input-stroke-field-v18-2-0:#DCE3EB;
15
+ --magritte-color-component-input-text-state-content-disabled-v18-2-0:#AABBCA;
16
+ --magritte-color-component-input-text-state-label-disabled-v18-2-0:#AABBCA;
17
+ --magritte-color-component-input-text-state-placeholder-disabled-v18-2-0:#AABBCA;
18
+ --magritte-color-component-input-text-state-description-disabled-v18-2-0:#AABBCA;
19
+ --magritte-color-component-input-text-state-content-hovered-v18-2-0:#000000;
20
+ --magritte-color-component-input-text-state-content-focused-v18-2-0:#000000;
21
+ --magritte-color-component-input-text-state-content-invalid-v18-2-0:#000000;
22
+ --magritte-color-component-input-text-state-label-hovered-v18-2-0:#768694;
23
+ --magritte-color-component-input-text-state-label-focused-v18-2-0:#768694;
24
+ --magritte-color-component-input-text-state-label-invalid-v18-2-0:#768694;
25
+ --magritte-color-component-input-text-state-placeholder-hovered-v18-2-0:#768694;
26
+ --magritte-color-component-input-text-state-placeholder-focused-v18-2-0:#AABBCA;
27
+ --magritte-color-component-input-text-state-placeholder-invalid-v18-2-0:#AABBCA;
28
+ --magritte-color-component-input-text-state-description-hovered-v18-2-0:#768694;
29
+ --magritte-color-component-input-text-state-description-focused-v18-2-0:#768694;
30
+ --magritte-color-component-input-text-state-description-invalid-v18-2-0:#ff4d3a;
31
+ --magritte-color-component-input-counter-background-content-v18-2-0:#EEF1F7;
32
+ --magritte-color-component-input-counter-background-state-content-disabled-v18-2-0:#CCD5DF;
33
+ --magritte-color-component-input-counter-text-state-content-disabled-v18-2-0:#96aabb;
34
+ --magritte-color-component-input-counter-text-content-v18-2-0:#8293a2;
35
+ --magritte-color-component-input-icon-content-v18-2-0:#6a7885;
36
+ --magritte-color-component-input-icon-state-content-hovered-v18-2-0:#6a7885;
37
+ --magritte-color-component-input-icon-state-content-focused-v18-2-0:#000000;
38
+ --magritte-color-component-input-icon-state-content-invalid-v18-2-0:#6a7885;
39
+ --magritte-color-component-input-icon-state-content-disabled-v18-2-0:#AABBCA;
40
+ --magritte-color-component-input-text-content-v18-2-0:#000000;
41
+ --magritte-color-component-input-text-label-v18-2-0:#768694;
42
+ --magritte-color-component-input-text-placeholder-v18-2-0:#AABBCA;
43
+ --magritte-color-component-input-text-description-v18-2-0:#768694;
44
44
  }
45
45
  :root{
46
- --magritte-typography-label-2-regular-font-family-v18-1-2:"Inter";
47
- --magritte-typography-label-2-regular-font-weight-v18-1-2:400;
48
- --magritte-typography-label-2-regular-line-height-v18-1-2:22px;
49
- --magritte-typography-label-2-regular-font-size-v18-1-2:16px;
50
- --magritte-typography-label-2-regular-letter-spacing-v18-1-2:0em;
51
- --magritte-typography-label-2-regular-text-indent-v18-1-2:0px;
52
- --magritte-typography-label-2-regular-text-transform-v18-1-2:none;
53
- --magritte-typography-label-2-regular-text-decoration-v18-1-2:none;
54
- --magritte-typography-label-4-regular-font-family-v18-1-2:"Inter";
55
- --magritte-typography-label-4-regular-font-weight-v18-1-2:400;
56
- --magritte-typography-label-4-regular-line-height-v18-1-2:18px;
57
- --magritte-typography-label-4-regular-font-size-v18-1-2:12px;
58
- --magritte-typography-label-4-regular-letter-spacing-v18-1-2:0.01em;
59
- --magritte-typography-label-4-regular-text-indent-v18-1-2:0px;
60
- --magritte-typography-label-4-regular-text-transform-v18-1-2:none;
61
- --magritte-typography-label-4-regular-text-decoration-v18-1-2:none;
62
- --magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
63
- --magritte-semantic-animation-ease-in-out-100-duration-v18-1-2:100ms;
64
- --magritte-semantic-animation-ease-in-out-200-duration-v18-1-2:200ms;
46
+ --magritte-typography-label-2-regular-font-family-v18-2-0:"Inter";
47
+ --magritte-typography-label-2-regular-font-weight-v18-2-0:400;
48
+ --magritte-typography-label-2-regular-line-height-v18-2-0:22px;
49
+ --magritte-typography-label-2-regular-font-size-v18-2-0:16px;
50
+ --magritte-typography-label-2-regular-letter-spacing-v18-2-0:0em;
51
+ --magritte-typography-label-2-regular-text-indent-v18-2-0:0px;
52
+ --magritte-typography-label-2-regular-text-transform-v18-2-0:none;
53
+ --magritte-typography-label-2-regular-text-decoration-v18-2-0:none;
54
+ --magritte-typography-label-4-regular-font-family-v18-2-0:"Inter";
55
+ --magritte-typography-label-4-regular-font-weight-v18-2-0:400;
56
+ --magritte-typography-label-4-regular-line-height-v18-2-0:18px;
57
+ --magritte-typography-label-4-regular-font-size-v18-2-0:12px;
58
+ --magritte-typography-label-4-regular-letter-spacing-v18-2-0:0.01em;
59
+ --magritte-typography-label-4-regular-text-indent-v18-2-0:0px;
60
+ --magritte-typography-label-4-regular-text-transform-v18-2-0:none;
61
+ --magritte-typography-label-4-regular-text-decoration-v18-2-0:none;
62
+ --magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-0:cubic-bezier(0.25, 0.1, 0.25, 1);
63
+ --magritte-semantic-animation-ease-in-out-100-duration-v18-2-0:100ms;
64
+ --magritte-semantic-animation-ease-in-out-200-duration-v18-2-0:200ms;
65
65
  }
66
66
  .magritte-night-theme{
67
- --magritte-color-text-primary-v18-1-2:#ffffff;
68
- --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#3B3B3B;
69
- --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
70
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
71
- --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
72
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
73
- --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#111;
74
- --magritte-color-component-input-background-field-v18-1-2:#1B1B1B;
75
- --magritte-color-component-input-background-state-field-hovered-v18-1-2:#1B1B1B;
76
- --magritte-color-component-input-background-state-field-focused-v18-1-2:#1B1B1B;
77
- --magritte-color-component-input-background-state-field-invalid-v18-1-2:#1B1B1B;
78
- --magritte-color-component-input-background-state-field-disabled-v18-1-2:#111;
79
- --magritte-color-component-input-stroke-field-v18-1-2:#303030;
80
- --magritte-color-component-input-text-content-v18-1-2:#ffffff;
81
- --magritte-color-component-input-text-label-v18-1-2:#919191;
82
- --magritte-color-component-input-text-placeholder-v18-1-2:#535353;
83
- --magritte-color-component-input-text-description-v18-1-2:#6A6A6A;
84
- --magritte-color-component-input-text-state-content-disabled-v18-1-2:#474747;
85
- --magritte-color-component-input-text-state-label-disabled-v18-1-2:#474747;
86
- --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#474747;
87
- --magritte-color-component-input-text-state-description-disabled-v18-1-2:#535353;
88
- --magritte-color-component-input-text-state-content-hovered-v18-1-2:#ffffff;
89
- --magritte-color-component-input-text-state-content-focused-v18-1-2:#ffffff;
90
- --magritte-color-component-input-text-state-content-invalid-v18-1-2:#ffffff;
91
- --magritte-color-component-input-text-state-label-hovered-v18-1-2:#919191;
92
- --magritte-color-component-input-text-state-label-focused-v18-1-2:#919191;
93
- --magritte-color-component-input-text-state-label-invalid-v18-1-2:#919191;
94
- --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#5E5E5E;
95
- --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#535353;
96
- --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#535353;
97
- --magritte-color-component-input-text-state-description-hovered-v18-1-2:#535353;
98
- --magritte-color-component-input-text-state-description-focused-v18-1-2:#535353;
99
- --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
100
- --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
101
- --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
102
- --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
103
- --magritte-color-component-input-counter-text-content-v18-1-2:#6a7885;
104
- --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#5E5E5E;
105
- --magritte-color-component-input-icon-state-content-focused-v18-1-2:#ffffff;
106
- --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#767676;
107
- --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#474747;
108
- --magritte-color-component-input-icon-content-v18-1-2:#ABABAB;
109
- }
110
- .magritte-input___LVTID_5-0-20{
67
+ --magritte-color-text-primary-v18-2-0:#ffffff;
68
+ --magritte-color-component-input-stroke-state-field-hovered-v18-2-0:#3B3B3B;
69
+ --magritte-color-component-input-stroke-state-field-focused-v18-2-0:#0070ff;
70
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-2-0:#0070ff7a;
71
+ --magritte-color-component-input-stroke-state-field-invalid-v18-2-0:#ff4d3a;
72
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-2-0:#ff4d3a7a;
73
+ --magritte-color-component-input-stroke-state-field-disabled-v18-2-0:#111;
74
+ --magritte-color-component-input-background-field-v18-2-0:#1B1B1B;
75
+ --magritte-color-component-input-background-state-field-hovered-v18-2-0:#1B1B1B;
76
+ --magritte-color-component-input-background-state-field-focused-v18-2-0:#1B1B1B;
77
+ --magritte-color-component-input-background-state-field-invalid-v18-2-0:#1B1B1B;
78
+ --magritte-color-component-input-background-state-field-disabled-v18-2-0:#111;
79
+ --magritte-color-component-input-stroke-field-v18-2-0:#303030;
80
+ --magritte-color-component-input-text-content-v18-2-0:#ffffff;
81
+ --magritte-color-component-input-text-label-v18-2-0:#919191;
82
+ --magritte-color-component-input-text-placeholder-v18-2-0:#535353;
83
+ --magritte-color-component-input-text-description-v18-2-0:#6A6A6A;
84
+ --magritte-color-component-input-text-state-content-disabled-v18-2-0:#474747;
85
+ --magritte-color-component-input-text-state-label-disabled-v18-2-0:#474747;
86
+ --magritte-color-component-input-text-state-placeholder-disabled-v18-2-0:#474747;
87
+ --magritte-color-component-input-text-state-description-disabled-v18-2-0:#535353;
88
+ --magritte-color-component-input-text-state-content-hovered-v18-2-0:#ffffff;
89
+ --magritte-color-component-input-text-state-content-focused-v18-2-0:#ffffff;
90
+ --magritte-color-component-input-text-state-content-invalid-v18-2-0:#ffffff;
91
+ --magritte-color-component-input-text-state-label-hovered-v18-2-0:#919191;
92
+ --magritte-color-component-input-text-state-label-focused-v18-2-0:#919191;
93
+ --magritte-color-component-input-text-state-label-invalid-v18-2-0:#919191;
94
+ --magritte-color-component-input-text-state-placeholder-hovered-v18-2-0:#5E5E5E;
95
+ --magritte-color-component-input-text-state-placeholder-focused-v18-2-0:#535353;
96
+ --magritte-color-component-input-text-state-placeholder-invalid-v18-2-0:#535353;
97
+ --magritte-color-component-input-text-state-description-hovered-v18-2-0:#535353;
98
+ --magritte-color-component-input-text-state-description-focused-v18-2-0:#535353;
99
+ --magritte-color-component-input-text-state-description-invalid-v18-2-0:#ff4d3a;
100
+ --magritte-color-component-input-counter-background-content-v18-2-0:#EEF1F7;
101
+ --magritte-color-component-input-counter-background-state-content-disabled-v18-2-0:#CCD5DF;
102
+ --magritte-color-component-input-counter-text-state-content-disabled-v18-2-0:#96aabb;
103
+ --magritte-color-component-input-counter-text-content-v18-2-0:#6a7885;
104
+ --magritte-color-component-input-icon-state-content-hovered-v18-2-0:#5E5E5E;
105
+ --magritte-color-component-input-icon-state-content-focused-v18-2-0:#ffffff;
106
+ --magritte-color-component-input-icon-state-content-invalid-v18-2-0:#767676;
107
+ --magritte-color-component-input-icon-state-content-disabled-v18-2-0:#474747;
108
+ --magritte-color-component-input-icon-content-v18-2-0:#ABABAB;
109
+ }
110
+ .magritte-input___LVTID_5-0-22{
111
111
  display:inline-block;
112
112
  width:100%;
113
- --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
114
- --animation-200-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-2);
113
+ --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-2-0);
114
+ --animation-200-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-0);
115
115
  }
116
- .magritte-input___LVTID_5-0-20:has(input:autofill) .magritte-label___YlOQk_5-0-20{
116
+ .magritte-input___LVTID_5-0-22:has(input:autofill) .magritte-label___YlOQk_5-0-22{
117
117
  display:none;
118
118
  }
119
- .magritte-input___LVTID_5-0-20.magritte-elevated___kPcsM_5-0-20:has(input:autofill) .magritte-label___YlOQk_5-0-20{
119
+ .magritte-input___LVTID_5-0-22.magritte-elevated___kPcsM_5-0-22:has(input:autofill) .magritte-label___YlOQk_5-0-22{
120
120
  display:block;
121
- 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)));
121
+ transform:translateY(calc(0px - ((var(--magritte-typography-label-4-regular-line-height-v18-2-0) + var(--magritte-typography-label-2-regular-line-height-v18-2-0)) / 2) + (var(--magritte-typography-label-4-regular-line-height-v18-2-0) / 2)));
122
122
  transition-duration:0ms;
123
- color:var(--magritte-color-component-input-text-label-v18-1-2);
124
- }
125
- .magritte-input___LVTID_5-0-20.magritte-elevated___kPcsM_5-0-20:has(input:autofill) .magritte-label___YlOQk_5-0-20 > *{
126
- font-family:var(--magritte-typography-label-4-regular-font-family-v18-1-2);
127
- font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-1-2);
128
- line-height:var(--magritte-typography-label-4-regular-line-height-v18-1-2);
129
- font-size:var(--magritte-typography-label-4-regular-font-size-v18-1-2);
130
- letter-spacing:var(--magritte-typography-label-4-regular-letter-spacing-v18-1-2);
131
- text-indent:var(--magritte-typography-label-4-regular-text-indent-v18-1-2);
132
- text-transform:var(--magritte-typography-label-4-regular-text-transform-v18-1-2);
133
- text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v18-1-2);
123
+ color:var(--magritte-color-component-input-text-label-v18-2-0);
124
+ }
125
+ .magritte-input___LVTID_5-0-22.magritte-elevated___kPcsM_5-0-22:has(input:autofill) .magritte-label___YlOQk_5-0-22 > *{
126
+ font-family:var(--magritte-typography-label-4-regular-font-family-v18-2-0);
127
+ font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-2-0);
128
+ line-height:var(--magritte-typography-label-4-regular-line-height-v18-2-0);
129
+ font-size:var(--magritte-typography-label-4-regular-font-size-v18-2-0);
130
+ letter-spacing:var(--magritte-typography-label-4-regular-letter-spacing-v18-2-0);
131
+ text-indent:var(--magritte-typography-label-4-regular-text-indent-v18-2-0);
132
+ text-transform:var(--magritte-typography-label-4-regular-text-transform-v18-2-0);
133
+ text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v18-2-0);
134
134
  }
135
135
  @media (min-width: 1020px){
136
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover{
137
- --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
136
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover{
137
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-2-0);
138
138
  }
139
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-position-container___kZnvZ_5-0-20{
140
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
141
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
139
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-position-container___kZnvZ_5-0-22{
140
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-2-0);
141
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-2-0);
142
142
  }
143
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-field___9S8Tw_5-0-20{
144
- color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
145
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
143
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-field___9S8Tw_5-0-22{
144
+ color:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
145
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
146
146
  opacity:1;
147
147
  }
148
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-hint___EFGK0_5-0-20{
148
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-hint___EFGK0_5-0-22{
149
149
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
150
- color:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
150
+ color:var(--magritte-color-component-input-text-state-description-hovered-v18-2-0);
151
151
  }
152
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-additional-value___9Kyap_5-0-20{
153
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
152
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-additional-value___9Kyap_5-0-22{
153
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
154
154
  }
155
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-label_elevated___PVcpC_5-0-20{
156
- color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
155
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-label_elevated___PVcpC_5-0-22{
156
+ color:var(--magritte-color-component-input-text-state-label-hovered-v18-2-0);
157
157
  }
158
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
159
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-fixed-placeholder___PYJIH_5-0-20{
160
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
158
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
159
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-fixed-placeholder___PYJIH_5-0-22{
160
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-2-0);
161
161
  }
162
- body.magritte-old-layout .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-icon___HEDsQ_5-0-20{
163
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
162
+ body.magritte-old-layout .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-icon___HEDsQ_5-0-22{
163
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-2-0);
164
164
  }
165
165
  }
166
166
  @media (min-width: 1024px){
167
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover{
168
- --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
167
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover{
168
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-2-0);
169
169
  }
170
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-position-container___kZnvZ_5-0-20{
171
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
172
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
170
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-position-container___kZnvZ_5-0-22{
171
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-2-0);
172
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-2-0);
173
173
  }
174
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-field___9S8Tw_5-0-20{
175
- color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
176
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
174
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-field___9S8Tw_5-0-22{
175
+ color:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
176
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
177
177
  opacity:1;
178
178
  }
179
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-hint___EFGK0_5-0-20{
179
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-hint___EFGK0_5-0-22{
180
180
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-hovered';
181
- color:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
181
+ color:var(--magritte-color-component-input-text-state-description-hovered-v18-2-0);
182
182
  }
183
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-additional-value___9Kyap_5-0-20{
184
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
183
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-additional-value___9Kyap_5-0-22{
184
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-2-0);
185
185
  }
186
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-label_elevated___PVcpC_5-0-20{
187
- color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
186
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-label_elevated___PVcpC_5-0-22{
187
+ color:var(--magritte-color-component-input-text-state-label-hovered-v18-2-0);
188
188
  }
189
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
190
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-fixed-placeholder___PYJIH_5-0-20{
191
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
189
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
190
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-fixed-placeholder___PYJIH_5-0-22{
191
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-2-0);
192
192
  }
193
- body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-20:not(.magritte-focused___dxrHD_5-0-20):not(.magritte-invalid___L5MVa_5-0-20):not(.magritte-disabled___0NH6E_5-0-20):hover .magritte-icon___HEDsQ_5-0-20{
194
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
193
+ body:not(.magritte-old-layout) .magritte-input___LVTID_5-0-22:not(.magritte-focused___dxrHD_5-0-22):not(.magritte-invalid___L5MVa_5-0-22):not(.magritte-disabled___0NH6E_5-0-22):hover .magritte-icon___HEDsQ_5-0-22{
194
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-2-0);
195
195
  }
196
196
  }
197
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20{
198
- --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v18-1-2);
197
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22{
198
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v18-2-0);
199
199
  }
200
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
201
- background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
202
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
200
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
201
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v18-2-0);
202
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-2-0);
203
203
  }
204
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-field___9S8Tw_5-0-20{
205
- color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
206
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
204
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-field___9S8Tw_5-0-22{
205
+ color:var(--magritte-color-component-input-text-state-content-focused-v18-2-0);
206
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v18-2-0);
207
207
  opacity:1;
208
208
  }
209
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-hint___EFGK0_5-0-20{
209
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-hint___EFGK0_5-0-22{
210
210
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-focused';
211
- color:var(--magritte-color-component-input-text-state-description-focused-v18-1-2);
211
+ color:var(--magritte-color-component-input-text-state-description-focused-v18-2-0);
212
212
  }
213
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
214
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
213
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
214
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-2-0);
215
215
  }
216
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-label_elevated___PVcpC_5-0-20{
217
- color:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
216
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-label_elevated___PVcpC_5-0-22{
217
+ color:var(--magritte-color-component-input-text-state-label-focused-v18-2-0);
218
218
  }
219
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
220
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-fixed-placeholder___PYJIH_5-0-20{
221
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
219
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
220
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-fixed-placeholder___PYJIH_5-0-22{
221
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v18-2-0);
222
222
  }
223
- .magritte-input___LVTID_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-icon___HEDsQ_5-0-20{
224
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-2);
223
+ .magritte-input___LVTID_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-icon___HEDsQ_5-0-22{
224
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-2-0);
225
225
  }
226
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20{
227
- --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
226
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22{
227
+ --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-2-0);
228
228
  }
229
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
230
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
231
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
229
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
230
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-2-0);
231
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-2-0);
232
232
  }
233
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-field___9S8Tw_5-0-20{
234
- color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
235
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
233
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-field___9S8Tw_5-0-22{
234
+ color:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
235
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
236
236
  opacity:1;
237
237
  }
238
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-hint___EFGK0_5-0-20{
238
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-hint___EFGK0_5-0-22{
239
239
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
240
- color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
240
+ color:var(--magritte-color-component-input-text-state-description-invalid-v18-2-0);
241
241
  }
242
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
243
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
242
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
243
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
244
244
  }
245
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-label_elevated___PVcpC_5-0-20{
246
- color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
245
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-label_elevated___PVcpC_5-0-22{
246
+ color:var(--magritte-color-component-input-text-state-label-invalid-v18-2-0);
247
247
  }
248
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
249
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-fixed-placeholder___PYJIH_5-0-20{
250
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
248
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
249
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-fixed-placeholder___PYJIH_5-0-22{
250
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-2-0);
251
251
  }
252
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-icon___HEDsQ_5-0-20{
253
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
252
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-icon___HEDsQ_5-0-22{
253
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-2-0);
254
254
  }
255
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20{
256
- --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
255
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22{
256
+ --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-2-0);
257
257
  }
258
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
259
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
260
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
258
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
259
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-2-0);
260
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v18-2-0);
261
261
  }
262
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-field___9S8Tw_5-0-20{
263
- color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
264
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
262
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-field___9S8Tw_5-0-22{
263
+ color:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
264
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
265
265
  opacity:1;
266
266
  }
267
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-hint___EFGK0_5-0-20{
267
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-hint___EFGK0_5-0-22{
268
268
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-invalid';
269
- color:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
269
+ color:var(--magritte-color-component-input-text-state-description-invalid-v18-2-0);
270
270
  }
271
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
272
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
271
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
272
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-2-0);
273
273
  }
274
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-label_elevated___PVcpC_5-0-20{
275
- color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
274
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-label_elevated___PVcpC_5-0-22{
275
+ color:var(--magritte-color-component-input-text-state-label-invalid-v18-2-0);
276
276
  }
277
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
278
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-fixed-placeholder___PYJIH_5-0-20{
279
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
277
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
278
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-fixed-placeholder___PYJIH_5-0-22{
279
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-2-0);
280
280
  }
281
- .magritte-input___LVTID_5-0-20.magritte-invalid___L5MVa_5-0-20.magritte-focused___dxrHD_5-0-20 .magritte-icon___HEDsQ_5-0-20{
282
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
281
+ .magritte-input___LVTID_5-0-22.magritte-invalid___L5MVa_5-0-22.magritte-focused___dxrHD_5-0-22 .magritte-icon___HEDsQ_5-0-22{
282
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-2-0);
283
283
  }
284
- .magritte-input___LVTID_5-0-20.magritte-focus-visible___QvCO1_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
285
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
284
+ .magritte-input___LVTID_5-0-22.magritte-focus-visible___QvCO1_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
285
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-2-0) solid 4px;
286
286
  }
287
- .magritte-input___LVTID_5-0-20.magritte-focus-visible___QvCO1_5-0-20.magritte-invalid___L5MVa_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
288
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2);
287
+ .magritte-input___LVTID_5-0-22.magritte-focus-visible___QvCO1_5-0-22.magritte-invalid___L5MVa_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
288
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v18-2-0);
289
289
  }
290
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20{
291
- --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v18-1-2);
290
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22{
291
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v18-2-0);
292
292
  }
293
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
294
- background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
295
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
293
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
294
+ background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-2-0);
295
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-2-0);
296
296
  }
297
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-field___9S8Tw_5-0-20{
298
- color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
299
- -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
297
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-field___9S8Tw_5-0-22{
298
+ color:var(--magritte-color-component-input-text-state-content-disabled-v18-2-0);
299
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v18-2-0);
300
300
  opacity:1;
301
301
  }
302
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-hint___EFGK0_5-0-20{
302
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-hint___EFGK0_5-0-22{
303
303
  --magritte-ui-text-color-override:'magritte-color-component-input-text-state-description-disabled';
304
- color:var(--magritte-color-component-input-text-state-description-disabled-v18-1-2);
304
+ color:var(--magritte-color-component-input-text-state-description-disabled-v18-2-0);
305
305
  }
306
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
307
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
306
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
307
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-2-0);
308
308
  }
309
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-label_elevated___PVcpC_5-0-20{
310
- color:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
309
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-label_elevated___PVcpC_5-0-22{
310
+ color:var(--magritte-color-component-input-text-state-label-disabled-v18-2-0);
311
311
  }
312
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-label___YlOQk_5-0-20:not(.magritte-label_elevated___PVcpC_5-0-20),
313
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-fixed-placeholder___PYJIH_5-0-20{
314
- color:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
312
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-label___YlOQk_5-0-22:not(.magritte-label_elevated___PVcpC_5-0-22),
313
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-fixed-placeholder___PYJIH_5-0-22{
314
+ color:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-2-0);
315
315
  }
316
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-icon___HEDsQ_5-0-20{
317
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-2);
316
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-icon___HEDsQ_5-0-22{
317
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-2-0);
318
318
  }
319
- .magritte-input___LVTID_5-0-20.magritte-disabled___0NH6E_5-0-20 .magritte-right-container___N0B0o_5-0-20{
320
- --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-2);
321
- --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-2);
319
+ .magritte-input___LVTID_5-0-22.magritte-disabled___0NH6E_5-0-22 .magritte-right-container___N0B0o_5-0-22{
320
+ --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-2-0);
321
+ --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-2-0);
322
322
  }
323
323
  @media (prefers-reduced-motion){
324
- .magritte-input___LVTID_5-0-20{
324
+ .magritte-input___LVTID_5-0-22{
325
325
  --animation-100-duration:1ms;
326
326
  --animation-200-duration:1ms;
327
327
  }
328
328
  }
329
- .magritte-position-container___kZnvZ_5-0-20{
329
+ .magritte-position-container___kZnvZ_5-0-22{
330
330
  display:flex;
331
331
  align-items:center;
332
332
  position:relative;
333
- background-color:var(--magritte-color-component-input-background-field-v18-1-2);
333
+ background-color:var(--magritte-color-component-input-background-field-v18-2-0);
334
334
  border-radius:12px;
335
335
  box-sizing:content-box;
336
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-1-2);
336
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-2-0);
337
337
  padding:4px 4px 4px 16px;
338
338
  }
339
- .magritte-with-icon___TPBe2_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
339
+ .magritte-with-icon___TPBe2_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
340
340
  padding-left:12px;
341
341
  }
342
- .magritte-large___9frRh_5-0-20 .magritte-position-container___kZnvZ_5-0-20{
342
+ .magritte-large___9frRh_5-0-22 .magritte-position-container___kZnvZ_5-0-22{
343
343
  padding:8px 8px 8px 16px;
344
344
  }
345
- .magritte-right-container___N0B0o_5-0-20{
345
+ .magritte-right-container___N0B0o_5-0-22{
346
346
  display:flex;
347
347
  align-items:center;
348
348
  justify-content:center;
349
- --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-2);
350
- --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-2);
349
+ --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-2-0);
350
+ --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-2-0);
351
351
  }
352
- .magritte-field___9S8Tw_5-0-20{
352
+ .magritte-field___9S8Tw_5-0-22{
353
353
  position:absolute;
354
354
  inset:0;
355
355
  background:none;
@@ -359,35 +359,35 @@
359
359
  padding:0;
360
360
  min-width:0;
361
361
  width:100%;
362
- color:var(--magritte-color-component-input-text-content-v18-1-2);
363
- caret-color:var(--magritte-ui-input-caret-color-override, var(--magritte-color-text-primary-v18-1-2));
362
+ color:var(--magritte-color-component-input-text-content-v18-2-0);
363
+ caret-color:var(--magritte-ui-input-caret-color-override, var(--magritte-color-text-primary-v18-2-0));
364
364
  outline:none;
365
- font-family:var(--magritte-typography-label-2-regular-font-family-v18-1-2);
366
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-1-2);
367
- line-height:var(--magritte-typography-label-2-regular-line-height-v18-1-2);
368
- font-size:var(--magritte-typography-label-2-regular-font-size-v18-1-2);
369
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v18-1-2);
370
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v18-1-2);
371
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v18-1-2);
372
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v18-1-2);
373
- }
374
- .magritte-icon___HEDsQ_5-0-20{
365
+ font-family:var(--magritte-typography-label-2-regular-font-family-v18-2-0);
366
+ font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-2-0);
367
+ line-height:var(--magritte-typography-label-2-regular-line-height-v18-2-0);
368
+ font-size:var(--magritte-typography-label-2-regular-font-size-v18-2-0);
369
+ letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v18-2-0);
370
+ text-indent:var(--magritte-typography-label-2-regular-text-indent-v18-2-0);
371
+ text-transform:var(--magritte-typography-label-2-regular-text-transform-v18-2-0);
372
+ text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v18-2-0);
373
+ }
374
+ .magritte-icon___HEDsQ_5-0-22{
375
375
  display:flex;
376
376
  align-items:center;
377
377
  position:absolute;
378
378
  height:100%;
379
379
  inset:0;
380
380
  pointer-events:none;
381
- --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-2);
381
+ --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-2-0);
382
382
  }
383
- .magritte-with-icon___TPBe2_5-0-20 .magritte-field___9S8Tw_5-0-20,
384
- .magritte-with-icon___TPBe2_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
383
+ .magritte-with-icon___TPBe2_5-0-22 .magritte-field___9S8Tw_5-0-22,
384
+ .magritte-with-icon___TPBe2_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
385
385
  padding-left:calc(24px + 12px);
386
386
  }
387
- .magritte-with-icon___TPBe2_5-0-20 .magritte-rigging-container___Up9Lb_5-0-20{
387
+ .magritte-with-icon___TPBe2_5-0-22 .magritte-rigging-container___Up9Lb_5-0-22{
388
388
  left:calc(24px + 12px);
389
389
  }
390
- .magritte-rigging-container___Up9Lb_5-0-20{
390
+ .magritte-rigging-container___Up9Lb_5-0-22{
391
391
  display:flex;
392
392
  align-items:center;
393
393
  position:absolute;
@@ -395,42 +395,42 @@
395
395
  inset:0;
396
396
  pointer-events:none;
397
397
  }
398
- .magritte-label___YlOQk_5-0-20,
399
- .magritte-fixed-placeholder___PYJIH_5-0-20{
400
- font-family:var(--magritte-typography-label-2-regular-font-family-v18-1-2);
401
- font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-1-2);
402
- line-height:var(--magritte-typography-label-2-regular-line-height-v18-1-2);
403
- font-size:var(--magritte-typography-label-2-regular-font-size-v18-1-2);
404
- letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v18-1-2);
405
- text-indent:var(--magritte-typography-label-2-regular-text-indent-v18-1-2);
406
- text-transform:var(--magritte-typography-label-2-regular-text-transform-v18-1-2);
407
- text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v18-1-2);
398
+ .magritte-label___YlOQk_5-0-22,
399
+ .magritte-fixed-placeholder___PYJIH_5-0-22{
400
+ font-family:var(--magritte-typography-label-2-regular-font-family-v18-2-0);
401
+ font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-2-0);
402
+ line-height:var(--magritte-typography-label-2-regular-line-height-v18-2-0);
403
+ font-size:var(--magritte-typography-label-2-regular-font-size-v18-2-0);
404
+ letter-spacing:var(--magritte-typography-label-2-regular-letter-spacing-v18-2-0);
405
+ text-indent:var(--magritte-typography-label-2-regular-text-indent-v18-2-0);
406
+ text-transform:var(--magritte-typography-label-2-regular-text-transform-v18-2-0);
407
+ text-decoration:var(--magritte-typography-label-2-regular-text-decoration-v18-2-0);
408
408
  white-space:nowrap;
409
409
  overflow:hidden;
410
410
  text-overflow:ellipsis;
411
411
  user-select:none;
412
412
  transition-property:color;
413
413
  transition-duration:var(--animation-100-duration);
414
- transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
415
- color:var(--magritte-color-component-input-text-placeholder-v18-1-2);
414
+ transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-0);
415
+ color:var(--magritte-color-component-input-text-placeholder-v18-2-0);
416
416
  }
417
- .magritte-label___YlOQk_5-0-20{
417
+ .magritte-label___YlOQk_5-0-22{
418
418
  display:block;
419
419
  transition-property:transform, color, font-size, letter-spacing;
420
420
  }
421
- .magritte-label_elevated___PVcpC_5-0-20{
422
- font-family:var(--magritte-typography-label-4-regular-font-family-v18-1-2);
423
- font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-1-2);
424
- line-height:var(--magritte-typography-label-4-regular-line-height-v18-1-2);
425
- font-size:var(--magritte-typography-label-4-regular-font-size-v18-1-2);
426
- letter-spacing:var(--magritte-typography-label-4-regular-letter-spacing-v18-1-2);
427
- text-indent:var(--magritte-typography-label-4-regular-text-indent-v18-1-2);
428
- text-transform:var(--magritte-typography-label-4-regular-text-transform-v18-1-2);
429
- text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v18-1-2);
430
- color:var(--magritte-color-component-input-text-label-v18-1-2);
431
- 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)));
432
- }
433
- .magritte-input__mask___CHda2_5-0-20{
421
+ .magritte-label_elevated___PVcpC_5-0-22{
422
+ font-family:var(--magritte-typography-label-4-regular-font-family-v18-2-0);
423
+ font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-2-0);
424
+ line-height:var(--magritte-typography-label-4-regular-line-height-v18-2-0);
425
+ font-size:var(--magritte-typography-label-4-regular-font-size-v18-2-0);
426
+ letter-spacing:var(--magritte-typography-label-4-regular-letter-spacing-v18-2-0);
427
+ text-indent:var(--magritte-typography-label-4-regular-text-indent-v18-2-0);
428
+ text-transform:var(--magritte-typography-label-4-regular-text-transform-v18-2-0);
429
+ text-decoration:var(--magritte-typography-label-4-regular-text-decoration-v18-2-0);
430
+ color:var(--magritte-color-component-input-text-label-v18-2-0);
431
+ transform:translateY(calc(0px - ((var(--magritte-typography-label-4-regular-line-height-v18-2-0) + var(--magritte-typography-label-2-regular-line-height-v18-2-0)) / 2) + (var(--magritte-typography-label-4-regular-line-height-v18-2-0) / 2)));
432
+ }
433
+ .magritte-input__mask___CHda2_5-0-22{
434
434
  position:absolute;
435
435
  width:100%;
436
436
  pointer-events:none;
@@ -438,13 +438,13 @@
438
438
  max-width:100%;
439
439
  white-space:nowrap;
440
440
  text-overflow:ellipsis;
441
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-2);
441
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-2-0);
442
442
  }
443
- .magritte-value-ghost___IXNZj_5-0-20{
443
+ .magritte-value-ghost___IXNZj_5-0-22{
444
444
  visibility:hidden;
445
445
  white-space:pre;
446
446
  }
447
- .magritte-hint-container___rGsD8_5-0-20{
447
+ .magritte-hint-container___rGsD8_5-0-22{
448
448
  display:flex;
449
449
  flex-grow:1;
450
450
  align-items:center;
@@ -452,36 +452,36 @@
452
452
  gap:12px;
453
453
  min-width:0;
454
454
  }
455
- .magritte-with-right___NUNiP_5-0-20 .magritte-hint-container___rGsD8_5-0-20{
455
+ .magritte-with-right___NUNiP_5-0-22 .magritte-hint-container___rGsD8_5-0-22{
456
456
  padding-right:4px;
457
457
  }
458
- .magritte-hint___EFGK0_5-0-20{
459
- --magritte-ui-text-color-override:var(--magritte-color-component-input-text-description-v18-1-2);
460
- color:var(--magritte-color-component-input-text-description-v18-1-2);
458
+ .magritte-hint___EFGK0_5-0-22{
459
+ --magritte-ui-text-color-override:var(--magritte-color-component-input-text-description-v18-2-0);
460
+ color:var(--magritte-color-component-input-text-description-v18-2-0);
461
461
  overflow:hidden;
462
462
  white-space:nowrap;
463
463
  text-overflow:ellipsis;
464
464
  flex:0 1 auto;
465
465
  }
466
- .magritte-content-container___s-0kX_5-0-20{
466
+ .magritte-content-container___s-0kX_5-0-22{
467
467
  position:relative;
468
468
  flex:1 0 auto;
469
469
  display:flex;
470
470
  padding:8px 0;
471
471
  max-width:100%;
472
472
  }
473
- .magritte-elevated___kPcsM_5-0-20 .magritte-content-container___s-0kX_5-0-20{
473
+ .magritte-elevated___kPcsM_5-0-22 .magritte-content-container___s-0kX_5-0-22{
474
474
  padding:18px 0 0;
475
475
  }
476
- .magritte-counter___Bld3Q_5-0-20{
476
+ .magritte-counter___Bld3Q_5-0-22{
477
477
  padding:0 8px;
478
478
  }
479
- .magritte-value-container___6ReT7_5-0-20{
479
+ .magritte-value-container___6ReT7_5-0-22{
480
480
  position:relative;
481
481
  display:grid;
482
482
  width:100%;
483
483
  }
484
- .magritte-additional-value___9Kyap_5-0-20{
484
+ .magritte-additional-value___9Kyap_5-0-22{
485
485
  display:flex;
486
486
  align-items:center;
487
487
  grid-area:1 / 1;
@@ -491,6 +491,6 @@
491
491
  color:transparent;
492
492
  min-height:24px;
493
493
  }
494
- .magritte-elevated___kPcsM_5-0-20 .magritte-additional-value___9Kyap_5-0-20{
494
+ .magritte-elevated___kPcsM_5-0-22 .magritte-additional-value___9Kyap_5-0-22{
495
495
  min-height:22px;
496
496
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-input",
3
- "version": "5.0.20",
3
+ "version": "5.0.22",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -28,15 +28,15 @@
28
28
  "@hh.ru/magritte-common-text-selection": "0.1.3",
29
29
  "@hh.ru/magritte-common-use-disabled": "1.0.8",
30
30
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
31
- "@hh.ru/magritte-design-tokens": "18.1.2",
32
- "@hh.ru/magritte-ui-action": "4.3.7",
31
+ "@hh.ru/magritte-design-tokens": "18.2.0",
32
+ "@hh.ru/magritte-ui-action": "4.3.9",
33
33
  "@hh.ru/magritte-ui-breakpoint": "4.0.2",
34
- "@hh.ru/magritte-ui-counter": "4.0.10",
35
- "@hh.ru/magritte-ui-form-helper": "1.0.3",
36
- "@hh.ru/magritte-ui-icon": "7.1.7",
34
+ "@hh.ru/magritte-ui-counter": "5.0.0",
35
+ "@hh.ru/magritte-ui-form-helper": "1.0.4",
36
+ "@hh.ru/magritte-ui-icon": "7.1.8",
37
37
  "@hh.ru/magritte-ui-mock-component": "1.0.10",
38
- "@hh.ru/magritte-ui-theme-provider": "1.1.23",
39
- "@hh.ru/magritte-ui-typography": "3.0.10",
38
+ "@hh.ru/magritte-ui-theme-provider": "1.1.24",
39
+ "@hh.ru/magritte-ui-typography": "3.0.11",
40
40
  "@maskito/core": "1.9.0",
41
41
  "@maskito/kit": "1.9.0",
42
42
  "@maskito/react": "1.9.0"
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "a72846c6f393720276c3a8abcbd754142906f5d1"
47
+ "gitHead": "2096654db9454114e1dbf70e7a7786d7e5b688b8"
48
48
  }
package/types.d.ts CHANGED
@@ -77,6 +77,7 @@ interface InputWithRightButtonProps extends InputBaseProps {
77
77
  buttonIcon: IconWrapperComponentSize24;
78
78
  /** Обработчик события клика по кнопке */
79
79
  onButtonClick: OnButtonClickType;
80
+ /** Запрещено к использованию */
80
81
  counter?: never;
81
82
  }
82
83
  export interface InputWithoutRightButtonProps extends InputBaseProps {