@consta/uikit 3.5.0 → 3.6.0

package/Switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Switch",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SwitchGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SwitchGroup",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Table",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tabs",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tag",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TagBase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TagBase",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Text",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/TextField/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/TextField",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Theme",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/ThemeToggler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/ThemeToggler",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Timer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Timer",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Tooltip",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/User/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/User",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelect",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/UserSelectDeprecated/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/UserSelectDeprecated",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

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

@@ -8,7 +8,8 @@ var useSelect_1 = require("../../hooks/useSelectDeprecated/useSelect");
 var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
 var scrollIntoView_1 = require("../../utils/scrollIntoView");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
-var cnSelect_1 = require("../SelectComponentsDeprecated/cnSelect");
+var cnSelect_1 = require("../SelectComponents/cnSelect");
+var cnSelect_2 = require("../SelectComponentsDeprecated/cnSelect");
 var helpers_1 = require("../SelectComponentsDeprecated/helpers");
 var SelectContainer_1 = require("../SelectComponentsDeprecated/SelectContainer/SelectContainer");
 var SelectDropdown_1 = require("../SelectComponentsDeprecated/SelectDropdown/SelectDropdown");
@@ -18,7 +19,7 @@ exports.BasicSelect = function (props) {
     var defaultOptionsRef = react_1.useRef(null);
     var controlRef = react_1.useRef(null);
     var getOptionKeyDefault = props.getOptionLabel;
-    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.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 ? types_1.DefaultPropForm : _d, _e = _a.view, view = _e === void 0 ? types_1.DefaultPropView : _e, _f = _a.size, size = _f === void 0 ? types_1.DefaultPropSize : _f, dropdownClassName = _a.dropdownClassName, name = _a.name, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "options", "onChange", "value", "getOptionLabel", "getOptionKey", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name"]);
+    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.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 ? types_1.DefaultPropForm : _d, _e = _a.view, view = _e === void 0 ? types_1.DefaultPropView : _e, _f = _a.size, size = _f === void 0 ? types_1.DefaultPropSize : _f, dropdownClassName = _a.dropdownClassName, name = _a.name, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "options", "onChange", "value", "getOptionLabel", "getOptionKey", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name"]);
     var toggleRef = react_1.useRef(null);
     var _g = tslib_1.__read(react_1.useState(false), 2), isFocused = _g[0], setIsFocused = _g[1];
     var handlerChangeValue = function (v) {
@@ -97,13 +98,13 @@ exports.BasicSelect = function (props) {
         return (react_1["default"].createElement(SelectItem_1.SelectItem, tslib_1.__assign({ id: itemId, label: label, item: item, active: active, hovered: hovered, multiple: false, size: size, indent: indent }, restProps)));
     };
     return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form }, restProps),
-        react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('Control'), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
-            react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlInner') },
-                react_1["default"].createElement("div", { className: cnSelect_1.cnSelect('ControlValueContainer') },
-                    react_1["default"].createElement("input", tslib_1.__assign({}, getToggleProps(), { type: "button", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, ref: toggleRef, className: cnSelect_1.cnSelect('FakeField'), readOnly: true })),
-                    arrValue ? (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('ControlValue'), title: getOptionLabel(arrValue[0]) }, getOptionLabel(arrValue[0]))) : (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Placeholder'), title: "placeholder" }, placeholder || '')))),
-            react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('Indicators') },
-                react_1["default"].createElement("button", { type: "button", className: cnSelect_1.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
-                    react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_1.cnSelect('DropdownIndicatorIcon') })))),
+        react_1["default"].createElement("div", { className: cnSelect_2.cnSelect('Control'), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
+            react_1["default"].createElement("div", { className: cnSelect_2.cnSelect('ControlInner') },
+                react_1["default"].createElement("div", { className: cnSelect_2.cnSelect('ControlValueContainer') },
+                    react_1["default"].createElement("input", tslib_1.__assign({}, getToggleProps(), { type: "button", name: name, onFocus: handleInputFocus, onBlur: handleInputBlur, "aria-label": ariaLabel, ref: toggleRef, className: cnSelect_2.cnSelect('FakeField'), readOnly: true })),
+                    arrValue ? (react_1["default"].createElement("span", { className: cnSelect_2.cnSelect('ControlValue'), title: getOptionLabel(arrValue[0]) }, getOptionLabel(arrValue[0]))) : (react_1["default"].createElement("span", { className: cnSelect_2.cnSelect('Placeholder'), title: "placeholder" }, placeholder || '')))),
+            react_1["default"].createElement("span", { className: cnSelect_2.cnSelect('Indicators') },
+                react_1["default"].createElement("button", { type: "button", className: cnSelect_2.cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
+                    react_1["default"].createElement(IconSelect_1.IconSelect, { size: "xs", className: cnSelect_2.cnSelect('DropdownIndicatorIcon') })))),
         react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, visibleOptions: visibleOptions, highlightedIndex: highlightedIndex, getOptionProps: getOptionProps, dropdownRef: dropdownRef, id: id, selectedValues: arrValue, getOptionKey: getOptionKey, form: helpers_1.getSelectDropdownForm(form), className: dropdownClassName, renderItem: renderItemDefault })));
 };

