@consta/uikit 3.13.0 → 3.16.0

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
-import { TextFieldPropAutoComplete, TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
+import { AutoCompete } from '../../../utils/types/AutoComplete';
+import { TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
 import { EventInterceptorHandler } from '../EventInterceptor';
 export declare type Props = {
     className?: string;
@@ -23,7 +24,7 @@ export declare type Props = {
     placeholder?: string;
     leftSide?: string | IconComponent;
     rightSide?: string | IconComponent;
-    autoComplete?: TextFieldPropAutoComplete;
+    autoComplete?: AutoCompete;
     max?: number | string;
     min?: number | string;
     readOnly?: boolean;
@@ -64,12 +65,12 @@ export declare const useTextFieldEventsHandler: <P extends {
         size?: "xs" | "s" | "m" | undefined;
     }, HTMLSpanElement>> | undefined;
     withClearButton?: boolean | undefined;
-    autoComplete?: "on" | "off" | undefined;
+    autoComplete?: "on" | "off" | "tel" | "url" | "email" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
     max?: string | number | undefined;
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    step?: string | number | undefined;
+    step?: string | number | number[] | undefined;
     tabIndex?: number | undefined;
     inputContainerRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

package/__internal__/cjs-src/components/FieldLabel/FieldLabel.d.ts

@@ -1,7 +1,7 @@
 import './FieldLabel.css';
 export declare type FieldLabelPropSize = 'xs' | 's' | 'm' | 'l';
 declare type FieldLabelProps = {
-    size: FieldLabelPropSize;
+    size?: FieldLabelPropSize;
     required?: boolean;
 };
 export declare const FieldLabel: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<FieldLabelProps, "div">;

package/__internal__/cjs-src/components/Modal/Modal.d.ts

@@ -1,10 +1,11 @@
 import './Modal.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare const modalPropWidth: readonly ["auto"];
 declare type ModalPropWidth = typeof modalPropWidth[number];
 declare const modalPropPosition: readonly ["center", "top"];
 declare type ModalPropPosition = typeof modalPropPosition[number];
-declare type ModalProps = {
+declare type ModalProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -13,13 +14,12 @@ declare type ModalProps = {
     onOverlayClick?: (event: MouseEvent) => void;
     onClickOutside?: (event: MouseEvent) => void;
     onEsc?: (event: KeyboardEvent) => void;
-    className?: string;
     rootClassName?: string;
     width?: ModalPropWidth;
     position?: ModalPropPosition;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
     refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];
-};
+}, HTMLDivElement>;
 export declare const Modal: React.FC<ModalProps>;
 export {};

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

@@ -32,7 +32,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 exports.Modal = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, rest = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, style = props.style, otherProps = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName", "style"]);
     var ref = react_1.useRef(null);
     var portalRef = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
@@ -48,8 +48,8 @@ exports.Modal = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition_1.cnForCssTransition(cnModal), timeout: 200, nodeRef: portalRef },
-        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef },
+        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && react_1["default"].createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({ className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }, rest),
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: tslib_1.__spread((refsForExcludeClickOutside || []), [ref]) }, children)))));
 };

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

