@rescui/input 0.14.5 → 0.15.1-RUI-280-Update-select-component-026338d06.52

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.
package/lib/index.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const DefaultInput: import("react").ForwardRefExoticComponent<{
8
8
  placeholder?: string;
9
9
  disabled?: boolean;
10
10
  error?: import("react").ReactNode;
11
+ reserveErrorLine?: boolean;
11
12
  busy?: boolean;
12
13
  onChange?: import("react").ChangeEventHandler<HTMLInputElement>;
13
14
  onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
@@ -35,6 +36,7 @@ declare const DefaultInput: import("react").ForwardRefExoticComponent<{
35
36
  placeholder?: string;
36
37
  disabled?: boolean;
37
38
  error?: import("react").ReactNode;
39
+ reserveErrorLine?: boolean;
38
40
  busy?: boolean;
39
41
  onChange?: import("react").ChangeEventHandler<HTMLInputElement>;
40
42
  onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
package/lib/input.d.ts CHANGED
@@ -16,6 +16,11 @@ declare type InputExclusiveProps = {
16
16
  * Error state flag
17
17
  */
18
18
  error?: boolean | React.ReactNode;
19
+ /**
20
+ * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
21
+ * If `false `, there will be no reservation.
22
+ */
23
+ reserveErrorLine?: boolean;
19
24
  /**
20
25
  * Set busy state
21
26
  */
package/lib/input.js CHANGED
@@ -3,11 +3,12 @@ import * as React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import cn from 'classnames';
5
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
6
- import WarningIcon from './_virtual/warning.js';
6
+ import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
7
7
  import CloseOutlineIcon from './_virtual/close-outline.js';
8
8
  import styles from './input.p.module.css.js';
9
9
  import { RightIcons } from './parts/right-icons.js';
10
10
  import { CustomIcon } from './parts/custom-icon.js';
11
+ import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
11
12
  const {
12
13
  useEffect,
13
14
  useRef,
@@ -26,6 +27,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
26
27
  placeholder,
27
28
  disabled,
28
29
  error,
30
+ reserveErrorLine = false,
29
31
  busy,
30
32
  onChange,
31
33
  onFocus,
@@ -44,7 +46,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
44
46
  suffix,
45
47
  offSystemMicroelements,
46
48
  style,
47
- boldLabel,
49
+ boldLabel = true,
48
50
  ...restProps
49
51
  } = _ref;
50
52
  const theme = useThemeWithUndefined(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
@@ -72,6 +74,9 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
72
74
  }, []);
73
75
  const renderLeftCustomIcon = icon && iconType === 'left';
74
76
  const renderRightCustomIcon = icon && (iconType === 'right' || iconType === 'rightAction' || iconType === 'rightActionFocusable');
77
+ const uniqueId = `input-${useBackwardCompatibleId()}`;
78
+ const errorId = `${id ? id : uniqueId}-error`;
79
+ const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
75
80
  return /*#__PURE__*/React.createElement("div", {
76
81
  className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], {
77
82
  [styles.focused]: focused,
@@ -141,6 +146,7 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
141
146
  },
142
147
  value: value,
143
148
  ref: ref,
149
+ "aria-errormessage": error ? errorId : undefined,
144
150
  "aria-invalid": Boolean(error),
145
151
  "data-test": "input__inner",
146
152
  "data-rs-internal": "input__inner"
@@ -158,18 +164,17 @@ const Input = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complex
158
164
  className: styles.suffix,
159
165
  "data-test": "input__suffix",
160
166
  "data-rs-internal": "input__suffix"
161
- }, suffix)))), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
167
+ }, suffix)))), hasFooter && /*#__PURE__*/React.createElement("div", {
168
+ className: styles.footer
169
+ }, /*#__PURE__*/React.createElement(ErrorMessage, {
162
170
  className: styles.errorMessage,
163
171
  "data-test": "input__error-message",
164
- "data-rs-internal": "input__error-message"
165
- }, /*#__PURE__*/React.createElement(WarningIcon, {
166
- className: styles.errorIcon,
167
- "data-rs-internal": "input__error-icon",
168
- "data-render-all-sizes": true
169
- }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
172
+ id: errorId,
173
+ reserveLine: reserveErrorLine
174
+ }, error), note && /*#__PURE__*/React.createElement("div", {
170
175
  className: styles.note,
171
176
  "data-rs-internal": "input__note"
172
- }, note));
177
+ }, note)));
173
178
  });
174
179
  Input.displayName = 'Input';
