@consta/uikit 3.4.0 → 3.8.0

package/__internal__/cjs-src/utils/array.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.groupBy = exports.chunk = exports.range = exports.updateAt = exports.sortBy = void 0;
+exports.groupBy = exports.chunk = exports.range = exports.putBefore = exports.updateAt = exports.sortBy = void 0;
 var tslib_1 = require("tslib");
 exports.sortBy = function (array, param, order, sortFn) {
     if (order === void 0) { order = 'asc'; }
@@ -10,10 +10,18 @@ exports.sortBy = function (array, param, order, sortFn) {
     };
     return tslib_1.__spread(array).sort(compareFn);
 };
-exports.updateAt = function (array, index, newItem) {
-    return index >= array.length
-        ? array
-        : tslib_1.__spread(array.slice(0, index), [newItem], array.slice(index + 1, array.length));
+exports.updateAt = function (array, index, newItem, isExpand) {
+    if (isExpand === void 0) { isExpand = false; }
+    var fixedIndex = index < 0 ? 0 : index;
+    if (fixedIndex >= array.length) {
+        return isExpand ? tslib_1.__spread(array, [newItem]) : array;
+    }
+    return tslib_1.__spread(array.slice(0, fixedIndex), [
+        newItem
+    ], array.slice(fixedIndex + (isExpand ? 0 : 1), array.length));
+};
+exports.putBefore = function (array, index, newItem) {
+    return exports.updateAt(array, index, newItem, true);
 };
 exports.range = function (n) { return tslib_1.__spread(Array(n).keys()); };
 exports.chunk = function (array, size) {

package/__internal__/cjs-src/utils/date/endOfCentury.d.ts

@@ -0,0 +1 @@
+export declare const endOfCentury: (date: Date) => Date;

package/__internal__/cjs-src/utils/date/endOfCentury.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+exports.endOfCentury = void 0;
+var getCentury_1 = require("./getCentury");
+exports.endOfCentury = function (date) { return new Date(getCentury_1.getCentury(date) + 99, 11, 1, 23, 59, 59, 999); };

package/__internal__/cjs-src/utils/date/getCentury.d.ts

@@ -0,0 +1 @@
+export declare const getCentury: (date: Date) => number;

package/__internal__/cjs-src/utils/date/getCentury.js

@@ -0,0 +1,14 @@
+"use strict";
+exports.__esModule = true;
+exports.getCentury = void 0;
+var date_fns_1 = require("date-fns");
+exports.getCentury = function (date) {
+    var year = date_fns_1.getYear(date);
+    if (year === 0) {
+        return 0;
+    }
+    if (year > 0) {
+        return Math.trunc(year / 100) * 100;
+    }
+    return Math.floor(year / 100) * 100;
+};

package/__internal__/cjs-src/utils/date/index.d.ts

@@ -0,0 +1,12 @@
+export declare const leapYear = 2020;
+export declare const dateComparer: (a?: Date | undefined, b?: Date | undefined) => number;
+export declare const getStartAndEndDate: (date1: Date, date2: Date) => Date[];
+export declare const minDateDefault: Date;
+export declare const maxDateDefault: Date;
+export * from './isInMinMaxDade';
+export * from './isDateRange';
+export * from './isOnlyOneDateInRange';
+export * from './getCentury';
+export * from './startOfCentury';
+export * from './endOfCentury';
+export * from './isEqualDate';

package/__internal__/cjs-src/utils/date/index.js

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.maxDateDefault = exports.minDateDefault = exports.getStartAndEndDate = exports.dateComparer = exports.leapYear = void 0;
+var tslib_1 = require("tslib");
+var setYear_1 = tslib_1.__importDefault(require("date-fns/setYear"));
+exports.leapYear = 2020;
+exports.dateComparer = function (a, b) { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.getTime()) !== null && _a !== void 0 ? _a : 0) - ((_b = b === null || b === void 0 ? void 0 : b.getTime()) !== null && _b !== void 0 ? _b : 0); };
+exports.getStartAndEndDate = function (date1, date2) {
+    return [date1, date2].sort(exports.dateComparer);
+};
+exports.minDateDefault = setYear_1["default"](new Date(1970, 0, 1, 0, 0, 0, 0), 1);
+exports.maxDateDefault = new Date(9999, 11, 31, 23, 59, 59);
+tslib_1.__exportStar(require("./isInMinMaxDade"), exports);
+tslib_1.__exportStar(require("./isDateRange"), exports);
+tslib_1.__exportStar(require("./isOnlyOneDateInRange"), exports);
+tslib_1.__exportStar(require("./getCentury"), exports);
+tslib_1.__exportStar(require("./startOfCentury"), exports);
+tslib_1.__exportStar(require("./endOfCentury"), exports);
+tslib_1.__exportStar(require("./isEqualDate"), exports);

