@consta/uikit 3.2.0 → 3.6.0

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>;

package/__internal__/src/components/ChoiceGroup/ChoiceGroup.js

@@ -21,13 +21,22 @@ var sizeMap = {
 };
 export var cnChoiceGroup = cn('ChoiceGroup');
 export var ChoiceGroup = React.forwardRef(function (props, ref) {
-    var _a = props.size, size = _a === void 0 ? choiceGroupDefaultSize : _a, _b = props.form, form = _b === void 0 ? choiceGroupDefaultForm : _b, _c = props.view, view = _c === void 0 ? choiceGroupDefaultView : _c, _d = props.width, width = _d === void 0 ? choiceGroupWidthDefault : _d, onlyIcon = props.onlyIcon, iconSizeProp = props.iconSize, _e = props.value, value = _e === void 0 ? null : _e, _f = props.multiple, multiple = _f === void 0 ? false : _f, items = props.items, getLabel = props.getLabel, onChange = props.onChange, getIcon = props.getIcon, name = props.name, className = props.className, otherProps = __rest(props, ["size", "form", "view", "width", "onlyIcon", "iconSize", "value", "multiple", "items", "getLabel", "onChange", "getIcon", "name", "className"]);
-    var _g = useChoiceGroup({
+    var _a = props.size, size = _a === void 0 ? choiceGroupDefaultSize : _a, _b = props.form, form = _b === void 0 ? choiceGroupDefaultForm : _b, _c = props.view, view = _c === void 0 ? choiceGroupDefaultView : _c, _d = props.width, width = _d === void 0 ? choiceGroupWidthDefault : _d, onlyIcon = props.onlyIcon, iconSizeProp = props.iconSize, _e = props.value, value = _e === void 0 ? null : _e, _f = props.multiple, multiple = _f === void 0 ? false : _f, items = props.items, getLabel = props.getLabel, onChange = props.onChange, getIcon = props.getIcon, name = props.name, className = props.className, _g = props.disabled, disabled = _g === void 0 ? false : _g, getDisabled = props.getDisabled, otherProps = __rest(props, ["size", "form", "view", "width", "onlyIcon", "iconSize", "value", "multiple", "items", "getLabel", "onChange", "getIcon", "name", "className", "disabled", "getDisabled"]);
+    var _h = useChoiceGroup({
         value: value,
         getKey: getLabel,
         callBack: onChange,
         multiple: multiple
-    }), getOnChange = _g.getOnChange, getChecked = _g.getChecked;
+    }), getOnChange = _h.getOnChange, getChecked = _h.getChecked;
     var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
-    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon }, [className]) }), items.map(function (item) { return (React.createElement(ChoiceGroupItem, { key: getLabel(item), onChange: getOnChange(item), checked: getChecked(item), label: getLabel(item).toString(), icon: getIcon && getIcon(item), iconSize: iconSize, multiple: multiple, onlyIcon: onlyIcon, name: name })); })));
+    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnChoiceGroup({ size: size, form: form, view: view, width: width, onlyIcon: onlyIcon, disabled: disabled }, [className]) }), items.map(function (item, idx) {
+        var itemChecked = getChecked(item);
+        var itemDisabled = !!getDisabled && getDisabled(item);
+        return (React.createElement(React.Fragment, { key: getLabel(item) },
+            idx > 0 && (React.createElement("div", { className: cnChoiceGroup('Divider', {
+                    checked: itemChecked,
+                    disabled: itemDisabled
+                }) })),
+            React.createElement(ChoiceGroupItem, { onChange: getOnChange(item), checked: itemChecked, label: getLabel(item).toString(), icon: getIcon && getIcon(item), iconSize: iconSize, multiple: multiple, onlyIcon: onlyIcon, name: name, disabled: disabled || itemDisabled })));
+    })));
 });

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

@@ -9,6 +9,7 @@ declare type Props = {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     checked: boolean;
     multiple: boolean;
+    disabled?: boolean;
 };
 export declare const ChoiceGroupItem: React.FC<Props>;
 export {};

