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

package/components/number-input/Component.js

@@ -21,12 +21,22 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-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"};
+var defaultColors = {"steppers":"number-input__steppers_vqdas","steppersFocused":"number-input__steppersFocused_vqdas","steppersDisabled":"number-input__steppersDisabled_vqdas"};
+require('./default.css')
+
+var styles = {"s":"number-input__s_77v6k","m":"number-input__m_77v6k"};
 require('./index.css')
 
+var invertedColors = {"steppers":"number-input__steppers_163tu","steppersFocused":"number-input__steppersFocused_163tu","steppersDisabled":"number-input__steppersDisabled_163tu"};
+require('./inverted.css')
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var NumberInput = React.forwardRef(function (_a, ref) {
     var _b;
-    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? utils.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 = tslib.__rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear"]);
+    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? utils.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 = tslib.__rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
     var min = Math.max(utils.MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : utils.MIN_SAFE_INTEGER);
     var max = Math.min(utils.MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : utils.MAX_SAFE_INTEGER);
     var withStepper = stepProp !== undefined;
@@ -38,15 +48,15 @@ var NumberInput = React.forwardRef(function (_a, ref) {
             max: max,
         });
     }, [separator, fractionLength, min, max, withStepper]);
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(function () {
+    var _g = React.useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = React.useState(function () {
         if (defaultValue == null) {
             return withStepper ? coreComponentsShared.fnUtils.clamp(0, min, max).toString() : '';
         }
         return coreComponentsShared.fnUtils
             .clamp(utils.parseNumber(core.maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
             .toString();
-    }), value = _g[0], setValue = _g[1];
+    }), value = _h[0], setValue = _h[1];
     var maskRef = react.useMaskito({ options: maskOptions });
     React.useEffect(function () {
         if (propValue !== undefined) {
@@ -102,11 +112,11 @@ var NumberInput = React.forwardRef(function (_a, ref) {
     };
     return (React__default.default.createElement(Input, tslib.__assign({ maxLength: getMaxLength(value) }, restProps, { 
         // В iOS в цифровой клавиатуре невозможно ввести минус.
-        inputMode: min < 0 && coreComponentsShared.os.isIOS() ? 'text' : 'decimal', ref: mergeRefs__default.default([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__default.default.createElement(React__default.default.Fragment, null,
+        inputMode: min < 0 && coreComponentsShared.os.isIOS() ? 'text' : 'decimal', ref: mergeRefs__default.default([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__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
-            React__default.default.createElement(components_steppers_Component.Steppers, { dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(styles.steppers, styles[size], (_b = {},
-                    _b[styles.steppersFocused] = focused,
-                    _b[styles.steppersDisable] = disabled,
+            React__default.default.createElement(components_steppers_Component.Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(colorStyles[colors].steppers, styles[size], (_b = {},
+                    _b[colorStyles[colors].steppersFocused] = focused,
+                    _b[colorStyles[colors].steppersDisabled] = disabled,
                     _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
 });
 

package/components/number-input/default.css

@@ -0,0 +1,24 @@
+/* hash: o5lab */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500-inverted: #fff;
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__steppers_vqdas {
+    background-color: var(--color-light-neutral-1500-inverted);
+} .number-input__steppersFocused_vqdas,
+.number-input__steppersDisabled_vqdas {
+    background-color: var(--color-light-neutral-translucent-200);
+}

package/components/number-input/index.css

@@ -1,8 +1,6 @@
-/* hash: ppwj9 */
+/* hash: bzled */
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-0: #fff;
-    --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 */
+} /* 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 */
 } :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 */
 } :root {
 } :root {
@@ -18,13 +16,8 @@
     --gap-xs-neg: -8px;
 } :root {
 } :root {
-} .number-input__steppers_1g1qu {
-    background-color: var(--color-light-neutral-0);
-} .number-input__steppersFocused_1g1qu,
-.number-input__steppersDisable_1g1qu {
-    background-color: var(--color-light-neutral-translucent-200);
-} .number-input__s_1g1qu {
+} .number-input__s_77v6k {
     margin-right: var(--gap-xs-neg);
-} .number-input__m_1g1qu {
+} .number-input__m_77v6k {
     margin-right: var(--gap-2xs-neg);
 }

package/components/number-input/inverted.css

@@ -0,0 +1,24 @@
+/* hash: omvxl */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #0e0e0e;
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__steppers_163tu {
+    background-color: var(--color-light-neutral-1500);
+} .number-input__steppersFocused_163tu,
+.number-input__steppersDisabled_163tu {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/components/steppers/Component.d.ts

@@ -9,6 +9,7 @@ type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

package/components/steppers/Component.js

@@ -14,20 +14,30 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"number-input__component_1k8eq","separator":"number-input__separator_1k8eq","button":"number-input__button_1k8eq"};
+var defaultColors = {"separator":"number-input__separator_1xrwr"};
+require('./default.css')
+
+var styles = {"component":"number-input__component_1ab92","separator":"number-input__separator_1ab92","button":"number-input__button_1ab92"};
 require('./index.css')
 
+var invertedColors = {"separator":"number-input__separator_1uwaa"};
+require('./inverted.css')
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 function preventDefault(e) {
     e.preventDefault();
 }
 var Steppers = function (_a) {
-    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;
+    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;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
     return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: decButtonDisabled, className: styles.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
-        React__default.default.createElement("div", { className: styles.separator }),
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: incButtonDisabled, className: styles.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement("div", { className: cn__default.default(styles.separator, colorStyles[colors].separator) }),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
 };
 
 exports.Steppers = Steppers;

package/components/steppers/default.css

@@ -0,0 +1,20 @@
+/* hash: 306x5 */
+:root {
+} /* deprecated */ :root {
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_1xrwr {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/components/steppers/index.css

@@ -1,7 +1,6 @@
-/* hash: 1x7ch */
+/* hash: 6nhr0 */
 :root {
-} /* deprecated */ :root {
-    --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 */
+} /* 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 */
 } :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 */
 } :root {
 } :root {
@@ -15,18 +14,17 @@
 } :root {
 } :root {
 } :root {
-} .number-input__component_1k8eq {
+} .number-input__component_1ab92 {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     border-radius: 5px;
     transition: background-color 0.2s ease;
     overflow: visible;
-} .number-input__separator_1k8eq {
+} .number-input__separator_1ab92 {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
-} .number-input__button_1k8eq {
+} .number-input__button_1ab92 {
     width: 40px;
     height: 40px;
 }

package/components/steppers/inverted.css

@@ -0,0 +1,20 @@
+/* hash: 78l4o */
+:root {
+} /* deprecated */ :root {
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .number-input__separator_1uwaa {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/cssm/Component.desktop.js

@@ -16,8 +16,12 @@ require('./components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('./components/steppers/default.module.css');
 require('./components/steppers/index.module.css');
+require('./components/steppers/inverted.module.css');
+require('./components/number-input/default.module.css');
 require('./components/number-input/index.module.css');
+require('./components/number-input/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/Component.mobile.js

@@ -16,8 +16,12 @@ require('./components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('./components/steppers/default.module.css');
 require('./components/steppers/index.module.css');
+require('./components/steppers/inverted.module.css');
+require('./components/number-input/default.module.css');
 require('./components/number-input/index.module.css');
+require('./components/number-input/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/Component.responsive.js

@@ -17,8 +17,12 @@ require('./components/steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('./components/steppers/default.module.css');
 require('./components/steppers/index.module.css');
+require('./components/steppers/inverted.module.css');
+require('./components/number-input/default.module.css');
 require('./components/number-input/index.module.css');
+require('./components/number-input/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cssm/components/number-input/Component.js

@@ -11,22 +11,32 @@ var cn = require('classnames');
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var utils = require('../../utils.js');
 var components_steppers_Component = require('../steppers/Component.js');
+var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
+var invertedColors = require('./inverted.module.css');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('../steppers/default.module.css');
 require('../steppers/index.module.css');
+require('../steppers/inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
 
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
 var NumberInput = React.forwardRef(function (_a, ref) {
     var _b;
-    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? utils.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 = tslib.__rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear"]);
+    var propValue = _a.value, onChange = _a.onChange, _c = _a.separator, separator = _c === void 0 ? ',' : _c, _d = _a.fractionLength, fractionLength = _d === void 0 ? utils.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 = tslib.__rest(_a, ["value", "onChange", "separator", "fractionLength", "defaultValue", "Input", "min", "max", "rightAddons", "dataTestId", "disabled", "onBlur", "onFocus", "view", "step", "size", "disableUserInput", "clear", "colors"]);
     var min = Math.max(utils.MIN_SAFE_INTEGER, minProp !== null && minProp !== void 0 ? minProp : utils.MIN_SAFE_INTEGER);
     var max = Math.min(utils.MAX_SAFE_INTEGER, maxProp !== null && maxProp !== void 0 ? maxProp : utils.MAX_SAFE_INTEGER);
     var withStepper = stepProp !== undefined;
@@ -38,15 +48,15 @@ var NumberInput = React.forwardRef(function (_a, ref) {
             max: max,
         });
     }, [separator, fractionLength, min, max, withStepper]);
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(function () {
+    var _g = React.useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = React.useState(function () {
         if (defaultValue == null) {
             return withStepper ? coreComponentsShared.fnUtils.clamp(0, min, max).toString() : '';
         }
         return coreComponentsShared.fnUtils
             .clamp(utils.parseNumber(core.maskitoTransform(defaultValue.toString(), maskOptions)), min, max)
             .toString();
-    }), value = _g[0], setValue = _g[1];
+    }), value = _h[0], setValue = _h[1];
     var maskRef = react.useMaskito({ options: maskOptions });
     React.useEffect(function () {
         if (propValue !== undefined) {
@@ -102,11 +112,11 @@ var NumberInput = React.forwardRef(function (_a, ref) {
     };
     return (React__default.default.createElement(Input, tslib.__assign({ maxLength: getMaxLength(value) }, restProps, { 
         // В iOS в цифровой клавиатуре невозможно ввести минус.
-        inputMode: min < 0 && coreComponentsShared.os.isIOS() ? 'text' : 'decimal', ref: mergeRefs__default.default([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__default.default.createElement(React__default.default.Fragment, null,
+        inputMode: min < 0 && coreComponentsShared.os.isIOS() ? 'text' : 'decimal', ref: mergeRefs__default.default([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__default.default.createElement(React__default.default.Fragment, null,
             rightAddons,
-            React__default.default.createElement(components_steppers_Component.Steppers, { dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(styles__default.default.steppers, styles__default.default[size], (_b = {},
-                    _b[styles__default.default.steppersFocused] = focused,
-                    _b[styles__default.default.steppersDisable] = disabled,
+            React__default.default.createElement(components_steppers_Component.Steppers, { colors: colors, dataTestId: dataTestId, disabled: disabled, value: utils.parseNumber(value), min: min, max: max, className: cn__default.default(colorStyles[colors].steppers, styles__default.default[size], (_b = {},
+                    _b[colorStyles[colors].steppersFocused] = focused,
+                    _b[colorStyles[colors].steppersDisabled] = disabled,
                     _b)), onIncrement: handleIncrement, onDecrement: handleDecrement }))) : (rightAddons) })));
 });
 

package/cssm/components/number-input/default.module.css

@@ -0,0 +1,23 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500-inverted: #fff;
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .steppers {
+    background-color: var(--color-light-neutral-1500-inverted);
+} .steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-200);
+}

package/cssm/components/number-input/index.js

@@ -15,8 +15,12 @@ require('../steppers/Component.js');
 require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('../steppers/default.module.css');
 require('../steppers/index.module.css');
+require('../steppers/inverted.module.css');
+require('./default.module.css');
 require('./index.module.css');
+require('./inverted.module.css');
 
 
 

package/cssm/components/number-input/index.module.css

@@ -1,7 +1,5 @@
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-0: #fff;
-    --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 */
+} /* 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 */
 } :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 */
 } :root {
 } :root {
@@ -17,11 +15,6 @@
     --gap-xs-neg: -8px;
 } :root {
 } :root {
-} .steppers {
-    background-color: var(--color-light-neutral-0);
-} .steppersFocused,
-.steppersDisable {
-    background-color: var(--color-light-neutral-translucent-200);
 } .s {
     margin-right: var(--gap-xs-neg);
 } .m {

package/cssm/components/number-input/inverted.module.css

@@ -0,0 +1,23 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-1500: #0e0e0e;
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .steppers {
+    background-color: var(--color-light-neutral-1500);
+} .steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/cssm/components/steppers/Component.d.ts

@@ -9,6 +9,7 @@ type SteppersProps = {
     onIncrement: () => void;
     onDecrement: () => void;
     dataTestId?: string;
+    colors: 'default' | 'inverted';
 };
 declare const Steppers: React.FC<SteppersProps>;
 export { SteppersProps, Steppers };

package/cssm/components/steppers/Component.js

@@ -8,25 +8,33 @@ var coreComponentsIconButton = require('@alfalab/core-components-icon-button/css
 var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 var MinusMIcon = require('@alfalab/icons-glyph/MinusMIcon');
 var PlusMediumMIcon = require('@alfalab/icons-glyph/PlusMediumMIcon');
+var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
+var invertedColors = require('./inverted.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
 
+var colorStyles = {
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
+};
 function preventDefault(e) {
     e.preventDefault();
 }
 var Steppers = function (_a) {
-    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;
+    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;
     var decButtonDisabled = disabled || value <= min;
     var incButtonDisabled = disabled || value >= max;
     return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: decButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
-        React__default.default.createElement("div", { className: styles__default.default.separator }),
-        React__default.default.createElement(coreComponentsIconButton.IconButton, { disabled: incButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: decButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(MinusMIcon.MinusMIcon, null), "aria-label": '\u0443\u043C\u0435\u043D\u044C\u0448\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onDecrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'decrement-button'), view: 'secondary' }),
+        React__default.default.createElement("div", { className: cn__default.default(styles__default.default.separator, colorStyles[colors].separator) }),
+        React__default.default.createElement(coreComponentsIconButton.IconButton, { colors: colors, disabled: incButtonDisabled, className: styles__default.default.button, icon: React__default.default.createElement(PlusMediumMIcon.PlusMediumMIcon, null), "aria-label": '\u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C', onMouseDown: preventDefault, onClick: onIncrement, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'increment-button'), view: 'secondary' })));
 };
 
 exports.Steppers = Steppers;

package/cssm/components/steppers/default.module.css

@@ -0,0 +1,19 @@
+:root {
+} /* deprecated */ :root {
+    --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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} .separator {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/cssm/components/steppers/index.js

@@ -9,7 +9,9 @@ require('@alfalab/core-components-icon-button/cssm');
 require('@alfalab/core-components-shared/cssm');
 require('@alfalab/icons-glyph/MinusMIcon');
 require('@alfalab/icons-glyph/PlusMediumMIcon');
+require('./default.module.css');
 require('./index.module.css');
+require('./inverted.module.css');
 
 
 

package/cssm/components/steppers/index.module.css

@@ -1,6 +1,5 @@
 :root {
-} /* deprecated */ :root {
-    --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 */
+} /* 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 */
 } :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 */
 } :root {
 } :root {
@@ -24,7 +23,6 @@
 } .separator {
     height: 18px;
     width: 1px;
-    background-color: var(--color-light-neutral-translucent-300);
 } .button {
     width: 40px;
     height: 40px;