@hh.ru/magritte-ui-textarea 2.0.16 → 2.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/Textarea.js +6 -5
  2. package/Textarea.js.map +1 -1
  3. package/UncontrolledTextarea.js +1 -1
  4. package/index.css +140 -80
  5. package/index.js +1 -1
  6. package/package.json +4 -4
package/Textarea.js CHANGED
@@ -5,14 +5,14 @@ import { CSSTransition } from 'react-transition-group';
5
5
  import classnames from 'classnames';
6
6
  import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
7
7
  import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
8
- import { FieldHint } from '@hh.ru/magritte-internal-field-hint';
9
8
  import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
9
+ import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
10
10
  import { GripSize24 } from '@hh.ru/magritte-ui-icon/private';
11
11
  import { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';
12
12
  import { useFocus } from './useFocus.js';
13
13
  import { Text } from '@hh.ru/magritte-ui-typography';
14
14
 
15
- var styles = {"textarea":"magritte-textarea___ugvor_2-0-16","textarea-focused":"magritte-textarea-focused___eiGyC_2-0-16","textareaFocused":"magritte-textarea-focused___eiGyC_2-0-16","textarea-invalid":"magritte-textarea-invalid___iKOPh_2-0-16","textareaInvalid":"magritte-textarea-invalid___iKOPh_2-0-16","textarea-disabled":"magritte-textarea-disabled___XN0cg_2-0-16","textareaDisabled":"magritte-textarea-disabled___XN0cg_2-0-16","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_2-0-16","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_2-0-16","textarea-position-container":"magritte-textarea-position-container___cEpbv_2-0-16","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_2-0-16","textarea-native":"magritte-textarea-native___w-czf_2-0-16","textareaNative":"magritte-textarea-native___w-czf_2-0-16","textarea-label":"magritte-textarea-label___sgTIH_2-0-16","textareaLabel":"magritte-textarea-label___sgTIH_2-0-16","textarea-elevated":"magritte-textarea-elevated___S0jk-_2-0-16","textareaElevated":"magritte-textarea-elevated___S0jk-_2-0-16","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_2-0-16","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_2-0-16","textarea-limit":"magritte-textarea-limit___IjPJy_2-0-16","textareaLimit":"magritte-textarea-limit___IjPJy_2-0-16","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_2-0-16","textareaLimitError":"magritte-textarea-limit-error___vLvZU_2-0-16","textarea-limited":"magritte-textarea-limited___cU1Rg_2-0-16","textareaLimited":"magritte-textarea-limited___cU1Rg_2-0-16","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_2-0-16","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_2-0-16","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_2-0-16","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_2-0-16","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_2-0-16","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_2-0-16","textarea-without-label":"magritte-textarea-without-label___WhBIw_2-0-16","textareaWithoutLabel":"magritte-textarea-without-label___WhBIw_2-0-16","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_2-0-16","textareaWrapper":"magritte-textarea-wrapper___yD7G6_2-0-16","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_2-0-16","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_2-0-16","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_2-0-16","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_2-0-16","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_2-0-16","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_2-0-16","textarea-grip":"magritte-textarea-grip___iL7lq_2-0-16","textareaGrip":"magritte-textarea-grip___iL7lq_2-0-16","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_2-0-16","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_2-0-16","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_2-0-16","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_2-0-16","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_2-0-16","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_2-0-16","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_2-0-16","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_2-0-16","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_2-0-16","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_2-0-16"};
15
+ var styles = {"textarea":"magritte-textarea___ugvor_2-0-17","textarea-focused":"magritte-textarea-focused___eiGyC_2-0-17","textareaFocused":"magritte-textarea-focused___eiGyC_2-0-17","textarea-invalid":"magritte-textarea-invalid___iKOPh_2-0-17","textareaInvalid":"magritte-textarea-invalid___iKOPh_2-0-17","textarea-disabled":"magritte-textarea-disabled___XN0cg_2-0-17","textareaDisabled":"magritte-textarea-disabled___XN0cg_2-0-17","textarea-position-container-wrapper":"magritte-textarea-position-container-wrapper___4Dsui_2-0-17","textareaPositionContainerWrapper":"magritte-textarea-position-container-wrapper___4Dsui_2-0-17","textarea-position-container":"magritte-textarea-position-container___cEpbv_2-0-17","textareaPositionContainer":"magritte-textarea-position-container___cEpbv_2-0-17","textarea-native":"magritte-textarea-native___w-czf_2-0-17","textareaNative":"magritte-textarea-native___w-czf_2-0-17","textarea-label":"magritte-textarea-label___sgTIH_2-0-17","textareaLabel":"magritte-textarea-label___sgTIH_2-0-17","textarea-elevated":"magritte-textarea-elevated___S0jk-_2-0-17","textareaElevated":"magritte-textarea-elevated___S0jk-_2-0-17","textarea-label-elevated":"magritte-textarea-label-elevated___0lxOI_2-0-17","textareaLabelElevated":"magritte-textarea-label-elevated___0lxOI_2-0-17","textarea-limit":"magritte-textarea-limit___IjPJy_2-0-17","textareaLimit":"magritte-textarea-limit___IjPJy_2-0-17","textarea-limit-error":"magritte-textarea-limit-error___vLvZU_2-0-17","textareaLimitError":"magritte-textarea-limit-error___vLvZU_2-0-17","textarea-limited":"magritte-textarea-limited___cU1Rg_2-0-17","textareaLimited":"magritte-textarea-limited___cU1Rg_2-0-17","textarea-layout-fill-both":"magritte-textarea-layout-fill-both___ERS-q_2-0-17","textareaLayoutFillBoth":"magritte-textarea-layout-fill-both___ERS-q_2-0-17","textarea-layout-fill-vertical":"magritte-textarea-layout-fill-vertical___HmNtp_2-0-17","textareaLayoutFillVertical":"magritte-textarea-layout-fill-vertical___HmNtp_2-0-17","textarea-layout-fill-horizontal":"magritte-textarea-layout-fill-horizontal___imBH2_2-0-17","textareaLayoutFillHorizontal":"magritte-textarea-layout-fill-horizontal___imBH2_2-0-17","textarea-without-label":"magritte-textarea-without-label___WhBIw_2-0-17","textareaWithoutLabel":"magritte-textarea-without-label___WhBIw_2-0-17","textarea-wrapper":"magritte-textarea-wrapper___yD7G6_2-0-17","textareaWrapper":"magritte-textarea-wrapper___yD7G6_2-0-17","textarea-layout-hug":"magritte-textarea-layout-hug___tdCMY_2-0-17","textareaLayoutHug":"magritte-textarea-layout-hug___tdCMY_2-0-17","textarea-animation-timeout":"magritte-textarea-animation-timeout___zudbr_2-0-17","textareaAnimationTimeout":"magritte-textarea-animation-timeout___zudbr_2-0-17","textarea-rigging-container":"magritte-textarea-rigging-container___-1S6i_2-0-17","textareaRiggingContainer":"magritte-textarea-rigging-container___-1S6i_2-0-17","textarea-grip":"magritte-textarea-grip___iL7lq_2-0-17","textareaGrip":"magritte-textarea-grip___iL7lq_2-0-17","textarea-grip-icon":"magritte-textarea-grip-icon___YK-9w_2-0-17","textareaGripIcon":"magritte-textarea-grip-icon___YK-9w_2-0-17","textarea-limit-enter":"magritte-textarea-limit-enter___CygGz_2-0-17","textareaLimitEnter":"magritte-textarea-limit-enter___CygGz_2-0-17","textarea-limit-exit":"magritte-textarea-limit-exit___RMp-R_2-0-17","textareaLimitExit":"magritte-textarea-limit-exit___RMp-R_2-0-17","textarea-limit-enter-active":"magritte-textarea-limit-enter-active___8vN-t_2-0-17","textareaLimitEnterActive":"magritte-textarea-limit-enter-active___8vN-t_2-0-17","textarea-limit-exit-active":"magritte-textarea-limit-exit-active___a5kBr_2-0-17","textareaLimitExitActive":"magritte-textarea-limit-exit-active___a5kBr_2-0-17"};
16
16
 
17
17
  const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, placeholder, disabled = false, elevatePlaceholder = false, invalid = false, invalidLimit = false, maxLength, description, errorMessage, resize = 'none', layout = 'fixed', ...restProps }, ref) => {
18
18
  const { isXS, isS } = useBreakpoint();
@@ -92,8 +92,9 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
92
92
  return (jsxs("div", { "data-qa": "textarea-wrapper", className: classnames(styles.textarea, {
93
93
  [styles.textareaFocused]: isFocused,
94
94
  [styles.textareaDisabled]: isComponentDisabled,
95
- [styles.textareaInvalid]: !!(invalidState || internalInvalid) && !isFocused,
96
- [styles.textareaLimitError]: ((invalidLimit || internalInvalid) && !isFocused) ||
95
+ [styles.textareaInvalid]: !!(invalidState || internalInvalid),
96
+ [styles.textareaLimitError]: invalidLimit ||
97
+ internalInvalid ||
97
98
  (maxLength === undefined || maxLength === null ? false : value.length > maxLength),
98
99
  [styles.textareaLimited]: !!maxLength,
99
100
  [styles.textareaLayoutFillBoth]: layout === 'fill-both',
@@ -112,7 +113,7 @@ const TextAreaComponent = ({ onChange, onFocus, onBlur, onValidate, value, place
112
113
  enterActive: styles.textareaLimitEnterActive,
113
114
  exit: styles.textareaLimitExit,
114
115
  exitActive: styles.textareaLimitExitActive,
115
- }, unmountOnExit: true, nodeRef: limitRef, children: jsx("div", { className: styles.textareaLimit, ref: limitRef, children: jsxs(Text, { typography: "label-3-regular", children: [value.length, "/", maxLength] }) }) }))] }), currentResizeValue !== 'none' && (jsx("div", { className: styles.textareaGrip, children: jsx("div", { className: styles.textareaGripIcon, children: jsx(GripSize24, {}) }) }))] }), jsx(FieldHint, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, focused: isFocused, invalid: invalidState, "data-qa": "textarea-hint-container" })] }));
116
+ }, unmountOnExit: true, nodeRef: limitRef, children: jsx("div", { className: styles.textareaLimit, ref: limitRef, children: jsxs(Text, { typography: "label-3-regular", children: [value.length, "/", maxLength] }) }) }))] }), currentResizeValue !== 'none' && (jsx("div", { className: styles.textareaGrip, children: jsx("div", { className: styles.textareaGripIcon, children: jsx(GripSize24, {}) }) }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalidState, "data-qa": "textarea-hint-container" })] }));
116
117
  };
