@alfalab/core-components 44.2.0 → 44.4.0

package/segmented-control/components/segment/default.css

@@ -0,0 +1,23 @@
+/* hash: 10368 */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segmented-control__segment_v214r {
+    color: var(--color-light-text-primary)
+} .segmented-control__segment_v214r:not(:first-child):before {
+        background-color: var(--color-light-neutral-translucent-300);
+    }

package/segmented-control/components/segment/index.css

@@ -1,9 +1,7 @@
-/* hash: u177v */
+/* hash: 1j29e */
 :root {
 } /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
@@ -21,7 +19,7 @@
         sans-serif;
 } :root {
     --focus-color: var(--color-light-border-link);
-} .segmented-control__segment_52kga {
+} .segmented-control__segment_13y83 {
     flex: 1;
     z-index: 1;
     display: flex;
@@ -33,23 +31,21 @@
     background-color: transparent;
     position: relative;
     font-family: var(--font-family-system);
-    color: var(--color-light-text-primary);
     transition: font-weight 0.2s ease, color 0.2s ease;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
-} .segmented-control__segment_52kga:not(:first-child):before {
+} .segmented-control__segment_13y83:not(:first-child):before {
         content: '';
         position: absolute;
-        background-color: var(--color-light-neutral-translucent-300);
         transition: opacity 0.2s ease;
         width: 1px;
         top: 8px;
         border-radius: 0.5px;
         bottom: 8px;
         left: 0;
-    } .segmented-control__focused_52kga {
+    } .segmented-control__focused_13y83 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/segmented-control/components/segment/inverted.css

@@ -0,0 +1,23 @@
+/* hash: 12q4x */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
+    --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segmented-control__segment_1cd8r {
+    color: var(--color-light-text-primary-inverted)
+} .segmented-control__segment_1cd8r:not(:first-child):before {
+        background-color: var(--color-light-neutral-translucent-300-inverted);
+    }

package/segmented-control/context.d.ts

@@ -2,6 +2,7 @@
 import { IDType } from "./typing";
 type ContextType = {
     onChange: (id: IDType) => void;
+    colors?: 'default' | 'inverted';
 };
 declare const SegmentedControlContext: import("react").Context<ContextType>;
 export { ContextType, SegmentedControlContext };

package/segmented-control/context.js

@@ -4,6 +4,7 @@ var React = require('react');
 
 var SegmentedControlContext = React.createContext({
     onChange: function () { return null; },
+    colors: 'default',
 });
 
 exports.SegmentedControlContext = SegmentedControlContext;

package/segmented-control/cssm/Component.d.ts

@@ -27,6 +27,10 @@ type SegmentedControlProps = {
      * Дочерние элементы
      */
     children: Array<ReactElement<SegmentProps>>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/segmented-control/cssm/Component.js

@@ -4,17 +4,25 @@ var React = require('react');
 var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var context = require('./context.js');
+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,
+};
 var MAX_SEGMENTS = 5;
 var SegmentedControl = function (_a) {
-    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, dataTestId = _a.dataTestId;
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
     var wrapperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var selectedBoxRef = React.useRef(null);
@@ -48,15 +56,16 @@ var SegmentedControl = function (_a) {
     }, []);
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    React__default.default.createElement(context.SegmentedControlContext.Provider, { value: { onChange: onChange } },
-        React__default.default.createElement("div", { ref: wrapperRef, className: cn__default.default(styles__default.default.wrapper, styles__default.default[shape], styles__default.default[size], className), "data-test-id": dataTestId },
+    React__default.default.createElement(context.SegmentedControlContext.Provider, { value: { onChange: onChange, colors: colors } },
+        React__default.default.createElement("div", { ref: wrapperRef, className: cn__default.default(styles__default.default.wrapper, colorStyles[colors].wrapper, styles__default.default[shape], styles__default.default[size], className), "data-test-id": dataTestId },
             React__default.default.createElement("div", { className: cn__default.default(styles__default.default.container) },
-                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.selectedBox, styles__default.default[shape]), ref: selectedBoxRef }),
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.selectedBox, colorStyles[colors].selectedBox, styles__default.default[shape]), ref: selectedBoxRef }),
                 React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner), ref: innerRef }, React__default.default.Children.map(children, function (item) {
                     var _a;
                     return React__default.default.cloneElement(item, {
-                        className: cn__default.default(styles__default.default.segment, (_a = {},
+                        className: cn__default.default(styles__default.default.segment, colorStyles[colors].segment, (_a = {},
                             _a[styles__default.default.selected] = item.props.id === selectedId,
+                            _a[colorStyles[colors].selected] = item.props.id === selectedId,
                             _a), item.props.className),
                     });
                 })))),