package/__internal__/cjs-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__/cjs-src/components/Button/Button.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.Button = exports.cnButton = exports.buttonPropFormDefault = exports.buttonPropForm = exports.buttonPropWidthDefault = exports.buttonPropWidth = exports.buttonPropViewDefault = exports.buttonPropView = exports.buttonPropSizeDefault = exports.buttonPropSize = void 0;
+exports.Button = exports.cnButton = exports.COMPONENT_NAME = exports.buttonPropFormDefault = exports.buttonPropForm = exports.buttonPropWidthDefault = exports.buttonPropWidth = exports.buttonPropViewDefault = exports.buttonPropView = exports.buttonPropSizeDefault = exports.buttonPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Button.css");
 var react_1 = tslib_1.__importDefault(require("react"));
@@ -26,7 +26,8 @@ exports.buttonPropForm = [
     'defaultBrick',
 ];
 exports.buttonPropFormDefault = exports.buttonPropForm[0];
-exports.cnButton = bem_1.cn('Button');
+exports.COMPONENT_NAME = 'Button';
+exports.cnButton = bem_1.cn(exports.COMPONENT_NAME);
 var sizeMap = {
     xs: 'xs',
     s: 'xs',
@@ -40,7 +41,7 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 exports.Button = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler_1.usePropsHandler(exports.cnButton(), props), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.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 = tslib_1.__rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? exports.buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? exports.buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? exports.buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? exports.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 = tslib_1.__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__/cjs-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__/cjs-src/components/Calendar/Calendar.js

@@ -21,7 +21,7 @@ exports.Calendar = react_1["default"].forwardRef(function (props, ref) {
     var ViewComponent = getSizeByMap_1.getSizeByMap(viewMap, view);
     return react_1["default"].createElement(ViewComponent, tslib_1.__assign({}, otherProps, { ref: ref, className: exports.cnCalendar(null, [className]) }));
 });
-tslib_1.__exportStar(require("./Calendar\u0421ell/Calendar\u0421ell"), exports);
+tslib_1.__exportStar(require("./CalendarCell/CalendarCell"), exports);
 tslib_1.__exportStar(require("./CalendarDay/CalendarDay"), exports);
 tslib_1.__exportStar(require("./CalendarMonth/CalendarMonth"), exports);
 tslib_1.__exportStar(require("./CalendarMonthLabel/CalendarMonthLabel"), exports);

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/Calendar/{Calendar/320/241ell/Calendar/320/241ell.js → CalendarCell/CalendarCell.js}

@@ -2,11 +2,11 @@
 exports.__esModule = true;
 exports.CalendarCell = exports.cnCalendarCell = exports.calendarCellPropRange = void 0;
 var tslib_1 = require("tslib");
-require("./Calendar\u0421ell.css");
+require("./CalendarCell.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
 exports.calendarCellPropRange = ['first', 'last', true, false];
-exports.cnCalendarCell = bem_1.cn('CalendarСell');
+exports.cnCalendarCell = bem_1.cn('CalendarCell');
 exports.CalendarCell = function (props) {
     var range = props.range, children = props.children, className = props.className, otherProps = tslib_1.__rest(props, ["range", "children", "className"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnCalendarCell({ range: range }, [className]) }), children));

package/__internal__/cjs-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__/cjs-src/components/Calendar/CalendarMonth/CalendarMonth.js

@@ -6,17 +6,17 @@ require("./CalendarMonth.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
 var Text_1 = require("../../Text/Text");
+var CalendarCell_1 = require("../CalendarCell/CalendarCell");
 var CalendarDay_1 = require("../CalendarDay/CalendarDay");
-var Calendar_ell_1 = require("../Calendar\u0421ell/Calendar\u0421ell");
 exports.cnCalendarMonth = bem_1.cn('CalendarMonth');
 exports.CalendarMonth = function (props) {
     var className = props.className, daysOfWeek = props.daysOfWeek, daysOfMonth = props.daysOfMonth, otherProps = tslib_1.__rest(props, ["className", "daysOfWeek", "daysOfMonth"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnCalendarMonth(null, [className]) }),
-        daysOfWeek.map(function (item, index) { return (react_1["default"].createElement(Calendar_ell_1.CalendarCell, { key: exports.cnCalendarMonth('DayOfWeek', { index: index, item: item }) },
+        daysOfWeek.map(function (item, index) { return (react_1["default"].createElement(CalendarCell_1.CalendarCell, { key: exports.cnCalendarMonth('DayOfWeek', { index: index, item: item }) },
             react_1["default"].createElement(Text_1.Text, { as: "span", view: "ghost", size: "2xs", transform: "uppercase" }, item))); }),
         daysOfMonth.map(function (_a, index) {
             var range = _a.range, dayProps = tslib_1.__rest(_a, ["range"]);
-            return (react_1["default"].createElement(Calendar_ell_1.CalendarCell, { key: exports.cnCalendarMonth('DayOfMonth', { index: index, number: dayProps.number }), range: range },
+            return (react_1["default"].createElement(CalendarCell_1.CalendarCell, { key: exports.cnCalendarMonth('DayOfMonth', { index: index, number: dayProps.number }), range: range },
                 react_1["default"].createElement(CalendarDay_1.CalendarDay, tslib_1.__assign({}, dayProps))));
         })));
 };

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.Checkbox = exports.cnCheckbox = exports.checkboxPropAlignDefault = exports.checkboxPropAlign = exports.checkboxPropViewDefault = exports.checkboxPropView = exports.checkboxPropSizeDefault = exports.checkboxPropSize = void 0;
+exports.Checkbox = exports.cnCheckbox = exports.COMPONENT_NAME = exports.checkboxPropAlignDefault = exports.checkboxPropAlign = exports.checkboxPropViewDefault = exports.checkboxPropView = exports.checkboxPropSizeDefault = exports.checkboxPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Checkbox.css");
 var react_1 = tslib_1.__importDefault(require("react"));
@@ -14,10 +14,11 @@ exports.checkboxPropView = ['primary', 'ghost'];
 exports.checkboxPropViewDefault = exports.checkboxPropView[0];
 exports.checkboxPropAlign = ['center', 'top'];
 exports.checkboxPropAlignDefault = exports.checkboxPropAlign[0];
-exports.cnCheckbox = bem_1.cn('Checkbox');
+exports.COMPONENT_NAME = 'Checkbox';
+exports.cnCheckbox = bem_1.cn(exports.COMPONENT_NAME);
 exports.Checkbox = react_1["default"].forwardRef(function (props, ref) {
     var checkboxRef = react_1["default"].useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(exports.cnCheckbox(), props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? exports.checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? exports.checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? exports.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 = tslib_1.__rest(_a, ["checked", "name", "size", "view", "align", "disabled", "intermediate", "className", "label", "onChange", "onFocus", "onBlur", "readOnly", "required", "step", "tabIndex", "inputRef"]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props, checkboxRef), _b = _a.checked, checked = _b === void 0 ? false : _b, name = _a.name, _c = _a.size, size = _c === void 0 ? exports.checkboxPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? exports.checkboxPropViewDefault : _d, _e = _a.align, align = _e === void 0 ? exports.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 = tslib_1.__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__/cjs-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__/cjs-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>;