@alfalab/core-components-number-input 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/components/number-input/Component.js +19 -9
  2. package/components/number-input/default.css +24 -0
  3. package/components/number-input/index.css +4 -11
  4. package/components/number-input/inverted.css +24 -0
  5. package/components/steppers/Component.d.ts +1 -0
  6. package/components/steppers/Component.js +15 -5
  7. package/components/steppers/default.css +20 -0
  8. package/components/steppers/index.css +5 -7
  9. package/components/steppers/inverted.css +20 -0
  10. package/cssm/Component.desktop.js +4 -0
  11. package/cssm/Component.mobile.js +4 -0
  12. package/cssm/Component.responsive.js +4 -0
  13. package/cssm/components/number-input/Component.js +18 -8
  14. package/cssm/components/number-input/default.module.css +23 -0
  15. package/cssm/components/number-input/index.js +4 -0
  16. package/cssm/components/number-input/index.module.css +1 -8
  17. package/cssm/components/number-input/inverted.module.css +23 -0
  18. package/cssm/components/steppers/Component.d.ts +1 -0
  19. package/cssm/components/steppers/Component.js +12 -4
  20. package/cssm/components/steppers/default.module.css +19 -0
  21. package/cssm/components/steppers/index.js +2 -0
  22. package/cssm/components/steppers/index.module.css +1 -3
  23. package/cssm/components/steppers/inverted.module.css +19 -0
  24. package/cssm/desktop/index.js +4 -0
  25. package/cssm/index.js +4 -0
  26. package/cssm/mobile/index.js +4 -0
  27. package/esm/components/number-input/Component.js +19 -9
  28. package/esm/components/number-input/default.css +24 -0
  29. package/esm/components/number-input/index.css +4 -11
  30. package/esm/components/number-input/inverted.css +24 -0
  31. package/esm/components/steppers/Component.d.ts +1 -0
  32. package/esm/components/steppers/Component.js +15 -5
  33. package/esm/components/steppers/default.css +20 -0
  34. package/esm/components/steppers/index.css +5 -7
  35. package/esm/components/steppers/inverted.css +20 -0
  36. package/modern/components/number-input/Component.js +16 -6
  37. package/modern/components/number-input/default.css +24 -0
  38. package/modern/components/number-input/index.css +4 -11
  39. package/modern/components/number-input/inverted.css +24 -0
  40. package/modern/components/steppers/Component.d.ts +1 -0
  41. package/modern/components/steppers/Component.js +15 -5
  42. package/modern/components/steppers/default.css +20 -0
  43. package/modern/components/steppers/index.css +5 -7
  44. package/modern/components/steppers/inverted.css +20 -0
  45. package/package.json +3 -3
  46. package/src/components/number-input/Component.tsx +13 -3
  47. package/src/components/number-input/default.module.css +10 -0
  48. package/src/components/number-input/index.module.css +0 -9
  49. package/src/components/number-input/inverted.module.css +10 -0
  50. package/src/components/steppers/Component.tsx +12 -1
  51. package/src/components/steppers/default.module.css +5 -0
  52. package/src/components/steppers/index.module.css +0 -1
  53. package/src/components/steppers/inverted.module.css +5 -0