@@ -15,7 +15,7 @@ var ProgressStepBarItem_1 = require("./ProgressStepBarItem/ProgressStepBarItem")
 var ProgressStepBarLine_1 = require("./ProgressStepBarLine/ProgressStepBarLine");
 var helpers_1 = require("./helpers");
 function ProgressStepBarRender(props, ref) {
-    var _a = helpers_1.withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? helpers_1.propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? helpers_1.propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick"]);
+    var _a = helpers_1.withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? helpers_1.propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? helpers_1.propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, style = _a.style, otherProps = tslib_1.__rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     var _e = tslib_1.__read(react_1.useState([]), 2), lines = _e[0], setLines = _e[1];
     var _f = tslib_1.__read(react_1.useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
     var containerRef = react_1.useRef(null);
@@ -72,11 +72,12 @@ function ProgressStepBarRender(props, ref) {
             pointRef: stepsRef[index],
             direction: direction,
             onClick: onClick || onItemClickHandler,
-            key: helpers_1.cnProgressStepBar({ index: index })
+            key: helpers_1.cnProgressStepBar({ index: index }),
+            tooltipZIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined
         };
     };
     var isOverflow = useOverflow_1.useOverflow({ currentRef: listRef });
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: helpers_1.cnProgressStepBar(null, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
+    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: style, className: helpers_1.cnProgressStepBar(null, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
         isOverflow && direction !== 'vertical' && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowLeft_1.IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: helpers_1.cnProgressStepBar('Button', { side: 'left' }), onClick: function () { return changePosition(true); } })),
         react_1["default"].createElement("div", { ref: listRef, className: helpers_1.cnProgressStepBar('List', { direction: direction, overflow: isOverflow }) },
             react_1["default"].createElement(ProgressStepBarLine_1.ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),

package/__internal__/cjs-src/components/ProgressStepBarCanary/helpers.d.ts

@@ -68,6 +68,7 @@ export declare type ProgressStepBarItemProps = {
     progress?: boolean;
     status?: PropStatus | 'system';
     tooltipContent?: string;
+    tooltipZIndex?: number;
     position?: PropPosition;
     direction: PropDirection;
     size: PropSize;

package/__internal__/cjs-src/components/ResponsesExit/ResponsesExit.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const ResponsesExit: React.ForwardRefExoticComponent<Pick<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    size?: "m" | "l" | undefined;
+    image: React.FC<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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">>;
+    actions?: React.ReactNode;
+    children?: undefined;
+}, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "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" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "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" | "description" | "size" | "actions"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+exports.ResponsesExit = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var ResponsesExit_1 = require("../../responsesImages/ResponsesExit/ResponsesExit");
+var Button_1 = require("../Button/Button");
+var createResponses_1 = require("../Responses/createResponses");
+exports.ResponsesExit = createResponses_1.createResponses({
+    name: 'ResponsesExit',
+    image: ResponsesExit_1.ResponsesExit,
+    title: 'Вы вышли из системы ',
+    description: 'Хотите вернутся?',
+    actions: react_1["default"].createElement(Button_1.Button, { label: "\u0412\u043E\u0439\u0442\u0438 \u0441\u043D\u043E\u0432\u0430" })
+});

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

@@ -18,8 +18,8 @@ var helpers_2 = require("./helpers");
 function SelectRender(props, ref) {
     var defaultDropdownRef = react_1.useRef(null);
     var controlRef = react_1.useRef(null);
-    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef"]);
-    var _g = useSelect_1.useSelect({
+    var _a = usePropsHandler_1.usePropsHandler(cnSelect_1.COMPONENT_NAME, helpers_2.withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? types_1.defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? types_1.defaultPropView : _d, _e = _a.size, size = _e === void 0 ? types_1.defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, _g = _a.labelForEmptyItems, labelForEmptyItems = _g === void 0 ? helpers_1.defaultLabelForEmptyItems : _g, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = tslib_1.__rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "labelForEmptyItems", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
+    var _h = useSelect_1.useSelect({
         items: items,
         groups: groups,
         value: value,
@@ -35,7 +35,7 @@ function SelectRender(props, ref) {
         multiple: false,
         onBlur: onBlur,
         onFocus: onFocus
-    }), getKeyProps = _g.getKeyProps, getOptionProps = _g.getOptionProps, isOpen = _g.isOpen, visibleItems = _g.visibleItems, isFocused = _g.isFocused, handleInputFocus = _g.handleInputFocus, handleInputBlur = _g.handleInputBlur, handleToggleDropdown = _g.handleToggleDropdown, inputRef = _g.inputRef, handleInputClick = _g.handleInputClick, notFound = _g.notFound;
+    }), getKeyProps = _h.getKeyProps, getOptionProps = _h.getOptionProps, isOpen = _h.isOpen, visibleItems = _h.visibleItems, isFocused = _h.isFocused, handleInputFocus = _h.handleInputFocus, handleInputBlur = _h.handleInputBlur, handleToggleDropdown = _h.handleToggleDropdown, inputRef = _h.inputRef, handleInputClick = _h.handleInputClick, notFound = _h.notFound, hasItems = _h.hasItems;
     var dropdownForm = helpers_1.getSelectDropdownForm(form);
     var renderItemDefault = function (props) {
         var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
@@ -46,7 +46,7 @@ function SelectRender(props, ref) {
         return (react_1["default"].createElement("span", { className: cnSelect_1.cnSelect('ControlValue'), title: label }, label));
     };
     var renderValue = renderValueProp || renderValueDefault;
-    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref }, restProps),
+    return (react_1["default"].createElement(SelectContainer_1.SelectContainer, tslib_1.__assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref, style: style }, 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') },
@@ -56,7 +56,7 @@ function SelectRender(props, ref) {
             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(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound })));
+        react_1["default"].createElement(SelectDropdown_1.SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, labelForEmptyItems: labelForEmptyItems, hasItems: hasItems, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
 }
 exports.Select = react_1.forwardRef(SelectRender);
 tslib_1.__exportStar(require("./helpers"), exports);

package/__internal__/cjs-src/components/Select/helpers.d.ts

@@ -42,6 +42,7 @@ export declare type SelectProps<ITEM = DefaultItem, GROUP = DefaultGroup> = Prop
     dropdownRef?: React.RefObject<HTMLDivElement>;
     required?: boolean;
     name?: string;
+    labelForEmptyItems?: string;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM>;
     renderValue?: PropRenderValue<ITEM>;
@@ -101,6 +102,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     required?: boolean | undefined;
     name?: string | undefined;
+    labelForEmptyItems?: string | undefined;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM> | undefined;
     renderValue?: PropRenderValue<ITEM> | undefined;

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.css

@@ -104,7 +104,8 @@
               transform: translateY(var(--transition-spase));
     }
 
-  .SelectDropdown-LabelForNotFound {
+  .SelectDropdown-LabelForNotFound,
+  .SelectDropdown-LabelForEmptyItems {
     padding: 0 var(--space-xs);
   }
 

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts

@@ -23,7 +23,9 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getGroupLabel?: (group: GROUP) => string;
     labelForCreate?: string;
     labelForNotFound?: string;
+    labelForEmptyItems?: string;
     notFound?: boolean;
+    hasItems?: boolean;
 }>;
 declare type SelectDropdown = <ITEM, GROUP>(props: Props<ITEM, GROUP>) => React.ReactElement | null;
 export declare const SelectDropdown: SelectDropdown;

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -18,11 +18,11 @@ exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
 var cnSelectDropdown = bem_1.cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition_1.cnForCssTransition(cnSelectDropdown);
 exports.SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound;
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, ref = props.ref, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
     var getIndex = fabricIndex_1.fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        react_1["default"].createElement(Popover_1.Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true },
+        react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
             react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (useSelect_1.isOptionForCreate(group)) {
@@ -34,5 +34,6 @@ exports.SelectDropdown = function (props) {
                             return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
 };

package/__internal__/cjs-src/components/SelectComponents/helpers.d.ts

@@ -3,4 +3,5 @@ import { PropForm } from './types';
 export declare function getSelectDropdownForm(form: PropForm): SelectDropdownPropForm;
 export declare const defaultlabelForNotFound = "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
 export declare const defaultlabelForCreate = "+";
+export declare const defaultLabelForEmptyItems = "\u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0443\u0441\u0442";
 export declare const getInputWidth: (controlInnerRef: React.RefObject<HTMLDivElement>, helperInputFakeElement: React.RefObject<HTMLDivElement>) => number;

package/__internal__/cjs-src/components/SelectComponents/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.getInputWidth = exports.defaultlabelForCreate = exports.defaultlabelForNotFound = exports.getSelectDropdownForm = void 0;
+exports.getInputWidth = exports.defaultLabelForEmptyItems = exports.defaultlabelForCreate = exports.defaultlabelForNotFound = exports.getSelectDropdownForm = void 0;
 var SelectDropdown_1 = require("./SelectDropdown/SelectDropdown");
 var mapDropdownForms = {
     "default": SelectDropdown_1.selectDropdownform[0],
@@ -22,6 +22,7 @@ function getSelectDropdownForm(form) {
 exports.getSelectDropdownForm = getSelectDropdownForm;
 exports.defaultlabelForNotFound = 'Не найдено';
 exports.defaultlabelForCreate = '+';
+exports.defaultLabelForEmptyItems = 'Список пуст';
 exports.getInputWidth = function (controlInnerRef, helperInputFakeElement) {
     if (!controlInnerRef.current || !helperInputFakeElement.current) {
         return 20;

package/__internal__/cjs-src/components/Sidebar/Sidebar.d.ts

@@ -1,11 +1,12 @@
 import './Sidebar.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare type DivProps = JSX.IntrinsicElements['div'];
 declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
 declare type SidebarPropPosition = typeof sidebarPropPosition[number];
 export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
 export declare type SidebarPropSize = typeof sidebarPropSize[number];
-declare type SidebarProps = {
+declare type SidebarProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -16,10 +17,10 @@ declare type SidebarProps = {
     onEsc?: (event: KeyboardEvent) => void;
     position?: SidebarPropPosition;
     size?: SidebarPropSize;
-    className?: string;
+    rootClassName?: string;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
-};
+}, HTMLDivElement>;
 declare type SidebarContentProps = {
     className?: string;
     children: React.ReactNode;

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

@@ -35,7 +35,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 exports.Sidebar = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, rest = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, style = props.style, rootClassName = props.rootClassName, otherProps = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
     react_1.useEffect(function () {
@@ -50,9 +50,9 @@ exports.Sidebar = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: exports.cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(exports.cnSidebar), timeout: 200 },
-        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container },
+        react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && react_1["default"].createElement("div", { className: exports.cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
+            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { style: tslib_1.__assign(tslib_1.__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 exports.Sidebar.Content = SidebarContent;

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

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 require("./Slider.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useFlag_1 = require("../../hooks/useFlag/useFlag");
+var useSortSteps_1 = require("../../hooks/useSortSteps/useSortSteps");
 var bem_1 = require("../../utils/bem");
 var getByMap_1 = require("../../utils/getByMap");
 var FieldCaption_1 = require("../FieldCaption/FieldCaption");
@@ -23,11 +24,12 @@ var sizeMap = {
     l: 'm'
 };
 function SliderRender(props, ref) {
-    var _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, onChange = props.onChange, onAfterChange = props.onAfterChange, value = props.value, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? helper_1.defaultPropSize : _e, _f = props.view, view = _f === void 0 ? 'default' : _f, leftSide = props.leftSide, rightSide = props.rightSide, withTooltip = props.withTooltip, _g = props.range, range = _g === void 0 ? false : _g, label = props.label, status = props.status, caption = props.caption, _h = props.tooltipFormatter, tooltipFormatter = _h === void 0 ? helper_1.defaultTooltipFormatter : _h, className = props.className, otherProps = tslib_1.__rest(props, ["min", "max", "onChange", "onAfterChange", "value", "step", "disabled", "size", "view", "leftSide", "rightSide", "withTooltip", "range", "label", "status", "caption", "tooltipFormatter", "className"]);
+    var _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, onChange = props.onChange, onAfterChange = props.onAfterChange, value = props.value, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? helper_1.defaultPropSize : _e, _f = props.view, view = _f === void 0 ? 'default' : _f, leftSide = props.leftSide, rightSide = props.rightSide, withTooltip = props.withTooltip, _g = props.range, range = _g === void 0 ? false : _g, label = props.label, status = props.status, caption = props.caption, _h = props.tooltipFormatter, tooltipFormatter = _h === void 0 ? helper_1.defaultTooltipFormatter : _h, className = props.className, style = props.style, otherProps = tslib_1.__rest(props, ["min", "max", "onChange", "onAfterChange", "value", "step", "disabled", "size", "view", "leftSide", "rightSide", "withTooltip", "range", "label", "status", "caption", "tooltipFormatter", "className", "style"]);
     var _j = tslib_1.__read(useFlag_1.useFlag(false), 2), isHovered = _j[0], _k = _j[1], on = _k.on, off = _k.off;
     var leftButtonRef = react_1.useRef(null);
     var rightButtonRef = react_1.useRef(null);
     var sliderRef = react_1.useRef(null);
+    var sortedSteps = useSortSteps_1.useSortSteps({ step: step, min: min, max: max });
     var IconRight = rightSide;
     var IconLeft = helper_1.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap_1.getByMap(sizeMap, size);
@@ -37,29 +39,29 @@ function SliderRender(props, ref) {
         value: value,
         min: min,
         max: max,
-        step: step,
+        step: sortedSteps,
         onChange: onChange,
         onAfterChange: onAfterChange,
         sliderRef: sliderRef,
         buttonRefs: [leftButtonRef, rightButtonRef]
     }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, handlePress = _l.handlePress, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
-    var _m = useSliderStationing_1.useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, step, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
+    var _m = useSliderStationing_1.useSliderStationing(currentValue.length === 1 ? currentValue[0] : currentValue, min, max, view, range, sortedSteps, [leftButtonRef, rightButtonRef], sliderRef), lineSizes = _m.lineSizes, buttonPositions = _m.buttonPositions;
     var changeHovered = function (status) {
         if (status)
             on();
         else
             off();
     };
-    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: cnSlider({ size: size }, [className]) }, otherProps),
+    return (react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: cnSlider({ size: size }, [className]), style: style }, otherProps),
         label && (react_1["default"].createElement(FieldLabel_1.FieldLabel, { className: cnSlider('Label'), size: size }, label)),
         react_1["default"].createElement("div", { className: cnSlider('Container') },
             leftSide === 'input' && helper_1.isNotRangeParams(props) && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
-                react_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_1.isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: step, disabled: disabled }))),
+                react_1["default"].createElement(SliderInput_1.SliderInput, { value: props.value, onChange: function (params) { var _a; return helper_1.isNotRangeParams(props) && ((_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params)); }, size: size, min: min, max: max, status: status, step: sortedSteps, disabled: disabled }))),
             IconLeft && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'left' }) },
                 react_1["default"].createElement(IconLeft, { size: iconSize, view: "secondary" }))),
             react_1["default"].createElement("div", { className: cnSlider('Control'), ref: sliderRef },
                 react_1["default"].createElement(SliderLine_1.SliderLine, { hovered: isHovered || typeof activeButton === 'number', onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
-                currentValue.map(function (val, index) { return (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered || typeof activeButton === 'number', buttonRef: leftButtonRef, popoverPosition: popoverPosition[index], onKeyPress: onKeyPress, onFocus: onFocus, handlePress: handlePress, disabled: disabled, position: buttonPositions[index], focused: activeButton === index, buttonLabel: index, withTooltip: withTooltip, onHover: changeHovered, tooltipFormatter: tooltipFormatter, value: val, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val })); })),
+                currentValue.map(function (val, index) { return (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered || typeof activeButton === 'number', buttonRef: leftButtonRef, popoverPosition: popoverPosition[index], onKeyPress: onKeyPress, onFocus: onFocus, handlePress: handlePress, disabled: disabled, position: buttonPositions[index], focused: activeButton === index, buttonLabel: index, withTooltip: withTooltip, onHover: changeHovered, tooltipFormatter: tooltipFormatter, value: val, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, tooltipZIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined, key: cnSlider('Point', { index: index }) })); })),
             IconRight && (react_1["default"].createElement("div", { className: cnSlider('Side', { position: 'right' }) },
                 react_1["default"].createElement(IconRight, { size: iconSize, view: "secondary" })))),
         caption && (react_1["default"].createElement(FieldCaption_1.FieldCaption, { className: cnSlider('Caption'), status: status }, caption))));