117
118
  const TextArea = forwardRef(TextAreaComponent);
118
119
  TextArea.displayName = 'TextArea';
package/Textarea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../src/Textarea.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef, useId, useRef, useState, type TextareaHTMLAttributes, useEffect } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport type { ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst TextAreaComponent = (\n {\n onChange,\n onFocus,\n onBlur,\n onValidate,\n value,\n placeholder,\n disabled = false,\n elevatePlaceholder = false,\n invalid = false,\n invalidLimit = false,\n maxLength,\n description,\n errorMessage,\n resize = 'none',\n layout = 'fixed',\n ...restProps\n }: ControlledTextAreaProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps>,\n ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n const { isXS, isS } = useBreakpoint();\n const [internalInvalid, setInternalInvalid] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const limitRef = useRef<HTMLDivElement>(null);\n const previousInvalid = useRef(internalInvalid);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const resizableDivRef = useRef<HTMLDivElement>(null);\n const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n const resizableDivWasResized = useRef(false);\n const textAreaRefCallback = useMultipleRefs(ref, textAreaRef);\n const descriptionId = useId();\n const labelId = useId();\n const [animationTimeout, setAnimationTimeout] = useState(100);\n const currentResizeValue = isXS || isS ? 'none' : resize;\n const isResizable = currentResizeValue !== 'none';\n\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled || !!disabled;\n\n useEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n if (Number.isInteger(animationTimeout)) {\n setAnimationTimeout(animationTimeout);\n }\n document.body.removeChild(animationTimeoutElement);\n }, []);\n\n const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n const handleClick = () => {\n if (resizableDivWasResized.current) {\n resizableDivWasResized.current = false;\n return;\n }\n textAreaRef.current?.focus();\n };\n\n const handleMouseUp = () => {\n if (\n resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n ) {\n resizableDivWasResized.current = true;\n }\n };\n\n const handleMouseDown = () => {\n resizableDivSizes.current = {\n width: resizableDivRef.current?.offsetWidth,\n height: resizableDivRef.current?.offsetHeight,\n };\n };\n\n useEffect(() => {\n if (maxLength) {\n const invalid = !isFocused && value.length > maxLength;\n setInternalInvalid(invalid);\n\n if (previousInvalid.current !== invalid) {\n onValidate({ invalidLimit: invalid });\n }\n previousInvalid.current = invalid;\n }\n }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n useEffect(() => {\n if (textAreaRef.current) {\n setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const isElevatedPlaceholder = !!elevatePlaceholder && !!placeholder;\n const showLabel = isElevatedPlaceholder || value === '';\n\n const invalidState = invalid || invalidLimit;\n const ariaProps = useInputAriaProps({\n invalid: invalidState || internalInvalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const hasElevatedPlaceholderClass = (isFocused || value !== '') && isElevatedPlaceholder;\n\n return (\n <div\n data-qa=\"textarea-wrapper\"\n className={classnames(styles.textarea, {\n [styles.textareaFocused]: isFocused,\n [styles.textareaDisabled]: isComponentDisabled,\n [styles.textareaInvalid]: !!(invalidState || internalInvalid) && !isFocused,\n [styles.textareaLimitError]:\n ((invalidLimit || internalInvalid) && !isFocused) ||\n (maxLength === undefined || maxLength === null ? false : value.length > maxLength),\n [styles.textareaLimited]: !!maxLength,\n [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n [styles.textareaLayoutHug]: layout === 'hug',\n [styles.textareaWithoutLabel]: !isElevatedPlaceholder,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainerWrapper, {\n 'focus-visible': isFocusVisible,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainer, {\n [styles.textareaElevated]: isElevatedPlaceholder,\n })}\n onClick={handleClick}\n onMouseDown={isResizable ? handleMouseDown : undefined}\n onMouseUp={isResizable ? handleMouseUp : undefined}\n style={{ resize: currentResizeValue }}\n ref={resizableDivRef}\n >\n <div\n className={styles.textareaWrapper}\n data-qa=\"textarea-native-wrapper\"\n data-replicated-value={layout === 'hug' ? value : ''}\n >\n <textarea\n {...restProps}\n {...ariaProps}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={styles.textareaNative}\n value={value}\n onChange={onChange}\n onFocus={focusHandler}\n onBlur={blurHandler}\n ref={textAreaRefCallback}\n />\n </div>\n {showLabel && (\n <div className={styles.textareaRiggingContainer}>\n <label\n className={classnames(styles.textareaLabel, {\n [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n </div>\n )}\n {!!maxLength && (\n <CSSTransition\n in={isFocused || value.length > maxLength}\n timeout={animationTimeout}\n classNames={{\n enter: styles.textareaLimitEnter,\n enterActive: styles.textareaLimitEnterActive,\n exit: styles.textareaLimitExit,\n exitActive: styles.textareaLimitExitActive,\n }}\n unmountOnExit\n nodeRef={limitRef}\n >\n <div className={styles.textareaLimit} ref={limitRef}>\n <Text typography=\"label-3-regular\">\n {value.length}/{maxLength}\n </Text>\n </div>\n </CSSTransition>\n )}\n </div>\n {currentResizeValue !== 'none' && (\n <div className={styles.textareaGrip}>\n <div className={styles.textareaGripIcon}>\n <GripSize24 />\n </div>\n </div>\n )}\n </div>\n <FieldHint\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n focused={isFocused}\n invalid={invalidState}\n data-qa=\"textarea-hint-container\"\n />\n </div>\n );\n};\n\nconst TextArea = forwardRef(TextAreaComponent);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"Textarea.js","sources":["../src/Textarea.tsx"],"sourcesContent":["import { forwardRef, type ForwardedRef, useId, useRef, useState, type TextareaHTMLAttributes, useEffect } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { GripSize24 } from '@hh.ru/magritte-ui-icon/private';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport type { ControlledTextAreaProps } from '@hh.ru/magritte-ui-textarea/types';\nimport { useFocus } from '@hh.ru/magritte-ui-textarea/useFocus';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './textarea.less';\n\nconst TextAreaComponent = (\n {\n onChange,\n onFocus,\n onBlur,\n onValidate,\n value,\n placeholder,\n disabled = false,\n elevatePlaceholder = false,\n invalid = false,\n invalidLimit = false,\n maxLength,\n description,\n errorMessage,\n resize = 'none',\n layout = 'fixed',\n ...restProps\n }: ControlledTextAreaProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof ControlledTextAreaProps>,\n ref: ForwardedRef<HTMLTextAreaElement>\n) => {\n const { isXS, isS } = useBreakpoint();\n const [internalInvalid, setInternalInvalid] = useState(false);\n const [isFocusVisible, setFocusVisible] = useState(false);\n const limitRef = useRef<HTMLDivElement>(null);\n const previousInvalid = useRef(internalInvalid);\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n const resizableDivRef = useRef<HTMLDivElement>(null);\n const resizableDivSizes = useRef<{ width?: number; height?: number } | null>(null);\n const resizableDivWasResized = useRef(false);\n const textAreaRefCallback = useMultipleRefs(ref, textAreaRef);\n const descriptionId = useId();\n const labelId = useId();\n const [animationTimeout, setAnimationTimeout] = useState(100);\n const currentResizeValue = isXS || isS ? 'none' : resize;\n const isResizable = currentResizeValue !== 'none';\n\n const forceDisabled = useDisabled();\n const isComponentDisabled = forceDisabled || !!disabled;\n\n useEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.textareaAnimationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n if (Number.isInteger(animationTimeout)) {\n setAnimationTimeout(animationTimeout);\n }\n document.body.removeChild(animationTimeoutElement);\n }, []);\n\n const { focusHandler, blurHandler, isFocused } = useFocus<HTMLTextAreaElement>(onFocus, onBlur);\n\n const handleClick = () => {\n if (resizableDivWasResized.current) {\n resizableDivWasResized.current = false;\n return;\n }\n textAreaRef.current?.focus();\n };\n\n const handleMouseUp = () => {\n if (\n resizableDivRef.current?.offsetWidth !== resizableDivSizes.current?.width ||\n resizableDivRef.current?.offsetHeight !== resizableDivSizes.current?.height\n ) {\n resizableDivWasResized.current = true;\n }\n };\n\n const handleMouseDown = () => {\n resizableDivSizes.current = {\n width: resizableDivRef.current?.offsetWidth,\n height: resizableDivRef.current?.offsetHeight,\n };\n };\n\n useEffect(() => {\n if (maxLength) {\n const invalid = !isFocused && value.length > maxLength;\n setInternalInvalid(invalid);\n\n if (previousInvalid.current !== invalid) {\n onValidate({ invalidLimit: invalid });\n }\n previousInvalid.current = invalid;\n }\n }, [onValidate, value, internalInvalid, maxLength, isFocused]);\n\n useEffect(() => {\n if (textAreaRef.current) {\n setFocusVisible(isFocused && textAreaRef.current.classList.contains('focus-visible'));\n }\n }, [isFocused]);\n\n const isElevatedPlaceholder = !!elevatePlaceholder && !!placeholder;\n const showLabel = isElevatedPlaceholder || value === '';\n\n const invalidState = invalid || invalidLimit;\n const ariaProps = useInputAriaProps({\n invalid: invalidState || internalInvalid,\n hasDescription: !!description,\n hasPlaceholder: !!placeholder,\n descriptionId,\n labelId,\n });\n\n const hasElevatedPlaceholderClass = (isFocused || value !== '') && isElevatedPlaceholder;\n\n return (\n <div\n data-qa=\"textarea-wrapper\"\n className={classnames(styles.textarea, {\n [styles.textareaFocused]: isFocused,\n [styles.textareaDisabled]: isComponentDisabled,\n [styles.textareaInvalid]: !!(invalidState || internalInvalid),\n [styles.textareaLimitError]:\n invalidLimit ||\n internalInvalid ||\n (maxLength === undefined || maxLength === null ? false : value.length > maxLength),\n [styles.textareaLimited]: !!maxLength,\n [styles.textareaLayoutFillBoth]: layout === 'fill-both',\n [styles.textareaLayoutFillVertical]: layout === 'fill-vertical',\n [styles.textareaLayoutFillHorizontal]: layout === 'fill-horizontal',\n [styles.textareaLayoutHug]: layout === 'hug',\n [styles.textareaWithoutLabel]: !isElevatedPlaceholder,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainerWrapper, {\n 'focus-visible': isFocusVisible,\n })}\n >\n <div\n className={classnames(styles.textareaPositionContainer, {\n [styles.textareaElevated]: isElevatedPlaceholder,\n })}\n onClick={handleClick}\n onMouseDown={isResizable ? handleMouseDown : undefined}\n onMouseUp={isResizable ? handleMouseUp : undefined}\n style={{ resize: currentResizeValue }}\n ref={resizableDivRef}\n >\n <div\n className={styles.textareaWrapper}\n data-qa=\"textarea-native-wrapper\"\n data-replicated-value={layout === 'hug' ? value : ''}\n >\n <textarea\n {...restProps}\n {...ariaProps}\n disabled={isComponentDisabled}\n suppressHydrationWarning\n className={styles.textareaNative}\n value={value}\n onChange={onChange}\n onFocus={focusHandler}\n onBlur={blurHandler}\n ref={textAreaRefCallback}\n />\n </div>\n {showLabel && (\n <div className={styles.textareaRiggingContainer}>\n <label\n className={classnames(styles.textareaLabel, {\n [styles.textareaLabelElevated]: hasElevatedPlaceholderClass,\n })}\n id={ariaProps['aria-labelledby']}\n >\n {placeholder}\n </label>\n </div>\n )}\n {!!maxLength && (\n <CSSTransition\n in={isFocused || value.length > maxLength}\n timeout={animationTimeout}\n classNames={{\n enter: styles.textareaLimitEnter,\n enterActive: styles.textareaLimitEnterActive,\n exit: styles.textareaLimitExit,\n exitActive: styles.textareaLimitExitActive,\n }}\n unmountOnExit\n nodeRef={limitRef}\n >\n <div className={styles.textareaLimit} ref={limitRef}>\n <Text typography=\"label-3-regular\">\n {value.length}/{maxLength}\n </Text>\n </div>\n </CSSTransition>\n )}\n </div>\n {currentResizeValue !== 'none' && (\n <div className={styles.textareaGrip}>\n <div className={styles.textareaGripIcon}>\n <GripSize24 />\n </div>\n </div>\n )}\n </div>\n <FormHelper\n description={description}\n errorMessage={errorMessage}\n descriptionId={ariaProps['aria-describedby']}\n disabled={isComponentDisabled}\n invalid={invalidState}\n data-qa=\"textarea-hint-container\"\n />\n </div>\n );\n};\n\nconst TextArea = forwardRef(TextAreaComponent);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,iBAAiB,GAAG,CACtB,EACI,QAAQ,EACR,OAAO,EACP,MAAM,EACN,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,MAAM,GAAG,MAAM,EACf,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EAC6F,EAC7G,GAAsC,KACtC;IACA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,aAAa,EAAE,CAAC;IACtC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC9C,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAChD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACrD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAA6C,IAAI,CAAC,CAAC;AACnF,IAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;AAC9D,IAAA,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;AAC9B,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC9D,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAI,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AACzD,IAAA,MAAM,WAAW,GAAG,kBAAkB,KAAK,MAAM,CAAC;AAElD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC;IAExD,SAAS,CAAC,MAAK;QACX,MAAM,uBAAuB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,uBAAuB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;AACvE,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;AAC/D,QAAA,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAsB,oBAAA,CAAA,CAAC,EAAE,EAAE,CAAC,CAAC;AACtF,QAAA,IAAI,MAAM,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE;YACpC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AACzC,SAAA;AACD,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;KACtD,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAsB,OAAO,EAAE,MAAM,CAAC,CAAC;IAEhG,MAAM,WAAW,GAAG,MAAK;QACrB,IAAI,sBAAsB,CAAC,OAAO,EAAE;AAChC,YAAA,sBAAsB,CAAC,OAAO,GAAG,KAAK,CAAC;YACvC,OAAO;AACV,SAAA;AACD,QAAA,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AACjC,KAAC,CAAC;IAEF,MAAM,aAAa,GAAG,MAAK;QACvB,IACI,eAAe,CAAC,OAAO,EAAE,WAAW,KAAK,iBAAiB,CAAC,OAAO,EAAE,KAAK;YACzE,eAAe,CAAC,OAAO,EAAE,YAAY,KAAK,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAC7E;AACE,YAAA,sBAAsB,CAAC,OAAO,GAAG,IAAI,CAAC;AACzC,SAAA;AACL,KAAC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAK;QACzB,iBAAiB,CAAC,OAAO,GAAG;AACxB,YAAA,KAAK,EAAE,eAAe,CAAC,OAAO,EAAE,WAAW;AAC3C,YAAA,MAAM,EAAE,eAAe,CAAC,OAAO,EAAE,YAAY;SAChD,CAAC;AACN,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,SAAS,EAAE;YACX,MAAM,OAAO,GAAG,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;YACvD,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAE5B,YAAA,IAAI,eAAe,CAAC,OAAO,KAAK,OAAO,EAAE;AACrC,gBAAA,UAAU,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;AACzC,aAAA;AACD,YAAA,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;AACrC,SAAA;AACL,KAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/D,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,CAAC,OAAO,EAAE;AACrB,YAAA,eAAe,CAAC,SAAS,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;AACzF,SAAA;AACL,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,WAAW,CAAC;AACpE,IAAA,MAAM,SAAS,GAAG,qBAAqB,IAAI,KAAK,KAAK,EAAE,CAAC;AAExD,IAAA,MAAM,YAAY,GAAG,OAAO,IAAI,YAAY,CAAC;IAC7C,MAAM,SAAS,GAAG,iBAAiB,CAAC;QAChC,OAAO,EAAE,YAAY,IAAI,eAAe;QACxC,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,aAAa;QACb,OAAO;AACV,KAAA,CAAC,CAAC;IAEH,MAAM,2BAA2B,GAAG,CAAC,SAAS,IAAI,KAAK,KAAK,EAAE,KAAK,qBAAqB,CAAC;IAEzF,QACIA,IACY,CAAA,KAAA,EAAA,EAAA,SAAA,EAAA,kBAAkB,EAC1B,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE;AACnC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,SAAS;AACnC,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,mBAAmB;YAC9C,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,EAAE,YAAY,IAAI,eAAe,CAAC;AAC7D,YAAA,CAAC,MAAM,CAAC,kBAAkB,GACtB,YAAY;gBACZ,eAAe;AACf,iBAAC,SAAS,KAAK,SAAS,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;AACtF,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,CAAC,SAAS;AACrC,YAAA,CAAC,MAAM,CAAC,sBAAsB,GAAG,MAAM,KAAK,WAAW;AACvD,YAAA,CAAC,MAAM,CAAC,0BAA0B,GAAG,MAAM,KAAK,eAAe;AAC/D,YAAA,CAAC,MAAM,CAAC,4BAA4B,GAAG,MAAM,KAAK,iBAAiB;AACnE,YAAA,CAAC,MAAM,CAAC,iBAAiB,GAAG,MAAM,KAAK,KAAK;AAC5C,YAAA,CAAC,MAAM,CAAC,oBAAoB,GAAG,CAAC,qBAAqB;SACxD,CAAC,EAAA,QAAA,EAAA,CAEFA,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gCAAgC,EAAE;AAC3D,oBAAA,eAAe,EAAE,cAAc;iBAClC,CAAC,EAAA,QAAA,EAAA,CAEFA,cACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,yBAAyB,EAAE;AACpD,4BAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,qBAAqB;yBACnD,CAAC,EACF,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EACtD,SAAS,EAAE,WAAW,GAAG,aAAa,GAAG,SAAS,EAClD,KAAK,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,EACrC,GAAG,EAAE,eAAe,EAAA,QAAA,EAAA,CAEpBC,GACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,eAAe,EACzB,SAAA,EAAA,yBAAyB,EACV,uBAAA,EAAA,MAAM,KAAK,KAAK,GAAG,KAAK,GAAG,EAAE,EAAA,QAAA,EAEpDA,GACQ,CAAA,UAAA,EAAA,EAAA,GAAA,SAAS,EACT,GAAA,SAAS,EACb,QAAQ,EAAE,mBAAmB,EAC7B,wBAAwB,EACxB,IAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,mBAAmB,EAAA,CAC1B,EACA,CAAA,EACL,SAAS,KACNA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,EAAA,QAAA,EAC3CA,GACI,CAAA,OAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,EAAE;AACxC,wCAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,2BAA2B;AAC9D,qCAAA,CAAC,EACF,EAAE,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAAA,QAAA,EAE/B,WAAW,EAAA,CACR,GACN,CACT,EACA,CAAC,CAAC,SAAS,KACRA,GAAC,CAAA,aAAa,IACV,EAAE,EAAE,SAAS,IAAI,KAAK,CAAC,MAAM,GAAG,SAAS,EACzC,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE;oCACR,KAAK,EAAE,MAAM,CAAC,kBAAkB;oCAChC,WAAW,EAAE,MAAM,CAAC,wBAAwB;oCAC5C,IAAI,EAAE,MAAM,CAAC,iBAAiB;oCAC9B,UAAU,EAAE,MAAM,CAAC,uBAAuB;iCAC7C,EACD,aAAa,QACb,OAAO,EAAE,QAAQ,EAEjB,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,QAAQ,YAC/CD,IAAC,CAAA,IAAI,IAAC,UAAU,EAAC,iBAAiB,EAC7B,QAAA,EAAA,CAAA,KAAK,CAAC,MAAM,EAAA,GAAA,EAAG,SAAS,CACtB,EAAA,CAAA,EAAA,CACL,GACM,CACnB,CAAA,EAAA,CACC,EACL,kBAAkB,KAAK,MAAM,KAC1BC,aAAK,SAAS,EAAE,MAAM,CAAC,YAAY,YAC/BA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,gBAAgB,EACnC,QAAA,EAAAA,GAAA,CAAC,UAAU,EAAG,EAAA,CAAA,EAAA,CACZ,GACJ,CACT,CAAA,EAAA,CACC,EACNA,GAAC,CAAA,UAAU,IACP,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAAC,EAC5C,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,YAAY,EAAA,SAAA,EACb,yBAAyB,EACnC,CAAA,CAAA,EAAA,CACA,EACR;AACN,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,iBAAiB,EAAE;AAE/C,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
package/UncontrolledTextarea.js CHANGED
@@ -6,8 +6,8 @@ import 'react-transition-group';
6
6
  import 'classnames';
7
7
  import '@hh.ru/magritte-common-use-disabled';
8
8
  import '@hh.ru/magritte-common-use-multiple-refs';
9
- import '@hh.ru/magritte-internal-field-hint';
10
9
  import '@hh.ru/magritte-ui-breakpoint';
10
+ import '@hh.ru/magritte-ui-form-helper';
11
11
  import '@hh.ru/magritte-ui-icon/private';
12
12
  import '@hh.ru/magritte-ui-input/useInputAriaProps';
13
13
  import './useFocus.js';
package/index.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
5
5
  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
6
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;
7
8
  --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#EEF1F7;
8
9
  --magritte-color-component-input-background-field-v18-1-2:#ffffff;
9
10
  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#ffffff;
@@ -15,6 +16,7 @@
15
16
  --magritte-color-component-input-text-state-label-disabled-v18-1-2:#AABBCA;
16
17
  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#AABBCA;
17
18
  --magritte-color-component-input-text-state-limit-disabled-v18-1-2:#AABBCA;
19
+ --magritte-color-component-input-text-state-description-disabled-v18-1-2:#AABBCA;
18
20
  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#000000;
19
21
  --magritte-color-component-input-text-state-content-focused-v18-1-2:#000000;
20
22
  --magritte-color-component-input-text-state-content-invalid-v18-1-2:#000000;
@@ -27,6 +29,9 @@
27
29
  --magritte-color-component-input-text-state-limit-focused-v18-1-2:#768694;
28
30
  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#AABBCA;
29
31
  --magritte-color-component-input-text-state-limit-invalid-v18-1-2:#ff4d3a;
32
+ --magritte-color-component-input-text-state-description-hovered-v18-1-2:#768694;
33
+ --magritte-color-component-input-text-state-description-focused-v18-1-2:#768694;
34
+ --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
30
35
  --magritte-color-component-input-icon-grip-v18-1-2:#AABBCA;
31
36
  --magritte-color-component-input-text-content-v18-1-2:#000000;
32
37
  --magritte-color-component-input-text-label-v18-1-2:#768694;
@@ -61,6 +66,7 @@
61
66
  --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
62
67
  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
63
68
  --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
69
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2:#ff4d3a7a;
64
70
  --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#111;
65
71
  --magritte-color-component-input-background-field-v18-1-2:#1B1B1B;
66
72
  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#1B1B1B;
@@ -76,6 +82,7 @@
76
82
  --magritte-color-component-input-text-state-label-disabled-v18-1-2:#474747;
77
83
  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#474747;
78
84
  --magritte-color-component-input-text-state-limit-disabled-v18-1-2:#474747;
85
+ --magritte-color-component-input-text-state-description-disabled-v18-1-2:#535353;
79
86
  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#ffffff;
80
87
  --magritte-color-component-input-text-state-content-focused-v18-1-2:#ffffff;
81
88
  --magritte-color-component-input-text-state-content-invalid-v18-1-2:#ffffff;
@@ -88,179 +95,232 @@
88
95
  --magritte-color-component-input-text-state-limit-focused-v18-1-2:#535353;
89
96
  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#535353;
90
97
  --magritte-color-component-input-text-state-limit-invalid-v18-1-2:#ff4d3a;
98
+ --magritte-color-component-input-text-state-description-hovered-v18-1-2:#535353;
99
+ --magritte-color-component-input-text-state-description-focused-v18-1-2:#535353;
100
+ --magritte-color-component-input-text-state-description-invalid-v18-1-2:#ff4d3a;
91
101
  --magritte-color-component-input-icon-grip-v18-1-2:#535353;
92
102
  }
93
- .magritte-textarea___ugvor_2-0-16{
103
+ .magritte-textarea___ugvor_2-0-17{
94
104
  display:inline-flex;
95
105
  flex-flow:column;
96
106
  --animation-100-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
97
107
  --animation-300-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-1-2);
98
108
  }
99
109
  @media (min-width: 1020px){
100
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover::after{
110
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover{
111
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
112
+ }
113
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
101
114
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
102
115
  border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
103
116
  border-width:1px;
104
117
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
105
118
  }
106
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-position-container___cEpbv_2-0-16{
119
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-position-container___cEpbv_2-0-17{
107
120
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
108
121
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
109
122
  }
110
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-native___w-czf_2-0-16{
123
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-native___w-czf_2-0-17{
111
124
  color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
112
125
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
113
126
  opacity:1;
114
127
  }
115
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-label___sgTIH_2-0-16{
128
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-label___sgTIH_2-0-17{
116
129
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
117
130
  }
118
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-elevated___S0jk-_2-0-16 .magritte-textarea-label-elevated___0lxOI_2-0-16{
131
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
119
132
  color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
120
133
  }
121
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-limit___IjPJy_2-0-16{
134
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-limit___IjPJy_2-0-17{
122
135
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
123
136
  }
124
- body.magritte-old-layout .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-limit___IjPJy_2-0-16{
137
+ body.magritte-old-layout .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-limit___IjPJy_2-0-17{
125
138
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v18-1-2);
126
139
  }
127
140
  }
128
141
  @media (min-width: 1024px){
129
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover::after{
142
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover{
143
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-hovered-v18-1-2);
144
+ }
145
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
130
146
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
131
147
  border-right-color:var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
132
148
  border-width:1px;
133
149
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
134
150
  }
135
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-position-container___cEpbv_2-0-16{
151
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-position-container___cEpbv_2-0-17{
136
152
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
137
153
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
138
154
  }
139
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-native___w-czf_2-0-16{
155
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-native___w-czf_2-0-17{
140
156
  color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
141
157
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
142
158
  opacity:1;
143
159
  }
144
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-label___sgTIH_2-0-16{
160
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-label___sgTIH_2-0-17{
145
161
  color:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
146
162
  }
147
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-elevated___S0jk-_2-0-16 .magritte-textarea-label-elevated___0lxOI_2-0-16{
163
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
148
164
  color:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
149
165
  }
150
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-limit___IjPJy_2-0-16{
166
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-limit___IjPJy_2-0-17{
151
167
  background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
152
168
  }
153
- body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-16:not(.magritte-textarea-focused___eiGyC_2-0-16):not(.magritte-textarea-invalid___iKOPh_2-0-16):not(.magritte-textarea-disabled___XN0cg_2-0-16) .magritte-textarea-position-container-wrapper___4Dsui_2-0-16:hover .magritte-textarea-limit___IjPJy_2-0-16{
169
+ body:not(.magritte-old-layout) .magritte-textarea___ugvor_2-0-17:not(.magritte-textarea-focused___eiGyC_2-0-17):not(.magritte-textarea-invalid___iKOPh_2-0-17):not(.magritte-textarea-disabled___XN0cg_2-0-17):hover .magritte-textarea-limit___IjPJy_2-0-17{
154
170
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-hovered-v18-1-2);
155
171
  }
156
172
  }
157
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16::after{
173
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17{
174
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-focused-v18-1-2);
175
+ }
176
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
158
177
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
159
178
  border-right-color:var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
160
179
  border-width:2px;
161
180
  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
162
181
  }
163
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-position-container___cEpbv_2-0-16{
182
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17{
164
183
  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
165
184
  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
166
185
  }
167
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
186
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
168
187
  color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
169
188
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
170
189
  opacity:1;
171
190
  }
172
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-label___sgTIH_2-0-16{
191
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-label___sgTIH_2-0-17{
173
192
  color:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
174
193
  }
175
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-elevated___S0jk-_2-0-16 .magritte-textarea-label-elevated___0lxOI_2-0-16{
194
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
176
195
  color:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
177
196
  }
178
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
197
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
179
198
  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
180
199
  }
181
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
200
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
182
201
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-focused-v18-1-2);
183
202
  }
184
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16.magritte-textarea-limit-error___vLvZU_2-0-16{
203
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17,
204
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17{
205
+ --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
206
+ }
207
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after,
208
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
209
+ border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
210
+ border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
211
+ border-width:2px;
212
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
213
+ }
214
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17,
215
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17{
216
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
217
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
185
218
  }
186
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-focused___eiGyC_2-0-16.magritte-textarea-limit-error___vLvZU_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
219
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-native___w-czf_2-0-17,
220
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
221
+ color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
222
+ -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
223
+ opacity:1;
224
+ }
225
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-label___sgTIH_2-0-17,
226
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-label___sgTIH_2-0-17{
227
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
228
+ }
229
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17,
230
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
231
+ color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
232
+ }
233
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17,
234
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
235
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
236
+ }
237
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-focused___eiGyC_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
187
238
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v18-1-2);
188
239
  }
189
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16::after{
240
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17{
241
+ --magritte-ui-form-helper-error-color-override:var(--magritte-color-component-input-text-state-description-invalid-v18-1-2);
242
+ }
243
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
190
244
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
191
245
  border-right-color:var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
192
246
  border-width:1px;
193
247
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
194
248
  }
195
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-position-container___cEpbv_2-0-16{
249
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17{
196
250
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
197
251
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
198
252
  }
199
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
253
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
200
254
  color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
201
255
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
202
256
  opacity:1;
203
257
  }
204
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-label___sgTIH_2-0-16{
258
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-label___sgTIH_2-0-17{
205
259
  color:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
206
260
  }
207
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-elevated___S0jk-_2-0-16 .magritte-textarea-label-elevated___0lxOI_2-0-16{
261
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
208
262
  color:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
209
263
  }
210
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-invalid___iKOPh_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
264
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
211
265
  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
212
266
  }
213
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-limit-error___vLvZU_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
267
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-limit-error___vLvZU_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
214
268
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-invalid-v18-1-2);
215
269
  }
216
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16::after{
270
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17{
271
+ --magritte-ui-form-helper-description-color-override:var(--magritte-color-component-input-text-state-description-disabled-v18-1-2);
272
+ }
273
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
217
274
  border-bottom-color:var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
218
275
  border-right-color:var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
219
276
  border-width:1px;
220
277
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
221
278
  }
222
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-position-container___cEpbv_2-0-16{
279
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17{
223
280
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
224
281
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
225
282
  }
226
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
283
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
227
284
  color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
228
285
  -webkit-text-fill-color:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
229
286
  opacity:1;
230
287
  }
231
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-label___sgTIH_2-0-16{
288
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-label___sgTIH_2-0-17{
232
289
  color:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
233
290
  }
234
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-elevated___S0jk-_2-0-16 .magritte-textarea-label-elevated___0lxOI_2-0-16{
291
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-elevated___S0jk-_2-0-17 .magritte-textarea-label-elevated___0lxOI_2-0-17{
235
292
  color:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
236
293
  }
237
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
294
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
238
295
  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
239
296
  }
240
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16 .magritte-textarea-limit___IjPJy_2-0-16{
297
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-limit___IjPJy_2-0-17{
241
298
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-limit-disabled-v18-1-2);
242
299
  }
243
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-position-container___cEpbv_2-0-16,
244
- .magritte-textarea___ugvor_2-0-16.magritte-textarea-disabled___XN0cg_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
300
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17,
301
+ .magritte-textarea___ugvor_2-0-17.magritte-textarea-disabled___XN0cg_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
245
302
  cursor:not-allowed;
246
303
  }
247
304
  @media (prefers-reduced-motion){
248
- .magritte-textarea___ugvor_2-0-16{
305
+ .magritte-textarea___ugvor_2-0-17{
249
306
  --animation-100-duration:1ms;
250
307
  --animation-300-duration:1ms;
251
308
  }
252
309
  }
253
- .magritte-textarea-position-container-wrapper___4Dsui_2-0-16{
310
+ .magritte-textarea-invalid___iKOPh_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17.focus-visible{
311
+ outline:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v18-1-2) solid 4px;
312
+ }
313
+ .magritte-textarea-position-container-wrapper___4Dsui_2-0-17{
254
314
  display:inline-flex;
255
315
  position:relative;
256
316
  overflow:hidden;
257
317
  width:100%;
258
318
  border-radius:12px;
259
319
  }
260
- .magritte-textarea-position-container-wrapper___4Dsui_2-0-16.focus-visible{
320
+ .magritte-textarea-position-container-wrapper___4Dsui_2-0-17.focus-visible{
261
321
  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
262
322
  }
263
- .magritte-textarea-position-container-wrapper___4Dsui_2-0-16::after{
323
+ .magritte-textarea-position-container-wrapper___4Dsui_2-0-17::after{
264
324
  display:block;
265
325
  pointer-events:none;
266
326
  user-select:none;
@@ -275,7 +335,7 @@
275
335
  border-bottom:1px solid var(--magritte-color-component-input-stroke-field-v18-1-2);
276
336
  border-right:1px solid var(--magritte-color-component-input-stroke-field-v18-1-2);
277
337
  }
278
- .magritte-textarea-native___w-czf_2-0-16{
338
+ .magritte-textarea-native___w-czf_2-0-17{
279
339
  box-sizing:border-box;
280
340
  border:0;
281
341
  width:100%;
@@ -297,59 +357,59 @@
297
357
  background:none;
298
358
  appearance:none;
299
359
  }
300
- .magritte-textarea-native___w-czf_2-0-16:focus{
360
+ .magritte-textarea-native___w-czf_2-0-17:focus{
301
361
  outline:none;
302
362
  }
303
- .magritte-textarea-limited___cU1Rg_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
363
+ .magritte-textarea-limited___cU1Rg_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
304
364
  min-height:calc(72px - var(--magritte-typography-label-4-regular-line-height-v18-1-2));
305
365
  }
306
- .magritte-textarea-limited___cU1Rg_2-0-16 .magritte-textarea-position-container___cEpbv_2-0-16{
366
+ .magritte-textarea-limited___cU1Rg_2-0-17 .magritte-textarea-position-container___cEpbv_2-0-17{
307
367
  padding-bottom:30px;
308
368
  }
309
- .magritte-textarea-layout-fill-both___ERS-q_2-0-16,
310
- .magritte-textarea-layout-fill-vertical___HmNtp_2-0-16,
311
- .magritte-textarea-layout-fill-horizontal___imBH2_2-0-16{
369
+ .magritte-textarea-layout-fill-both___ERS-q_2-0-17,
370
+ .magritte-textarea-layout-fill-vertical___HmNtp_2-0-17,
371
+ .magritte-textarea-layout-fill-horizontal___imBH2_2-0-17{
312
372
  flex-direction:column;
313
373
  }
314
- .magritte-textarea-layout-fill-both___ERS-q_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16,
315
- .magritte-textarea-layout-fill-vertical___HmNtp_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16,
316
- .magritte-textarea-layout-fill-horizontal___imBH2_2-0-16 .magritte-textarea-position-container-wrapper___4Dsui_2-0-16{
374
+ .magritte-textarea-layout-fill-both___ERS-q_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17,
375
+ .magritte-textarea-layout-fill-vertical___HmNtp_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17,
376
+ .magritte-textarea-layout-fill-horizontal___imBH2_2-0-17 .magritte-textarea-position-container-wrapper___4Dsui_2-0-17{
317
377
  flex:1;
318
378
  }
319
- .magritte-textarea-layout-fill-both___ERS-q_2-0-16{
379
+ .magritte-textarea-layout-fill-both___ERS-q_2-0-17{
320
380
  width:100%;
321
381
  height:100%;
322
382
  }
323
- .magritte-textarea-layout-fill-vertical___HmNtp_2-0-16{
383
+ .magritte-textarea-layout-fill-vertical___HmNtp_2-0-17{
324
384
  height:100%;
325
385
  }
326
- .magritte-textarea-layout-fill-horizontal___imBH2_2-0-16{
386
+ .magritte-textarea-layout-fill-horizontal___imBH2_2-0-17{
327
387
  width:100%;
328
388
  }
329
- .magritte-textarea-without-label___WhBIw_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
389
+ .magritte-textarea-without-label___WhBIw_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
330
390
  margin-top:-18px;
331
391
  min-height:calc(104px - var(--magritte-typography-label-4-regular-line-height-v18-1-2));
332
392
  }
333
- .magritte-textarea-without-label___WhBIw_2-0-16.magritte-textarea-limited___cU1Rg_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
393
+ .magritte-textarea-without-label___WhBIw_2-0-17.magritte-textarea-limited___cU1Rg_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
334
394
  min-height:calc(90px - var(--magritte-typography-label-4-regular-line-height-v18-1-2));
335
395
  }
336
- .magritte-textarea-wrapper___yD7G6_2-0-16{
396
+ .magritte-textarea-wrapper___yD7G6_2-0-17{
337
397
  display:inline-flex;
338
398
  width:100%;
339
399
  }
340
- .magritte-textarea-layout-hug___tdCMY_2-0-16{
400
+ .magritte-textarea-layout-hug___tdCMY_2-0-17{
341
401
  width:100%;
342
402
  }
343
- .magritte-textarea-layout-hug___tdCMY_2-0-16 .magritte-textarea-wrapper___yD7G6_2-0-16{
403
+ .magritte-textarea-layout-hug___tdCMY_2-0-17 .magritte-textarea-wrapper___yD7G6_2-0-17{
344
404
  display:grid;
345
405
  }
346
- .magritte-textarea-layout-hug___tdCMY_2-0-16 .magritte-textarea-wrapper___yD7G6_2-0-16::after,
347
- .magritte-textarea-layout-hug___tdCMY_2-0-16 .magritte-textarea-wrapper___yD7G6_2-0-16 .magritte-textarea-native___w-czf_2-0-16{
406
+ .magritte-textarea-layout-hug___tdCMY_2-0-17 .magritte-textarea-wrapper___yD7G6_2-0-17::after,
407
+ .magritte-textarea-layout-hug___tdCMY_2-0-17 .magritte-textarea-wrapper___yD7G6_2-0-17 .magritte-textarea-native___w-czf_2-0-17{
348
408
  grid-area:1 / 1 / 2 / 2;
349
409
  overflow:hidden;
350
410
  width:auto;
351
411
  }
352
- .magritte-textarea-layout-hug___tdCMY_2-0-16 .magritte-textarea-wrapper___yD7G6_2-0-16::after{
412
+ .magritte-textarea-layout-hug___tdCMY_2-0-17 .magritte-textarea-wrapper___yD7G6_2-0-17::after{
353
413
  box-sizing:border-box;
354
414
  border:0;
355
415
  width:100%;
@@ -369,7 +429,7 @@
369
429
  white-space:pre-wrap;
370
430
  visibility:hidden;
371
431
  }
372
- .magritte-textarea-position-container___cEpbv_2-0-16{
432
+ .magritte-textarea-position-container___cEpbv_2-0-17{
373
433
  display:inline-flex;
374
434
  overflow:hidden;
375
435
  position:relative;
@@ -385,24 +445,24 @@
385
445
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-1-2);
386
446
  transform:translateZ(0);
387
447
  }
388
- .magritte-textarea-position-container___cEpbv_2-0-16::-webkit-resizer{
448
+ .magritte-textarea-position-container___cEpbv_2-0-17::-webkit-resizer{
389
449
  display:none;
390
450
  }
391
- .magritte-textarea-animation-timeout___zudbr_2-0-16,
392
- .magritte-textarea-position-container___cEpbv_2-0-16{
451
+ .magritte-textarea-animation-timeout___zudbr_2-0-17,
452
+ .magritte-textarea-position-container___cEpbv_2-0-17{
393
453
  transition-property:transform, color, font-size, letter-spacing;
394
454
  transition-duration:var(--animation-100-duration);
395
455
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
396
456
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
397
457
  }
398
- .magritte-textarea-rigging-container___-1S6i_2-0-16{
458
+ .magritte-textarea-rigging-container___-1S6i_2-0-17{
399
459
  position:absolute;
400
460
  pointer-events:none;
401
461
  left:16px;
402
462
  right:16px;
403
463
  top:0;
404
464
  }
405
- .magritte-textarea-label___sgTIH_2-0-16{
465
+ .magritte-textarea-label___sgTIH_2-0-17{
406
466
  font-family:var(--magritte-typography-label-2-regular-font-family-v18-1-2);
407
467
  font-weight:var(--magritte-typography-label-2-regular-font-weight-v18-1-2);
408
468
  line-height:var(--magritte-typography-label-2-regular-line-height-v18-1-2);
@@ -422,7 +482,7 @@
422
482
  transition-duration:var(--animation-100-duration);
423
483
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
424
484
  }
425
- .magritte-textarea-limit___IjPJy_2-0-16{
485
+ .magritte-textarea-limit___IjPJy_2-0-17{
426
486
  position:absolute;
427
487
  bottom:10px;
428
488
  right:28px;
@@ -432,7 +492,7 @@
432
492
  pointer-events:none;
433
493
  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-limit-v18-1-2);
434
494
  }
435
- .magritte-textarea-grip___iL7lq_2-0-16{
495
+ .magritte-textarea-grip___iL7lq_2-0-17{
436
496
  position:absolute;
437
497
  pointer-events:none;
438
498
  display:inline-flex;
@@ -441,11 +501,11 @@
441
501
  border-bottom-right-radius:12px;
442
502
  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-grip-v18-1-2);
443
503
  }
444
- .magritte-textarea-grip-icon___YK-9w_2-0-16{
504
+ .magritte-textarea-grip-icon___YK-9w_2-0-17{
445
505
  display:inline-flex;
446
506
  z-index:1;
447
507
  }
448
- .magritte-textarea-label-elevated___0lxOI_2-0-16{
508
+ .magritte-textarea-label-elevated___0lxOI_2-0-17{
449
509
  font-family:var(--magritte-typography-label-4-regular-font-family-v18-1-2);
450
510
  font-weight:var(--magritte-typography-label-4-regular-font-weight-v18-1-2);
451
511
  line-height:var(--magritte-typography-label-4-regular-line-height-v18-1-2);
@@ -458,20 +518,20 @@
458
518
  transform:translateY(calc((var(--magritte-typography-label-4-regular-line-height-v18-1-2) / 2) - ((var(--magritte-typography-label-4-regular-line-height-v18-1-2) + var(--magritte-typography-label-2-regular-line-height-v18-1-2)) / 2) + 8px));
459
519
  }
460
520
  @media (prefers-reduced-motion: no-preference){
461
- .magritte-textarea-limit-enter___CygGz_2-0-16{
521
+ .magritte-textarea-limit-enter___CygGz_2-0-17{
462
522
  opacity:0;
463
523
  }
464
- .magritte-textarea-limit-exit___RMp-R_2-0-16,
465
- .magritte-textarea-limit-enter-active___8vN-t_2-0-16{
524
+ .magritte-textarea-limit-exit___RMp-R_2-0-17,
525
+ .magritte-textarea-limit-enter-active___8vN-t_2-0-17{
466
526
  opacity:1;
467
527
  }
468
- .magritte-textarea-limit-enter-active___8vN-t_2-0-16{
528
+ .magritte-textarea-limit-enter-active___8vN-t_2-0-17{
469
529
  transition-property:opacity;
470
530
  transition-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-1-2);
471
531
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-2);
472
532
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-300-duration-v18-1-2);
473
533
  }
474
- .magritte-textarea-limit-exit-active___a5kBr_2-0-16{
534
+ .magritte-textarea-limit-exit-active___a5kBr_2-0-17{
475
535
  opacity:0;
476
536
  transition-property:opacity;
477
537
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
package/index.js CHANGED
@@ -7,8 +7,8 @@ import 'react-transition-group';
7
7
  import 'classnames';
8
8
  import '@hh.ru/magritte-common-use-disabled';
9
9
  import '@hh.ru/magritte-common-use-multiple-refs';
10
- import '@hh.ru/magritte-internal-field-hint';
11
10
  import '@hh.ru/magritte-ui-breakpoint';
11
+ import '@hh.ru/magritte-ui-form-helper';
12
12
  import '@hh.ru/magritte-ui-icon/private';
13
13
  import '@hh.ru/magritte-ui-input/useInputAriaProps';
14
14
  import './useFocus.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-textarea",
3
- "version": "2.0.16",
3
+ "version": "2.0.17",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -21,10 +21,10 @@
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-use-disabled": "1.0.8",
23
23
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
24
- "@hh.ru/magritte-internal-field-hint": "1.2.27",
25
24
  "@hh.ru/magritte-ui-breakpoint": "4.0.1",
25
+ "@hh.ru/magritte-ui-form-helper": "1.0.1",
26
26
  "@hh.ru/magritte-ui-icon": "7.1.5",
27
- "@hh.ru/magritte-ui-input": "5.0.15",
27
+ "@hh.ru/magritte-ui-input": "5.0.16",
28
28
  "@hh.ru/magritte-ui-typography": "3.0.9"
29
29
  },
30
30
  "peerDependencies": {
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "f983d20d02117bd1e412d635d854ab7c47492692"
38
+ "gitHead": "9f09ecd7831d299cd9c5a8852bd30334245ab0e7"
39
39
  }