package/cssm/components/steppers/inverted.module.css ADDED
@@ -0,0 +1,19 @@
1
+ :root {
2
+ } /* deprecated */ :root {
3
+ --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root {
6
+ } :root {
7
+
8
+ /* Hard */
9
+
10
+ /* Up */
11
+
12
+ /* Hard up */
13
+ } :root {
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } .separator {
18
+ background-color: var(--color-light-neutral-translucent-300-inverted);
19
+ }
package/cssm/desktop/index.js CHANGED
@@ -17,8 +17,12 @@ require('../components/steppers/Component.js');
17
17
  require('@alfalab/core-components-icon-button/cssm');
18
18
  require('@alfalab/icons-glyph/MinusMIcon');
19
19
  require('@alfalab/icons-glyph/PlusMediumMIcon');
20
+ require('../components/steppers/default.module.css');
20
21
  require('../components/steppers/index.module.css');
22
+ require('../components/steppers/inverted.module.css');
23
+ require('../components/number-input/default.module.css');
21
24
  require('../components/number-input/index.module.css');
25
+ require('../components/number-input/inverted.module.css');
22
26
 
23
27
 
24
28
 
package/cssm/index.js CHANGED
@@ -18,8 +18,12 @@ require('./components/steppers/Component.js');
18
18
  require('@alfalab/core-components-icon-button/cssm');
19
19
  require('@alfalab/icons-glyph/MinusMIcon');
20
20
  require('@alfalab/icons-glyph/PlusMediumMIcon');
21
+ require('./components/steppers/default.module.css');
21
22
  require('./components/steppers/index.module.css');
23
+ require('./components/steppers/inverted.module.css');
24
+ require('./components/number-input/default.module.css');
22
25
  require('./components/number-input/index.module.css');
26
+ require('./components/number-input/inverted.module.css');
23
27
 
24
28
 
25
29
 
package/cssm/mobile/index.js CHANGED
@@ -17,8 +17,12 @@ require('../components/steppers/Component.js');
17
17
  require('@alfalab/core-components-icon-button/cssm');
18
18
  require('@alfalab/icons-glyph/MinusMIcon');
19
19
  require('@alfalab/icons-glyph/PlusMediumMIcon');
20
+ require('../components/steppers/default.module.css');
20
21
  require('../components/steppers/index.module.css');
22
+ require('../components/steppers/inverted.module.css');
23
+ require('../components/number-input/default.module.css');
21
24
  require('../components/number-input/index.module.css');
25
+ require('../components/number-input/inverted.module.css');
22
26
 
23
27
 
24
28
 
package/esm/components/number-input/Component.js CHANGED
@@ -11,12 +11,22 @@ import '@alfalab/core-components-icon-button/esm';
11
11
  import '@alfalab/icons-glyph/MinusMIcon';
12
12
  import '@alfalab/icons-glyph/PlusMediumMIcon';
13
13
 
14
- var styles = {"steppers":"number-input__steppers_1g1qu","steppersFocused":"number-input__steppersFocused_1g1qu","steppersDisable":"number-input__steppersDisable_1g1qu","s":"number-input__s_1g1qu","m":"number-input__m_1g1qu"};
14
+ var defaultColors = {"steppers":"number-input__steppers_vqdas","steppersFocused":"number-input__steppersFocused_vqdas","steppersDisabled":"number-input__steppersDisabled_vqdas"};
15
+ require('./default.css')
16
+
17
+ var styles = {"s":"number-input__s_77v6k","m":"number-input__m_77v6k"};
15
18
  require('./index.css')
16
19
 
20
+ var invertedColors = {"steppers":"number-input__steppers_163tu","steppersFocused":"number-input__steppersFocused_163tu","steppersDisabled":"number-input__steppersDisabled_163tu"};
21
+ require('./inverted.css')
22
+
23
+ var colorStyles = {
24
+ default: defaultColors,
25
+ inverted: invertedColors,
26
+ };
17
27
  var NumberInput = forwardRef(function (_a, ref) {
18
28
  var _b;
19
- var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? MAX_DIGITS : _d, defaultValue = _a.defaultValue, Input = _a.Input, minProp = _a.min, maxProp = _a.max, rightAddons = _a.rightAddons, dataTestId = _a.dataTestId, disabled = _a.disabled, onBlur = _a.onBlur, onFocus = _a.onFocus; _a.view; var stepProp = _a.step, _e = _a.size, size = _e === void 0 ? 's' : _e, disableUserInput = _a.disableUserInput, clearProp = _a.clear, restProps = __rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear"]);
29
+ var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? MAX_DIGITS : _d, defaultValue = _a.defaultValue, Input = _a.Input, minProp = _a.min, maxProp = _a.max, rightAddons = _a.rightAddons, dataTestId = _a.dataTestId, disabled = _a.disabled, onBlur = _a.onBlur, onFocus = _a.onFocus; _a.view; var stepProp = _a.step, _e = _a.size, size = _e === void 0 ? 's' : _e, disableUserInput = _a.disableUserInput, clearProp = _a.clear, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = __rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
20
30
  var min = Math.max(MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : MIN_SAFE_INTEGER);
21
31
  var max = Math.min(MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : MAX_SAFE_INTEGER);
22
32
  var withStepper = stepProp !== undefined;
@@ -28,15 +38,15 @@ var NumberInput = forwardRef(function (_a, ref) {
28
38
  max: max,
29
39
  });
30
40
  }, [separator, fractionLength, min, max, withStepper]);
31
- var _f = useState(false), focused = _f[0], setFocused = _f[1];
32
- var _g = useState(function () {
41
+ var _g = useState(false), focused = _g[0], setFocused = _g[1];
42
+ var _h = useState(function () {
33
43
  if (defaultValue == null) {
34
44
  return withStepper ? fnUtils.clamp(0, min, max).toString() : '';
35
45
  }
36
46
  return fnUtils
37
47
  .clamp(parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
38
48
  .toString();
39
- }), value = _g[0], setValue = _g[1];
49
+ }), value = _h[0], setValue = _h[1];
40
50
  var maskRef = useMaskito({ options: maskOptions });
41
51
  useEffect(function () {
42
52
  if (propValue !== undefined) {
@@ -92,11 +102,11 @@ var NumberInput = forwardRef(function (_a, ref) {
92
102
  };
93
103
  return (React.createElement(Input, __assign({ maxLength: getMaxLength(value) }, restProps, {
94
104
  // В iOS в цифровой клавиатуре невозможно ввести минус.
95
- inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
105
+ inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, colors: colors, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
96
106
  rightAddons,
97
- React.createElement(Steppers, { dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(styles.steppers, styles[size], (_b = {},
98
- _b[styles.steppersFocused] = focused,
99
- _b[styles.steppersDisable] = disabled,
107
+ React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[size], (_b = {},
108
+ _b[colorStyles[colors].steppersFocused] = focused,
109
+ _b[colorStyles[colors].steppersDisabled] = disabled,
100
110
  _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
101
111
  });
102
112
 
package/esm/components/number-input/default.css ADDED
@@ -0,0 +1,24 @@
1
+ /* hash: o5lab */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-1500-inverted: #fff;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
+ } :root {
8
+ } :root {
9
+
10
+ /* Hard */
11
+
12
+ /* Up */
13
+
14
+ /* Hard up */
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } .number-input__steppers_vqdas {
20
+ background-color: var(--color-light-neutral-1500-inverted);
21
+ } .number-input__steppersFocused_vqdas,
22
+ .number-input__steppersDisabled_vqdas {
23
+ background-color: var(--color-light-neutral-translucent-200);
24
+ }
package/esm/components/number-input/index.css CHANGED
@@ -1,8 +1,6 @@
1
- /* hash: ppwj9 */
1
+ /* hash: bzled */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- --color-light-neutral-0: #fff;
5
- --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
5
  } :root {
8
6
  } :root {
@@ -18,13 +16,8 @@
18
16
  --gap-xs-neg: -8px;
19
17
  } :root {
20
18
  } :root {
21
- } .number-input__steppers_1g1qu {
22
- background-color: var(--color-light-neutral-0);
23
- } .number-input__steppersFocused_1g1qu,
24
- .number-input__steppersDisable_1g1qu {
25
- background-color: var(--color-light-neutral-translucent-200);
26
- } .number-input__s_1g1qu {
19
+ } .number-input__s_77v6k {
27
20
  margin-right: var(--gap-xs-neg);
28
- } .number-input__m_1g1qu {
21
+ } .number-input__m_77v6k {
29
22
  margin-right: var(--gap-2xs-neg);
30
23
  }
package/esm/components/number-input/inverted.css ADDED
@@ -0,0 +1,24 @@
1
+ /* hash: omvxl */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
+ } :root {
8
+ } :root {
9
+
10
+ /* Hard */
11
+
12
+ /* Up */
13
+
14
+ /* Hard up */
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } .number-input__steppers_163tu {
20
+ background-color: var(--color-light-neutral-1500);
21
+ } .number-input__steppersFocused_163tu,
22
+ .number-input__steppersDisabled_163tu {
23
+ background-color: var(--color-light-neutral-translucent-300-inverted);
24
+ }
package/esm/components/steppers/Component.d.ts CHANGED
@@ -9,6 +9,7 @@ type SteppersProps = {
9
9
  onIncrement: () => void;
10
10
  onDecrement: () => void;
11
11
  dataTestId?: string;
12
+ colors: 'default' | 'inverted';
12
13
  };
13
14
  declare const Steppers: React.FC<SteppersProps>;
14
15
  export { SteppersProps, Steppers };
package/esm/components/steppers/Component.js CHANGED
@@ -5,20 +5,30 @@ import { getDataTestId } from '@alfalab/core-components-shared/esm';
5
5
  import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
6
6
  import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
7
7
 
8
- var styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
8
+ var defaultColors = {"separator":"number-input__separator_1xrwr"};
9
+ require('./default.css')
10
+
11
+ var styles = {"component":"number-input__component_1ab92","separator":"number-input__separator_1ab92","button":"number-input__button_1ab92"};
9
12
  require('./index.css')
10
13
 
14
+ var invertedColors = {"separator":"number-input__separator_1uwaa"};
15
+ require('./inverted.css')
16
+
17
+ var colorStyles = {
18
+ default: defaultColors,
19
+ inverted: invertedColors,
20
+ };
11
21
  function preventDefault(e) {
12
22
  e.preventDefault();
13
23
  }
14
24
  var Steppers = function (_a) {
15
- var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, dataTestId = _a.dataTestId;
25
+ var className = _a.className, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, value = _a.value, min = _a.min, max = _a.max, disabled = _a.disabled, dataTestId = _a.dataTestId, colors = _a.colors;
16
26
  var decButtonDisabled = disabled || value <= min;
17
27
  var incButtonDisabled = disabled || value >= max;
18
28
  return (React.createElement("div", { className: cn(styles.component, className) },
19
- React.createElement(IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
20
- React.createElement("div", { className: styles.separator }),
21
- React.createElement(IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
29
+ React.createElement(IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
30
+ React.createElement("div", { className: cn(styles.separator, colorStyles[colors].separator) }),
31
+ React.createElement(IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
22
32
  };
23
33
 
24
34
  export { Steppers };
package/esm/components/steppers/default.css ADDED
@@ -0,0 +1,20 @@
1
+ /* hash: 306x5 */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root {
7
+ } :root {
8
+
9
+ /* Hard */
10
+
11
+ /* Up */
12
+
13
+ /* Hard up */
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } .number-input__separator_1xrwr {
19
+ background-color: var(--color-light-neutral-translucent-300);
20
+ }
package/esm/components/steppers/index.css CHANGED
@@ -1,7 +1,6 @@
1
- /* hash: 1x7ch */
1
+ /* hash: 6nhr0 */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
5
  } :root {
7
6
  } :root {
@@ -15,18 +14,17 @@
15
14
  } :root {
16
15
  } :root {
17
16
  } :root {
18
- } .number-input__component_1k8eq {
17
+ } .number-input__component_1ab92 {
19
18
  display: flex;
20
19
  flex-flow: row nowrap;
21
20
  align-items: center;
22
21
  border-radius: 5px;
23
22
  transition: background-color 0.2s ease;
24
23
  overflow: visible;
25
- } .number-input__separator_1k8eq {
24
+ } .number-input__separator_1ab92 {
26
25
  height: 18px;
27
26
  width: 1px;
28
- background-color: var(--color-light-neutral-translucent-300);
29
- } .number-input__button_1k8eq {
27
+ } .number-input__button_1ab92 {
30
28
  width: 40px;
31
29
  height: 40px;
32
30
  }
package/esm/components/steppers/inverted.css ADDED
@@ -0,0 +1,20 @@
1
+ /* hash: 78l4o */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root {
7
+ } :root {
8
+
9
+ /* Hard */
10
+
11
+ /* Up */
12
+
13
+ /* Hard up */
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } .number-input__separator_1uwaa {
19
+ background-color: var(--color-light-neutral-translucent-300-inverted);
20
+ }
package/modern/components/number-input/Component.js CHANGED
@@ -10,10 +10,20 @@ import '@alfalab/core-components-icon-button/modern';
10
10
  import '@alfalab/icons-glyph/MinusMIcon';
11
11
  import '@alfalab/icons-glyph/PlusMediumMIcon';
12
12
 
13
- const styles = {"steppers":"number-input__steppers_1g1qu","steppersFocused":"number-input__steppersFocused_1g1qu","steppersDisable":"number-input__steppersDisable_1g1qu","s":"number-input__s_1g1qu","m":"number-input__m_1g1qu"};
13
+ const defaultColors = {"steppers":"number-input__steppers_vqdas","steppersFocused":"number-input__steppersFocused_vqdas","steppersDisabled":"number-input__steppersDisabled_vqdas"};
14
+ require('./default.css')
15
+
16
+ const styles = {"s":"number-input__s_77v6k","m":"number-input__m_77v6k"};
14
17
  require('./index.css')
15
18
 
16
- const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', fractionLength = MAX_DIGITS, defaultValue, Input, min: minProp, max: maxProp, rightAddons, dataTestId, disabled, onBlur, onFocus, view, step: stepProp, size = 's', disableUserInput, clear: clearProp, ...restProps }, ref) => {
19
+ const invertedColors = {"steppers":"number-input__steppers_163tu","steppersFocused":"number-input__steppersFocused_163tu","steppersDisabled":"number-input__steppersDisabled_163tu"};
20
+ require('./inverted.css')
21
+
22
+ const colorStyles = {
23
+ default: defaultColors,
24
+ inverted: invertedColors,
25
+ };
26
+ const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', fractionLength = MAX_DIGITS, defaultValue, Input, min: minProp, max: maxProp, rightAddons, dataTestId, disabled, onBlur, onFocus, view, step: stepProp, size = 's', disableUserInput, clear: clearProp, colors = 'default', ...restProps }, ref) => {
17
27
  const min = Math.max(MIN_SAFE_INTEGER, minProp ?? MIN_SAFE_INTEGER);
18
28
  const max = Math.min(MAX_SAFE_INTEGER, maxProp ?? MAX_SAFE_INTEGER);
19
29
  const withStepper = stepProp !== undefined;
@@ -86,11 +96,11 @@ const NumberInput = forwardRef(({ value: propValue, onChange, separator = ',', f
86
96
  };
87
97
  return (React.createElement(Input, { maxLength: getMaxLength(value), ...restProps,
88
98
  // В iOS в цифровой клавиатуре невозможно ввести минус.
89
- inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
99
+ inputMode: min < 0 && os.isIOS() ? 'text' : 'decimal', ref: mergeRefs([ref, maskRef]), value: value, onInput: handleChange, dataTestId: dataTestId, colors: colors, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur, size: size, disableUserInput: disableUserInput, clear: clearProp && /\d/.test(value), rightAddons: withStepper ? (React.createElement(React.Fragment, null,
90
100
  rightAddons,
91
- React.createElement(Steppers, { dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(styles.steppers, styles[size], {
92
- [styles.steppersFocused]: focused,
93
- [styles.steppersDisable]: disabled,
101
+ React.createElement(Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: parseNumber(value), min: min, max: max, className: cn(colorStyles[colors].steppers, styles[size], {
102
+ [colorStyles[colors].steppersFocused]: focused,
103
+ [colorStyles[colors].steppersDisabled]: disabled,
94
104
  }), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) }));
95
105
  });
96
106
 
package/modern/components/number-input/default.css ADDED
@@ -0,0 +1,24 @@
1
+ /* hash: o5lab */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-1500-inverted: #fff;
5
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
+ } :root {
8
+ } :root {
9
+
10
+ /* Hard */
11
+
12
+ /* Up */
13
+
14
+ /* Hard up */
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } .number-input__steppers_vqdas {
20
+ background-color: var(--color-light-neutral-1500-inverted);
21
+ } .number-input__steppersFocused_vqdas,
22
+ .number-input__steppersDisabled_vqdas {
23
+ background-color: var(--color-light-neutral-translucent-200);
24
+ }
package/modern/components/number-input/index.css CHANGED
@@ -1,8 +1,6 @@
1
- /* hash: ppwj9 */
1
+ /* hash: bzled */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- --color-light-neutral-0: #fff;
5
- --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
5
  } :root {
8
6
  } :root {
@@ -18,13 +16,8 @@
18
16
  --gap-xs-neg: -8px;
19
17
  } :root {
20
18
  } :root {
21
- } .number-input__steppers_1g1qu {
22
- background-color: var(--color-light-neutral-0);
23
- } .number-input__steppersFocused_1g1qu,
24
- .number-input__steppersDisable_1g1qu {
25
- background-color: var(--color-light-neutral-translucent-200);
26
- } .number-input__s_1g1qu {
19
+ } .number-input__s_77v6k {
27
20
  margin-right: var(--gap-xs-neg);
28
- } .number-input__m_1g1qu {
21
+ } .number-input__m_77v6k {
29
22
  margin-right: var(--gap-2xs-neg);
30
23
  }
package/modern/components/number-input/inverted.css ADDED
@@ -0,0 +1,24 @@
1
+ /* hash: omvxl */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
7
+ } :root {
8
+ } :root {
9
+
10
+ /* Hard */
11
+
12
+ /* Up */
13
+
14
+ /* Hard up */
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } .number-input__steppers_163tu {
20
+ background-color: var(--color-light-neutral-1500);
21
+ } .number-input__steppersFocused_163tu,
22
+ .number-input__steppersDisabled_163tu {
23
+ background-color: var(--color-light-neutral-translucent-300-inverted);
24
+ }
package/modern/components/steppers/Component.d.ts CHANGED
@@ -9,6 +9,7 @@ type SteppersProps = {
9
9
  onIncrement: () => void;
10
10
  onDecrement: () => void;
11
11
  dataTestId?: string;
12
+ colors: 'default' | 'inverted';
12
13
  };
13
14
  declare const Steppers: React.FC<SteppersProps>;
14
15
  export { SteppersProps, Steppers };
package/modern/components/steppers/Component.js CHANGED
@@ -5,19 +5,29 @@ import { getDataTestId } from '@alfalab/core-components-shared/modern';
5
5
  import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
6
6
  import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
7
7
 
8
- const styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
8
+ const defaultColors = {"separator":"number-input__separator_1xrwr"};
9
+ require('./default.css')
10
+
11
+ const styles = {"component":"number-input__component_1ab92","separator":"number-input__separator_1ab92","button":"number-input__button_1ab92"};
9
12
  require('./index.css')
10
13
 
14
+ const invertedColors = {"separator":"number-input__separator_1uwaa"};
15
+ require('./inverted.css')
16
+
17
+ const colorStyles = {
18
+ default: defaultColors,
19
+ inverted: invertedColors,
20
+ };
11
21
  function preventDefault(e) {
12
22
  e.preventDefault();
13
23
  }
14
- const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, }) => {
24
+ const Steppers = ({ className, onIncrement, onDecrement, value, min, max, disabled, dataTestId, colors, }) => {
15
25
  const decButtonDisabled = disabled || value <= min;
16
26
  const incButtonDisabled = disabled || value >= max;
17
27
  return (React.createElement("div", { className: cn(styles.component, className) },
18
- React.createElement(IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
19
- React.createElement("div", { className: styles.separator }),
20
- React.createElement(IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
28
+ React.createElement(IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React.createElement(MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
29
+ React.createElement("div", { className: cn(styles.separator, colorStyles[colors].separator) }),
30
+ React.createElement(IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React.createElement(PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
21
31
  };
22
32
 
23
33
  export { Steppers };
package/modern/components/steppers/default.css ADDED
@@ -0,0 +1,20 @@
1
+ /* hash: 306x5 */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root {
7
+ } :root {
8
+
9
+ /* Hard */
10
+
11
+ /* Up */
12
+
13
+ /* Hard up */
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } .number-input__separator_1xrwr {
19
+ background-color: var(--color-light-neutral-translucent-300);
20
+ }
package/modern/components/steppers/index.css CHANGED
@@ -1,7 +1,6 @@
1
- /* hash: 1x7ch */
1
+ /* hash: 6nhr0 */
2
2
  :root {
3
- } /* deprecated */ :root {
4
- --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
+ } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
5
  } :root {
7
6
  } :root {
@@ -15,18 +14,17 @@
15
14
  } :root {
16
15
  } :root {
17
16
  } :root {
18
- } .number-input__component_1k8eq {
17
+ } .number-input__component_1ab92 {
19
18
  display: flex;
20
19
  flex-flow: row nowrap;
21
20
  align-items: center;
22
21
  border-radius: 5px;
23
22
  transition: background-color 0.2s ease;
24
23
  overflow: visible;
25
- } .number-input__separator_1k8eq {
24
+ } .number-input__separator_1ab92 {
26
25
  height: 18px;
27
26
  width: 1px;
28
- background-color: var(--color-light-neutral-translucent-300);
29
- } .number-input__button_1k8eq {
27
+ } .number-input__button_1ab92 {
30
28
  width: 40px;
31
29
  height: 40px;
32
30
  }
package/modern/components/steppers/inverted.css ADDED
@@ -0,0 +1,20 @@
1
+ /* hash: 78l4o */
2
+ :root {
3
+ } /* deprecated */ :root {
4
+ --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
6
+ } :root {
7
+ } :root {
8
+
9
+ /* Hard */
10
+
11
+ /* Up */
12
+
13
+ /* Hard up */
14
+ } :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } .number-input__separator_1uwaa {
19
+ background-color: var(--color-light-neutral-translucent-300-inverted);
20
+ }