package/segmented-control/cssm/components/index.js

@@ -6,7 +6,9 @@ require('react-merge-refs');
 require('classnames');
 require('@alfalab/hooks');
 require('../context.js');
+require('./segment/default.module.css');
 require('./segment/index.module.css');
+require('./segment/inverted.module.css');
 
 
 

package/segmented-control/cssm/components/segment/Component.js

@@ -5,24 +5,32 @@ var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var context = require('../../context.js');
+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 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 Segment = React.forwardRef(function (_a, ref) {
     var id = _a.id, className = _a.className, title = _a.title, dataTestId = _a.dataTestId;
-    var onChange = React.useContext(context.SegmentedControlContext).onChange;
+    var _b = React.useContext(context.SegmentedControlContext), onChange = _b.onChange, _c = _b.colors, colors = _c === void 0 ? 'default' : _c;
     var segmentRef = React.useRef(null);
     var focused = hooks.useFocus(segmentRef, 'keyboard')[0];
     var handleClick = function () {
         onChange(id);
     };
-    return (React__default.default.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs__default.default([segmentRef, ref]), className: cn__default.default(styles__default.default.segment, className, styles__default.default.focused && focused), "data-test-id": dataTestId }, title));
+    return (React__default.default.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs__default.default([segmentRef, ref]), className: cn__default.default(styles__default.default.segment, colorStyles[colors].segment, className, styles__default.default.focused && focused), "data-test-id": dataTestId }, title));
 });
 
 exports.Segment = Segment;

package/segmented-control/cssm/components/segment/default.module.css

@@ -0,0 +1,22 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segment {
+    color: var(--color-light-text-primary)
+} .segment:not(:first-child):before {
+        background-color: var(--color-light-neutral-translucent-300);
+    }

package/segmented-control/cssm/components/segment/index.js

@@ -6,7 +6,9 @@ require('react-merge-refs');
 require('classnames');
 require('@alfalab/hooks');
 require('../../context.js');
+require('./default.module.css');
 require('./index.module.css');
+require('./inverted.module.css');
 
 
 

package/segmented-control/cssm/components/segment/index.module.css

@@ -1,8 +1,6 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-border-link: #2288fa;
-    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
-    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
@@ -32,7 +30,6 @@
     background-color: transparent;
     position: relative;
     font-family: var(--font-family-system);
-    color: var(--color-light-text-primary);
     transition: font-weight 0.2s ease, color 0.2s ease;
     cursor: pointer;
     white-space: nowrap;