175
180
  Input.propTypes = {
@@ -177,7 +182,8 @@ Input.propTypes = {
177
182
  className: PropTypes.string,
178
183
  placeholder: PropTypes.string,
179
184
  disabled: PropTypes.bool,
180
- error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
185
+ error: ErrorMessage.propTypes.children,
186
+ reserveErrorLine: PropTypes.bool,
181
187
  busy: PropTypes.bool,
182
188
  onChange: PropTypes.func,
183
189
  onFocus: PropTypes.func,
@@ -1,31 +1,31 @@
1
1
  var styles = {
2
- "light": "_light_1q33nls_8",
3
- "dark": "_dark_1q33nls_11",
4
- "sizeS": "_sizeS_1q33nls_15",
5
- "sizeM": "_sizeM_1q33nls_18",
6
- "sizeL": "_sizeL_1q33nls_21",
7
- "classic": "_classic_1q33nls_25",
8
- "rock": "_rock_1q33nls_28",
9
- "container": "_container_1q33nls_32",
10
- "wrapper": "_wrapper_1q33nls_39",
11
- "error": "_error_1q33nls_55",
12
- "disabled": "_disabled_1q33nls_61",
13
- "enabled": "_enabled_1q33nls_67",
14
- "focused": "_focused_1q33nls_67",
15
- "filled": "_filled_1q33nls_73",
16
- "field": "_field_1q33nls_91",
17
- "inner": "_inner_1q33nls_101",
18
- "offSystemMicroelements": "_offSystemMicroelements_1q33nls_202",
19
- "iconWrapper": "_iconWrapper_1q33nls_212",
20
- "action": "_action_1q33nls_223",
21
- "right": "_right_1q33nls_261",
22
- "left": "_left_1q33nls_265",
23
- "icon": "_icon_1q33nls_212",
24
- "divider": "_divider_1q33nls_299",
25
- "suffix": "_suffix_1q33nls_315",
26
- "errorMessage": "_errorMessage_1q33nls_329",
27
- "errorIcon": "_errorIcon_1q33nls_341",
28
- "note": "_note_1q33nls_347",
29
- "label": "_label_1q33nls_358"
2
+ "light": "_light_1mjpwu_7",
3
+ "dark": "_dark_1mjpwu_10",
4
+ "sizeS": "_sizeS_1mjpwu_14",
5
+ "sizeM": "_sizeM_1mjpwu_17",
6
+ "sizeL": "_sizeL_1mjpwu_20",
7
+ "classic": "_classic_1mjpwu_24",
8
+ "rock": "_rock_1mjpwu_27",
9
+ "container": "_container_1mjpwu_31",
10
+ "wrapper": "_wrapper_1mjpwu_39",
11
+ "error": "_error_1mjpwu_55",
12
+ "disabled": "_disabled_1mjpwu_61",
13
+ "enabled": "_enabled_1mjpwu_67",
14
+ "focused": "_focused_1mjpwu_67",
15
+ "filled": "_filled_1mjpwu_73",
16
+ "field": "_field_1mjpwu_91",
17
+ "inner": "_inner_1mjpwu_101",
18
+ "offSystemMicroelements": "_offSystemMicroelements_1mjpwu_202",
19
+ "iconWrapper": "_iconWrapper_1mjpwu_212",
20
+ "action": "_action_1mjpwu_223",
21
+ "right": "_right_1mjpwu_261",
22
+ "left": "_left_1mjpwu_265",
23
+ "icon": "_icon_1mjpwu_212",
24
+ "divider": "_divider_1mjpwu_299",
25
+ "suffix": "_suffix_1mjpwu_315",
26
+ "label": "_label_1mjpwu_329",
27
+ "footer": "_footer_1mjpwu_340",
28
+ "errorMessage": "_errorMessage_1mjpwu_347",
29
+ "note": "_note_1mjpwu_356"
30
30
  };
31
31
  export { styles as default };
@@ -0,0 +1,4 @@
1
+ export declare const useBackwardCompatibleId: {
2
+ (): string | number;
3
+ counter: number;
4
+ };
@@ -0,0 +1,14 @@
1
+ import React__default, { 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__default.useId ? React__default.useId : () => id.current)();
11
+ };
12
+
13
+ useBackwardCompatibleId.counter = 0;
14
+ export { useBackwardCompatibleId };
@@ -2,7 +2,6 @@
2
2
  &:not(html){
3
3
  --_rs-input-vertical-padding:6px;
4
4
  --_rs-input-horizontal-padding:8px;
5
- --_rs-input-parts-offset:4px;
6
5
  --_rs-input-icon-offset:8px;
7
6
  --_rs-input-icon-size:20px;
8
7
  }
@@ -33,8 +32,9 @@
33
32
  )
