@rescui/textarea 0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15 → 0.12.0

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.
@@ -0,0 +1,106 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import React from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import cn from 'classnames';
5
+ import styles from './index.css.js';
6
+ const sizeStyles = {
7
+ "xs": styles.sizeXS,
8
+ "s": styles.sizeS,
9
+ "m": styles.sizeM,
10
+ "l": styles.sizeL
11
+ };
12
+ const Size = {
13
+ "xs": "xs",
14
+ "s": "s",
15
+ "m": "m",
16
+ "l": "l"
17
+ };
18
+ const CloseOutlineIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
19
+ viewBox: "0 0 16 16"
20
+ }, props, {
21
+ ref: ref
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ d: "M2.646 2.646a.5.5 0 0 1 .708 0L8 7.293l4.646-4.647a.5.5 0 0 1 .708.708L8.707 8l4.647 4.646a.5.5 0 0 1-.708.708L8 8.707l-4.646 4.647a.5.5 0 0 1-.708-.708L7.293 8 2.646 3.354a.5.5 0 0 1 0-.708"
24
+ })));
25
+ CloseOutlineIcon16.displayName = 'CloseOutlineIcon16';
26
+ const CloseOutlineIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
27
+ viewBox: "0 0 20 20"
28
+ }, props, {
29
+ ref: ref
30
+ }), /*#__PURE__*/React.createElement("path", {
31
+ d: "M3.47 3.47a.75.75 0 0 1 1.06 0L10 8.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L11.06 10l5.47 5.47a.75.75 0 1 1-1.06 1.06L10 11.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L8.94 10 3.47 4.53a.75.75 0 0 1 0-1.06"
32
+ })));
33
+ CloseOutlineIcon20.displayName = 'CloseOutlineIcon20';
34
+ const CloseOutlineIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
35
+ viewBox: "0 0 24 24"
36
+ }, props, {
37
+ ref: ref
38
+ }), /*#__PURE__*/React.createElement("path", {
39
+ d: "M3.793 3.793a1 1 0 0 1 1.414 0L12 10.586l6.793-6.793a1 1 0 1 1 1.414 1.414L13.414 12l6.793 6.793a1 1 0 0 1-1.414 1.414L12 13.414l-6.793 6.793a1 1 0 0 1-1.414-1.414L10.586 12 3.793 5.207a1 1 0 0 1 0-1.414"
40
+ })));
41
+ CloseOutlineIcon24.displayName = 'CloseOutlineIcon24';
42
+ const CloseOutlineIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
43
+ viewBox: "0 0 28 28"
44
+ }, props, {
45
+ ref: ref
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ d: "M4.793 4.793a1 1 0 0 1 1.414 0L14 12.586l7.793-7.793a1 1 0 1 1 1.414 1.414L15.414 14l7.793 7.793a1 1 0 0 1-1.414 1.414L14 15.414l-7.793 7.793a1 1 0 0 1-1.414-1.414L12.586 14 4.793 6.207a1 1 0 0 1 0-1.414"
48
+ })));
49
+ CloseOutlineIcon28.displayName = 'CloseOutlineIcon28';
50
+ const CloseOutlineIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
51
+ let {
52
+ theme,
53
+ size: sizeFromProps = "m",
54
+ className,
55
+ style,
56
+ ['data-render-all-sizes']: renderAllSizes = false,
57
+ ...props
58
+ } = _ref;
59
+ const size = sizeFromProps in Size ? sizeFromProps : "m";
60
+ const mainProps = { ...props,
61
+ className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
62
+ style: renderAllSizes ? {
63
+ '--rs-icon-ar-width': 28,
64
+ '--rs-icon-ar-height': 28,
65
+ ...style
66
+ } : style,
67
+ ref
68
+ };
69
+
70
+ if (renderAllSizes) {
71
+ return /*#__PURE__*/React.createElement("svg", _extends({
72
+ viewBox: "0 0 28 28"
73
+ }, mainProps), /*#__PURE__*/React.createElement(CloseOutlineIcon16, {
74
+ className: styles.variant16
75
+ }), /*#__PURE__*/React.createElement(CloseOutlineIcon20, {
76
+ className: styles.variant20
77
+ }), /*#__PURE__*/React.createElement(CloseOutlineIcon24, {
78
+ className: styles.variant24
79
+ }), /*#__PURE__*/React.createElement(CloseOutlineIcon28, {
80
+ className: styles.variant28
81
+ }));
82
+ }
83
+
84
+ if (size === Size['xs']) {
85
+ return /*#__PURE__*/React.createElement(CloseOutlineIcon16, mainProps);
86
+ }
87
+
88
+ if (size === Size['s']) {
89
+ return /*#__PURE__*/React.createElement(CloseOutlineIcon20, mainProps);
90
+ }
91
+
92
+ if (size === Size['m']) {
93
+ return /*#__PURE__*/React.createElement(CloseOutlineIcon24, mainProps);
94
+ }
95
+
96
+ return /*#__PURE__*/React.createElement(CloseOutlineIcon28, mainProps);
97
+ });
98
+ CloseOutlineIcon.displayName = 'CloseOutlineIcon';
99
+ CloseOutlineIcon.propTypes = {
100
+ className: PropTypes.string,
101
+ theme: PropTypes.oneOf(["light", "dark"]),
102
+ size: PropTypes.oneOf(["xs", "s", "m", "l"]),
103
+ 'data-render-all-sizes': PropTypes.bool,
104
+ style: PropTypes.object
105
+ };
106
+ export { Size, CloseOutlineIcon as default };
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_ydxoyp_4",
3
- "sizeXS": "_sizeXS_ydxoyp_14",
4
- "sizeS": "_sizeS_ydxoyp_18",
5
- "sizeM": "_sizeM_ydxoyp_22",
6
- "sizeL": "_sizeL_ydxoyp_26",
7
- "light": "_light_ydxoyp_30",
8
- "dark": "_dark_ydxoyp_34",
9
- "allVariants": "_allVariants_ydxoyp_48",
10
- "variant16": "_variant16_ydxoyp_53",
11
- "variant20": "_variant20_ydxoyp_54",
12
- "variant24": "_variant24_ydxoyp_55",
13
- "variant28": "_variant28_ydxoyp_58"
2
+ "icon": "_icon_3sp1p2_4",
3
+ "sizeXS": "_sizeXS_3sp1p2_14",
4
+ "sizeS": "_sizeS_3sp1p2_18",
5
+ "sizeM": "_sizeM_3sp1p2_22",
6
+ "sizeL": "_sizeL_3sp1p2_26",
7
+ "light": "_light_3sp1p2_30",
8
+ "dark": "_dark_3sp1p2_34",
9
+ "allVariants": "_allVariants_3sp1p2_48",
10
+ "variant16": "_variant16_3sp1p2_53",
11
+ "variant20": "_variant20_3sp1p2_54",
12
+ "variant24": "_variant24_3sp1p2_55",
13
+ "variant28": "_variant28_3sp1p2_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_ydxoyp_4{
1
+ ._icon_3sp1p2_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_ydxoyp_4{
11
+ ._icon_3sp1p2_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_ydxoyp_4{
20
+ ._icon_3sp1p2_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_ydxoyp_4{
28
+ ._icon_3sp1p2_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_ydxoyp_14{
35
+ ._sizeXS_3sp1p2_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_ydxoyp_18{
38
+ ._sizeS_3sp1p2_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_ydxoyp_22{
41
+ ._sizeM_3sp1p2_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_ydxoyp_26{
44
+ ._sizeL_3sp1p2_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_ydxoyp_30{
47
+ ._light_3sp1p2_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_ydxoyp_34{
51
+ ._dark_3sp1p2_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
@@ -60,56 +60,58 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_ydxoyp_48{
63
+ ._allVariants_3sp1p2_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_ydxoyp_53,
68
- ._variant20_ydxoyp_54,
69
- ._variant24_ydxoyp_55{
67
+ ._variant16_3sp1p2_53,
68
+ ._variant20_3sp1p2_54,
69
+ ._variant24_3sp1p2_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_ydxoyp_58{
72
+ ._variant28_3sp1p2_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_ydxoyp_55{
76
+ ._variant24_3sp1p2_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_ydxoyp_58{
79
+ ._variant28_3sp1p2_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_ydxoyp_54{
84
+ ._variant20_3sp1p2_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_ydxoyp_55{
87
+ ._variant24_3sp1p2_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_ydxoyp_53{
92
+ ._variant16_3sp1p2_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_ydxoyp_54{
95
+ ._variant20_3sp1p2_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_8ky3x8_8{
99
+ ._themeLight_1lcp4sb_8{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_8ky3x8_11{
102
+ ._themeDark_1lcp4sb_11{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._sizeS_8ky3x8_15{
105
+ ._sizeS_1lcp4sb_15{
106
106
  --_rs-textarea-vertical-padding:6px;
107
107
  --_rs-textarea-horizontal-padding:8px;
108
+ --_rs-textarea-icon-size:20px;
109
+ --_rs-textarea-icon-offset:8px;
108
110
  }
109
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__busy-icon']:not(html){
111
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__busy-icon']:not(html){
110
112
  --_rs-icons-height:20px;
111
113
  }
112
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
114
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
113
115
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
114
116
  --_rs-typography-text-transform:initial;
115
117
  --_rs-typography-font-variant-numeric:initial;
@@ -144,10 +146,10 @@
144
146
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
145
147
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
148
  }
147
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__label'],
148
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__inner'],
149
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__inner']::placeholder,
150
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__suffix']{
149
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__label'],
150
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner'],
151
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__inner']::placeholder,
152
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__suffix']{
151
153
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
152
154
  --_rs-typography-text-transform:initial;
153
155
  --_rs-typography-font-variant-numeric:initial;
@@ -182,7 +184,7 @@
182
184
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
183
185
  --_rs-typography-link-border-bottom-width-from-text:1px;
184
186
  }
185
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__bold-label']{
187
+ ._sizeS_1lcp4sb_15 [data-rs-internal='textarea__bold-label']{
186
188
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
187
189
  --_rs-typography-text-transform:initial;
188
190
  --_rs-typography-font-variant-numeric:initial;
@@ -214,14 +216,16 @@
214
216
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
215
217
  --_rs-typography-link-border-bottom-width-from-text:2px;
216
218
  }
217
- ._sizeM_8ky3x8_18{
219
+ ._sizeM_1lcp4sb_18{
218
220
  --_rs-textarea-vertical-padding:8px;
219
221
  --_rs-textarea-horizontal-padding:8px;
222
+ --_rs-textarea-icon-size:24px;
223
+ --_rs-textarea-icon-offset:8px;
220
224
  }
221
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__busy-icon']:not(html){
225
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__busy-icon']:not(html){
222
226
  --_rs-icons-height:24px;
223
227
  }
224
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
228
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
225
229
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
226
230
  --_rs-typography-text-transform:initial;
227
231
  --_rs-typography-font-variant-numeric:initial;
@@ -260,14 +264,14 @@
260
264
  --_rs-typography-link-border-bottom-width-from-text:1px;
261
265
  }
262
266
  @media screen and (max-width: 640px){
263
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
267
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
264
268
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
265
269
  }
266
270
  }
267
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__label'],
268
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner'],
269
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::placeholder,
270
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__suffix']{
271
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__label'],
272
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner'],
273
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::placeholder,
274
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__suffix']{
271
275
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
272
276
  --_rs-typography-text-transform:initial;
273
277
  --_rs-typography-font-variant-numeric:initial;
@@ -306,14 +310,14 @@
306
310
  --_rs-typography-link-border-bottom-width-from-text:1px;
307
311
  }
308
312
  @media screen and (max-width: 640px){
309
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__label'],
310
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner'],
311
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::placeholder,
312
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__suffix']{
313
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__label'],
314
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner'],
315
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__inner']::placeholder,
316
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__suffix']{
313
317
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
314
318
  }
315
319
  }
316
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__bold-label']{
320
+ ._sizeM_1lcp4sb_18 [data-rs-internal='textarea__bold-label']{
317
321
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
318
322
  --_rs-typography-text-transform:initial;
319
323
  --_rs-typography-font-variant-numeric:initial;
@@ -345,14 +349,16 @@
345
349
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
346
350
  --_rs-typography-link-border-bottom-width-from-text:2px;
347
351
  }
348
- ._sizeL_8ky3x8_21{
352
+ ._sizeL_1lcp4sb_21{
349
353
  --_rs-textarea-vertical-padding:12px;
350
354
  --_rs-textarea-horizontal-padding:16px;
355
+ --_rs-textarea-icon-size:28px;
356
+ --_rs-textarea-icon-offset:16px;
351
357
  }
352
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__busy-icon']:not(html){
358
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__busy-icon']:not(html){
353
359
  --_rs-icons-height:28px;
354
360
  }
355
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
361
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
356
362
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
357
363
  --_rs-typography-text-transform:initial;
358
364
  --_rs-typography-font-variant-numeric:initial;
@@ -391,14 +397,14 @@
391
397
  --_rs-typography-link-border-bottom-width-from-text:1px;
392
398
  }
393
399
  @media screen and (max-width: 640px){
394
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
400
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
395
401
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
396
402
  }
397
403
  }
398
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__label'],
399
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner'],
400
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::placeholder,
401
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__suffix']{
404
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__label'],
405
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner'],
406
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::placeholder,
407
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__suffix']{
402
408
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
403
409
  --_rs-typography-text-transform:initial;
404
410
  --_rs-typography-font-variant-numeric:initial;
@@ -437,14 +443,14 @@
437
443
  --_rs-typography-link-border-bottom-width-from-text:1px;
438
444
  }
439
445
  @media screen and (max-width: 640px){
440
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__label'],
441
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner'],
442
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::placeholder,
443
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__suffix']{
446
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__label'],
447
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner'],
448
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__inner']::placeholder,
449
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__suffix']{
444
450
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
445
451
  }
446
452
  }
447
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__bold-label']{
453
+ ._sizeL_1lcp4sb_21 [data-rs-internal='textarea__bold-label']{
448
454
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
449
455
  --_rs-typography-text-transform:initial;
450
456
  --_rs-typography-font-variant-numeric:initial;
@@ -476,7 +482,7 @@
476
482
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
477
483
  --_rs-typography-link-border-bottom-width-from-text:2px;
478
484
  }
479
- ._classic_8ky3x8_25{
485
+ ._classic_1lcp4sb_25{
480
486
  --_rs-textarea-focused-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
481
487
  --_rs-textarea-focused-background-color:rgb(
482
488
  calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
@@ -490,11 +496,18 @@
490
496
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
491
497
  0.7
492
498
  );
499
+ --_rs-textarea-focused-clear-icon-color:rgba(
500
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
501
+ 0.7
502
+ );
503
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
504
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
505
+ );
493
506
  --_rs-textarea-focused-scrollbar-track-color:rgb(
494
507
  calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
495
508
  );
496
509
  }
497
- ._rock_8ky3x8_28{
510
+ ._rock_1lcp4sb_28{
498
511
  --_rs-textarea-focused-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
499
512
  --_rs-textarea-focused-background-color:rgb(
500
513
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
@@ -508,11 +521,18 @@
508
521
  calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
509
522
  0.7
510
523
  );
524
+ --_rs-textarea-focused-clear-icon-color:rgba(
525
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
526
+ 0.7
527
+ );
528
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
529
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
530
+ );
511
531
  --_rs-textarea-focused-scrollbar-track-color:rgb(
512
532
  calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
513
533
  );
514
534
  }
515
- ._labelWrapper_8ky3x8_32{
535
+ ._labelWrapper_1lcp4sb_32{
516
536
  --_rs-theme-dark:var(
517
537
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
518
538
  var(--rs-theme-dark, 0)
@@ -522,7 +542,7 @@
522
542
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
523
543
  }
524
544
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
525
- ._labelWrapper_8ky3x8_32{
545
+ ._labelWrapper_1lcp4sb_32{
526
546
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
527
547
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
528
548
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -531,7 +551,7 @@
531
551
  }
532
552
  }
533
553
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
534
- ._labelWrapper_8ky3x8_32{
554
+ ._labelWrapper_1lcp4sb_32{
535
555
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
536
556
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
537
557
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -540,22 +560,22 @@
540
560
  }
541
561
  }
542
562
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
543
- ._labelWrapper_8ky3x8_32{
563
+ ._labelWrapper_1lcp4sb_32{
544
564
  --_rs-color-danger:color-mix(in srgb, #CC1400 calc(100%*var(--_rs-theme-light-coefficient, 1)), #FF6553 calc(100%*var(--_rs-theme-dark-coefficient, 0)));
545
565
  --_rs-color-danger-bg:color-mix(in srgb, rgba(204,20,0, 0.2) calc(100%*var(--_rs-theme-light-coefficient, 1)), rgba(255,101,83, 0.2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
546
566
  }
547
567
  }
548
568
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
549
- ._labelWrapper_8ky3x8_32{
569
+ ._labelWrapper_1lcp4sb_32{
550
570
  --_rs-color-danger:rgb(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83));
551
571
  --_rs-color-danger-bg:rgba(calc(var(--_rs-theme-light-coefficient, 1)*204 + var(--_rs-theme-dark-coefficient, 0)*255), calc(var(--_rs-theme-light-coefficient, 1)*20 + var(--_rs-theme-dark-coefficient, 0)*101), calc(var(--_rs-theme-light-coefficient, 1)*0 + var(--_rs-theme-dark-coefficient, 0)*83), 0.2);
552
572
  }
553
573
  }
554
- ._labelWrapper_8ky3x8_32 {
574
+ ._labelWrapper_1lcp4sb_32 {
555
575
 
556
576
  display:block;
557
577
  }
558
- ._wrapper_8ky3x8_40{
578
+ ._wrapper_1lcp4sb_40{
559
579
  --_rs-textarea-border-width:1px;
560
580
  --_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
561
581
  --_rs-textarea-background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
@@ -571,34 +591,34 @@
571
591
 
572
592
  box-shadow:inset 0 0 0 var(--_rs-textarea-border-width) var(--_rs-textarea-border-color);
573
593
  }
574
- ._error_8ky3x8_57 ._wrapper_8ky3x8_40{
594
+ ._error_1lcp4sb_57 ._wrapper_1lcp4sb_40{
575
595
  --_rs-textarea-border-width:2px;
576
596
  --_rs-textarea-border-color:var(--_rs-color-danger);
577
597
  --_rs-textarea-background-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
578
598
  }
579
- ._disabled_8ky3x8_63 ._wrapper_8ky3x8_40{
599
+ ._disabled_1lcp4sb_63 ._wrapper_1lcp4sb_40{
580
600
  --_rs-textarea-background-color:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
581
601
 
582
602
  cursor:default;
583
603
  }
584
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._wrapper_8ky3x8_40{
604
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._wrapper_1lcp4sb_40{
585
605
  --_rs-textarea-background-color:var(
586
606
  --_rs-textarea-focused-background-color
587
607
  );
588
608
  }
589
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57)._filled_8ky3x8_75 ._wrapper_8ky3x8_40{
609
+ ._enabled_1lcp4sb_69:not(._error_1lcp4sb_57)._filled_1lcp4sb_75 ._wrapper_1lcp4sb_40{
590
610
  --_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.3);
591
611
  }
592
612
  @media (hover: hover){
593
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57):hover ._wrapper_8ky3x8_40{
613
+ ._enabled_1lcp4sb_69:not(._error_1lcp4sb_57):hover ._wrapper_1lcp4sb_40{
594
614
  --_rs-textarea-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
595
615
  }
596
616
  }
597
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57)._focused_8ky3x8_69 ._wrapper_8ky3x8_40{
617
+ ._enabled_1lcp4sb_69:not(._error_1lcp4sb_57)._focused_1lcp4sb_69 ._wrapper_1lcp4sb_40{
598
618
  --_rs-textarea-border-width:var(--_rs-textarea-focused-border-width);
599
619
  --_rs-textarea-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
600
620
  }
601
- ._inner_8ky3x8_91{
621
+ ._inner_1lcp4sb_91{
602
622
  letter-spacing:var(
603
623
  --rs-text-base-letter-spacing,
604
624
  var(--_rs-typography-letter-spacing)
@@ -632,26 +652,29 @@
632
652
  -moz-appearance:none;
633
653
  appearance:none;
634
654
  }
655
+ ._clearable_1lcp4sb_119 ._inner_1lcp4sb_91{
656
+ padding-right:calc(var(--_rs-textarea-horizontal-padding) + var(--_rs-textarea-icon-size) + var(--_rs-textarea-icon-offset) - var(--_rs-textarea-border-width));
657
+ }
635
658
  @media (hover: hover){
636
- ._inner_8ky3x8_91{
659
+ ._inner_1lcp4sb_91{
637
660
  scrollbar-color:#8C8C8E rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
638
661
  scrollbar-width:thin
639
662
  }
640
663
 
641
- ._inner_8ky3x8_91::-webkit-scrollbar{
664
+ ._inner_1lcp4sb_91::-webkit-scrollbar{
642
665
  width:7px;
643
666
  height:8px;
644
667
  }
645
668
 
646
- ._inner_8ky3x8_91::-webkit-scrollbar-corner{
669
+ ._inner_1lcp4sb_91::-webkit-scrollbar-corner{
647
670
  background-color:transparent;
648
671
  }
649
672
 
650
- ._inner_8ky3x8_91::-webkit-scrollbar-track{
673
+ ._inner_1lcp4sb_91::-webkit-scrollbar-track{
651
674
  background-color:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
652
675
  }
653
676
 
654
- ._inner_8ky3x8_91::-webkit-scrollbar-thumb{
677
+ ._inner_1lcp4sb_91::-webkit-scrollbar-thumb{
655
678
  width:7px;
656
679
 
657
680
  border-radius:7px;
@@ -659,40 +682,86 @@
659
682
  background:#8C8C8E;
660
683
  }
661
684
 
662
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91{
685
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91{
663
686
  scrollbar-color:#8C8C8E var(--_rs-textarea-focused-scrollbar-track-color);
664
687
  }
665
688
 
666
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::-webkit-scrollbar-track{
689
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::-webkit-scrollbar-track{
667
690
  background-color:var(--_rs-textarea-focused-scrollbar-track-color);
668
691
  }
669
692
  }
670
- ._inner_8ky3x8_91:focus{
693
+ ._inner_1lcp4sb_91:focus{
671
694
  outline:none;
672
695
  }
673
- ._inner_8ky3x8_91::-moz-placeholder{
696
+ ._inner_1lcp4sb_91::-moz-placeholder{
674
697
  opacity:1;
675
698
 
676
699
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
677
700
  }
678
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::-moz-placeholder{
701
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::-moz-placeholder{
679
702
  color:var(--_rs-textarea-focused-placeholder-color);
680
703
  }
681
- ._inner_8ky3x8_91::placeholder{
704
+ ._inner_1lcp4sb_91::placeholder{
682
705
  opacity:1;
683
706
 
684
707
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
685
708
  }
686
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::placeholder{
709
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91::placeholder{
687
710
  color:var(--_rs-textarea-focused-placeholder-color);
688
711
  }
689
- ._disabled_8ky3x8_63 ._inner_8ky3x8_91{
712
+ ._disabled_1lcp4sb_63 ._inner_1lcp4sb_91{
690
713
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
691
714
  }
692
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91{
715
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._inner_1lcp4sb_91{
693
716
  color:var(--_rs-textarea-focused-color);
694
717
  }
695
- ._busyIcon_8ky3x8_177{
718
+ ._clearIcon_1lcp4sb_184{
719
+ position:absolute;
720
+ top:var(--_rs-textarea-vertical-padding);
721
+ right:var(--_rs-textarea-horizontal-padding);
722
+
723
+ display:flex;
724
+
725
+ padding:0;
726
+
727
+ border:none;
728
+
729
+ cursor:pointer;
730
+
731
+ color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
732
+
733
+ background:transparent;
734
+ -webkit-appearance:none;
735
+ -moz-appearance:none;
736
+ appearance:none;
737
+ }
738
+ ._clearIcon_1lcp4sb_184:focus{
739
+ outline:none;
740
+ }
741
+ ._disabled_1lcp4sb_63 ._clearIcon_1lcp4sb_184{
742
+ pointer-events:none;
743
+
744
+ color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
745
+ }
746
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._clearIcon_1lcp4sb_184{
747
+ color:var(--_rs-textarea-focused-clear-icon-color);
748
+ }
749
+ @media (hover: hover){
750
+ ._enabled_1lcp4sb_69 ._clearIcon_1lcp4sb_184:hover{
751
+ color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
752
+ }
753
+
754
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._clearIcon_1lcp4sb_184:hover{
755
+ color:var(--_rs-textarea-focused-clear-icon-accent-color);
756
+ }
757
+ }
758
+ ._clearIcon_1lcp4sb_184 ._icon_1lcp4sb_226{
759
+ fill:currentColor;
760
+
761
+ width:auto;
762
+ height:var(--_rs-textarea-icon-size);
763
+ }
764
+ ._busyIcon_1lcp4sb_234{
696
765
  position:absolute;
697
766
  right:var(--_rs-textarea-horizontal-padding);
698
767
  bottom:var(--_rs-textarea-vertical-padding);
@@ -703,13 +772,13 @@
703
772
 
704
773
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
705
774
  }
706
- ._disabled_8ky3x8_63 ._busyIcon_8ky3x8_177{
775
+ ._disabled_1lcp4sb_63 ._busyIcon_1lcp4sb_234{
707
776
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
708
777
  }
709
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._busyIcon_8ky3x8_177{
778
+ ._enabled_1lcp4sb_69._focused_1lcp4sb_69 ._busyIcon_1lcp4sb_234{
710
779
  color:var(--_rs-textarea-focused-busy-icon-color);
711
780
  }
712
- ._label_8ky3x8_32{
781
+ ._label_1lcp4sb_32{
713
782
  letter-spacing:var(
714
783
  --rs-text-base-letter-spacing,
715
784
  var(--_rs-typography-letter-spacing)
@@ -728,13 +797,13 @@
728
797
 
729
798
  margin-bottom:4px;
730
799
  }
731
- ._disabled_8ky3x8_63 ._label_8ky3x8_32{
800
+ ._disabled_1lcp4sb_63 ._label_1lcp4sb_32{
732
801
  color:var(
733
802
  --rs-color-pale,
734
803
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
735
804
  );
736
805
  }
737
- ._footer_8ky3x8_208{
806
+ ._footer_1lcp4sb_265{
738
807
  display:grid;
739
808
  grid-template-areas:"note character-counter" "error-message character-counter";
740
809
  grid-template-columns:1fr auto;
@@ -744,10 +813,10 @@
744
813
 
745
814
  margin-top:4px;
746
815
  }
747
- ._error_8ky3x8_57 ._footer_8ky3x8_208{
816
+ ._error_1lcp4sb_57 ._footer_1lcp4sb_265{
748
817
  grid-template-areas:"error-message character-counter" "note character-counter";
749
818
  }
750
- ._characterCounter_8ky3x8_227{
819
+ ._characterCounter_1lcp4sb_284{
751
820
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
752
821
  --_rs-typography-text-transform:initial;
753
822
  --_rs-typography-font-variant-numeric:initial;
@@ -809,10 +878,10 @@
809
878
 
810
879
  margin-left:16px;
811
880
  }
812
- ._errorMessage_8ky3x8_236{
881
+ ._errorMessage_1lcp4sb_293{
813
882
  grid-area:error-message;
814
883
  }
815
- ._note_8ky3x8_240{
884
+ ._note_1lcp4sb_297{
816
885
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
817
886
  --_rs-typography-text-transform:initial;
818
887
  --_rs-typography-font-variant-numeric:initial;
@@ -872,7 +941,7 @@
872
941
 
873
942
  grid-area:note;
874
943
  }
875
- ._disabled_8ky3x8_63 ._note_8ky3x8_240{
944
+ ._disabled_1lcp4sb_63 ._note_1lcp4sb_297{
876
945
  --_rs-typography-hardness-color:var(
877
946
  --rs-color-pale,
878
947
  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5)
package/lib/index.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
14
14
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
15
15
  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
16
16
  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
17
+ onClear?: React.MouseEventHandler<HTMLButtonElement>;
17
18
  onMouseEnter?: React.MouseEventHandler<HTMLTextAreaElement>;
18
19
  onMouseLeave?: React.MouseEventHandler<HTMLTextAreaElement>;
19
20
  placeholder?: string;
@@ -43,6 +44,7 @@ declare const DefaultTextarea: import("react").ForwardRefExoticComponent<Omit<im
43
44
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
44
45
  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
45
46
  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
47
+ onClear?: React.MouseEventHandler<HTMLButtonElement>;
46
48
  onMouseEnter?: React.MouseEventHandler<HTMLTextAreaElement>;
47
49
  onMouseLeave?: React.MouseEventHandler<HTMLTextAreaElement>;
48
50
  placeholder?: string;
@@ -2,6 +2,8 @@
2
2
  &:not(html){
3
3
  --_rs-textarea-vertical-padding:6px;
4
4
  --_rs-textarea-horizontal-padding:8px;
5
+ --_rs-textarea-icon-size:20px;
6
+ --_rs-textarea-icon-offset:8px;
5
7
  }
6
8
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
7
9
  --_rs-icons-height:20px;
@@ -116,6 +118,8 @@
116
118
  &:not(html){
117
119
  --_rs-textarea-vertical-padding:8px;
118
120
  --_rs-textarea-horizontal-padding:8px;
121
+ --_rs-textarea-icon-size:24px;
122
+ --_rs-textarea-icon-offset:8px;
119
123
  }
120
124
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
121
125
  --_rs-icons-height:24px;
@@ -249,6 +253,8 @@
249
253
  &:not(html){
250
254
  --_rs-textarea-vertical-padding:12px;
251
255
  --_rs-textarea-horizontal-padding:16px;
256
+ --_rs-textarea-icon-size:28px;
257
+ --_rs-textarea-icon-offset:16px;
252
258
  }
253
259
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
254
260
  --_rs-icons-height:28px;
@@ -392,6 +398,13 @@
392
398
  --_rs-textarea-focused-busy-icon-color:rgba(
393
399
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
394
400
  0.7
401
+ );
402
+ --_rs-textarea-focused-clear-icon-color:rgba(
403
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
404
+ 0.7
405
+ );
406
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
407
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
395
408
  );
396
409
  --_rs-textarea-focused-scrollbar-track-color:rgb(
397
410
  calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
@@ -412,6 +425,13 @@
412
425
  --_rs-textarea-focused-busy-icon-color:rgba(
413
426
  calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
414
427
  0.7
428
+ );
429
+ --_rs-textarea-focused-clear-icon-color:rgba(
430
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
431
+ 0.7
432
+ );
433
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
434
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
415
435
  );
416
436
  --_rs-textarea-focused-scrollbar-track-color:rgb(
417
437
  calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
@@ -2,6 +2,8 @@
2
2
  &:not(html){
3
3
  --_rs-textarea-vertical-padding:6px;
4
4
  --_rs-textarea-horizontal-padding:8px;
5
+ --_rs-textarea-icon-size:20px;
6
+ --_rs-textarea-icon-offset:8px;
5
7
  }
6
8
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
7
9
  --_rs-icons-height:20px;
@@ -116,6 +118,8 @@
116
118
  &:not(html){
117
119
  --_rs-textarea-vertical-padding:8px;
118
120
  --_rs-textarea-horizontal-padding:8px;
121
+ --_rs-textarea-icon-size:24px;
122
+ --_rs-textarea-icon-offset:8px;
119
123
  }
120
124
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
121
125
  --_rs-icons-height:24px;
@@ -249,6 +253,8 @@
249
253
  &:not(html){
250
254
  --_rs-textarea-vertical-padding:12px;
251
255
  --_rs-textarea-horizontal-padding:16px;
256
+ --_rs-textarea-icon-size:28px;
257
+ --_rs-textarea-icon-offset:16px;
252
258
  }
253
259
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
254
260
  --_rs-icons-height:28px;
@@ -392,6 +398,13 @@
392
398
  --_rs-textarea-focused-busy-icon-color:rgba(
393
399
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
394
400
  0.7
401
+ );
402
+ --_rs-textarea-focused-clear-icon-color:rgba(
403
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
404
+ 0.7
405
+ );
406
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
407
+ calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
395
408
  );
396
409
  --_rs-textarea-focused-scrollbar-track-color:rgb(
397
410
  calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181)
@@ -412,6 +425,13 @@
412
425
  --_rs-textarea-focused-busy-icon-color:rgba(
413
426
  calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
414
427
  0.7
428
+ );
429
+ --_rs-textarea-focused-clear-icon-color:rgba(
430
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227),
431
+ 0.7
432
+ );
433
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
434
+ calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227)
415
435
  );
416
436
  --_rs-textarea-focused-scrollbar-track-color:rgb(
417
437
  calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
package/lib/textarea.d.ts CHANGED
@@ -48,6 +48,10 @@ type TextareaExclusiveProps = {
48
48
  * `Blur` textarea callback
49
49
  */
50
50
  onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
51
+ /**
52
+ * Clear textarea callback. The clear button appears when this callback is provided and textarea is not empty.
53
+ */
54
+ onClear?: React.MouseEventHandler<HTMLButtonElement>;
51
55
  /**
52
56
  * `mouseEnter` textarea callback
53
57
  */
@@ -91,6 +95,9 @@ type TextareaExclusiveProps = {
91
95
  label?: React.ReactNode;
92
96
  note?: React.ReactNode;
93
97
  textareaRef?: React.Ref<HTMLTextAreaElement>;
98
+ /**
99
+ * @deprecated Use `onClear` instead.
100
+ */
94
101
  enableClear?: boolean;
95
102
  boldLabel?: boolean;
96
103
  /**
package/lib/textarea.js CHANGED
@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
6
  import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
7
7
  import cn from 'classnames';
8
+ import CloseOutlineIcon from './_virtual/close-outline.js';
8
9
  import LoadingOutlineIcon from './_virtual/loading-outline.js';
9
10
  import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
10
11
  import styles from './textarea.p.module.css.js';
@@ -31,6 +32,8 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
31
32
  reserveErrorLine = false,
32
33
  busy,
33
34
  onChange,
35
+ onClear,
36
+ enableClear: _enableClear,
34
37
  size = 'm',
35
38
  mode = 'classic',
36
39
  theme: themeFromProps,
@@ -45,6 +48,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
45
48
  } = _ref;
46
49
  const theme = useThemeWithUndefined(themeFromProps);
47
50
  const isEmpty = !value;
51
+ const showClearIcon = Boolean(onClear && !isEmpty);
48
52
  const [focused, setFocused] = useState(false);
49
53
  const uniqueId = `textarea-${useBackwardCompatibleId()}`;
50
54
  const errorId = `${id ? id : uniqueId}-error`;
@@ -59,7 +63,7 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
59
63
  "data-test": 'textarea__label',
60
64
  "data-rs-internal": boldLabel ? 'textarea__bold-label' : 'textarea__label'
61
65
  }, label), /*#__PURE__*/React.createElement("div", {
62
- className: styles.wrapper,
66
+ className: cn(styles.wrapper, showClearIcon && styles.clearable),
63
67
  onFocus: () => setFocused(true),
64
68
  onBlur: () => setFocused(false)
65
69
  }, /*#__PURE__*/React.createElement(TextareaAutosize, { ...restProps,
@@ -73,7 +77,18 @@ const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
73
77
  tabIndex: disabled ? -1 : tabIndex,
74
78
  "data-test": 'textarea__input',
75
79
  "data-rs-internal": "textarea__inner"
76
- }), busy && /*#__PURE__*/React.createElement("span", {
80
+ }), showClearIcon && /*#__PURE__*/React.createElement("button", {
81
+ type: "button",
82
+ className: styles.clearIcon,
83
+ onClick: onClear,
84
+ "aria-label": "Clear textarea",
85
+ "data-test": "textarea__clear-icon",
86
+ "data-rs-internal": "textarea__clear-icon",
87
+ tabIndex: -1
88
+ }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
89
+ className: styles.icon,
90
+ "data-render-all-sizes": true
91
+ })), busy && /*#__PURE__*/React.createElement("span", {
77
92
  className: styles.busyIcon
78
93
  }, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
79
94
  "data-test": "textarea__busy-icon",
@@ -105,6 +120,7 @@ Textarea.propTypes = {
105
120
  onChange: PropTypes.func,
106
121
  onFocus: PropTypes.func,
107
122
  onBlur: PropTypes.func,
123
+ onClear: PropTypes.func,
108
124
  size: PropTypes.oneOf(['s', 'm', 'l']),
109
125
  mode: PropTypes.oneOf(['classic', 'rock']),
110
126
  theme: PropTypes.oneOf(['light', 'dark']),
@@ -1,24 +1,27 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_8ky3x8_8",
3
- "themeDark": "_themeDark_8ky3x8_11",
4
- "sizeS": "_sizeS_8ky3x8_15",
5
- "sizeM": "_sizeM_8ky3x8_18",
6
- "sizeL": "_sizeL_8ky3x8_21",
7
- "classic": "_classic_8ky3x8_25",
8
- "rock": "_rock_8ky3x8_28",
9
- "labelWrapper": "_labelWrapper_8ky3x8_32",
10
- "wrapper": "_wrapper_8ky3x8_40",
11
- "error": "_error_8ky3x8_57",
12
- "disabled": "_disabled_8ky3x8_63",
13
- "enabled": "_enabled_8ky3x8_69",
14
- "focused": "_focused_8ky3x8_69",
15
- "filled": "_filled_8ky3x8_75",
16
- "inner": "_inner_8ky3x8_91",
17
- "busyIcon": "_busyIcon_8ky3x8_177",
18
- "label": "_label_8ky3x8_32",
19
- "footer": "_footer_8ky3x8_208",
20
- "characterCounter": "_characterCounter_8ky3x8_227",
21
- "errorMessage": "_errorMessage_8ky3x8_236",
22
- "note": "_note_8ky3x8_240"
2
+ "themeLight": "_themeLight_1lcp4sb_8",
3
+ "themeDark": "_themeDark_1lcp4sb_11",
4
+ "sizeS": "_sizeS_1lcp4sb_15",
5
+ "sizeM": "_sizeM_1lcp4sb_18",
6
+ "sizeL": "_sizeL_1lcp4sb_21",
7
+ "classic": "_classic_1lcp4sb_25",
8
+ "rock": "_rock_1lcp4sb_28",
9
+ "labelWrapper": "_labelWrapper_1lcp4sb_32",
10
+ "wrapper": "_wrapper_1lcp4sb_40",
11
+ "error": "_error_1lcp4sb_57",
12
+ "disabled": "_disabled_1lcp4sb_63",
13
+ "enabled": "_enabled_1lcp4sb_69",
14
+ "focused": "_focused_1lcp4sb_69",
15
+ "filled": "_filled_1lcp4sb_75",
16
+ "inner": "_inner_1lcp4sb_91",
17
+ "clearable": "_clearable_1lcp4sb_119",
18
+ "clearIcon": "_clearIcon_1lcp4sb_184",
19
+ "icon": "_icon_1lcp4sb_226",
20
+ "busyIcon": "_busyIcon_1lcp4sb_234",
21
+ "label": "_label_1lcp4sb_32",
22
+ "footer": "_footer_1lcp4sb_265",
23
+ "characterCounter": "_characterCounter_1lcp4sb_284",
24
+ "errorMessage": "_errorMessage_1lcp4sb_293",
25
+ "note": "_note_1lcp4sb_297"
23
26
  };
24
27
  export { styles as default };
@@ -18,6 +18,30 @@ import { Textarea } from '@rescui/textarea';
18
18
  </div>;
19
19
  ```
20
20
 
21
+ ### With clear button
22
+
23
+ ```tsx
24
+ import { useState } from 'react';
25
+ import { Textarea } from '@rescui/textarea';
26
+
27
+ const Demo = () => {
28
+ const [value, setValue] = useState('Text that can be cleared and have a decent length');
29
+
30
+ return (
31
+ <div style={{ maxWidth: 400 }}>
32
+ <Textarea
33
+ value={value}
34
+ onChange={e => setValue(e.target.value)}
35
+ onClear={() => setValue('')}
36
+ minRows={3}
37
+ />
38
+ </div>
39
+ );
40
+ };
41
+
42
+ render(<Demo />);
43
+ ```
44
+
21
45
  ### With character counter
22
46
 
23
47
  ```tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/textarea",
3
- "version": "0.11.6-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
3
+ "version": "0.12.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,20 +17,20 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "@rescui/form-field": "0.1.6-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
20
+ "@rescui/form-field": "^0.1.6",
21
21
  "classnames": "^2.2.6",
22
22
  "react-textarea-autosize": "^8.3.4"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "@rescui/ui-contexts": "^0.6.0",
26
26
  "prop-types": "^15",
27
- "react": ">=17.0.0 <20"
27
+ "react": ">=16.8.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
31
- "@rescui/scripts": "0.5.2",
32
- "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.15+f15074a13",
33
- "@rescui/visual-regression": "0.1.4",
30
+ "@rescui/colors": "^0.3.2",
31
+ "@rescui/scripts": "^0.5.2",
32
+ "@rescui/typography": "^0.27.3",
33
+ "@rescui/visual-regression": "^0.1.4",
34
34
  "@types/classnames": "^2.2.11"
35
35
  },
36
36
  "scripts": {
@@ -38,5 +38,5 @@
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "f15074a13a93f4cdfe7b9ac295f0a493e4a0ca0f"
41
+ "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
42
42
  }