@@ -41,7 +38,6 @@
 } .segment:not(:first-child):before {
         content: '';
         position: absolute;
-        background-color: var(--color-light-neutral-translucent-300);
         transition: opacity 0.2s ease;
         width: 1px;
         top: 8px;

package/segmented-control/cssm/components/segment/inverted.module.css

@@ -0,0 +1,22 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300-inverted: rgba(222, 222, 238, 0.13);
+    --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segment {
+    color: var(--color-light-text-primary-inverted)
+} .segment:not(:first-child):before {
+        background-color: var(--color-light-neutral-translucent-300-inverted);
+    }

package/segmented-control/cssm/context.d.ts

@@ -2,6 +2,7 @@
 import { IDType } from "./typing";
 type ContextType = {
     onChange: (id: IDType) => void;
+    colors?: 'default' | 'inverted';
 };
 declare const SegmentedControlContext: import("react").Context<ContextType>;
 export { ContextType, SegmentedControlContext };

package/segmented-control/cssm/context.js

@@ -4,6 +4,7 @@ var React = require('react');
 
 var SegmentedControlContext = React.createContext({
     onChange: function () { return null; },
+    colors: 'default',
 });
 
 exports.SegmentedControlContext = SegmentedControlContext;

package/segmented-control/cssm/default.module.css

@@ -0,0 +1,26 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-0: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .wrapper {
+    background-color: var(--color-light-neutral-translucent-200);
+} .segment.selected {
+    color: var(--color-light-text-primary);
+} .selectedBox {
+    border: 0.5px solid var(--color-light-neutral-translucent-200);
+    background-color: var(--color-light-neutral-translucent-0);
+}

package/segmented-control/cssm/index.js

@@ -6,10 +6,14 @@ require('react');
 require('@juggle/resize-observer');
 require('classnames');
 require('./context.js');
+require('./default.module.css');
 require('./index.module.css');
+require('./inverted.module.css');
 require('react-merge-refs');
 require('@alfalab/hooks');
+require('./components/segment/default.module.css');
 require('./components/segment/index.module.css');
+require('./components/segment/inverted.module.css');
 
 
 

package/segmented-control/cssm/index.module.css

@@ -1,8 +1,5 @@
 :root {
-} /* deprecated */ :root {
-    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
-    --color-static-neutral-0: #fff;
-    --color-static-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
@@ -26,7 +23,6 @@
     --size-xxs-height: 32px;
     --size-xs-height: 40px;
 } .wrapper {
-    background-color: var(--color-light-neutral-translucent-200);
     display: flex;
 } .container {
     position: relative;
@@ -39,10 +35,8 @@
 } .segment {
     font-size: 14px;
     line-height: 20px;
-    font-weight: 400
-} .segment.selected {
-        color: var(--color-static-text-primary);
-    } .selected {
+    font-weight: 400;
+} .selected {
     font-size: 14px;
     line-height: 20px;
     font-weight: 500
@@ -67,13 +61,11 @@
 } .rectangular .selectedBox {
         border-radius: var(--border-radius-m);
     } .selectedBox {
-    border: 0.5px solid var(--color-light-neutral-translucent-200);
     box-sizing: border-box;
     position: absolute;
     top: var(--gap-3xs);
     bottom: var(--gap-3xs);
     left: var(--gap-3xs);
     box-shadow: var(--shadow-s);
-    background-color: var(--color-static-neutral-0);
     transition: width 0.2s ease, transform 0.2s ease;
 }

package/segmented-control/cssm/inverted.module.css

@@ -0,0 +1,26 @@
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-0-inverted: rgba(214, 214, 229, 0.07);
+    --color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
+    --color-light-text-primary-inverted: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .wrapper {
+    background-color: var(--color-light-neutral-translucent-200-inverted);
+} .segment.selected {
+    color: var(--color-light-text-primary-inverted);
+} .selectedBox {
+    border: 0.5px solid var(--color-light-neutral-translucent-200-inverted);
+    background-color: var(--color-light-neutral-translucent-0-inverted);
+}

package/segmented-control/default.css

@@ -0,0 +1,27 @@
+/* hash: 1sik1 */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-0: #fff;
+    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segmented-control__wrapper_1282o {
+    background-color: var(--color-light-neutral-translucent-200);
+} .segmented-control__segment_1282o.segmented-control__selected_1282o {
+    color: var(--color-light-text-primary);
+} .segmented-control__selectedBox_1282o {
+    border: 0.5px solid var(--color-light-neutral-translucent-200);
+    background-color: var(--color-light-neutral-translucent-0);
+}

package/segmented-control/esm/Component.d.ts

@@ -27,6 +27,10 @@ type SegmentedControlProps = {
      * Дочерние элементы
      */
     children: Array<ReactElement<SegmentProps>>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/segmented-control/esm/Component.js

@@ -3,12 +3,22 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { SegmentedControlContext } from './context.js';
 
-var styles = {"wrapper":"segmented-control__wrapper_19wzw","container":"segmented-control__container_19wzw","inner":"segmented-control__inner_19wzw","segment":"segmented-control__segment_19wzw","selected":"segmented-control__selected_19wzw","xs":"segmented-control__xs_19wzw","rounded":"segmented-control__rounded_19wzw","rectangular":"segmented-control__rectangular_19wzw","selectedBox":"segmented-control__selectedBox_19wzw","xxs":"segmented-control__xxs_19wzw"};
+var defaultColors = {"wrapper":"segmented-control__wrapper_1282o","segment":"segmented-control__segment_1282o","selected":"segmented-control__selected_1282o","selectedBox":"segmented-control__selectedBox_1282o"};
+require('./default.css');
+
+var styles = {"wrapper":"segmented-control__wrapper_b1c96","container":"segmented-control__container_b1c96","inner":"segmented-control__inner_b1c96","segment":"segmented-control__segment_b1c96","selected":"segmented-control__selected_b1c96","xs":"segmented-control__xs_b1c96","rounded":"segmented-control__rounded_b1c96","rectangular":"segmented-control__rectangular_b1c96","selectedBox":"segmented-control__selectedBox_b1c96","xxs":"segmented-control__xxs_b1c96"};
 require('./index.css');
 
+var invertedColors = {"wrapper":"segmented-control__wrapper_1mtw4","segment":"segmented-control__segment_1mtw4","selected":"segmented-control__selected_1mtw4","selectedBox":"segmented-control__selectedBox_1mtw4"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var MAX_SEGMENTS = 5;
 var SegmentedControl = function (_a) {
-    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, dataTestId = _a.dataTestId;
+    var className = _a.className, selectedId = _a.selectedId, onChange = _a.onChange, _b = _a.shape, shape = _b === void 0 ? 'rectangular' : _b, _c = _a.size, size = _c === void 0 ? 'xxs' : _c, defaultChildren = _a.children, _d = _a.colors, colors = _d === void 0 ? 'default' : _d, dataTestId = _a.dataTestId;
     var wrapperRef = useRef(null);
     var innerRef = useRef(null);
     var selectedBoxRef = useRef(null);
@@ -42,15 +52,16 @@ var SegmentedControl = function (_a) {
     }, []);
     return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    React.createElement(SegmentedControlContext.Provider, { value: { onChange: onChange } },
-        React.createElement("div", { ref: wrapperRef, className: cn(styles.wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
+    React.createElement(SegmentedControlContext.Provider, { value: { onChange: onChange, colors: colors } },
+        React.createElement("div", { ref: wrapperRef, className: cn(styles.wrapper, colorStyles[colors].wrapper, styles[shape], styles[size], className), "data-test-id": dataTestId },
             React.createElement("div", { className: cn(styles.container) },
-                React.createElement("div", { className: cn(styles.selectedBox, styles[shape]), ref: selectedBoxRef }),
+                React.createElement("div", { className: cn(styles.selectedBox, colorStyles[colors].selectedBox, styles[shape]), ref: selectedBoxRef }),
                 React.createElement("div", { className: cn(styles.inner), ref: innerRef }, React.Children.map(children, function (item) {
                     var _a;
                     return React.cloneElement(item, {
-                        className: cn(styles.segment, (_a = {},
+                        className: cn(styles.segment, colorStyles[colors].segment, (_a = {},
                             _a[styles.selected] = item.props.id === selectedId,
+                            _a[colorStyles[colors].selected] = item.props.id === selectedId,
                             _a), item.props.className),
                     });
                 })))),

package/segmented-control/esm/components/segment/Component.js

@@ -4,18 +4,28 @@ import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 import { SegmentedControlContext } from '../../context.js';
 
-var styles = {"segment":"segmented-control__segment_52kga","focused":"segmented-control__focused_52kga"};
+var defaultColors = {"segment":"segmented-control__segment_v214r"};
+require('./default.css');
+
+var styles = {"segment":"segmented-control__segment_13y83","focused":"segmented-control__focused_13y83"};
 require('./index.css');
 
+var invertedColors = {"segment":"segmented-control__segment_1cd8r"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var Segment = forwardRef(function (_a, ref) {
     var id = _a.id, className = _a.className, title = _a.title, dataTestId = _a.dataTestId;
-    var onChange = useContext(SegmentedControlContext).onChange;
+    var _b = useContext(SegmentedControlContext), onChange = _b.onChange, _c = _b.colors, colors = _c === void 0 ? 'default' : _c;
     var segmentRef = useRef(null);
     var focused = useFocus(segmentRef, 'keyboard')[0];
     var handleClick = function () {
         onChange(id);
     };
-    return (React.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs([segmentRef, ref]), className: cn(styles.segment, className, focused), "data-test-id": dataTestId }, title));
+    return (React.createElement("button", { type: 'button', onClick: handleClick, ref: mergeRefs([segmentRef, ref]), className: cn(styles.segment, colorStyles[colors].segment, className, focused), "data-test-id": dataTestId }, title));
 });
 
 export { Segment };

package/segmented-control/esm/components/segment/default.css

@@ -0,0 +1,23 @@
+/* hash: 10368 */
+:root {
+} /* deprecated */ :root {
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+} .segmented-control__segment_v214r {
+    color: var(--color-light-text-primary)
+} .segmented-control__segment_v214r:not(:first-child):before {
+        background-color: var(--color-light-neutral-translucent-300);
+    }