34
33
  );
35
34
  --_rs-typography-text-auto-offset:8px;
36
- --_rs-typography-ul-list-li-padding-left:28px;
37
- --_rs-typography-ol-list-li-padding-left:21px;
35
+ --_rs-typography-ul-bullet-offset:2px;
36
+ --_rs-typography-list-li-compact-left-offset:15px;
37
+ --_rs-typography-list-li-default-left-offset:19px;
38
38
  --_rs-typography-list-li-margin-top-from-text:8px;
39
39
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
40
40
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
@@ -70,8 +70,9 @@
70
70
  )
71
71
  );
72
72
  --_rs-typography-text-auto-offset:8px;
73
- --_rs-typography-ul-list-li-padding-left:28px;
74
- --_rs-typography-ol-list-li-padding-left:21px;
73
+ --_rs-typography-ul-bullet-offset:2px;
74
+ --_rs-typography-list-li-compact-left-offset:15px;
75
+ --_rs-typography-list-li-default-left-offset:19px;
75
76
  --_rs-typography-list-li-margin-top-from-text:8px;
76
77
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
77
78
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
@@ -101,87 +102,19 @@
101
102
  )
102
103
  );
103
104
  --_rs-typography-text-auto-offset:0;
104
- --_rs-typography-ul-list-li-padding-left:initial;
105
- --_rs-typography-ol-list-li-padding-left:initial;
105
+ --_rs-typography-ul-bullet-offset:initial;
106
+ --_rs-typography-list-li-compact-left-offset:initial;
107
+ --_rs-typography-list-li-default-left-offset:initial;
106
108
  --_rs-typography-list-li-margin-top-from-text:initial;
107
109
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
108
110
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
109
111
  --_rs-typography-link-border-bottom-width-from-text:2px;
110
112
  }
111
- &:not(html) [data-rs-internal='input__note']{
112
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
113
- --_rs-typography-text-transform:initial;
114
- --_rs-typography-font-variant-numeric:initial;
115
- --_rs-typography-font-family:var(
116
- --rs-font-family-ui,
117
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
118
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
119
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
120
- );
121
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
122
- --_rs-typography-font-weight:var(
123
- --rs-font-weight-regular,
124
- 400
125
- );
126
- --_rs-typography-line-height:var(
127
- --rs-text-3-line-height,
128
- 20px
129
- );
130
- --_rs-typography-base-color:var(
131
- --_rs-typography-hardness-color,
132
- var(
133
- --rs-color-average,
134
- 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)
135
- )
136
- );
137
- --_rs-typography-text-auto-offset:8px;
138
- --_rs-typography-ul-list-li-padding-left:28px;
139
- --_rs-typography-ol-list-li-padding-left:21px;
140
- --_rs-typography-list-li-margin-top-from-text:8px;
141
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
142
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
143
- --_rs-typography-link-border-bottom-width-from-text:1px;
144
- }
145
- &:not(html) [data-rs-internal='input__error-message']{
146
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
147
- --_rs-typography-text-transform:initial;
148
- --_rs-typography-font-variant-numeric:initial;
149
- --_rs-typography-font-family:var(
150
- --rs-font-family-ui,
151
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
152
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
153
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
154
- );
155
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
156
- --_rs-typography-font-weight:var(
157
- --rs-font-weight-semi-bold,
158
- 600
159
- );
160
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
161
- --_rs-typography-base-color:var(
162
- --_rs-typography-heading-hardness-color,
163
- var(
164
- --rs-color-hard,
165
- 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))
166
- )
167
- );
168
- --_rs-typography-text-auto-offset:0;
169
- --_rs-typography-ul-list-li-padding-left:initial;
170
- --_rs-typography-ol-list-li-padding-left:initial;
171
- --_rs-typography-list-li-margin-top-from-text:initial;
172
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
173
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
174
- --_rs-typography-link-border-bottom-width-from-text:2px;
175
- }
176
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
177
- --_rs-icons-height:20px;
178
- }
179
113
  }
180
114
  @define-mixin rs-input-size-m{
181
115
  &:not(html){
182
116
  --_rs-input-vertical-padding:8px;
183
117
  --_rs-input-horizontal-padding:8px;
184
- --_rs-input-parts-offset:8px;
185
118
  --_rs-input-icon-offset:8px;
186
119
  --_rs-input-icon-size:24px;
187
120
  }
@@ -212,8 +145,9 @@
212
145
  )
213
146
  );
214
147
  --_rs-typography-text-auto-offset:16px;
