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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/_virtual/close-outline.js +106 -0
  2. package/lib/_virtual/index.css.js +12 -12
  3. package/lib/index.css +177 -98
  4. package/lib/index.d.ts +2 -0
  5. package/lib/public-api.p.css +25 -0
  6. package/lib/public-api.pcss +25 -0
  7. package/lib/textarea.d.ts +7 -0
  8. package/lib/textarea.js +20 -4
  9. package/lib/textarea.p.module.css.js +24 -21
  10. package/lib/use-safe-id.d.ts +4 -0
  11. package/lib/use-safe-id.js +10 -0
  12. package/llm/components/textarea.md +24 -0
  13. package/package.json +8 -8
  14. package/lib/use-backward-compatible-id.d.ts +0 -4
  15. package/lib/use-backward-compatible-id.js +0 -14
package/lib/_virtual/close-outline.js ADDED
@@ -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 };
package/lib/_virtual/index.css.js CHANGED
@@ -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_1npbgia_4",
3
+ "sizeXS": "_sizeXS_1npbgia_14",
4
+ "sizeS": "_sizeS_1npbgia_18",
5
+ "sizeM": "_sizeM_1npbgia_22",
6
+ "sizeL": "_sizeL_1npbgia_26",
7
+ "light": "_light_1npbgia_30",
8
+ "dark": "_dark_1npbgia_34",
9
+ "allVariants": "_allVariants_1npbgia_48",
10
+ "variant16": "_variant16_1npbgia_53",
11
+ "variant20": "_variant20_1npbgia_54",
12
+ "variant24": "_variant24_1npbgia_55",
13
+ "variant28": "_variant28_1npbgia_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,9 @@
1
- ._icon_ydxoyp_4{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._icon_1npbgia_4{
2
7
  --_rs-theme-dark:var(
3
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
9
  var(--rs-theme-dark, 0)
@@ -8,7 +13,7 @@
8
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
14
  }
10
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_ydxoyp_4{
16
+ ._icon_1npbgia_4{
12
17
  --_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
18
  --_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
19
  --_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 +22,7 @@
17
22
  }
18
23
  }
19
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_ydxoyp_4{
25
+ ._icon_1npbgia_4{
21
26
  --_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
27
  --_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
28
  --_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 +30,30 @@
25
30
  --_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
31
  }
27
32
  }
28
- ._icon_ydxoyp_4{
33
+ ._icon_1npbgia_4{
29
34
 
30
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
36
 
32
37
  width:var(--rs-icons-width, auto);
33
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
39
  }
35
- ._sizeXS_ydxoyp_14{
40
+ ._sizeXS_1npbgia_14{
36
41
  --_rs-icons-height:16px;
37
42
  }
38
- ._sizeS_ydxoyp_18{
43
+ ._sizeS_1npbgia_18{
39
44
  --_rs-icons-height:20px;
40
45
  }
41
- ._sizeM_ydxoyp_22{
46
+ ._sizeM_1npbgia_22{
42
47
  --_rs-icons-height:24px;
43
48
  }
44
- ._sizeL_ydxoyp_26{
49
+ ._sizeL_1npbgia_26{
45
50
  --_rs-icons-height:28px;
46
51
  }
47
- ._light_ydxoyp_30{
52
+ ._light_1npbgia_30{
48
53
  --rs-theme-dark:0;
49
54
  --_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
55
  }
51
- ._dark_ydxoyp_34{
56
+ ._dark_1npbgia_34{
52
57
  --rs-theme-dark:1;
53
58
  --_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
59
  }
@@ -60,56 +65,63 @@
60
65
  transform:rotate(360deg);
61
66
  }
62
67
  }
63
- ._allVariants_ydxoyp_48{
68
+ ._allVariants_1npbgia_48{
64
69
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
70
  container:rs-icon / size;
66
71
  }
67
- ._variant16_ydxoyp_53,
68
- ._variant20_ydxoyp_54,
69
- ._variant24_ydxoyp_55{
72
+ ._variant16_1npbgia_53,
73
+ ._variant20_1npbgia_54,
74
+ ._variant24_1npbgia_55{
70
75
  display:none;
71
76
  }
72
- ._variant28_ydxoyp_58{
77
+ ._variant28_1npbgia_58{
73
78
  display:block;
74
79
  }
75
80
  @container rs-icon (max-height: 24px){
76
- ._variant24_ydxoyp_55{
81
+ ._variant24_1npbgia_55{
77
82
  display:block;
78
83
  }
79
- ._variant28_ydxoyp_58{
84
+ ._variant28_1npbgia_58{
80
85
  display:none;
81
86
  }
82
87
  }
83
88
  @container rs-icon (max-height: 20px){
84
- ._variant20_ydxoyp_54{
89
+ ._variant20_1npbgia_54{
85
90
  display:block;
86
91
  }
87
- ._variant24_ydxoyp_55{
92
+ ._variant24_1npbgia_55{
88
93
  display:none;
89
94
  }
90
95
  }
91
96
  @container rs-icon (max-height: 16px){
92
- ._variant16_ydxoyp_53{
97
+ ._variant16_1npbgia_53{
93
98
  display:block;
94
99
  }
95
- ._variant20_ydxoyp_54{
100
+ ._variant20_1npbgia_54{
96
101
  display:none;
97
102
  }
98
103
  }
99
- ._themeLight_8ky3x8_8{
104
+ @property --_rs-theme-dark-coefficient{
105
+ syntax:'<number>';
106
+ inherits:true;
107
+ initial-value:0;
108
+ }
109
+ ._themeLight_1xxg0sf_8{
100
110
  --rs-theme-dark:0;
101
111
  }
102
- ._themeDark_8ky3x8_11{
112
+ ._themeDark_1xxg0sf_11{
103
113
  --rs-theme-dark:1;
104
114
  }
105
- ._sizeS_8ky3x8_15{
115
+ ._sizeS_1xxg0sf_15{
106
116
  --_rs-textarea-vertical-padding:6px;
107
117
  --_rs-textarea-horizontal-padding:8px;
118
+ --_rs-textarea-icon-size:20px;
119
+ --_rs-textarea-icon-offset:8px;
108
120
  }
109
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__busy-icon']:not(html){
121
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__busy-icon']:not(html){
110
122
  --_rs-icons-height:20px;
111
123
  }
112
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
124
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__inner']::-moz-placeholder{
113
125
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
114
126
  --_rs-typography-text-transform:initial;
115
127
  --_rs-typography-font-variant-numeric:initial;
@@ -144,10 +156,10 @@
144
156
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
145
157
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
158
  }
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']{
159
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__label'],
160
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__inner'],
161
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__inner']::placeholder,
162
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__suffix']{
151
163
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
152
164
  --_rs-typography-text-transform:initial;
153
165
  --_rs-typography-font-variant-numeric:initial;
@@ -182,7 +194,7 @@
182
194
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
183
195
  --_rs-typography-link-border-bottom-width-from-text:1px;
184
196
  }
185
- ._sizeS_8ky3x8_15 [data-rs-internal='textarea__bold-label']{
197
+ ._sizeS_1xxg0sf_15 [data-rs-internal='textarea__bold-label']{
186
198
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
187
199
  --_rs-typography-text-transform:initial;
188
200
  --_rs-typography-font-variant-numeric:initial;
@@ -214,14 +226,16 @@
214
226
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
215
227
  --_rs-typography-link-border-bottom-width-from-text:2px;
216
228
  }
217
- ._sizeM_8ky3x8_18{
229
+ ._sizeM_1xxg0sf_18{
218
230
  --_rs-textarea-vertical-padding:8px;
219
231
  --_rs-textarea-horizontal-padding:8px;
232
+ --_rs-textarea-icon-size:24px;
233
+ --_rs-textarea-icon-offset:8px;
220
234
  }
221
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__busy-icon']:not(html){
235
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__busy-icon']:not(html){
222
236
  --_rs-icons-height:24px;
223
237
  }
224
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
238
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
225
239
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
226
240
  --_rs-typography-text-transform:initial;
227
241
  --_rs-typography-font-variant-numeric:initial;
@@ -260,14 +274,14 @@
260
274
  --_rs-typography-link-border-bottom-width-from-text:1px;
261
275
  }
262
276
  @media screen and (max-width: 640px){
263
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
277
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner']::-moz-placeholder{
264
278
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
265
279
  }
266
280
  }
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']{
281
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__label'],
282
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner'],
283
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner']::placeholder,
284
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__suffix']{
271
285
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
272
286
  --_rs-typography-text-transform:initial;
273
287
  --_rs-typography-font-variant-numeric:initial;
@@ -306,14 +320,14 @@
306
320
  --_rs-typography-link-border-bottom-width-from-text:1px;
307
321
  }
308
322
  @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']{
323
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__label'],
324
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner'],
325
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__inner']::placeholder,
326
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__suffix']{
313
327
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
314
328
  }
315
329
  }
316
- ._sizeM_8ky3x8_18 [data-rs-internal='textarea__bold-label']{
330
+ ._sizeM_1xxg0sf_18 [data-rs-internal='textarea__bold-label']{
317
331
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
318
332
  --_rs-typography-text-transform:initial;
319
333
  --_rs-typography-font-variant-numeric:initial;
@@ -345,14 +359,16 @@
345
359
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
346
360
  --_rs-typography-link-border-bottom-width-from-text:2px;
347
361
  }
348
- ._sizeL_8ky3x8_21{
362
+ ._sizeL_1xxg0sf_21{
349
363
  --_rs-textarea-vertical-padding:12px;
350
364
  --_rs-textarea-horizontal-padding:16px;
365
+ --_rs-textarea-icon-size:28px;
366
+ --_rs-textarea-icon-offset:16px;
351
367
  }
352
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__busy-icon']:not(html){
368
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__busy-icon']:not(html){
353
369
  --_rs-icons-height:28px;
354
370
  }
355
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
371
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
356
372
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
357
373
  --_rs-typography-text-transform:initial;
358
374
  --_rs-typography-font-variant-numeric:initial;
@@ -391,14 +407,14 @@
391
407
  --_rs-typography-link-border-bottom-width-from-text:1px;
392
408
  }
393
409
  @media screen and (max-width: 640px){
394
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
410
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner']::-moz-placeholder{
395
411
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
396
412
  }
397
413
  }
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']{
414
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__label'],
415
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner'],
416
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner']::placeholder,
417
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__suffix']{
402
418
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
403
419
  --_rs-typography-text-transform:initial;
404
420
  --_rs-typography-font-variant-numeric:initial;
@@ -437,14 +453,14 @@
437
453
  --_rs-typography-link-border-bottom-width-from-text:1px;
438
454
  }
439
455
  @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']{
456
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__label'],
457
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner'],
458
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__inner']::placeholder,
459
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__suffix']{
444
460
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
445
461
  }
446
462
  }
447
- ._sizeL_8ky3x8_21 [data-rs-internal='textarea__bold-label']{
463
+ ._sizeL_1xxg0sf_21 [data-rs-internal='textarea__bold-label']{
448
464
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
449
465
  --_rs-typography-text-transform:initial;
450
466
  --_rs-typography-font-variant-numeric:initial;
@@ -476,7 +492,7 @@
476
492
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
477
493
  --_rs-typography-link-border-bottom-width-from-text:2px;
478
494
  }
479
- ._classic_8ky3x8_25{
495
+ ._classic_1xxg0sf_25{
480
496
  --_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
497
  --_rs-textarea-focused-background-color:rgb(
482
498
  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 +506,18 @@
490
506
  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
507
  0.7
492
508
  );
509
+ --_rs-textarea-focused-clear-icon-color:rgba(
510
+ 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),
511
+ 0.7
512
+ );
513
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
514
+ 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)
515
+ );
493
516
  --_rs-textarea-focused-scrollbar-track-color:rgb(
494
517
  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
518
  );
496
519
  }
497
- ._rock_8ky3x8_28{
520
+ ._rock_1xxg0sf_28{
498
521
  --_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
522
  --_rs-textarea-focused-background-color:rgb(
500
523
  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 +531,18 @@
508
531
  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
532
  0.7
510
533
  );
534
+ --_rs-textarea-focused-clear-icon-color:rgba(
535
+ 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),
536
+ 0.7
537
+ );
538
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
539
+ 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)
540
+ );
511
541
  --_rs-textarea-focused-scrollbar-track-color:rgb(
512
542
  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
543
  );
514
544
  }
515
- ._labelWrapper_8ky3x8_32{
545
+ ._labelWrapper_1xxg0sf_32{
516
546
  --_rs-theme-dark:var(
517
547
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
518
548
  var(--rs-theme-dark, 0)
@@ -522,7 +552,7 @@
522
552
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
523
553
  }
524
554
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
525
- ._labelWrapper_8ky3x8_32{
555
+ ._labelWrapper_1xxg0sf_32{
526
556
  --_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
557
  --_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
558
  --_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 +561,7 @@
531
561
  }
532
562
  }
533
563
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
534
- ._labelWrapper_8ky3x8_32{
564
+ ._labelWrapper_1xxg0sf_32{
535
565
  --_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
566
  --_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
567
  --_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 +570,22 @@
540
570
  }
541
571
  }
542
572
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
543
- ._labelWrapper_8ky3x8_32{
573
+ ._labelWrapper_1xxg0sf_32{
544
574
  --_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
575
  --_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
576
  }
547
577
  }
548
578
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
549
- ._labelWrapper_8ky3x8_32{
579
+ ._labelWrapper_1xxg0sf_32{
550
580
  --_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
581
  --_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
582
  }
553
583
  }
554
- ._labelWrapper_8ky3x8_32 {
584
+ ._labelWrapper_1xxg0sf_32 {
555
585
 
556
586
  display:block;
557
587
  }
558
- ._wrapper_8ky3x8_40{
588
+ ._wrapper_1xxg0sf_40{
559
589
  --_rs-textarea-border-width:1px;
560
590
  --_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
591
  --_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 +601,34 @@
571
601
 
572
602
  box-shadow:inset 0 0 0 var(--_rs-textarea-border-width) var(--_rs-textarea-border-color);
573
603
  }
574
- ._error_8ky3x8_57 ._wrapper_8ky3x8_40{
604
+ ._error_1xxg0sf_57 ._wrapper_1xxg0sf_40{
575
605
  --_rs-textarea-border-width:2px;
576
606
  --_rs-textarea-border-color:var(--_rs-color-danger);
577
607
  --_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
608
  }
579
- ._disabled_8ky3x8_63 ._wrapper_8ky3x8_40{
609
+ ._disabled_1xxg0sf_63 ._wrapper_1xxg0sf_40{
580
610
  --_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
611
 
582
612
  cursor:default;
583
613
  }
584
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._wrapper_8ky3x8_40{
614
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._wrapper_1xxg0sf_40{
585
615
  --_rs-textarea-background-color:var(
586
616
  --_rs-textarea-focused-background-color
587
617
  );
588
618
  }
589
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57)._filled_8ky3x8_75 ._wrapper_8ky3x8_40{
619
+ ._enabled_1xxg0sf_69:not(._error_1xxg0sf_57)._filled_1xxg0sf_75 ._wrapper_1xxg0sf_40{
590
620
  --_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
621
  }
592
622
  @media (hover: hover){
593
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57):hover ._wrapper_8ky3x8_40{
623
+ ._enabled_1xxg0sf_69:not(._error_1xxg0sf_57):hover ._wrapper_1xxg0sf_40{
594
624
  --_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
625
  }
596
626
  }
597
- ._enabled_8ky3x8_69:not(._error_8ky3x8_57)._focused_8ky3x8_69 ._wrapper_8ky3x8_40{
627
+ ._enabled_1xxg0sf_69:not(._error_1xxg0sf_57)._focused_1xxg0sf_69 ._wrapper_1xxg0sf_40{
598
628
  --_rs-textarea-border-width:var(--_rs-textarea-focused-border-width);
599
629
  --_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
630
  }
601
- ._inner_8ky3x8_91{
631
+ ._inner_1xxg0sf_91{
602
632
  letter-spacing:var(
603
633
  --rs-text-base-letter-spacing,
604
634
  var(--_rs-typography-letter-spacing)
@@ -632,26 +662,29 @@
632
662
  -moz-appearance:none;
633
663
  appearance:none;
634
664
  }
665
+ ._clearable_1xxg0sf_119 ._inner_1xxg0sf_91{
666
+ padding-right:calc(var(--_rs-textarea-horizontal-padding) + var(--_rs-textarea-icon-size) + var(--_rs-textarea-icon-offset) - var(--_rs-textarea-border-width));
667
+ }
635
668
  @media (hover: hover){
636
- ._inner_8ky3x8_91{
669
+ ._inner_1xxg0sf_91{
637
670
  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
671
  scrollbar-width:thin
639
672
  }
640
673
 
641
- ._inner_8ky3x8_91::-webkit-scrollbar{
674
+ ._inner_1xxg0sf_91::-webkit-scrollbar{
642
675
  width:7px;
643
676
  height:8px;
644
677
  }
645
678
 
646
- ._inner_8ky3x8_91::-webkit-scrollbar-corner{
679
+ ._inner_1xxg0sf_91::-webkit-scrollbar-corner{
647
680
  background-color:transparent;
648
681
  }
649
682
 
650
- ._inner_8ky3x8_91::-webkit-scrollbar-track{
683
+ ._inner_1xxg0sf_91::-webkit-scrollbar-track{
651
684
  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
685
  }
653
686
 
654
- ._inner_8ky3x8_91::-webkit-scrollbar-thumb{
687
+ ._inner_1xxg0sf_91::-webkit-scrollbar-thumb{
655
688
  width:7px;
656
689
 
657
690
  border-radius:7px;
@@ -659,40 +692,86 @@
659
692
  background:#8C8C8E;
660
693
  }
661
694
 
662
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91{
695
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._inner_1xxg0sf_91{
663
696
  scrollbar-color:#8C8C8E var(--_rs-textarea-focused-scrollbar-track-color);
664
697
  }
665
698
 
666
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::-webkit-scrollbar-track{
699
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._inner_1xxg0sf_91::-webkit-scrollbar-track{
667
700
  background-color:var(--_rs-textarea-focused-scrollbar-track-color);
668
701
  }
669
702
  }
670
- ._inner_8ky3x8_91:focus{
703
+ ._inner_1xxg0sf_91:focus{
671
704
  outline:none;
672
705
  }
673
- ._inner_8ky3x8_91::-moz-placeholder{
706
+ ._inner_1xxg0sf_91::-moz-placeholder{
674
707
  opacity:1;
675
708
 
676
709
  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
710
  }
678
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::-moz-placeholder{
711
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._inner_1xxg0sf_91::-moz-placeholder{
679
712
  color:var(--_rs-textarea-focused-placeholder-color);
680
713
  }
681
- ._inner_8ky3x8_91::placeholder{
714
+ ._inner_1xxg0sf_91::placeholder{
682
715
  opacity:1;
683
716
 
684
717
  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
718
  }
686
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91::placeholder{
719
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._inner_1xxg0sf_91::placeholder{
687
720
  color:var(--_rs-textarea-focused-placeholder-color);
688
721
  }
689
- ._disabled_8ky3x8_63 ._inner_8ky3x8_91{
722
+ ._disabled_1xxg0sf_63 ._inner_1xxg0sf_91{
690
723
  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
724
  }
692
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._inner_8ky3x8_91{
725
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._inner_1xxg0sf_91{
693
726
  color:var(--_rs-textarea-focused-color);
694
727
  }
695
- ._busyIcon_8ky3x8_177{
728
+ ._clearIcon_1xxg0sf_184{
729
+ position:absolute;
730
+ top:var(--_rs-textarea-vertical-padding);
731
+ right:var(--_rs-textarea-horizontal-padding);
732
+
733
+ display:flex;
734
+
735
+ padding:0;
736
+
737
+ border:none;
738
+
739
+ cursor:pointer;
740
+
741
+ 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);
742
+
743
+ background:transparent;
744
+ -webkit-appearance:none;
745
+ -moz-appearance:none;
746
+ appearance:none;
747
+ }
748
+ ._clearIcon_1xxg0sf_184:focus{
749
+ outline:none;
750
+ }
751
+ ._disabled_1xxg0sf_63 ._clearIcon_1xxg0sf_184{
752
+ pointer-events:none;
753
+
754
+ 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);
755
+ }
756
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._clearIcon_1xxg0sf_184{
757
+ color:var(--_rs-textarea-focused-clear-icon-color);
758
+ }
759
+ @media (hover: hover){
760
+ ._enabled_1xxg0sf_69 ._clearIcon_1xxg0sf_184:hover{
761
+ 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));
762
+ }
763
+
764
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._clearIcon_1xxg0sf_184:hover{
765
+ color:var(--_rs-textarea-focused-clear-icon-accent-color);
766
+ }
767
+ }
768
+ ._clearIcon_1xxg0sf_184 ._icon_1xxg0sf_226{
769
+ fill:currentColor;
770
+
771
+ width:auto;
772
+ height:var(--_rs-textarea-icon-size);
773
+ }
774
+ ._busyIcon_1xxg0sf_234{
696
775
  position:absolute;
697
776
  right:var(--_rs-textarea-horizontal-padding);
698
777
  bottom:var(--_rs-textarea-vertical-padding);
@@ -703,13 +782,13 @@
703
782
 
704
783
  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
784
  }
706
- ._disabled_8ky3x8_63 ._busyIcon_8ky3x8_177{
785
+ ._disabled_1xxg0sf_63 ._busyIcon_1xxg0sf_234{
707
786
  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
787
  }
709
- ._enabled_8ky3x8_69._focused_8ky3x8_69 ._busyIcon_8ky3x8_177{
788
+ ._enabled_1xxg0sf_69._focused_1xxg0sf_69 ._busyIcon_1xxg0sf_234{
710
789
  color:var(--_rs-textarea-focused-busy-icon-color);
711
790
  }
712
- ._label_8ky3x8_32{
791
+ ._label_1xxg0sf_32{
713
792
  letter-spacing:var(
714
793
  --rs-text-base-letter-spacing,
715
794
  var(--_rs-typography-letter-spacing)
@@ -728,13 +807,13 @@
728
807
 
729
808
  margin-bottom:4px;
730
809
  }
731
- ._disabled_8ky3x8_63 ._label_8ky3x8_32{
810
+ ._disabled_1xxg0sf_63 ._label_1xxg0sf_32{
732
811
  color:var(
733
812
  --rs-color-pale,
734
813
  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
814
  );
736
815
  }
737
- ._footer_8ky3x8_208{
816
+ ._footer_1xxg0sf_265{
738
817
  display:grid;
739
818
  grid-template-areas:"note character-counter" "error-message character-counter";
740
819
  grid-template-columns:1fr auto;
@@ -744,10 +823,10 @@
744
823
 
745
824
  margin-top:4px;
746
825
  }
747
- ._error_8ky3x8_57 ._footer_8ky3x8_208{
826
+ ._error_1xxg0sf_57 ._footer_1xxg0sf_265{
748
827
  grid-template-areas:"error-message character-counter" "note character-counter";
749
828
  }
750
- ._characterCounter_8ky3x8_227{
829
+ ._characterCounter_1xxg0sf_284{
751
830
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
752
831
  --_rs-typography-text-transform:initial;
753
832
  --_rs-typography-font-variant-numeric:initial;
@@ -809,10 +888,10 @@
809
888
 
810
889
  margin-left:16px;
811
890
  }
812
- ._errorMessage_8ky3x8_236{
891
+ ._errorMessage_1xxg0sf_293{
813
892
  grid-area:error-message;
814
893
  }
815
- ._note_8ky3x8_240{
894
+ ._note_1xxg0sf_297{
816
895
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
817
896
  --_rs-typography-text-transform:initial;
818
897
  --_rs-typography-font-variant-numeric:initial;
@@ -872,7 +951,7 @@
872
951
 
873
952
  grid-area:note;
874
953
  }
875
- ._disabled_8ky3x8_63 ._note_8ky3x8_240{
954
+ ._disabled_1xxg0sf_63 ._note_1xxg0sf_297{
876
955
  --_rs-typography-hardness-color:var(
877
956
  --rs-color-pale,
878
957
  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;
package/lib/public-api.p.css CHANGED
@@ -1,7 +1,14 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-textarea-size-s{
2
7
  &:not(html){
3
8
  --_rs-textarea-vertical-padding:6px;
4
9
  --_rs-textarea-horizontal-padding:8px;
10
+ --_rs-textarea-icon-size:20px;
11
+ --_rs-textarea-icon-offset:8px;
5
12
  }
6
13
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
7
14
  --_rs-icons-height:20px;
@@ -116,6 +123,8 @@
116
123
  &:not(html){
117
124
  --_rs-textarea-vertical-padding:8px;
118
125
  --_rs-textarea-horizontal-padding:8px;
126
+ --_rs-textarea-icon-size:24px;
127
+ --_rs-textarea-icon-offset:8px;
119
128
  }
120
129
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
121
130
  --_rs-icons-height:24px;
@@ -249,6 +258,8 @@
249
258
  &:not(html){
250
259
  --_rs-textarea-vertical-padding:12px;
251
260
  --_rs-textarea-horizontal-padding:16px;
261
+ --_rs-textarea-icon-size:28px;
262
+ --_rs-textarea-icon-offset:16px;
252
263
  }
253
264
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
254
265
  --_rs-icons-height:28px;
@@ -392,6 +403,13 @@
392
403
  --_rs-textarea-focused-busy-icon-color:rgba(
393
404
  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
405
  0.7
406
+ );
407
+ --_rs-textarea-focused-clear-icon-color:rgba(
408
+ 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),
409
+ 0.7
410
+ );
411
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
412
+ 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
413
  );
396
414
  --_rs-textarea-focused-scrollbar-track-color:rgb(
397
415
  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 +430,13 @@
412
430
  --_rs-textarea-focused-busy-icon-color:rgba(
413
431
  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
432
  0.7
433
+ );
434
+ --_rs-textarea-focused-clear-icon-color:rgba(
435
+ 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),
436
+ 0.7
437
+ );
438
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
439
+ 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
440
  );
416
441
  --_rs-textarea-focused-scrollbar-track-color:rgb(
417
442
  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/public-api.pcss CHANGED
@@ -1,7 +1,14 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-textarea-size-s{
2
7
  &:not(html){
3
8
  --_rs-textarea-vertical-padding:6px;
4
9
  --_rs-textarea-horizontal-padding:8px;
10
+ --_rs-textarea-icon-size:20px;
11
+ --_rs-textarea-icon-offset:8px;
5
12
  }
6
13
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
7
14
  --_rs-icons-height:20px;
@@ -116,6 +123,8 @@
116
123
  &:not(html){
117
124
  --_rs-textarea-vertical-padding:8px;
118
125
  --_rs-textarea-horizontal-padding:8px;
126
+ --_rs-textarea-icon-size:24px;
127
+ --_rs-textarea-icon-offset:8px;
119
128
  }
120
129
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
121
130
  --_rs-icons-height:24px;
@@ -249,6 +258,8 @@
249
258
  &:not(html){
250
259
  --_rs-textarea-vertical-padding:12px;
251
260
  --_rs-textarea-horizontal-padding:16px;
261
+ --_rs-textarea-icon-size:28px;
262
+ --_rs-textarea-icon-offset:16px;
252
263
  }
253
264
  &:not(html) [data-rs-internal='textarea__busy-icon']:not(html){
254
265
  --_rs-icons-height:28px;
@@ -392,6 +403,13 @@
392
403
  --_rs-textarea-focused-busy-icon-color:rgba(
393
404
  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
405
  0.7
406
+ );
407
+ --_rs-textarea-focused-clear-icon-color:rgba(
408
+ 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),
409
+ 0.7
410
+ );
411
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
412
+ 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
413
  );
396
414
  --_rs-textarea-focused-scrollbar-track-color:rgb(
397
415
  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 +430,13 @@
412
430
  --_rs-textarea-focused-busy-icon-color:rgba(
413
431
  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
432
  0.7
433
+ );
434
+ --_rs-textarea-focused-clear-icon-color:rgba(
435
+ 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),
436
+ 0.7
437
+ );
438
+ --_rs-textarea-focused-clear-icon-accent-color:rgb(
439
+ 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
440
  );
416
441
  --_rs-textarea-focused-scrollbar-track-color:rgb(
417
442
  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,8 +5,9 @@ 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
- import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
10
+ import { useSafeId } from './use-safe-id.js';
10
11
  import styles from './textarea.p.module.css.js';
11
12
  const SIZE_STYLES = {
12
13
  s: styles.sizeS,
@@ -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,8 +48,9 @@ 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
- const uniqueId = `textarea-${useBackwardCompatibleId()}`;
53
+ const uniqueId = `textarea-${useSafeId()}`;
50
54
  const errorId = `${id ? id : uniqueId}-error`;
51
55
  const hasFooter = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
52
56
  return /*#__PURE__*/React.createElement("label", {
@@ -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']),
package/lib/textarea.p.module.css.js CHANGED
@@ -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_1xxg0sf_8",
3
+ "themeDark": "_themeDark_1xxg0sf_11",
4
+ "sizeS": "_sizeS_1xxg0sf_15",
5
+ "sizeM": "_sizeM_1xxg0sf_18",
6
+ "sizeL": "_sizeL_1xxg0sf_21",
7
+ "classic": "_classic_1xxg0sf_25",
8
+ "rock": "_rock_1xxg0sf_28",
9
+ "labelWrapper": "_labelWrapper_1xxg0sf_32",
10
+ "wrapper": "_wrapper_1xxg0sf_40",
11
+ "error": "_error_1xxg0sf_57",
12
+ "disabled": "_disabled_1xxg0sf_63",
13
+ "enabled": "_enabled_1xxg0sf_69",
14
+ "focused": "_focused_1xxg0sf_69",
15
+ "filled": "_filled_1xxg0sf_75",
16
+ "inner": "_inner_1xxg0sf_91",
17
+ "clearable": "_clearable_1xxg0sf_119",
18
+ "clearIcon": "_clearIcon_1xxg0sf_184",
19
+ "icon": "_icon_1xxg0sf_226",
20
+ "busyIcon": "_busyIcon_1xxg0sf_234",
21
+ "label": "_label_1xxg0sf_32",
22
+ "footer": "_footer_1xxg0sf_265",
23
+ "characterCounter": "_characterCounter_1xxg0sf_284",
24
+ "errorMessage": "_errorMessage_1xxg0sf_293",
25
+ "note": "_note_1xxg0sf_297"
23
26
  };
24
27
  export { styles as default };
package/lib/use-safe-id.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ declare function useFallbackId(): number;
3
+ export declare const useSafeId: typeof React.useId | typeof useFallbackId;
4
+ export {};
package/lib/use-safe-id.js ADDED
@@ -0,0 +1,10 @@
1
+ import React, { useState } from 'react';
2
+ let nextFallbackId = 0;
3
+
4
+ function useFallbackId() {
5
+ const [id] = useState(() => nextFallbackId++);
6
+ return id;
7
+ }
8
+
9
+ const useSafeId = React.useId ?? useFallbackId;
10
+ export { useSafeId };
package/llm/components/textarea.md CHANGED
@@ -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.1",
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.7",
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.3",
31
+ "@rescui/scripts": "^0.5.2",
32
+ "@rescui/typography": "^0.27.4",
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": "3711cbfc0c797014395421b008aa5331d6d47c6e"
42
42
  }
package/lib/use-backward-compatible-id.d.ts DELETED
@@ -1,4 +0,0 @@
1
- export declare const useBackwardCompatibleId: {
2
- (): string | number;
3
- counter: number;
4
- };
package/lib/use-backward-compatible-id.js DELETED
@@ -1,14 +0,0 @@
1
- import React, { useRef } from 'react';
2
-
3
- const useBackwardCompatibleId = () => {
4
- const id = useRef(null);
5
-
6
- if (id.current === null) {
7
- id.current = useBackwardCompatibleId.counter++;
8
- }
9
-
10
- return (React.useId ? React.useId : () => id.current)();
11
- };
12
-
13
- useBackwardCompatibleId.counter = 0;
14
- export { useBackwardCompatibleId };