@snack-uikit/fields 0.49.2-preview-431acae7.0 → 0.49.2

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 (16) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +1 -3
  3. package/dist/cjs/components/FieldSelect/styles.module.css +24 -24
  4. package/dist/cjs/components/FieldStepper/FieldStepper.d.ts +0 -5
  5. package/dist/cjs/components/FieldStepper/FieldStepper.js +21 -33
  6. package/dist/cjs/components/FieldTextArea/styles.module.css +3 -3
  7. package/dist/cjs/helperComponents/ButtonField/styles.module.css +19 -19
  8. package/dist/cjs/helperComponents/FieldContainerPrivate/styles.module.css +51 -51
  9. package/dist/esm/components/FieldSelect/styles.module.css +24 -24
  10. package/dist/esm/components/FieldStepper/FieldStepper.d.ts +0 -5
  11. package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
  12. package/dist/esm/components/FieldTextArea/styles.module.css +3 -3
  13. package/dist/esm/helperComponents/ButtonField/styles.module.css +19 -19
  14. package/dist/esm/helperComponents/FieldContainerPrivate/styles.module.css +51 -51
  15. package/package.json +3 -3
  16. package/src/components/FieldStepper/FieldStepper.tsx +21 -41
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.49.2 (2025-08-26)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/tag@0.15.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tag/CHANGELOG.md)
10
+
11
+
12
+
13
+
14
+
6
15
  ## 0.49.1 (2025-08-01)
7
16
 
8
17
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -442,8 +442,6 @@ FieldStepper в основном предназначен для работы с
442
442
  | allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
443
443
  | prefix | `ReactNode` | - | Произвольный префикс для поля |
444
444
  | postfix | `ReactNode` | - | Произвольный постфикс для поля |
445
- | plusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой увеличения значения |
446
- | minusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой уменьшения значения |
447
445
  | id | `string` | - | Значение html-атрибута id |
448
446
  | name | `string` | - | Значение html-атрибута name |
449
447
  | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -491,7 +489,7 @@ FieldStepper в основном предназначен для работы с
491
489
  | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
492
490
  | maxLength | `number` | - | Максимальная длина вводимого значения |
493
491
  | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