215
- --_rs-typography-ul-list-li-padding-left:22px;
216
- --_rs-typography-ol-list-li-padding-left:26px;
148
+ --_rs-typography-ul-bullet-offset:2px;
149
+ --_rs-typography-list-li-compact-left-offset:18px;
150
+ --_rs-typography-list-li-default-left-offset:24px;
217
151
  --_rs-typography-list-li-margin-top-from-text:var(
218
152
  --_rs-typography-text-2-sm-list-li-margin-top-from-text,
219
153
  16px
@@ -257,8 +191,9 @@
257
191
  )
258
192
  );
259
193
  --_rs-typography-text-auto-offset:16px;
260
- --_rs-typography-ul-list-li-padding-left:22px;
261
- --_rs-typography-ol-list-li-padding-left:26px;
194
+ --_rs-typography-ul-bullet-offset:2px;
195
+ --_rs-typography-list-li-compact-left-offset:18px;
196
+ --_rs-typography-list-li-default-left-offset:24px;
262
197
  --_rs-typography-list-li-margin-top-from-text:var(
263
198
  --_rs-typography-text-2-sm-list-li-margin-top-from-text,
264
199
  16px
@@ -299,87 +234,19 @@
299
234
  )
300
235
  );
301
236
  --_rs-typography-text-auto-offset:0;
302
- --_rs-typography-ul-list-li-padding-left:initial;
303
- --_rs-typography-ol-list-li-padding-left:initial;
237
+ --_rs-typography-ul-bullet-offset:initial;
238
+ --_rs-typography-list-li-compact-left-offset:initial;
239
+ --_rs-typography-list-li-default-left-offset:initial;
304
240
  --_rs-typography-list-li-margin-top-from-text:initial;
305
241
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
306
242
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
307
243
  --_rs-typography-link-border-bottom-width-from-text:2px;
308
244
  }
309
- &:not(html) [data-rs-internal='input__note']{
310
- --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
311
- --_rs-typography-text-transform:initial;
312
- --_rs-typography-font-variant-numeric:initial;
313
- --_rs-typography-font-family:var(
314
- --rs-font-family-ui,
315
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
316
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
317
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
318
- );
319
- --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
320
- --_rs-typography-font-weight:var(
321
- --rs-font-weight-regular,
322
- 400
323
- );
324
- --_rs-typography-line-height:var(
325
- --rs-text-3-line-height,
326
- 20px
327
- );
328
- --_rs-typography-base-color:var(
329
- --_rs-typography-hardness-color,
330
- var(
331
- --rs-color-average,
332
- 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)
333
- )
334
- );
335
- --_rs-typography-text-auto-offset:8px;
336
- --_rs-typography-ul-list-li-padding-left:28px;
337
- --_rs-typography-ol-list-li-padding-left:21px;
338
- --_rs-typography-list-li-margin-top-from-text:8px;
339
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
340
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
341
- --_rs-typography-link-border-bottom-width-from-text:1px;
342
- }
343
- &:not(html) [data-rs-internal='input__error-message']{
344
- --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
345
- --_rs-typography-text-transform:initial;
346
- --_rs-typography-font-variant-numeric:initial;
347
- --_rs-typography-font-family:var(
348
- --rs-font-family-ui,
349
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
350
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
351
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
352
- );
353
- --_rs-typography-font-size:var(--rs-h5-font-size, 13px);
354
- --_rs-typography-font-weight:var(
355
- --rs-font-weight-semi-bold,
356
- 600
357
- );
358
- --_rs-typography-line-height:var(--rs-h5-line-height, 20px);
359
- --_rs-typography-base-color:var(
360
- --_rs-typography-heading-hardness-color,
361
- var(
362
- --rs-color-hard,
363
- 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))
364
- )
365
- );
366
- --_rs-typography-text-auto-offset:0;
367
- --_rs-typography-ul-list-li-padding-left:initial;
368
- --_rs-typography-ol-list-li-padding-left:initial;
369
- --_rs-typography-list-li-margin-top-from-text:initial;
370
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
371
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
372
- --_rs-typography-link-border-bottom-width-from-text:2px;
373
- }
374
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
375
- --_rs-icons-height:20px;
376
- }
377
245
  }
378
246
  @define-mixin rs-input-size-l{
379
247
  &:not(html){
380
248
  --_rs-input-vertical-padding:12px;
381
249
  --_rs-input-horizontal-padding:16px;
382
- --_rs-input-parts-offset:8px;
383
250
  --_rs-input-icon-offset:16px;
384
251
  --_rs-input-icon-size:28px;
385
252
  }
@@ -410,8 +277,9 @@
410
277
  )
411
278
  );
412
279
  --_rs-typography-text-auto-offset:32px;