package/__internal__/cjs-src/components/SliderCanary/SliderInput/SliderInput.d.ts

@@ -6,7 +6,7 @@ declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min'
     min?: number;
     max?: number;
     onChange?: (props: {
-        e?: React.ChangeEvent | React.MouseEvent;
+        e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;
         value: number;
     }) => void;
 };

package/__internal__/cjs-src/components/SliderCanary/SliderInput/SliderInput.js

@@ -21,5 +21,5 @@ exports.SliderInput = function (props) {
         setCurrentValue(validatedValue.toString());
     };
     react_1.useEffect(function () { return setCurrentValue(value.toString()); }, [value]);
-    return (react_1["default"].createElement(TextField_1.TextField, tslib_1.__assign({ onBlur: commitChange, type: "number", min: min, max: max, step: Array.isArray(step) ? 1 : step, onChange: handleChange, value: currentValue }, otherProps)));
+    return (react_1["default"].createElement(TextField_1.TextField, tslib_1.__assign({ onBlur: commitChange, type: "number", min: min, max: max, step: step, onChange: handleChange, value: currentValue }, otherProps)));
 };

package/__internal__/cjs-src/components/SliderCanary/SliderPoint/SliderPoint.js

@@ -23,7 +23,7 @@ var getTooltipPosition = function (popoverPosition, buttonRef) {
 };
 exports.SliderPoint = function (props) {
     var _a;
-    var hovered = props.hovered, onHover = props.onHover, value = props.value, position = props.position, disabled = props.disabled, withTooltip = props.withTooltip, focused = props.focused, popoverPosition = props.popoverPosition, buttonRef = props.buttonRef, handlePress = props.handlePress, onKeyPress = props.onKeyPress, tooltipFormatter = props.tooltipFormatter, buttonLabel = props.buttonLabel, onFocus = props.onFocus, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus"]);
+    var hovered = props.hovered, onHover = props.onHover, value = props.value, position = props.position, disabled = props.disabled, withTooltip = props.withTooltip, focused = props.focused, popoverPosition = props.popoverPosition, buttonRef = props.buttonRef, handlePress = props.handlePress, onKeyPress = props.onKeyPress, tooltipFormatter = props.tooltipFormatter, buttonLabel = props.buttonLabel, onFocus = props.onFocus, tooltipZIndex = props.tooltipZIndex, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus", "tooltipZIndex"]);
     var _b = tslib_1.__read(useFlag_1.useFlag(false), 2), tooltipVisible = _b[0], _c = _b[1], on = _c.on, off = _c.off;
     var theme = Theme_1.useTheme().theme;
     var tooltipTheme = tslib_1.__assign(tslib_1.__assign({}, theme), { color: {
@@ -63,5 +63,5 @@ exports.SliderPoint = function (props) {
                 _a['--slider-button-left'] = position + "%",
                 _a) }, otherProps)),
         tooltipVisible && withTooltip && popoverPosition && (react_1["default"].createElement(Theme_1.ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
-            react_1["default"].createElement(Tooltip_1.Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'] }, tooltipFormatter ? tooltipFormatter(value) : value)))));
+            react_1["default"].createElement(Tooltip_1.Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'], style: { zIndex: tooltipZIndex } }, tooltipFormatter ? tooltipFormatter(value) : value)))));
 };

package/__internal__/cjs-src/components/SliderCanary/helper.d.ts

@@ -62,6 +62,7 @@ export declare type SliderPointProps = PropsWithHTMLAttributes<{
     onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;
     onHover?: (hovered: boolean) => void;
     position: number;
+    tooltipZIndex?: number;
 }, HTMLButtonElement>;
 export declare type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<Props<RANGE>, HTMLDivElement>;
 export declare type SliderComponent = <RANGE extends boolean>(props: SliderProps<RANGE>) => React.ReactElement | null;

package/__internal__/cjs-src/components/SliderCanary/useSlider/helper.js

@@ -56,25 +56,18 @@ exports.getValidValue = function (value, min, max, step) {
             return (Math.ceil(Number(value.toFixed(division ? division.length : 0)) / stepValue) * stepValue);
         }
         var resultValue_1 = value;
-        var stepsArr_1 = step;
-        if (step[0] !== min) {
-            stepsArr_1 = tslib_1.__spread([min], stepsArr_1);
-        }
-        else if (step[step.length - 1] !== max) {
-            stepsArr_1 = tslib_1.__spread(stepsArr_1, [max]);
-        }
-        stepsArr_1.forEach(function (stepPoint, index) {
+        step.forEach(function (stepPoint, index) {
             var minValue = min;
             var maxValue = max;
             if (index === 0) {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
             }
-            else if (index === stepsArr_1.length - 1) {
+            else if (index === step.length - 1) {
                 minValue = stepPoint;
                 maxValue = max;
             }
             else {
-                maxValue = stepsArr_1[index + 1];
+                maxValue = step[index + 1];
                 minValue = stepPoint;
             }
             if (value <= maxValue && value >= minValue) {

package/__internal__/cjs-src/components/SliderCanary/useSlider/useSlider.js

@@ -55,7 +55,7 @@ function useSlider(props) {
         });
     }, [step]);
     react_1.useEffect(function () {
-        if (typeof value !== 'undefined' && typeof step !== 'undefined') {
+        if (typeof value !== 'undefined') {
             var targetValue = helper_1.isRangeParams(props)
                 ? [
                     helper_1.getValidValue(props.value[0], min, max, step),
@@ -96,32 +96,24 @@ function useSlider(props) {
             }
             if (validKeyCode) {
                 if (Array.isArray(step)) {
-                    var stepsArr_1 = tslib_1.__spread(step);
-                    if (step[0] !== minValue) {
-                        stepsArr_1 = tslib_1.__spread([minValue], stepsArr_1);
-                    }
-                    if (step[step.length - 1] !== maxValue) {
-                        stepsArr_1 = tslib_1.__spread(stepsArr_1, [maxValue]);
-                    }
-                    stepsArr_1.forEach(function (stepPoint, index) {
+                    step.forEach(function (stepPoint, index) {
                         if (typeof typeButton === 'number' && changedValue_1 === stepPoint) {
                             if (stepIncrement_1 >= 0) {
                                 if (index === 0) {
-                                    stepIncrement_1 = stepsArr_1[1] - minValue;
+                                    stepIncrement_1 = step[1] - minValue;
                                 }
                                 else {
                                     stepIncrement_1 =
-                                        (typeof stepsArr_1[index + 1] !== 'undefined'
-                                            ? stepsArr_1[index + 1]
-                                            : maxValue) - stepPoint;
+                                        (typeof step[index + 1] !== 'undefined' ? step[index + 1] : maxValue) -
+                                            stepPoint;
                                 }
                             }
                             else if (index === 0) {
-                                stepIncrement_1 = minValue - stepsArr_1[1];
+                                stepIncrement_1 = minValue - step[1];
                             }
                             else {
                                 stepIncrement_1 =
-                                    (typeof stepsArr_1[index - 1] !== 'undefined' ? stepsArr_1[index - 1] : minValue) -
+                                    (typeof step[index - 1] !== 'undefined' ? step[index - 1] : minValue) -
                                         stepPoint;
                             }
                         }