494
- | inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
492
+ | inputMode | enum InputMode: `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
495
493
  | spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
496
494
  | pattern | `string` | - | Регулярное выражение валидного инпута |
497
495
  | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
package/dist/cjs/components/FieldSelect/styles.module.css CHANGED
@@ -15,11 +15,11 @@
15
15
  height:auto !important;
16
16
  }
17
17
  .tagContainer[data-size=s]{
18
- border-radius:var(--radius-fields-s, 12px);
19
- border-width:var(--border-width-fields-single, 2px);
20
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
18
+ border-radius:var(--radius-fields-s, 4px);
19
+ border-width:var(--border-width-fields-single, 1px);
20
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
21
21
  gap:var(--space-fields-single-line-container-s-gap, 4px);
22
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
22
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
23
23
  min-height:var(--size-fields-s, 32px);
24
24
  padding-top:var(--space-fields-select-multiple-s-vertical-padding, 2px);
25
25
  padding-bottom:var(--space-fields-select-multiple-s-vertical-padding, 2px);
@@ -28,11 +28,11 @@
28
28
  gap:var(--space-fields-single-line-container-s-gap, 4px);
29
29
  }
30
30
  .tagContainer[data-size=m]{
31
- border-radius:var(--radius-fields-m, 14px);
32
- border-width:var(--border-width-fields-single, 2px);
33
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
31
+ border-radius:var(--radius-fields-m, 4px);
32
+ border-width:var(--border-width-fields-single, 1px);
33
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
34
34
  gap:var(--space-fields-single-line-container-m-gap, 4px);
35
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
35
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
36
36
  padding-top:var(--space-fields-select-multiple-m-vertical-padding, 6px);
37
37
  padding-bottom:var(--space-fields-select-multiple-m-vertical-padding, 6px);
38
38
  min-height:var(--size-fields-m, 40px);
@@ -41,11 +41,11 @@
41
41
  gap:var(--space-fields-single-line-container-m-gap, 4px);
42
42
  }
43
43
  .tagContainer[data-size=l]{
44
- border-radius:var(--radius-fields-l, 16px);
45
- border-width:var(--border-width-fields-single, 2px);
46
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
44
+ border-radius:var(--radius-fields-l, 4px);
45
+ border-width:var(--border-width-fields-single, 1px);
46
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
47
47
  gap:var(--space-fields-single-line-container-l-gap, 8px);
48
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
48
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
49
49
  min-height:var(--size-fields-l, 48px);
50
50
  padding-top:var(--space-fields-select-multiple-l-vertical-padding, 6px);
51
51
  padding-bottom:var(--space-fields-select-multiple-l-vertical-padding, 6px);
@@ -72,10 +72,10 @@
72
72
  color:var(--sys-neutral-text-light, #8b8e9b);
73
73
  }
74
74
  .container[data-size=s][data-variant=single-line-container] .displayValue{
75
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
76
- margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
77
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
78
- border-radius:var(--radius-fields-s, 12px);
75
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
76
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
77
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
78
+ border-radius:var(--radius-fields-s, 4px);
79
79
  }
80
80
  .container[data-size=m] .inputPlug{
81
81
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
@@ -91,10 +91,10 @@
91
91
  color:var(--sys-neutral-text-light, #8b8e9b);
92
92
  }
93
93
  .container[data-size=m][data-variant=single-line-container] .displayValue{
94
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
95
- margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
96
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
97
- border-radius:var(--radius-fields-m, 14px);
94
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
95
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
96
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
97
+ border-radius:var(--radius-fields-m, 4px);
98
98
  }
99
99
  .container[data-size=l] .inputPlug{
100
100
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
@@ -110,10 +110,10 @@
110
110
  color:var(--sys-neutral-text-light, #8b8e9b);
111
111
  }
112
112
  .container[data-size=l][data-variant=single-line-container] .displayValue{
113
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
114
- margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
115
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
116
- border-radius:var(--radius-fields-l, 16px);
113
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
114
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
115
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
116
+ border-radius:var(--radius-fields-l, 4px);
117
117
  }
118
118
  .container:hover .arrowIcon, .container:focus-within .arrowIcon, .container[data-focused] .arrowIcon{
119
119
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/cjs/components/FieldStepper/FieldStepper.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { ChangeEvent, ReactNode } from 'react';
2
2
  import { InputPrivateProps } from '@snack-uikit/input-private';
3
- import { TooltipProps } from '@snack-uikit/tooltip';
4
3
  import { WithSupportProps } from '@snack-uikit/utils';
5
4
  import { FieldDecoratorProps } from '../FieldDecorator';
6
5
  type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max' | 'autoFocus'>;
@@ -18,10 +17,6 @@ type FieldStepperOwnProps = {
18
17
  prefix?: ReactNode;
19
18
  /** Произвольный постфикс для поля */
20
19
  postfix?: ReactNode;
21
- /** Тултип над кнопкой увеличения значения */
22
- plusButtonTooltip?: TooltipProps;
23
- /** Тултип над кнопкой уменьшения значения */
24
- minusButtonTooltip?: TooltipProps;
25
20
  };
26
21
  export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
27
22
  export declare const FieldStepper: import("react").ForwardRefExoticComponent<{
package/dist/cjs/components/FieldStepper/FieldStepper.js CHANGED
@@ -55,8 +55,6 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
55
55
  value: valueProp,
56
56
  min = Number.NEGATIVE_INFINITY,
57
57
  max = Number.POSITIVE_INFINITY,
58
- plusButtonTooltip,
59
- minusButtonTooltip,
60
58
  step = 1,
61
59
  disabled = false,
62
60
  readonly = false,
@@ -79,7 +77,7 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
79
77
  postfix,
80
78
  autoFocus
81
79
  } = _a,
82
- rest = __rest(_a, ["id", "name", "value", "min", "max", "plusButtonTooltip", "minusButtonTooltip", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
80
+ rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
83
81
  const {
84
82
  t
85
83
  } = (0, locale_1.useLocale)('Fields');
@@ -190,36 +188,26 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
190
188
  readonly: readonly,
191
189
  variant: constants_1.CONTAINER_VARIANT.SingleLine,
192
190
  inputRef: inputRef,
193
- prefix: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, minusButtonTooltip, {
194
- open: minusButtonTooltip ? minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.open : false,
195
- tip: minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.tip,
196
- "data-test-id": 'field-stepper__minus-button-tooltip',
197
- children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
198
- tabIndex: -1,
199
- size: 'xs',
200
- className: styles_module_scss_1.default.button,
201
- icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
202
- onClick: handleMinusButtonClick,
203
- onKeyDown: handleMinusButtonKeyDown,
204
- disabled: isMinusButtonDisabled,
205
- "data-test-id": 'field-stepper__minus-button'
206
- })
207
- })),
208
- postfix: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, plusButtonTooltip, {
209
- open: plusButtonTooltip ? plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.open : false,
210
- tip: plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.tip,
211
- "data-test-id": 'field-stepper__plus-button-tooltip',
212
- children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
213
- tabIndex: -1,
214
- size: 'xs',
215
- className: styles_module_scss_1.default.button,
216
- icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
217
- onClick: handlePlusButtonClick,
218
- onKeyDown: handlePlusButtonKeyDown,
219
- disabled: isPlusButtonDisabled,
220
- "data-test-id": 'field-stepper__plus-button'
221
- })
222
- })),
191
+ prefix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
192
+ tabIndex: -1,
193
+ size: 'xs',
194
+ className: styles_module_scss_1.default.button,
195
+ icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
196
+ onClick: handleMinusButtonClick,
197
+ onKeyDown: handleMinusButtonKeyDown,
198
+ disabled: isMinusButtonDisabled,
199
+ "data-test-id": 'field-stepper__minus-button'
200
+ }),
201
+ postfix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
202
+ tabIndex: -1,
203
+ size: 'xs',
204
+ className: styles_module_scss_1.default.button,
205
+ icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
206
+ onClick: handlePlusButtonClick,
207
+ onKeyDown: handlePlusButtonKeyDown,
208
+ disabled: isPlusButtonDisabled,
209
+ "data-test-id": 'field-stepper__plus-button'
210
+ }),
223
211
  children: (0, jsx_runtime_1.jsxs)("div", {
224
212
  className: styles_module_scss_1.default.wrap,
225
213
  children: [(0, jsx_runtime_1.jsx)("div", {
package/dist/cjs/components/FieldTextArea/styles.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
  .container[data-size=s] .postfix{
25
25
  position:absolute;
26
- top:var(--space-fields-multi-line-container-s-top, 6px);
26
+ top:var(--space-fields-multi-line-container-s-top, 7px);
27
27
  right:calc(var(--space-fields-multi-line-container-s-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
28
28
  }
29
29
  .container[data-size=m]{
@@ -36,7 +36,7 @@
36
36
  }
37
37
  .container[data-size=m] .postfix{
38
38
  position:absolute;
39
- top:var(--space-fields-multi-line-container-m-top, 8px);
39
+ top:var(--space-fields-multi-line-container-m-top, 9px);
40
40
  right:calc(var(--space-fields-multi-line-container-m-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
41
41
  }
42
42
  .container[data-size=l]{
@@ -49,6 +49,6 @@
49
49
  }
50
50
  .container[data-size=l] .postfix{
51
51
  position:absolute;
52
- top:var(--space-fields-multi-line-container-l-top, 10px);
52
+ top:var(--space-fields-multi-line-container-l-top, 11px);
53
53
  right:calc(var(--space-fields-multi-line-container-l-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
54
54
  }
package/dist/cjs/helperComponents/ButtonField/styles.module.css CHANGED
@@ -12,9 +12,9 @@
12
12
  .buttonField[data-variant=before][data-size=s]{
13
13
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
14
14
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
15
- border-top-left-radius:var(--radius-fields-button-field-s, 10px);
16
- border-bottom-left-radius:var(--radius-fields-button-field-s, 10px);
17
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
15
+ border-top-left-radius:var(--radius-fields-button-field-s, 3px);
16
+ border-bottom-left-radius:var(--radius-fields-button-field-s, 3px);
17
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
18
18
  padding-right:var(--dimension-theme-general-0px, 0px);
19
19
  gap:var(--space-fields-single-line-container-s-gap, 4px);
20
20
  min-height:var(--size-fields-button-field-s, 28px);
@@ -22,9 +22,9 @@
22
22
  .buttonField[data-variant=before][data-size=m]{
23
23
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
24
24
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
25
- border-top-left-radius:var(--radius-fields-button-field-m, 12px);
26
- border-bottom-left-radius:var(--radius-fields-button-field-m, 12px);
27
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
25
+ border-top-left-radius:var(--radius-fields-button-field-m, 3px);
26
+ border-bottom-left-radius:var(--radius-fields-button-field-m, 3px);
27
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
28
28
  padding-right:var(--dimension-theme-general-0px, 0px);
29
29
  gap:var(--space-fields-single-line-container-m-gap, 4px);
30
30
  min-height:var(--size-fields-button-field-m, 36px);
@@ -32,40 +32,40 @@
32
32
  .buttonField[data-variant=before][data-size=l]{
33
33
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
34
34
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
35
- border-top-left-radius:var(--radius-fields-button-field-l, 14px);
36
- border-bottom-left-radius:var(--radius-fields-button-field-l, 14px);
37
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
35
+ border-top-left-radius:var(--radius-fields-button-field-l, 3px);
36
+ border-bottom-left-radius:var(--radius-fields-button-field-l, 3px);
37
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
38
38
  padding-right:var(--dimension-theme-general-0px, 0px);
39
39
  gap:var(--space-fields-single-line-container-l-gap, 8px);
40
40
  min-height:var(--size-fields-button-field-l, 44px);
41
41
  }
42
42
  .buttonField[data-variant=after][data-size=s]{
43
- border-top-right-radius:var(--radius-fields-button-field-s, 10px);
44
- border-bottom-right-radius:var(--radius-fields-button-field-s, 10px);
43
+ border-top-right-radius:var(--radius-fields-button-field-s, 3px);
44
+ border-bottom-right-radius:var(--radius-fields-button-field-s, 3px);
45
45
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
46
46
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
47
47
  padding-left:var(--dimension-theme-general-0px, 0px);
48
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
48
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
49
49
  gap:var(--space-fields-single-line-container-s-gap, 4px);
50
50
  min-height:var(--size-fields-button-field-s, 28px);
51
51
  }
52
52
  .buttonField[data-variant=after][data-size=m]{
53
- border-top-right-radius:var(--radius-fields-button-field-m, 12px);
54
- border-bottom-right-radius:var(--radius-fields-button-field-m, 12px);
53
+ border-top-right-radius:var(--radius-fields-button-field-m, 3px);
54
+ border-bottom-right-radius:var(--radius-fields-button-field-m, 3px);
55
55
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
56
56
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
57
57
  padding-left:var(--dimension-theme-general-0px, 0px);
58
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
58
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
59
59
  gap:var(--space-fields-single-line-container-m-gap, 4px);
60
60
  min-height:var(--size-fields-button-field-m, 36px);
61
61
  }
62
62
  .buttonField[data-variant=after][data-size=l]{
63
- border-top-right-radius:var(--radius-fields-button-field-l, 14px);
64
- border-bottom-right-radius:var(--radius-fields-button-field-l, 14px);
63
+ border-top-right-radius:var(--radius-fields-button-field-l, 3px);
64
+ border-bottom-right-radius:var(--radius-fields-button-field-l, 3px);
65
65
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
66
66
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
67
67
  padding-left:var(--dimension-theme-general-0px, 0px);
68
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
68
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
69
69
  gap:var(--space-fields-single-line-container-l-gap, 8px);
70
70
  min-height:var(--size-fields-button-field-l, 44px);
71
71
  }
@@ -78,7 +78,7 @@
78
78
  outline-style:var(--border-state-focus-s-border-style, solid);
79
79
  outline-color:var(--border-state-focus-s-border-color, );
80
80
  background:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
81
- outline-color:var(--sys-primary-accent-default, #794ed3);
81
+ outline-color:var(--sys-primary-accent-default, #389f74);
82
82
  }
83
83
  .buttonField[data-disabled]{
84
84
  cursor:not-allowed;
package/dist/cjs/helperComponents/FieldContainerPrivate/styles.module.css CHANGED
@@ -12,15 +12,15 @@
12
12
  }
13
13
  .container[data-validation=default]:hover{
14
14
  background-color:var(--sys-neutral-background2-level, #ffffff);
15
- border-color:var(--sys-primary-decor-hovered, #decdfb);
15
+ border-color:var(--sys-primary-decor-hovered, #b3deca);
16
16
  }
17
17
  .container[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
18
18
  outline-width:var(--border-state-focus-m-border-width, 3px);
19
19
  outline-style:var(--border-state-focus-m-border-style, solid);
20
20
  outline-color:var(--border-state-focus-m-border-color, );
21
21
  background-color:var(--sys-neutral-background2-level, #ffffff);
22
- border-color:var(--sys-primary-accent-default, #794ed3);
23
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
22
+ border-color:var(--sys-primary-accent-default, #389f74);
23
+ outline-color:var(--sys-primary-decor-activated, #99d7ba);
24
24
  }
25
25
  .container[data-validation=error]{
26
26
  background-color:var(--sys-red-background1-level, #fef6f3);
@@ -71,8 +71,8 @@
71
71
  outline-color:var(--sys-green-decor-activated, #a8d1a2);
72
72
  }
73
73
  .container[data-size=s]{
74
- border-radius:var(--radius-fields-s, 12px);
75
- border-width:var(--border-width-fields-single, 2px);
74
+ border-radius:var(--radius-fields-s, 4px);
75
+ border-width:var(--border-width-fields-single, 1px);
76
76
  }
77
77
  .container[data-size=s],
78
78
  .container[data-size=s] input,
@@ -87,40 +87,40 @@
87
87
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
88
88
  }
89
89
  .container[data-size=s][data-variant=single-line-container]{
90
- border-radius:var(--radius-fields-s, 12px);
91
- border-width:var(--border-width-fields-single, 2px);
92
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
90
+ border-radius:var(--radius-fields-s, 4px);
91
+ border-width:var(--border-width-fields-single, 1px);
92
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
93
93
  gap:var(--space-fields-single-line-container-s-gap, 4px);
94
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
94
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
95
95
  height:var(--size-fields-s, 32px);
96
96
  }
97
97
  .container[data-size=s][data-variant=single-line-container-button-before]{
98
- border-radius:var(--radius-fields-s, 12px);
99
- border-width:var(--border-width-fields-single, 2px);
98
+ border-radius:var(--radius-fields-s, 4px);
99
+ border-width:var(--border-width-fields-single, 1px);
100
100
  padding-left:var(--space-fields-single-line-container-s-button, 0px);
101
101
  gap:var(--space-fields-single-line-container-s-gap, 4px);
102
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
102
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
103
103
  height:var(--size-fields-s, 32px);
104
104
  }
105
105
  .container[data-size=s][data-variant=single-line-container-button-after]{
106
- border-radius:var(--radius-fields-s, 12px);
107
- border-width:var(--border-width-fields-single, 2px);
108
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
106
+ border-radius:var(--radius-fields-s, 4px);
107
+ border-width:var(--border-width-fields-single, 1px);
108
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
109
109
  gap:var(--space-fields-single-line-container-s-gap, 4px);
110
110
  padding-right:var(--space-fields-single-line-container-s-button, 0px);
111
111
  height:var(--size-fields-s, 32px);
112
112
  }
113
113
  .container[data-size=s][data-variant=multi-line-container]{
114
- border-radius:var(--radius-fields-s, 12px);
115
- border-width:var(--border-width-fields-single, 2px);
116
- padding-top:var(--space-fields-multi-line-container-s-top, 6px);
114
+ border-radius:var(--radius-fields-s, 4px);
115
+ border-width:var(--border-width-fields-single, 1px);
116
+ padding-top:var(--space-fields-multi-line-container-s-top, 7px);
117
117
  padding-bottom:var(--space-fields-multi-line-container-s-bottom, 2px);
118
- padding-left:var(--space-fields-multi-line-container-s-left, 6px);
118
+ padding-left:var(--space-fields-multi-line-container-s-left, 7px);
119
119
  padding-right:var(--space-fields-multi-line-container-s-right, 2px);
120
120
  }
121
121
  .container[data-size=m]{
122
- border-radius:var(--radius-fields-m, 14px);
123
- border-width:var(--border-width-fields-single, 2px);
122
+ border-radius:var(--radius-fields-m, 4px);
123
+ border-width:var(--border-width-fields-single, 1px);
124
124
  }
125
125
  .container[data-size=m],
126
126
  .container[data-size=m] input,
@@ -135,40 +135,40 @@
135
135
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
136
136
  }
137
137
  .container[data-size=m][data-variant=single-line-container]{
138
- border-radius:var(--radius-fields-m, 14px);
139
- border-width:var(--border-width-fields-single, 2px);
140
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
138
+ border-radius:var(--radius-fields-m, 4px);
139
+ border-width:var(--border-width-fields-single, 1px);
140
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
141
141
  gap:var(--space-fields-single-line-container-m-gap, 4px);
142
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
142
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
143
143
  height:var(--size-fields-m, 40px);
144
144
  }
145
145
  .container[data-size=m][data-variant=single-line-container-button-before]{
146
- border-radius:var(--radius-fields-m, 14px);
147
- border-width:var(--border-width-fields-single, 2px);
146
+ border-radius:var(--radius-fields-m, 4px);
147
+ border-width:var(--border-width-fields-single, 1px);
148
148
  padding-left:var(--space-fields-single-line-container-m-button, 0px);
149
149
  gap:var(--space-fields-single-line-container-m-gap, 4px);
150
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
150
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
151
151
  height:var(--size-fields-m, 40px);
152
152
  }
153
153
  .container[data-size=m][data-variant=single-line-container-button-after]{
154
- border-radius:var(--radius-fields-m, 14px);
155
- border-width:var(--border-width-fields-single, 2px);
156
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
154
+ border-radius:var(--radius-fields-m, 4px);
155
+ border-width:var(--border-width-fields-single, 1px);
156
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
157
157
  gap:var(--space-fields-single-line-container-m-gap, 4px);
158
158
  padding-right:var(--space-fields-single-line-container-m-button, 0px);
159
159
  height:var(--size-fields-m, 40px);
160
160
  }
161
161
  .container[data-size=m][data-variant=multi-line-container]{
162
- border-radius:var(--radius-fields-m, 14px);
163
- border-width:var(--border-width-fields-single, 2px);
164
- padding-top:var(--space-fields-multi-line-container-m-top, 8px);
162
+ border-radius:var(--radius-fields-m, 4px);
163
+ border-width:var(--border-width-fields-single, 1px);
164
+ padding-top:var(--space-fields-multi-line-container-m-top, 9px);
165
165
  padding-bottom:var(--space-fields-multi-line-container-m-bottom, 2px);
166
- padding-left:var(--space-fields-multi-line-container-m-left, 8px);
166
+ padding-left:var(--space-fields-multi-line-container-m-left, 9px);
167
167
  padding-right:var(--space-fields-multi-line-container-m-right, 2px);
168
168
  }
169
169
  .container[data-size=l]{
170
- border-radius:var(--radius-fields-l, 16px);
171
- border-width:var(--border-width-fields-single, 2px);
170
+ border-radius:var(--radius-fields-l, 4px);
171
+ border-width:var(--border-width-fields-single, 1px);
172
172
  }
173
173
  .container[data-size=l],
174
174
  .container[data-size=l] input,
@@ -183,35 +183,35 @@
183
183
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
184
184
  }
185
185
  .container[data-size=l][data-variant=single-line-container]{
186
- border-radius:var(--radius-fields-l, 16px);
187
- border-width:var(--border-width-fields-single, 2px);
188
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
186
+ border-radius:var(--radius-fields-l, 4px);
187
+ border-width:var(--border-width-fields-single, 1px);
188
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
189
189
  gap:var(--space-fields-single-line-container-l-gap, 8px);
190
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
190
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
191
191
  height:var(--size-fields-l, 48px);
192
192
  }
193
193
  .container[data-size=l][data-variant=single-line-container-button-before]{
194
- border-radius:var(--radius-fields-l, 16px);
195
- border-width:var(--border-width-fields-single, 2px);
194
+ border-radius:var(--radius-fields-l, 4px);
195
+ border-width:var(--border-width-fields-single, 1px);
196
196
  padding-left:var(--space-fields-single-line-container-l-button, 0px);
197
197
  gap:var(--space-fields-single-line-container-l-gap, 8px);
198
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
198
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
199
199
  height:var(--size-fields-l, 48px);
200
200
  }
201
201
  .container[data-size=l][data-variant=single-line-container-button-after]{
202
- border-radius:var(--radius-fields-l, 16px);
203
- border-width:var(--border-width-fields-single, 2px);
204
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
202
+ border-radius:var(--radius-fields-l, 4px);
203
+ border-width:var(--border-width-fields-single, 1px);
204
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
205
205
  gap:var(--space-fields-single-line-container-l-gap, 8px);
206
206
  padding-right:var(--space-fields-single-line-container-l-button, 0px);
207
207
  height:var(--size-fields-l, 48px);
208
208
  }
209
209
  .container[data-size=l][data-variant=multi-line-container]{
210
- border-radius:var(--radius-fields-l, 16px);
211
- border-width:var(--border-width-fields-single, 2px);
212
- padding-top:var(--space-fields-multi-line-container-l-top, 10px);
210
+ border-radius:var(--radius-fields-l, 4px);
211
+ border-width:var(--border-width-fields-single, 1px);
212
+ padding-top:var(--space-fields-multi-line-container-l-top, 11px);
213
213
  padding-bottom:var(--space-fields-multi-line-container-l-bottom, 2px);
214
- padding-left:var(--space-fields-multi-line-container-l-left, 10px);
214
+ padding-left:var(--space-fields-multi-line-container-l-left, 11px);
215
215
  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
216
216
  }
217
217
  .container[data-selectable],
package/dist/esm/components/FieldSelect/styles.module.css CHANGED
@@ -15,11 +15,11 @@
15
15
  height:auto !important;
16
16
  }
17
17
  .tagContainer[data-size=s]{
18
- border-radius:var(--radius-fields-s, 12px);
19
- border-width:var(--border-width-fields-single, 2px);
20
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
18
+ border-radius:var(--radius-fields-s, 4px);
19
+ border-width:var(--border-width-fields-single, 1px);
20
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
21
21
  gap:var(--space-fields-single-line-container-s-gap, 4px);
22
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
22
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
23
23
  min-height:var(--size-fields-s, 32px);
24
24
  padding-top:var(--space-fields-select-multiple-s-vertical-padding, 2px);
25
25
  padding-bottom:var(--space-fields-select-multiple-s-vertical-padding, 2px);
@@ -28,11 +28,11 @@
28
28
  gap:var(--space-fields-single-line-container-s-gap, 4px);
29
29
  }
30
30
  .tagContainer[data-size=m]{
31
- border-radius:var(--radius-fields-m, 14px);
32
- border-width:var(--border-width-fields-single, 2px);
33
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
31
+ border-radius:var(--radius-fields-m, 4px);
32
+ border-width:var(--border-width-fields-single, 1px);
33
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
34
34
  gap:var(--space-fields-single-line-container-m-gap, 4px);
35
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
35
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
36
36
  padding-top:var(--space-fields-select-multiple-m-vertical-padding, 6px);
37
37
  padding-bottom:var(--space-fields-select-multiple-m-vertical-padding, 6px);
38
38
  min-height:var(--size-fields-m, 40px);
@@ -41,11 +41,11 @@
41
41
  gap:var(--space-fields-single-line-container-m-gap, 4px);
42
42
  }
43
43
  .tagContainer[data-size=l]{
44
- border-radius:var(--radius-fields-l, 16px);
45
- border-width:var(--border-width-fields-single, 2px);
46
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
44
+ border-radius:var(--radius-fields-l, 4px);
45
+ border-width:var(--border-width-fields-single, 1px);
46
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
47
47
  gap:var(--space-fields-single-line-container-l-gap, 8px);
48
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
48
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
49
49
  min-height:var(--size-fields-l, 48px);
50
50
  padding-top:var(--space-fields-select-multiple-l-vertical-padding, 6px);
51
51
  padding-bottom:var(--space-fields-select-multiple-l-vertical-padding, 6px);
@@ -72,10 +72,10 @@
72
72
  color:var(--sys-neutral-text-light, #8b8e9b);
73
73
  }
74
74
  .container[data-size=s][data-variant=single-line-container] .displayValue{
75
- width:calc(100% - (var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
76
- margin-right:calc(var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
77
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
78
- border-radius:var(--radius-fields-s, 12px);
75
+ width:calc(100% - (var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)));
76
+ margin-right:calc(var(--space-fields-single-line-container-s-right, 7px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2));
77
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
78
+ border-radius:var(--radius-fields-s, 4px);
79
79
  }
80
80
  .container[data-size=m] .inputPlug{
81
81
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
@@ -91,10 +91,10 @@
91
91
  color:var(--sys-neutral-text-light, #8b8e9b);
92
92
  }
93
93
  .container[data-size=m][data-variant=single-line-container] .displayValue{
94
- width:calc(100% - (var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
95
- margin-right:calc(var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
96
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
97
- border-radius:var(--radius-fields-m, 14px);
94
+ width:calc(100% - (var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
95
+ margin-right:calc(var(--space-fields-single-line-container-m-right, 9px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
96
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
97
+ border-radius:var(--radius-fields-m, 4px);
98
98
  }
99
99
  .container[data-size=l] .inputPlug{
100
100
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
@@ -110,10 +110,10 @@
110
110
  color:var(--sys-neutral-text-light, #8b8e9b);
111
111
  }
112
112
  .container[data-size=l][data-variant=single-line-container] .displayValue{
113
- width:calc(100% - (var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
114
- margin-right:calc(var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
115
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
116
- border-radius:var(--radius-fields-l, 16px);
113
+ width:calc(100% - (var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)));
114
+ margin-right:calc(var(--space-fields-single-line-container-l-right, 11px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2));
115
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
116
+ border-radius:var(--radius-fields-l, 4px);
117
117
  }
118
118
  .container:hover .arrowIcon, .container:focus-within .arrowIcon, .container[data-focused] .arrowIcon{
119
119
  color:var(--sys-neutral-text-support, #6d707f);
package/dist/esm/components/FieldStepper/FieldStepper.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { ChangeEvent, ReactNode } from 'react';
2
2
  import { InputPrivateProps } from '@snack-uikit/input-private';
3
- import { TooltipProps } from '@snack-uikit/tooltip';
4
3
  import { WithSupportProps } from '@snack-uikit/utils';
5
4
  import { FieldDecoratorProps } from '../FieldDecorator';
6
5
  type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max' | 'autoFocus'>;
@@ -18,10 +17,6 @@ type FieldStepperOwnProps = {
18
17
  prefix?: ReactNode;
19
18
  /** Произвольный постфикс для поля */
20
19
  postfix?: ReactNode;
21
- /** Тултип над кнопкой увеличения значения */
22
- plusButtonTooltip?: TooltipProps;
23
- /** Тултип над кнопкой уменьшения значения */
24
- minusButtonTooltip?: TooltipProps;
25
20
  };
26
21
  export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
27
22
  export declare const FieldStepper: import("react").ForwardRefExoticComponent<{
package/dist/esm/components/FieldStepper/FieldStepper.js CHANGED
@@ -41,7 +41,7 @@ const SymbolWidth = {
41
41
  l: 10,
42
42
  };
43
43
  export const FieldStepper = forwardRef((_a, ref) => {
44
- var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, plusButtonTooltip, minusButtonTooltip, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "plusButtonTooltip", "minusButtonTooltip", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
44
+ var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix", "autoFocus"]);
45
45
  const { t } = useLocale('Fields');
46
46
  const [value = 0, setValue] = useValueControl({
47
47
  value: valueProp,
@@ -113,7 +113,7 @@ export const FieldStepper = forwardRef((_a, ref) => {
113
113
  return;
114
114
  }
115
115
  };
116
- return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(Tooltip, Object.assign({}, minusButtonTooltip, { open: minusButtonTooltip ? minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.open : false, tip: minusButtonTooltip === null || minusButtonTooltip === void 0 ? void 0 : minusButtonTooltip.tip, "data-test-id": 'field-stepper__minus-button-tooltip', children: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }) })), postfix: _jsx(Tooltip, Object.assign({}, plusButtonTooltip, { open: plusButtonTooltip ? plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.open : false, tip: plusButtonTooltip === null || plusButtonTooltip === void 0 ? void 0 : plusButtonTooltip.tip, "data-test-id": 'field-stepper__plus-button-tooltip', children: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }) })), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
116
+ return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
117
117
  width: String(value).length * SymbolWidth[size],
118
118
  maxWidth: '100%',
119
119
  }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, step: step, name: name, min: min, max: max, autoFocus: autoFocus, "data-test-id": 'field-stepper__input' }) }), _jsx("div", { className: cn({ [styles.postfixWrapper]: postfixSettings.show }), children: postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }) })] }) }) }) })));
package/dist/esm/components/FieldTextArea/styles.module.css CHANGED
@@ -23,7 +23,7 @@
23
23
  }
24
24
  .container[data-size=s] .postfix{
25
25
  position:absolute;
26
- top:var(--space-fields-multi-line-container-s-top, 6px);
26
+ top:var(--space-fields-multi-line-container-s-top, 7px);
27
27
  right:calc(var(--space-fields-multi-line-container-s-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
28
28
  }
29
29
  .container[data-size=m]{
@@ -36,7 +36,7 @@
36
36
  }
37
37
  .container[data-size=m] .postfix{
38
38
  position:absolute;
39
- top:var(--space-fields-multi-line-container-m-top, 8px);
39
+ top:var(--space-fields-multi-line-container-m-top, 9px);
40
40
  right:calc(var(--space-fields-multi-line-container-m-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
41
41
  }
42
42
  .container[data-size=l]{
@@ -49,6 +49,6 @@
49
49
  }
50
50
  .container[data-size=l] .postfix{
51
51
  position:absolute;
52
- top:var(--space-fields-multi-line-container-l-top, 10px);
52
+ top:var(--space-fields-multi-line-container-l-top, 11px);
53
53
  right:calc(var(--space-fields-multi-line-container-l-right, 2px) + var(--size-fields-scroll-bar-width, 8px));
54
54
  }
package/dist/esm/helperComponents/ButtonField/styles.module.css CHANGED
@@ -12,9 +12,9 @@
12
12
  .buttonField[data-variant=before][data-size=s]{
13
13
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
14
14
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
15
- border-top-left-radius:var(--radius-fields-button-field-s, 10px);
16
- border-bottom-left-radius:var(--radius-fields-button-field-s, 10px);
17
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
15
+ border-top-left-radius:var(--radius-fields-button-field-s, 3px);
16
+ border-bottom-left-radius:var(--radius-fields-button-field-s, 3px);
17
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
18
18
  padding-right:var(--dimension-theme-general-0px, 0px);
19
19
  gap:var(--space-fields-single-line-container-s-gap, 4px);
20
20
  min-height:var(--size-fields-button-field-s, 28px);
@@ -22,9 +22,9 @@
22
22
  .buttonField[data-variant=before][data-size=m]{
23
23
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
24
24
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
25
- border-top-left-radius:var(--radius-fields-button-field-m, 12px);
26
- border-bottom-left-radius:var(--radius-fields-button-field-m, 12px);
27
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
25
+ border-top-left-radius:var(--radius-fields-button-field-m, 3px);
26
+ border-bottom-left-radius:var(--radius-fields-button-field-m, 3px);
27
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
28
28
  padding-right:var(--dimension-theme-general-0px, 0px);
29
29
  gap:var(--space-fields-single-line-container-m-gap, 4px);
30
30
  min-height:var(--size-fields-button-field-m, 36px);
@@ -32,40 +32,40 @@
32
32
  .buttonField[data-variant=before][data-size=l]{
33
33
  border-top-right-radius:var(--dimension-theme-general-0px, 0px);
34
34
  border-bottom-right-radius:var(--dimension-theme-general-0px, 0px);
35
- border-top-left-radius:var(--radius-fields-button-field-l, 14px);
36
- border-bottom-left-radius:var(--radius-fields-button-field-l, 14px);
37
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
35
+ border-top-left-radius:var(--radius-fields-button-field-l, 3px);
36
+ border-bottom-left-radius:var(--radius-fields-button-field-l, 3px);
37
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
38
38
  padding-right:var(--dimension-theme-general-0px, 0px);
39
39
  gap:var(--space-fields-single-line-container-l-gap, 8px);
40
40
  min-height:var(--size-fields-button-field-l, 44px);
41
41
  }
42
42
  .buttonField[data-variant=after][data-size=s]{
43
- border-top-right-radius:var(--radius-fields-button-field-s, 10px);
44
- border-bottom-right-radius:var(--radius-fields-button-field-s, 10px);
43
+ border-top-right-radius:var(--radius-fields-button-field-s, 3px);
44
+ border-bottom-right-radius:var(--radius-fields-button-field-s, 3px);
45
45
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
46
46
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
47
47
  padding-left:var(--dimension-theme-general-0px, 0px);
48
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
48
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
49
49
  gap:var(--space-fields-single-line-container-s-gap, 4px);
50
50
  min-height:var(--size-fields-button-field-s, 28px);
51
51
  }
52
52
  .buttonField[data-variant=after][data-size=m]{
53
- border-top-right-radius:var(--radius-fields-button-field-m, 12px);
54
- border-bottom-right-radius:var(--radius-fields-button-field-m, 12px);
53
+ border-top-right-radius:var(--radius-fields-button-field-m, 3px);
54
+ border-bottom-right-radius:var(--radius-fields-button-field-m, 3px);
55
55
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
56
56
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
57
57
  padding-left:var(--dimension-theme-general-0px, 0px);
58
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
58
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
59
59
  gap:var(--space-fields-single-line-container-m-gap, 4px);
60
60
  min-height:var(--size-fields-button-field-m, 36px);
61
61
  }
62
62
  .buttonField[data-variant=after][data-size=l]{
63
- border-top-right-radius:var(--radius-fields-button-field-l, 14px);
64
- border-bottom-right-radius:var(--radius-fields-button-field-l, 14px);
63
+ border-top-right-radius:var(--radius-fields-button-field-l, 3px);
64
+ border-bottom-right-radius:var(--radius-fields-button-field-l, 3px);
65
65
  border-top-left-radius:var(--dimension-theme-general-0px, 0px);
66
66
  border-bottom-left-radius:var(--dimension-theme-general-0px, 0px);
67
67
  padding-left:var(--dimension-theme-general-0px, 0px);
68
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
68
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
69
69
  gap:var(--space-fields-single-line-container-l-gap, 8px);
70
70
  min-height:var(--size-fields-button-field-l, 44px);
71
71
  }
@@ -78,7 +78,7 @@
78
78
  outline-style:var(--border-state-focus-s-border-style, solid);
79
79
  outline-color:var(--border-state-focus-s-border-color, );
80
80
  background:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
81
- outline-color:var(--sys-primary-accent-default, #794ed3);
81
+ outline-color:var(--sys-primary-accent-default, #389f74);
82
82
  }
83
83
  .buttonField[data-disabled]{
84
84
  cursor:not-allowed;
package/dist/esm/helperComponents/FieldContainerPrivate/styles.module.css CHANGED
@@ -12,15 +12,15 @@
12
12
  }
13
13
  .container[data-validation=default]:hover{
14
14
  background-color:var(--sys-neutral-background2-level, #ffffff);
15
- border-color:var(--sys-primary-decor-hovered, #decdfb);
15
+ border-color:var(--sys-primary-decor-hovered, #b3deca);
16
16
  }
17
17
  .container[data-validation=default]:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]), .container[data-validation=default]:not([data-readonly]):not([data-disable-focus])[data-focused]:not([data-disabled]){
18
18
  outline-width:var(--border-state-focus-m-border-width, 3px);
19
19
  outline-style:var(--border-state-focus-m-border-style, solid);
20
20
  outline-color:var(--border-state-focus-m-border-color, );
21
21
  background-color:var(--sys-neutral-background2-level, #ffffff);
22
- border-color:var(--sys-primary-accent-default, #794ed3);
23
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
22
+ border-color:var(--sys-primary-accent-default, #389f74);
23
+ outline-color:var(--sys-primary-decor-activated, #99d7ba);
24
24
  }
25
25
  .container[data-validation=error]{
26
26
  background-color:var(--sys-red-background1-level, #fef6f3);
@@ -71,8 +71,8 @@
71
71
  outline-color:var(--sys-green-decor-activated, #a8d1a2);
72
72
  }
73
73
  .container[data-size=s]{
74
- border-radius:var(--radius-fields-s, 12px);
75
- border-width:var(--border-width-fields-single, 2px);
74
+ border-radius:var(--radius-fields-s, 4px);
75
+ border-width:var(--border-width-fields-single, 1px);
76
76
  }
77
77
  .container[data-size=s],
78
78
  .container[data-size=s] input,
@@ -87,40 +87,40 @@
87
87
  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
88
88
  }
89
89
  .container[data-size=s][data-variant=single-line-container]{
90
- border-radius:var(--radius-fields-s, 12px);
91
- border-width:var(--border-width-fields-single, 2px);
92
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
90
+ border-radius:var(--radius-fields-s, 4px);
91
+ border-width:var(--border-width-fields-single, 1px);
92
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
93
93
  gap:var(--space-fields-single-line-container-s-gap, 4px);
94
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
94
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
95
95
  height:var(--size-fields-s, 32px);
96
96
  }
97
97
  .container[data-size=s][data-variant=single-line-container-button-before]{
98
- border-radius:var(--radius-fields-s, 12px);
99
- border-width:var(--border-width-fields-single, 2px);
98
+ border-radius:var(--radius-fields-s, 4px);
99
+ border-width:var(--border-width-fields-single, 1px);
100
100
  padding-left:var(--space-fields-single-line-container-s-button, 0px);
101
101
  gap:var(--space-fields-single-line-container-s-gap, 4px);
102
- padding-right:var(--space-fields-single-line-container-s-right, 6px);
102
+ padding-right:var(--space-fields-single-line-container-s-right, 7px);
103
103
  height:var(--size-fields-s, 32px);
104
104
  }
105
105
  .container[data-size=s][data-variant=single-line-container-button-after]{
106
- border-radius:var(--radius-fields-s, 12px);
107
- border-width:var(--border-width-fields-single, 2px);
108
- padding-left:var(--space-fields-single-line-container-s-left, 6px);
106
+ border-radius:var(--radius-fields-s, 4px);
107
+ border-width:var(--border-width-fields-single, 1px);
108
+ padding-left:var(--space-fields-single-line-container-s-left, 7px);
109
109
  gap:var(--space-fields-single-line-container-s-gap, 4px);
110
110
  padding-right:var(--space-fields-single-line-container-s-button, 0px);
111
111
  height:var(--size-fields-s, 32px);
112
112
  }
113
113
  .container[data-size=s][data-variant=multi-line-container]{
114
- border-radius:var(--radius-fields-s, 12px);
115
- border-width:var(--border-width-fields-single, 2px);
116
- padding-top:var(--space-fields-multi-line-container-s-top, 6px);
114
+ border-radius:var(--radius-fields-s, 4px);
115
+ border-width:var(--border-width-fields-single, 1px);
116
+ padding-top:var(--space-fields-multi-line-container-s-top, 7px);
117
117
  padding-bottom:var(--space-fields-multi-line-container-s-bottom, 2px);
118
- padding-left:var(--space-fields-multi-line-container-s-left, 6px);
118
+ padding-left:var(--space-fields-multi-line-container-s-left, 7px);
119
119
  padding-right:var(--space-fields-multi-line-container-s-right, 2px);
120
120
  }
121
121
  .container[data-size=m]{
122
- border-radius:var(--radius-fields-m, 14px);
123
- border-width:var(--border-width-fields-single, 2px);
122
+ border-radius:var(--radius-fields-m, 4px);
123
+ border-width:var(--border-width-fields-single, 1px);
124
124
  }
125
125
  .container[data-size=m],
126
126
  .container[data-size=m] input,
@@ -135,40 +135,40 @@
135
135
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
136
136
  }
137
137
  .container[data-size=m][data-variant=single-line-container]{
138
- border-radius:var(--radius-fields-m, 14px);
139
- border-width:var(--border-width-fields-single, 2px);
140
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
138
+ border-radius:var(--radius-fields-m, 4px);
139
+ border-width:var(--border-width-fields-single, 1px);
140
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
141
141
  gap:var(--space-fields-single-line-container-m-gap, 4px);
142
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
142
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
143
143
  height:var(--size-fields-m, 40px);
144
144
  }
145
145
  .container[data-size=m][data-variant=single-line-container-button-before]{
146
- border-radius:var(--radius-fields-m, 14px);
147
- border-width:var(--border-width-fields-single, 2px);
146
+ border-radius:var(--radius-fields-m, 4px);
147
+ border-width:var(--border-width-fields-single, 1px);
148
148
  padding-left:var(--space-fields-single-line-container-m-button, 0px);
149
149
  gap:var(--space-fields-single-line-container-m-gap, 4px);
150
- padding-right:var(--space-fields-single-line-container-m-right, 8px);
150
+ padding-right:var(--space-fields-single-line-container-m-right, 9px);
151
151
  height:var(--size-fields-m, 40px);
152
152
  }
153
153
  .container[data-size=m][data-variant=single-line-container-button-after]{
154
- border-radius:var(--radius-fields-m, 14px);
155
- border-width:var(--border-width-fields-single, 2px);
156
- padding-left:var(--space-fields-single-line-container-m-left, 8px);
154
+ border-radius:var(--radius-fields-m, 4px);
155
+ border-width:var(--border-width-fields-single, 1px);
156
+ padding-left:var(--space-fields-single-line-container-m-left, 9px);
157
157
  gap:var(--space-fields-single-line-container-m-gap, 4px);
158
158
  padding-right:var(--space-fields-single-line-container-m-button, 0px);
159
159
  height:var(--size-fields-m, 40px);
160
160
  }
161
161
  .container[data-size=m][data-variant=multi-line-container]{
162
- border-radius:var(--radius-fields-m, 14px);
163
- border-width:var(--border-width-fields-single, 2px);
164
- padding-top:var(--space-fields-multi-line-container-m-top, 8px);
162
+ border-radius:var(--radius-fields-m, 4px);
163
+ border-width:var(--border-width-fields-single, 1px);
164
+ padding-top:var(--space-fields-multi-line-container-m-top, 9px);
165
165
  padding-bottom:var(--space-fields-multi-line-container-m-bottom, 2px);
166
- padding-left:var(--space-fields-multi-line-container-m-left, 8px);
166
+ padding-left:var(--space-fields-multi-line-container-m-left, 9px);
167
167
  padding-right:var(--space-fields-multi-line-container-m-right, 2px);
168
168
  }
169
169
  .container[data-size=l]{
170
- border-radius:var(--radius-fields-l, 16px);
171
- border-width:var(--border-width-fields-single, 2px);
170
+ border-radius:var(--radius-fields-l, 4px);
171
+ border-width:var(--border-width-fields-single, 1px);
172
172
  }
173
173
  .container[data-size=l],
174
174
  .container[data-size=l] input,
@@ -183,35 +183,35 @@
183
183
  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
184
184
  }
185
185
  .container[data-size=l][data-variant=single-line-container]{
186
- border-radius:var(--radius-fields-l, 16px);
187
- border-width:var(--border-width-fields-single, 2px);
188
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
186
+ border-radius:var(--radius-fields-l, 4px);
187
+ border-width:var(--border-width-fields-single, 1px);
188
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
189
189
  gap:var(--space-fields-single-line-container-l-gap, 8px);
190
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
190
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
191
191
  height:var(--size-fields-l, 48px);
192
192
  }
193
193
  .container[data-size=l][data-variant=single-line-container-button-before]{
194
- border-radius:var(--radius-fields-l, 16px);
195
- border-width:var(--border-width-fields-single, 2px);
194
+ border-radius:var(--radius-fields-l, 4px);
195
+ border-width:var(--border-width-fields-single, 1px);
196
196
  padding-left:var(--space-fields-single-line-container-l-button, 0px);
197
197
  gap:var(--space-fields-single-line-container-l-gap, 8px);
198
- padding-right:var(--space-fields-single-line-container-l-right, 10px);
198
+ padding-right:var(--space-fields-single-line-container-l-right, 11px);
199
199
  height:var(--size-fields-l, 48px);
200
200
  }
201
201
  .container[data-size=l][data-variant=single-line-container-button-after]{
202
- border-radius:var(--radius-fields-l, 16px);
203
- border-width:var(--border-width-fields-single, 2px);
204
- padding-left:var(--space-fields-single-line-container-l-left, 10px);
202
+ border-radius:var(--radius-fields-l, 4px);
203
+ border-width:var(--border-width-fields-single, 1px);
204
+ padding-left:var(--space-fields-single-line-container-l-left, 11px);
205
205
  gap:var(--space-fields-single-line-container-l-gap, 8px);
206
206
  padding-right:var(--space-fields-single-line-container-l-button, 0px);
207
207
  height:var(--size-fields-l, 48px);
208
208
  }
209
209
  .container[data-size=l][data-variant=multi-line-container]{
210
- border-radius:var(--radius-fields-l, 16px);
211
- border-width:var(--border-width-fields-single, 2px);
212
- padding-top:var(--space-fields-multi-line-container-l-top, 10px);
210
+ border-radius:var(--radius-fields-l, 4px);
211
+ border-width:var(--border-width-fields-single, 1px);
212
+ padding-top:var(--space-fields-multi-line-container-l-top, 11px);
213
213
  padding-bottom:var(--space-fields-multi-line-container-l-bottom, 2px);
214
- padding-left:var(--space-fields-multi-line-container-l-left, 10px);
214
+ padding-left:var(--space-fields-multi-line-container-l-left, 11px);
215
215
  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
216
216
  }
217
217
  .container[data-selectable],
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Fields",
7
- "version": "0.49.2-preview-431acae7.0",
7
+ "version": "0.49.2",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -47,7 +47,7 @@
47
47
  "@snack-uikit/scroll": "0.10.4",
48
48
  "@snack-uikit/skeleton": "0.6.8",
49
49
  "@snack-uikit/slider": "0.3.25",
50
- "@snack-uikit/tag": "0.15.7",
50
+ "@snack-uikit/tag": "0.15.8",
51
51
  "@snack-uikit/tooltip": "0.18.3",
52
52
  "@snack-uikit/truncate-string": "0.7.0",
53
53
  "@snack-uikit/utils": "3.10.1",
@@ -65,5 +65,5 @@
65
65
  "peerDependencies": {
66
66
  "@snack-uikit/locale": "*"
67
67
  },
68
- "gitHead": "c3924d32080d49961cd2e1cc0f6a84a49882003d"
68
+ "gitHead": "dc42c636dae38b12a144f21188b1d489db637681"
69
69
  }
package/src/components/FieldStepper/FieldStepper.tsx CHANGED
@@ -16,7 +16,7 @@ import { ButtonFunction } from '@snack-uikit/button';
16
16
  import { MinusSVG, PlusSVG } from '@snack-uikit/icons';
17
17
  import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
18
18
  import { useLocale } from '@snack-uikit/locale';
19
- import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
19
+ import { Tooltip } from '@snack-uikit/tooltip';
20
20
  import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
21
21
 
22
22
  import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
@@ -59,10 +59,6 @@ type FieldStepperOwnProps = {
59
59
  prefix?: ReactNode;
60
60
  /** Произвольный постфикс для поля */
61
61
  postfix?: ReactNode;
62
- /** Тултип над кнопкой увеличения значения */
63
- plusButtonTooltip?: TooltipProps;
64
- /** Тултип над кнопкой уменьшения значения */
65
- minusButtonTooltip?: TooltipProps;
66
62
  };
67
63
 
68
64
  export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
@@ -95,8 +91,6 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
95
91
  value: valueProp,
96
92
  min = Number.NEGATIVE_INFINITY,
97
93
  max = Number.POSITIVE_INFINITY,
98
- plusButtonTooltip,
99
- minusButtonTooltip,
100
94
  step = 1,
101
95
  disabled = false,
102
96
  readonly = false,
@@ -246,42 +240,28 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
246
240
  variant={CONTAINER_VARIANT.SingleLine}
247
241
  inputRef={inputRef}
248
242
  prefix={
249
- <Tooltip
250
- {...minusButtonTooltip}
251
- open={minusButtonTooltip ? minusButtonTooltip?.open : false}
252
- tip={minusButtonTooltip?.tip}
253
- data-test-id='field-stepper__minus-button-tooltip'
254
- >
255
- <ButtonFunction
256
- tabIndex={-1}
257
- size='xs'
258
- className={styles.button}
259
- icon={<MinusSVG />}
260
- onClick={handleMinusButtonClick}
261
- onKeyDown={handleMinusButtonKeyDown}
262
- disabled={isMinusButtonDisabled}
263
- data-test-id='field-stepper__minus-button'
264
- />
265
- </Tooltip>
243
+ <ButtonFunction
244
+ tabIndex={-1}
245
+ size='xs'
246
+ className={styles.button}
247
+ icon={<MinusSVG />}
248
+ onClick={handleMinusButtonClick}
249
+ onKeyDown={handleMinusButtonKeyDown}
250
+ disabled={isMinusButtonDisabled}
251
+ data-test-id='field-stepper__minus-button'
252
+ />
266
253
  }
267
254
  postfix={
268
- <Tooltip
269
- {...plusButtonTooltip}
270
- open={plusButtonTooltip ? plusButtonTooltip?.open : false}
271
- tip={plusButtonTooltip?.tip}
272
- data-test-id='field-stepper__plus-button-tooltip'
273
- >
274
- <ButtonFunction
275
- tabIndex={-1}
276
- size='xs'
277
- className={styles.button}
278
- icon={<PlusSVG />}
279
- onClick={handlePlusButtonClick}
280
- onKeyDown={handlePlusButtonKeyDown}
281
- disabled={isPlusButtonDisabled}
282
- data-test-id='field-stepper__plus-button'
283
- />
284
- </Tooltip>
255
+ <ButtonFunction
256
+ tabIndex={-1}
257
+ size='xs'
258
+ className={styles.button}
259
+ icon={<PlusSVG />}
260
+ onClick={handlePlusButtonClick}
261
+ onKeyDown={handlePlusButtonKeyDown}
262
+ disabled={isPlusButtonDisabled}
263
+ data-test-id='field-stepper__plus-button'
264
+ />
285
265
  }
286
266
  >
287
267
  <div className={styles.wrap}>