413
- --_rs-typography-ul-list-li-padding-left:26px;
414
- --_rs-typography-ol-list-li-padding-left:32px;
280
+ --_rs-typography-ul-bullet-offset:2px;
281
+ --_rs-typography-list-li-compact-left-offset:22px;
282
+ --_rs-typography-list-li-default-left-offset:28px;
415
283
  --_rs-typography-list-li-margin-top-from-text:var(
416
284
  --_rs-typography-text-1-sm-list-li-margin-top-from-text,
417
285
  24px
@@ -455,8 +323,9 @@
455
323
  )
456
324
  );
457
325
  --_rs-typography-text-auto-offset:32px;
458
- --_rs-typography-ul-list-li-padding-left:26px;
459
- --_rs-typography-ol-list-li-padding-left:32px;
326
+ --_rs-typography-ul-bullet-offset:2px;
327
+ --_rs-typography-list-li-compact-left-offset:22px;
328
+ --_rs-typography-list-li-default-left-offset:28px;
460
329
  --_rs-typography-list-li-margin-top-from-text:var(
461
330
  --_rs-typography-text-1-sm-list-li-margin-top-from-text,
462
331
  24px
@@ -497,89 +366,14 @@
497
366
  )
498
367
  );
499
368
  --_rs-typography-text-auto-offset:0;
500
- --_rs-typography-ul-list-li-padding-left:initial;
501
- --_rs-typography-ol-list-li-padding-left:initial;
369
+ --_rs-typography-ul-bullet-offset:initial;
370
+ --_rs-typography-list-li-compact-left-offset:initial;
371
+ --_rs-typography-list-li-default-left-offset:initial;
502
372
  --_rs-typography-list-li-margin-top-from-text:initial;
503
373
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
504
374
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
505
375
  --_rs-typography-link-border-bottom-width-from-text:2px;
506
376
  }
507
- &:not(html) [data-rs-internal='input__note']{
508
- --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
509
- --_rs-typography-text-transform:initial;
510
- --_rs-typography-font-variant-numeric:initial;
511
- --_rs-typography-font-family:var(
512
- --rs-font-family-ui,
513
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
514
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
515
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
516
- );
517
- --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
518
- --_rs-typography-font-weight:var(
519
- --rs-font-weight-regular,
520
- 400
521
- );
522
- --_rs-typography-line-height:var(
523
- --rs-text-2-line-height,
524
- 24px
525
- );
526
- --_rs-typography-base-color:var(
527
- --_rs-typography-hardness-color,
528
- var(
529
- --rs-color-average,
530
- 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)
531
- )
532
- );
533
- --_rs-typography-text-auto-offset:16px;
534
- --_rs-typography-ul-list-li-padding-left:22px;
535
- --_rs-typography-ol-list-li-padding-left:26px;
536
- --_rs-typography-list-li-margin-top-from-text:var(
537
- --_rs-typography-text-2-sm-list-li-margin-top-from-text,
538
- 16px
539
- );
540
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
541
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
542
- --_rs-typography-link-border-bottom-width-from-text:1px;
543
- }
544
- @media screen and (max-width: 640px){
545
- &:not(html) [data-rs-internal='input__note']{
546
- --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
547
- }
548
- }
549
- &:not(html) [data-rs-internal='input__error-message']{
550
- --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
551
- --_rs-typography-text-transform:initial;
552
- --_rs-typography-font-variant-numeric:initial;
553
- --_rs-typography-font-family:var(
554
- --rs-font-family-ui,
555
- var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
556
- BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
557
- 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
558
- );
559
- --_rs-typography-font-size:var(--rs-h4-font-size, 16px);
560
- --_rs-typography-font-weight:var(
561
- --rs-font-weight-semi-bold,
562
- 600
563
- );
564
- --_rs-typography-line-height:var(--rs-h4-line-height, 24px);
565
- --_rs-typography-base-color:var(
566
- --_rs-typography-heading-hardness-color,
567
- var(
568
- --rs-color-hard,
569
- 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))
570
- )
571
- );
572
- --_rs-typography-text-auto-offset:0;
573
- --_rs-typography-ul-list-li-padding-left:initial;
574
- --_rs-typography-ol-list-li-padding-left:initial;
575
- --_rs-typography-list-li-margin-top-from-text:initial;
576
- --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
577
- --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
578
- --_rs-typography-link-border-bottom-width-from-text:2px;
579
- }
580
- &:not(html) [data-rs-internal='input__error-icon']:not(html){
581
- --_rs-icons-height:24px;
582
- }
583
377
  }
584
378
  @define-mixin rs-input-mode-classic{
585
379
  &:not(html){