package/__internal__/cjs-src/utils/date/isDateRange.d.ts

@@ -0,0 +1,2 @@
+import { DateRange } from '../types/Date';
+export declare const isDateRange: (value?: Date | DateRange) => value is DateRange;

package/__internal__/cjs-src/utils/date/isDateRange.js

@@ -0,0 +1,9 @@
+"use strict";
+exports.__esModule = true;
+exports.isDateRange = void 0;
+var type_guards_1 = require("../type-guards");
+exports.isDateRange = function (value) {
+    return Array.isArray(value) &&
+        value.length === 2 &&
+        value.every(function (date) { return date instanceof Date || !type_guards_1.isDefined(date); });
+};

package/__internal__/cjs-src/utils/date/isEqualDate.d.ts

@@ -0,0 +1 @@
+export declare const isEqualDate: (date1: Date, date2: Date) => boolean;

package/__internal__/cjs-src/utils/date/isEqualDate.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.isEqualDate = void 0;
+exports.isEqualDate = function (date1, date2) {
+    return date1.getTime() === date2.getTime();
+};

package/__internal__/cjs-src/utils/date/isInMinMaxDade.d.ts

@@ -0,0 +1 @@
+export declare const isInMinMaxDade: (date: Date, minDate?: Date | undefined, maxDate?: Date | undefined, startOf?: ((date: Date) => Date) | undefined, endOf?: ((date: Date) => Date) | undefined) => boolean;

package/__internal__/cjs-src/utils/date/isInMinMaxDade.js

@@ -0,0 +1,27 @@
+"use strict";
+exports.__esModule = true;
+exports.isInMinMaxDade = void 0;
+var date_fns_1 = require("date-fns");
+var isMinMax = function (date, minDate, maxDate) {
+    var minDateTime = minDate === null || minDate === void 0 ? void 0 : minDate.getTime();
+    var maxDateTime = maxDate === null || maxDate === void 0 ? void 0 : maxDate.getTime();
+    if (minDate && maxDate && minDateTime && maxDateTime) {
+        return minDateTime < maxDateTime
+            ? date_fns_1.isWithinInterval(date, { start: minDate, end: maxDate })
+            : false;
+    }
+    var dateTime = date.getTime();
+    if (minDateTime && !maxDateTime) {
+        return minDateTime <= dateTime;
+    }
+    if (!minDateTime && maxDateTime) {
+        return maxDateTime >= dateTime;
+    }
+    return true;
+};
+exports.isInMinMaxDade = function (date, minDate, maxDate, startOf, endOf) {
+    if (!minDate && !maxDate) {
+        return true;
+    }
+    return isMinMax(date, (startOf && minDate && startOf(minDate)) || minDate, (endOf && maxDate && endOf(maxDate)) || maxDate);
+};

package/__internal__/cjs-src/utils/date/isOnlyOneDateInRange.d.ts

@@ -0,0 +1,2 @@
+import { DateRange } from '../types/Date';
+export declare const isOnlyOneDateInRange: (range: DateRange) => boolean;

package/__internal__/cjs-src/utils/date/isOnlyOneDateInRange.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.isOnlyOneDateInRange = void 0;
+exports.isOnlyOneDateInRange = function (range) {
+    return Boolean((range[0] && !range[1]) || (!range[0] && range[1]));
+};

package/__internal__/cjs-src/utils/date/startOfCentury.d.ts