package/__internal__/src/components/ChoiceGroup/Item/ChoiceGroup-Item.js

@@ -3,12 +3,12 @@ import React, { useState } from 'react';
 import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
 import { cnChoiceGroup } from '../ChoiceGroup';
 export var ChoiceGroupItem = function (props) {
-    var label = props.label, onChange = props.onChange, checked = props.checked, multiple = props.multiple, Icon = props.icon, onlyIcon = props.onlyIcon, name = props.name, iconSize = props.iconSize;
-    var _a = __read(useState(false), 2), focus = _a[0], setFocus = _a[1];
+    var label = props.label, onChange = props.onChange, checked = props.checked, multiple = props.multiple, Icon = props.icon, onlyIcon = props.onlyIcon, name = props.name, iconSize = props.iconSize, _a = props.disabled, disabled = _a === void 0 ? false : _a;
+    var _b = __read(useState(false), 2), focus = _b[0], setFocus = _b[1];
     var handleBlur = function () { return setFocus(false); };
     var handleFocus = function () { return setFocus(true); };
-    return (React.createElement("label", { className: cnChoiceGroup('Label', { focus: focus, checked: checked }, [cnMixFocus()]), title: onlyIcon ? label : undefined },
-        React.createElement("input", { type: multiple ? 'checkbox' : 'radio', className: cnChoiceGroup('Input'), checked: checked, onFocus: handleFocus, onBlur: handleBlur, value: name + "-" + label, onChange: onChange, name: name }),
+    return (React.createElement("label", { className: cnChoiceGroup('Label', { focus: focus, checked: checked, disabled: disabled }, [cnMixFocus()]), title: onlyIcon ? label : undefined },
+        React.createElement("input", { type: multiple ? 'checkbox' : 'radio', className: cnChoiceGroup('Input'), checked: checked, onFocus: handleFocus, onBlur: handleBlur, value: name + "-" + label, onChange: onChange, name: name, disabled: disabled }),
         Icon && React.createElement(Icon, { className: cnChoiceGroup('Icon'), size: iconSize }),
         !onlyIcon && React.createElement("span", { className: cnChoiceGroup('Text') }, label)));
 };

package/__internal__/src/components/Collapse/Collapse.css

@@ -110,10 +110,6 @@
         background: var(--color-control-bg-clear-hover);
       }
 
-  .Collapse-Label_divider {
-      border-bottom: 1px solid var(--color-bg-border);
-    }
-
   .Collapse-Label_iconPosition_right {
         -webkit-box-orient: horizontal;
         -webkit-box-direction: reverse;
@@ -134,6 +130,10 @@
       max-height: 200vh;
     }
 
+  .Collapse-Body_divider {
+      border-bottom: 1px solid var(--color-bg-border);
+    }
+
   .Collapse-Side {
     margin-left: var(--elements-offset);
     line-height: 0;

package/__internal__/src/components/Collapse/Collapse.js

@@ -46,12 +46,11 @@ export var Collapse = React.forwardRef(function (props, ref) {
     return (React.createElement("div", { ref: ref, className: cnCollapse({ size: size, view: view, horizontalSpace: horizontalSpace }, [className]), style: style },
         React.createElement("div", __assign({ className: cnCollapse('Label', {
                 hoverEffect: hoverEffect,
-                divider: divider,
                 iconPosition: iconPosition
             }) }, otherProps),
             React.createElement(CollapseIcon, { className: cnCollapse('Icon', { position: iconPosition }), size: getSizeByMap(sizeIconMap, size), icon: icon, closeIcon: closeIcon, isOpen: isOpen, direction: directionIcon, closeDirection: closeDirectionIcon }),
             React.createElement(Text, { className: cnCollapse('LabelText'), view: view, size: size }, label),
             iconPosition === 'left' && renderSide(rightSide)),
-        React.createElement("div", { className: cnCollapse('Body', { isOpen: isOpen }) },
+        React.createElement("div", { className: cnCollapse('Body', { isOpen: isOpen, divider: divider }) },
             React.createElement("div", { className: cnCollapse('Content') }, children))));
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { PropForm, PropSize, PropView, RenderItemProps } from '../SelectComponents/types';
+import { PropForm, PropSize, PropStatus, PropView, RenderItemProps } from '../SelectComponents/types';
 export declare type DefaultItem = {
     label: string;
     id: string | number;
@@ -38,6 +38,7 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     view?: PropView;
     placeholder?: string;
     ariaLabel?: string;
+    status?: PropStatus;
     dropdownClassName?: string;
     dropdownRef?: React.RefObject<HTMLDivElement>;
     name?: string;
@@ -62,6 +63,9 @@ export declare type ComboboxProps<ITEM = DefaultItem, GROUP = DefaultGroup, MULT
     getItemDisabled?: PropGetItemDisabled<ITEM>;
     getGroupLabel?: PropGetGroupLabel<GROUP>;
     getGroupKey?: PropGetGroupKey<GROUP>;
+    label?: string;
+    caption?: string;
+    labelPosition?: 'top' | 'left';
 }, HTMLDivElement> & (ITEM extends {
     label: DefaultItem['label'];
 } ? {} : {
@@ -92,11 +96,12 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     items: ITEM[];
     onChange: PropOnChange<ITEM, MULTIPLE>;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     placeholder?: string | undefined;
     ariaLabel?: string | undefined;
+    status?: "alert" | "success" | "warning" | undefined;
     dropdownClassName?: string | undefined;
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     name?: string | undefined;
@@ -121,6 +126,9 @@ export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGr
     getItemDisabled?: PropGetItemDisabled<ITEM> | undefined;
     getGroupLabel?: PropGetGroupLabel<GROUP> | undefined;
     getGroupKey?: PropGetGroupKey<GROUP> | undefined;
+    label?: string | undefined;
+    caption?: string | undefined;
+    labelPosition?: "left" | "top" | undefined;
 } & Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "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" | "children" | "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<HTMLDivElement> & (ITEM extends {
     label: string;
 } ? {} : {

package/__internal__/src/components/ContextMenu/ContextMenuLevel/ContextMenuLevel.js

@@ -74,9 +74,8 @@ export var ContextMenuLevel = React.forwardRef(function (props, ref) {
     };
     var itemsRefs = useMemo(constructItemRefs, [items]);
     useEffect(function () {
-        if (level !== 0 && hovered === false && hoveredParenLevel < level) {
+        if (level !== 0 && !hovered && hoveredParenLevel < level) {
             clearTimeout(timers[level]);
-            // привел к типам так как Jest почемуто думает что setTimeout вернет number
             timers[level] = setTimeout(function () { return deleteLevel(level); }, closeDelay);
         }
         return function () {

package/__internal__/src/components/DateTimeCanary/DateTime100YearSlider/DateTime100YearSlider.css

@@ -0,0 +1,5 @@
+.DateTime100YearSlider {
+  --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
+  --item-width: calc((var(--date-time-cell-width) * 14 - var(--control-height-m) * 2) / 11);
+  --parent-width: calc(var(--item-width) * 10);
+}

package/__internal__/src/components/DateTimeCanary/DateTime100YearSlider/DateTime100YearSlider.d.ts

@@ -0,0 +1,14 @@
+import './DateTime100YearSlider.css';
+import React from 'react';
+import { Locale } from 'date-fns';
+import { DateRange } from '../../../utils/types/Date';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+export declare type DateTime100YearSliderProps = PropsWithHTMLAttributes<{
+    currentVisibleDate: Date;
+    onChange: (date: Date) => void;
+    children?: never;
+    value?: Date | DateRange;
+    locale?: Locale;
+}, HTMLDivElement>;
+export declare const cnDateTime100YearSlider: import("@bem-react/classname").ClassNameFormatter;
+export declare const DateTime100YearSlider: React.FC<DateTime100YearSliderProps>;