@@ -0,0 +1 @@
+export declare const startOfCentury: (date: Date) => Date;

package/__internal__/cjs-src/utils/date/startOfCentury.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+exports.startOfCentury = void 0;
+var getCentury_1 = require("./getCentury");
+exports.startOfCentury = function (date) {
+    var century = getCentury_1.getCentury(date);
+    if (century === 0) {
+        return new Date('0000-01-01T00:00:00');
+    }
+    return new Date(century, 0, 1, 0, 0, 0, 0);
+};

package/__internal__/cjs-src/utils/storybook.d.ts

@@ -33,5 +33,5 @@ declare type CallbackSelectorParams = {
     name: string;
     isActive?: boolean;
 };
-export declare const callbackWithSelector: <T extends (...args: any[]) => any>({ name, isActive }: CallbackSelectorParams, fn: T) => (...args: Parameters<T>) => void | ReturnType<T>;
+export declare const callbackWithSelector: <T extends (...args: any[]) => any>({ name, isActive }: CallbackSelectorParams, fn?: T | undefined) => ((...args: Parameters<T>) => void | ReturnType<T>) | undefined;
 export {};

package/__internal__/cjs-src/utils/storybook.js

@@ -15,17 +15,19 @@ exports.createMetadata = function (params) { return params; };
 exports.getStoryIds = function (obj) { return Object.keys(obj); };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 exports.callbackWithSelector = function (_a, fn) {
-    var name = _a.name, _b = _a.isActive, isActive = _b === void 0 ? true : _b;
+    var name = _a.name, _b = _a.isActive, isActive = _b === void 0 ? false : _b;
     var defaultOptions = ['undefined', '() => void'];
     var options = isActive ? defaultOptions.reverse() : defaultOptions;
-    var fnIsActive = addon_knobs_1.select(name, options, options[0]) !== 'undefined';
+    if (addon_knobs_1.select(name, options, options[0]) === 'undefined') {
+        return undefined;
+    }
     return function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
-        if (fnIsActive) {
-            addon_actions_1.action(name).apply(void 0, tslib_1.__spread(args));
+        addon_actions_1.action(name).apply(void 0, tslib_1.__spread(args));
+        if (fn) {
             return fn.apply(void 0, tslib_1.__spread(args));
         }
     };

package/__internal__/src/components/BasicSelectDeprecated/BasicSelectDeprecated.js

@@ -5,6 +5,7 @@ import { useSelect } from '../../hooks/useSelectDeprecated/useSelect';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { scrollIntoView } from '../../utils/scrollIntoView';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
+import { COMPONENT_NAME } from '../SelectComponents/cnSelect';
 import { cnSelect } from '../SelectComponentsDeprecated/cnSelect';
 import { getSelectDropdownForm } from '../SelectComponentsDeprecated/helpers';
 import { SelectContainer } from '../SelectComponentsDeprecated/SelectContainer/SelectContainer';
@@ -15,7 +16,7 @@ export var BasicSelect = function (props) {
     var defaultOptionsRef = useRef(null);
     var controlRef = useRef(null);
     var getOptionKeyDefault = props.getOptionLabel;
-    var _a = usePropsHandler(cnSelect(), props, controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, options = _a.options, onChange = _a.onChange, value = _a.value, getOptionLabel = _a.getOptionLabel, _b = _a.getOptionKey, getOptionKey = _b === void 0 ? getOptionKeyDefault : _b, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _c = _a.dropdownRef, dropdownRef = _c === void 0 ? defaultOptionsRef : _c, _d = _a.form, form = _d === void 0 ? DefaultPropForm : _d, _e = _a.view, view = _e === void 0 ? DefaultPropView : _e, _f = _a.size, size = _f === void 0 ? DefaultPropSize : _f, dropdownClassName = _a.dropdownClassName, name = _a.name, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "options", "onChange", "value", "getOptionLabel", "getOptionKey", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name"]);
+    var _a = usePropsHandler(COMPONENT_NAME, props, controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, options = _a.options, onChange = _a.onChange, value = _a.value, getOptionLabel = _a.getOptionLabel, _b = _a.getOptionKey, getOptionKey = _b === void 0 ? getOptionKeyDefault : _b, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _c = _a.dropdownRef, dropdownRef = _c === void 0 ? defaultOptionsRef : _c, _d = _a.form, form = _d === void 0 ? DefaultPropForm : _d, _e = _a.view, view = _e === void 0 ? DefaultPropView : _e, _f = _a.size, size = _f === void 0 ? DefaultPropSize : _f, dropdownClassName = _a.dropdownClassName, name = _a.name, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "options", "onChange", "value", "getOptionLabel", "getOptionKey", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name"]);
     var toggleRef = useRef(null);
     var _g = __read(useState(false), 2), isFocused = _g[0], setIsFocused = _g[1];
     var handlerChangeValue = function (v) {

package/__internal__/src/components/Button/Button.d.ts

@@ -30,5 +30,6 @@ export declare type Props = {
     title?: string;
     children?: never;
 };
+export declare const COMPONENT_NAME: "Button";
 export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
 export declare const Button: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<Props, "button">;

package/__internal__/src/components/Button/Button.js

@@ -23,7 +23,8 @@ export var buttonPropForm = [
     'defaultBrick',
 ];
 export var buttonPropFormDefault = buttonPropForm[0];
-export var cnButton = cn('Button');
+export var COMPONENT_NAME = 'Button';
+export var cnButton = cn(COMPONENT_NAME);
 var sizeMap = {
     xs: 'xs',
     s: 'xs',
@@ -37,7 +38,7 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 export var Button = forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler(cnButton(), props), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = __rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var _a = usePropsHandler(COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = __rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
     var Tag = as;
     var IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);
     var IconLeft = iconLeft;

package/__internal__/src/components/Calendar/Calendar.d.ts

@@ -2,7 +2,7 @@ import './Calendar.css';
 import { CalendarComponent } from './helpers';
 export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
 export declare const Calendar: CalendarComponent;
-export * from './CalendarСell/CalendarСell';
+export * from './CalendarCell/CalendarCell';
 export * from './CalendarDay/CalendarDay';
 export * from './CalendarMonth/CalendarMonth';
 export * from './CalendarMonthLabel/CalendarMonthLabel';

package/__internal__/src/components/Calendar/Calendar.js

@@ -18,7 +18,7 @@ export var Calendar = React.forwardRef(function (props, ref) {
     var ViewComponent = getSizeByMap(viewMap, view);
     return React.createElement(ViewComponent, __assign({}, otherProps, { ref: ref, className: cnCalendar(null, [className]) }));
 });
-export * from './CalendarСell/CalendarСell';
+export * from './CalendarCell/CalendarCell';
 export * from './CalendarDay/CalendarDay';
 export * from './CalendarMonth/CalendarMonth';
 export * from './CalendarMonthLabel/CalendarMonthLabel';

package/__internal__/src/components/Calendar/{Calendar/320/241ell/Calendar/320/241ell.css → CalendarCell/CalendarCell.css}

@@ -1,4 +1,4 @@
-.CalendarСell {
+.CalendarCell {
   --bg-color: var(--color-control-bg-ghost);
   position: relative;
   display: -webkit-box;
@@ -14,12 +14,12 @@
   height: var(--control-height-s);
 }
 
-  .CalendarСell_range {
+  .CalendarCell_range {
     background: var(--bg-color);
   }
 
-  .CalendarСell_range_first::before,
-    .CalendarСell_range_last::before {
+  .CalendarCell_range_first::before,
+    .CalendarCell_range_last::before {
       content: '';
       position: absolute;
       top: 0;
@@ -27,13 +27,13 @@
       background: var(--bg-color);
     }
 
-  .CalendarСell_range_first::before {
+  .CalendarCell_range_first::before {
       right: 0;
       left: calc(var(--space-2xs) / 2);
       border-radius: 50% 0 0 50%;
     }
 
-  .CalendarСell_range_last::before {
+  .CalendarCell_range_last::before {
       right: calc(var(--space-2xs) / 2);
       left: 0;
       border-radius: 0 50% 50% 0;

package/__internal__/src/components/Calendar/{Calendar/320/241ell/Calendar/320/241ell.d.ts → CalendarCell/CalendarCell.d.ts}

@@ -1,4 +1,4 @@
-import './CalendarСell.css';
+import './CalendarCell.css';
 import React from 'react';
 import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
 export declare const calendarCellPropRange: readonly ["first", "last", true, false];

package/__internal__/src/components/Calendar/{Calendar/320/241ell/Calendar/320/241ell.js → CalendarCell/CalendarCell.js}

@@ -1,9 +1,9 @@
 import { __assign, __rest } from "tslib";
-import './CalendarСell.css';
+import './CalendarCell.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
 export var calendarCellPropRange = ['first', 'last', true, false];
-export var cnCalendarCell = cn('CalendarСell');
+export var cnCalendarCell = cn('CalendarCell');
 export var CalendarCell = function (props) {
     var range = props.range, children = props.children, className = props.className, otherProps = __rest(props, ["range", "children", "className"]);
     return (React.createElement("div", __assign({}, otherProps, { className: cnCalendarCell({ range: range }, [className]) }), children));

package/__internal__/src/components/Calendar/CalendarMonth/CalendarMonth.d.ts

@@ -1,8 +1,8 @@
 import './CalendarMonth.css';
 import React from 'react';
 import { PropsWithJsxAttributes } from '../../../utils/types/PropsWithJsxAttributes';
+import { CalendarCellProps } from '../CalendarCell/CalendarCell';
 import { CalendarDayProps } from '../CalendarDay/CalendarDay';
-import { CalendarCellProps } from '../CalendarСell/CalendarСell';
 declare type DayOfMonth = Omit<CalendarDayProps & CalendarCellProps, 'ref'>;
 export declare type CalendarMonthProps = PropsWithJsxAttributes<{
     children?: never;

package/__internal__/src/components/Calendar/CalendarMonth/CalendarMonth.js

@@ -3,8 +3,8 @@ import './CalendarMonth.css';
 import React from 'react';
 import { cn } from '../../../utils/bem';
 import { Text } from '../../Text/Text';
+import { CalendarCell } from '../CalendarCell/CalendarCell';
 import { CalendarDay } from '../CalendarDay/CalendarDay';
-import { CalendarCell } from '../CalendarСell/CalendarСell';
 export var cnCalendarMonth = cn('CalendarMonth');
 export var CalendarMonth = function (props) {
     var className = props.className, daysOfWeek = props.daysOfWeek, daysOfMonth = props.daysOfMonth, otherProps = __rest(props, ["className", "daysOfWeek", "daysOfMonth"]);

package/__internal__/src/components/Calendar/helpers.d.ts

@@ -3,7 +3,7 @@ import { Locale } from 'date-fns';
 import { range } from '../../utils/array';
 import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { CalendarCellPropRange } from './CalendarСell/CalendarСell';
+import { CalendarCellPropRange } from './CalendarCell/CalendarCell';
 export declare const calendarPropView: readonly ["oneMonth", "twoMonths", "slider"];
 export declare type CalendarPropView = typeof calendarPropView[number];
 export declare const calendarPropViewDefault: CalendarPropView;

package/__internal__/src/components/Checkbox/Checkbox.d.ts

@@ -35,6 +35,7 @@ declare type Props = {
     children?: never;
 };
 export declare type CheckboxProps = PropsWithHTMLAttributes<Props, HTMLLabelElement>;
+export declare const COMPONENT_NAME: "Checkbox";
 export declare const cnCheckbox: import("@bem-react/classname").ClassNameFormatter;
 export declare const Checkbox: React.ForwardRefExoticComponent<Props & Pick<React.HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLLabelElement>>;
 export {};

package/__internal__/src/components/Checkbox/Checkbox.js

@@ -11,10 +11,11 @@ export var checkboxPropView = ['primary', 'ghost'];
 export var checkboxPropViewDefault = checkboxPropView[0];
 export var checkboxPropAlign = ['center', 'top'];
 export var checkboxPropAlignDefault = checkboxPropAlign[0];
-export var cnCheckbox = cn('Checkbox');
+export var COMPONENT_NAME = 'Checkbox';
+export var cnCheckbox = cn(COMPONENT_NAME);
 export var Checkbox = React.forwardRef(function (props, ref) {
     var checkboxRef = React.useRef(null);
-    var _a = usePropsHandler(cnCheckbox(), props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? checkboxPropAlignDefault : _e, disabled = _a.disabled, _f = _a.intermediate, intermediate = _f === void 0 ? false : _f, className = _a.className, label = _a.label, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, required = _a.required, step = _a.step, tabIndex = _a.tabIndex, inputRef = _a.inputRef, otherProps = __rest(_a, ["checked", "name", "size", "view", "align", "disabled", "intermediate", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var _a = usePropsHandler(COMPONENT_NAME, props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? checkboxPropAlignDefault : _e, disabled = _a.disabled, _f = _a.intermediate, intermediate = _f === void 0 ? false : _f, className = _a.className, label = _a.label, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, readOnly = _a.readOnly, required = _a.required, step = _a.step, tabIndex = _a.tabIndex, inputRef = _a.inputRef, otherProps = __rest(_a, ["checked", "name", "size", "view", "align", "disabled", "intermediate", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
     var handleChange = function (e) {
         if (onChange) {
             onChange({ e: e, checked: !checked });

package/__internal__/src/components/ChoiceGroup/ChoiceGroup.css

@@ -1,12 +1,15 @@
 .ChoiceGroup {
+  --choice-group-bg-color: transparent;
+  --choice-group-border-color: var(--color-control-bg-border-default);
   position: relative;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   max-width: 100%;
+  background-color: var(--choice-group-bg-color);
   border-radius: var(--choice-radius);
-  -webkit-box-shadow: inset 0 0 0 var(--control-border-width) var(--color-control-bg-border-default);
-          box-shadow: inset 0 0 0 var(--control-border-width) var(--color-control-bg-border-default);
+  -webkit-box-shadow: inset 0 0 0 var(--control-border-width) var(--choice-group-border-color);
+          box-shadow: inset 0 0 0 var(--control-border-width) var(--choice-group-border-color);
 }
 
   .ChoiceGroup_view_primary {
@@ -56,7 +59,10 @@
   .ChoiceGroup_form_default,
     .ChoiceGroup_form_brick {
       --divider-width: var(--control-border-width);
-      --divider-height: 65%;
+      --divider-height: unset;
+      --divider-scale: 0.65;
+      --divider-radius: 0;
+      --divider-align-self: unset;
     }
 
   .ChoiceGroup_form_default {
@@ -71,6 +77,9 @@
       --choice-radius: 99em;
       --divider-width: 4px;
       --divider-height: 4px;
+      --divider-scale: 1;
+      --divider-radius: 99em;
+      --divider-align-self: center;
     }
 
   .ChoiceGroup_form_round .ChoiceGroup-Label {
@@ -78,11 +87,11 @@
         padding-left: calc(var(--choice-space) * 1.2);
       }
 
-  .ChoiceGroup_form_round .ChoiceGroup-Label::after {
-          border-radius: 99em;
-        }
-
   .ChoiceGroup-Label {
+    --choice-group-label-color: var(--color-control-typo-default);
+    --choice-group-label-bg-color: transparent;
+    --choice-group-label-bg-left: 0;
+    --choice-helper-bg-disabled: transparent;
     position: relative;
     z-index: 0;
     display: -webkit-box;
@@ -95,14 +104,12 @@
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     height: var(--choice-height);
     padding: 0 var(--choice-space) 0 var(--choice-space);
-    color: var(--color-control-typo-default);
+    color: var(--choice-group-label-color);
+    background-color: var(--choice-group-label-bg-color);
     border-radius: var(--choice-radius);
     font-size: var(--choice-font-size);
     font-weight: var(--font-weight-text-regular);
@@ -117,55 +124,64 @@
       fill 0.15s ease;
     transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease,
       fill 0.15s ease, -webkit-box-shadow 0.15s ease;
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1;
   }
 
+  .ChoiceGroup-Label::after {
+      content: '';
+      position: absolute;
+      z-index: 0;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--choice-helper-bg-disabled);
+    }
+
   .ChoiceGroup-Input {
     position: absolute;
+    opacity: 0;
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
-    opacity: 0;
-  }
-
-  .ChoiceGroup-Label:last-child {
-    padding-right: var(--choice-space);
-  }
-
-  .ChoiceGroup-Label:not(:last-child) {
-    margin-right: var(--control-border-width);
   }
 
-  /* Палочка */
+  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked):hover {
+      --choice-group-label-color: var(--color-control-typo-secondary-hover);
+    }
 
-  .ChoiceGroup-Label:not(:first-child)::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 50%;
-    left: 0;
+  .ChoiceGroup-Divider {
+    --divider-bg-color: var(--color-control-bg-border-default);
     width: var(--divider-width);
+    min-width: var(--divider-width);
     height: var(--divider-height);
-    -webkit-transform: translateY(-50%);
-            transform: translateY(-50%);
+    background-color: var(--divider-bg-color);
+    border-radius: var(--divider-radius);
+    -webkit-transform: scaleY(var(--divider-scale));
+            transform: scaleY(var(--divider-scale));
+    -ms-flex-item-align: var(--divider-align-self);
+        align-self: var(--divider-align-self);
   }
 
-  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked):hover {
-      color: var(--color-control-typo-secondary-hover);
-    }
-
-  .ChoiceGroup-Label:not(.ChoiceGroup-Label_checked)::after {
-      background-color: var(--color-control-bg-border-default);
+  .ChoiceGroup-Divider_checked:not(.ChoiceGroup-Divider_disabled) {
+      --divider-bg-color: transparent;
     }
 
   .ChoiceGroup-Label_checked {
-    color: var(--choice-text-color);
-    background-color: var(--choice-bg-color);
+    --choice-group-label-color: var(--choice-text-color);
+    --choice-group-label-bg-color: var(--choice-bg-color);
   }
 
-  .ChoiceGroup-Label_checked + .ChoiceGroup-Label::after {
-      background-color: transparent;
+  .ChoiceGroup-Label_checked:not(.ChoiceGroup-Label_disabled) {
+      --divider-bg-color: transparent;
     }
 
+  .ChoiceGroup-Label_checked:not(.ChoiceGroup-Label_disabled) + .ChoiceGroup-Divider {
+        --divider-bg-color: transparent;
+      }
+
   .ChoiceGroup-Text {
     overflow: hidden;
     white-space: nowrap;
@@ -180,11 +196,33 @@
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
-      width: calc(var(--choice-height) + var(--control-border-width) * 2);
+      width: var(--choice-height);
       padding: 0;
-      padding-right: var(--control-border-width);
     }
 
   .ChoiceGroup_width_full {
       width: 100%;
     }
+
+  .ChoiceGroup-Label_disabled {
+    --choice-group-label-color: var(--color-control-typo-disable);
+    --choice-group-label-bg-color: var(--color-control-bg-disable);
+    pointer-events: none;
+  }
+
+  .ChoiceGroup_disabled {
+    --choice-group-bg-color: var(--color-control-bg-disable);
+    --choice-group-border-color: transparent;
+  }
+
+  .ChoiceGroup_disabled .ChoiceGroup-Label_disabled:not(.ChoiceGroup-Label_checked) {
+      --choice-group-label-bg-color: transparent;
+    }
+
+  .ChoiceGroup_disabled .ChoiceGroup-Divider {
+      --divider-bg-color: transparent;
+    }
+
+  .ChoiceGroup:not(.ChoiceGroup_disabled) .ChoiceGroup-Label_disabled.ChoiceGroup-Label_checked::after {
+      --choice-helper-bg-disabled: var(--color-control-bg-disable);
+    }

package/__internal__/src/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -28,6 +28,8 @@ declare type CommonProps<ITEM> = {
     getIcon?: ChoiceGroupPropGetIcon<ITEM>;
     name: string;
     children?: never;
+    disabled?: boolean;
+    getDisabled?: (item: ITEM) => boolean | undefined;
 };
 declare type OnChangeMultiple<ITEM> = (props: {
     e: React.ChangeEvent<HTMLInputElement>;