@consta/uikit 3.9.3 → 3.12.1

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

@@ -6,14 +6,23 @@ require("./ProgressStepBar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
 var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
+var useOverflow_1 = require("../../hooks/useOverflow/useOverflow");
+var useScrollElements_1 = require("../../hooks/useScrollElements/useScrollElements");
+var IconArrowLeft_1 = require("../../icons/IconArrowLeft/IconArrowLeft");
+var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
+var Button_1 = require("../Button/Button");
 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 _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);
-    var _f = useComponentSize_1.useComponentSize(containerRef), width = _f.width, height = _f.height;
+    var listRef = react_1.useRef(null);
+    var _g = useComponentSize_1.useComponentSize(containerRef), width = _g.width, height = _g.height;
+    var _h = useScrollElements_1.useScrollElements(steps), refs = _h.refs, scrollTo = _h.scrollTo;
+    var stepsRef = react_1.useMemo(function () { return new Array(steps.length).fill(null).map(function () { return react_1.createRef(); }); }, [steps.length]);
     react_1.useEffect(function () {
         if (steps.length > 0) {
             var linesArray_1 = [];
@@ -27,7 +36,20 @@ function ProgressStepBarRender(props, ref) {
             setLines(linesArray_1);
         }
     }, [activeStepIndex, steps, direction, size, width, height]);
-    var stepsRef = react_1.useMemo(function () { return new Array(steps.length).fill(null).map(function () { return react_1.createRef(); }); }, [steps.length]);
+    react_1.useEffect(function () {
+        setVisibleIndex(activeStepIndex || 0);
+    }, [activeStepIndex]);
+    react_1.useEffect(function () {
+        scrollTo(visibleIndex);
+    }, [visibleIndex]);
+    var changePosition = function (prev) {
+        if (prev && visibleIndex !== 0) {
+            setVisibleIndex(visibleIndex - 1);
+        }
+        if (!prev && visibleIndex !== steps.length - 1) {
+            setVisibleIndex(visibleIndex + 1);
+        }
+    };
     var getStepItem = function (item, index) {
         var onClick = getItemOnClick(item);
         var onItemClickHandler = onItemClick
@@ -52,8 +74,12 @@ function ProgressStepBarRender(props, ref) {
             onClick: onClick || onItemClickHandler
         };
     };
-    return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: helpers_1.cnProgressStepBar({ direction: direction }, [className]), ref: useForkRef_1.useForkRef([ref, containerRef]) }),
-        react_1["default"].createElement(ProgressStepBarLine_1.ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),
-        steps.map(function (step, index) { return (react_1["default"].createElement(ProgressStepBarItem_1.ProgressStepBarItem, tslib_1.__assign({}, getStepItem(step, index)))); })));
+    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]) }),
+        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 }),
+            steps.map(function (step, index) { return (react_1["default"].createElement(ProgressStepBarItem_1.ProgressStepBarItem, tslib_1.__assign({ ref: refs[index] }, getStepItem(step, index)))); })),
+        isOverflow && direction !== 'vertical' && (react_1["default"].createElement(Button_1.Button, { iconLeft: function () { return react_1["default"].createElement(IconArrowRight_1.IconArrowRight, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: helpers_1.cnProgressStepBar('Button', { side: 'right' }), onClick: function () { return changePosition(false); } }))));
 }
 exports.ProgressStepBar = react_1.forwardRef(ProgressStepBarRender);

package/__internal__/cjs-src/components/ProgressStepBarCanary/ProgressStepBarItem/ProgressStepBarItem.css

@@ -3,10 +3,14 @@
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
-  width: 100%;
+
+  /* width: 100%; */
   height: 100%;
 }
 
@@ -150,11 +154,14 @@
     background-color: var(--progress-step-bar-item-point-background);
     border: none;
     border-radius: calc(var(--progress-step-bar-item-point-size) * 0.5);
-    cursor: pointer;
     -webkit-transition: background-color 0.3s;
     transition: background-color 0.3s;
   }
 
+  .ProgressStepBarItem-Point[type*='button'] {
+      cursor: pointer;
+    }
+
   .ProgressStepBarItem-PointText {
     color: var(--color-typo-secondary);
     -webkit-transition: color 0.3s;

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

@@ -25,17 +25,17 @@ var possibleHorizontalDirections = [
     'downStartRight',
 ];
 var renderPointContent = function (point, size, progress) {
-    if (!point)
-        return null;
     if (progress)
         return react_1["default"].createElement(ProgressSpin_1.ProgressSpin, { size: size });
+    if (!point)
+        return null;
     if (typeof point === 'function') {
         var Icon = point;
         return react_1["default"].createElement(Icon, { size: "xs" });
     }
     return (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
 };
-exports.ProgressStepBarItem = function (props) {
+exports.ProgressStepBarItem = react_1["default"].forwardRef(function (props, ref) {
     var content = props.content, tooltipContent = props.tooltipContent, label = props.label, point = props.point, status = props.status, progress = props.progress, direction = props.direction, size = props.size, pointRef = props.pointRef, onClick = props.onClick, _a = props.position, position = _a === void 0 ? helpers_1.propPositionDefault : _a, otherProps = tslib_1.__rest(props, ["content", "tooltipContent", "label", "point", "status", "progress", "direction", "size", "pointRef", "onClick", "position"]);
     var _b = tslib_1.__read(useFlag_1.useFlag(), 2), isTooltipVisible = _b[0], _c = _b[1], setTooltipVisible = _c.on, setTooltipUnVisible = _c.off;
     var anchorRef = react_1.useRef(null);
@@ -55,15 +55,15 @@ exports.ProgressStepBarItem = function (props) {
         ref: pointRef
     };
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement("div", tslib_1.__assign({ className: cnProgressStepBarItem({
+        react_1["default"].createElement("div", tslib_1.__assign({ ref: ref, className: cnProgressStepBarItem({
                 direction: direction,
                 position: position,
                 status: status || helpers_1.propStatusDefault,
                 size: size
             }) }, otherProps),
             onClick ? (react_1["default"].createElement("button", tslib_1.__assign({ type: "button" }, pointButtonProps, pointProps))) : (react_1["default"].createElement("div", tslib_1.__assign({}, pointProps, pointDivButton))),
-            react_1["default"].createElement("div", { className: cnProgressStepBarItem('Content', { bottomOffset: !!content }) },
-                react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('Label'), ref: anchorRef, size: size, onMouseEnter: setTooltipVisible, onMouseLeave: setTooltipUnVisible, lineHeight: size === 's' ? 'xs' : size, view: "primary" }, label),
-                content)),
-        tooltipContent && isTooltipVisible && (react_1["default"].createElement(Tooltip_1.Tooltip, { anchorRef: anchorRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
-};
+            (label || content) && (react_1["default"].createElement("div", { className: cnProgressStepBarItem('Content', { bottomOffset: !!content }) },
+                label && (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('Label'), ref: anchorRef, size: size, onMouseEnter: setTooltipVisible, onMouseLeave: setTooltipUnVisible, lineHeight: size === 's' ? 'xs' : size, view: "primary" }, label)),
+                content))),
+        tooltipContent && isTooltipVisible && (react_1["default"].createElement(Tooltip_1.Tooltip, { anchorRef: label || content ? anchorRef : pointRef, className: cnProgressStepBarItem('Tooltip'), direction: direction === 'horizontal' ? 'downCenter' : 'leftUp', possibleDirections: direction === 'horizontal' ? possibleHorizontalDirections : possibleVerticalDirections }, tooltipContent))));
+});

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

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./ProgressStepBarLine.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var cnProgressStepBarLine = bem_1.cn('ProgressStepBarLine');
 var mapVarsByStatus = {
     normal: 'var(--color-bg-normal)',
@@ -18,7 +18,7 @@ var backgroundGenerate = function (lines, direction) {
     var length = lines.length;
     for (var index = 0; index < length; index++) {
         var line = lines[index];
-        var color = getSizeByMap_1.getSizeByMap(mapVarsByStatus, line.status || 'normal');
+        var color = getByMap_1.getByMap(mapVarsByStatus, line.status || 'normal');
         var from = lines[index - 1] ? lines[index - 1].size : 0;
         var to = line.size;
         background += color + " " + from + "px, " + color + " " + to + "px" + (index < length - 1 ? ', ' : ')');

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 export declare const propSize: readonly ["s", "xs", "m"];
 export declare type PropSize = typeof propSize[number];
@@ -15,20 +15,20 @@ export declare type PointNumbersMap = typeof pointNumbersMap[number];
 export declare const propPosition: readonly ["center", "start", "end"];
 export declare type PropPosition = typeof propPosition[number];
 export declare const propPositionDefault: PropPosition;
-export declare type PropGetItemLabel<ITEM> = (item: ITEM) => string;
+export declare type PropGetItemLabel<ITEM> = (item: ITEM) => string | undefined;
 export declare type PropGetItemKey<ITEM> = (item: ITEM) => string | number;
 export declare type PropGetItemTooltipContent<ITEM> = (item: ITEM) => string | undefined;
 export declare type PropGetItemLineStatus<ITEM> = (item: ITEM) => PropStatus | undefined;
-export declare type PropGetItemPoint<ITEM> = (item: ITEM) => PointNumbersMap | React.FC<IconProps> | undefined;
+export declare type PropGetItemPoint<ITEM> = (item: ITEM) => PointNumbersMap | IconComponent | undefined;
 export declare type PropGetItemProgress<ITEM> = (item: ITEM) => boolean | undefined;
 export declare type PropGetItemContent<ITEM> = (item: ITEM) => React.ReactNode | undefined;
 export declare type PropGetItemStatus<ITEM> = (item: ITEM) => PropStatus | undefined;
 export declare type PropGetItemOnClick<ITEM> = (item: ITEM) => React.EventHandler<React.MouseEvent> | undefined;
 export declare type DefaultItem = {
-    label: string;
+    label?: string;
     tooltipContent?: string;
     lineStatus?: PropStatus;
-    point?: PointNumbersMap | React.FC<IconProps>;
+    point?: PointNumbersMap | IconComponent;
     status?: PropStatus;
     progress?: boolean;
     content?: React.ReactNode;
@@ -63,8 +63,8 @@ export declare type ProgressStepBarProps<ITEM = DefaultItem> = PropsWithHTMLAttr
 });
 export declare type ProgressStepBarItemProps = {
     content?: React.ReactNode;
-    label: string;
-    point?: PointNumbersMap | React.FC<IconProps>;
+    label?: string;
+    point?: PointNumbersMap | IconComponent;
     progress?: boolean;
     status?: PropStatus | 'system';
     tooltipContent?: string;
@@ -84,7 +84,7 @@ export declare const defaultGetItemContent: PropGetItemContent<DefaultItem>;
 export declare const defaultGetItemStatus: PropGetItemStatus<DefaultItem>;
 export declare const defaultGetItemOnClick: PropGetItemOnClick<DefaultItem>;
 export declare type ProgressStepBarComponent = <ITEM = DefaultItem>(props: ProgressStepBarProps<ITEM>) => React.ReactElement | null;
-export declare type ProgressStepBarItemComponent = (props: ProgressStepBarItemProps) => React.ReactElement | null;
+export declare type ProgressStepBarItemComponent = (props: PropsWithHTMLAttributesAndRef<ProgressStepBarItemProps, HTMLDivElement>) => React.ReactElement | null;
 export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITEM>): {
     steps: ITEM[];
     direction?: "horizontal" | "vertical" | undefined;
@@ -104,7 +104,7 @@ export declare function withDefaultGetters<ITEM>(props: ProgressStepBarProps<ITE
     getItemStatus?: PropGetItemStatus<ITEM> | undefined;
     getItemOnClick?: PropGetItemOnClick<ITEM> | undefined;
 } & 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"> & React.RefAttributes<HTMLDivElement> & (ITEM extends {
-    label: string;
+    label: string | undefined;
 } ? {} : {
     getItemLabel: PropGetItemLabel<ITEM>;
 }) & {

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

@@ -89,7 +89,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
         e: React.SyntheticEvent<Element, Event>;
     }) => void;
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     status?: "alert" | "success" | "warning" | undefined;

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

@@ -16,7 +16,7 @@ export declare type SelectContainerProps = PropsWithHTMLAttributesAndRef<{
 }, HTMLDivElement>;
 export declare const SelectContainer: React.ForwardRefExoticComponent<Pick<PropsWithHTMLAttributesAndRef<{
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     focused?: boolean | undefined;
@@ -26,4 +26,4 @@ export declare const SelectContainer: React.ForwardRefExoticComponent<Pick<Props
     label?: string | undefined;
     labelPosition?: "left" | "top" | undefined;
     caption?: string | 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" | "disabled" | "view" | "size" | "caption" | "form" | "label" | "key" | "multiple" | "required" | "status" | "focused" | "labelPosition"> & React.RefAttributes<HTMLDivElement>>;
+}, 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" | "disabled" | "view" | "size" | "key" | "caption" | "form" | "label" | "multiple" | "required" | "status" | "focused" | "labelPosition"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./SelectItem.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var Checkbox_1 = require("../../Checkbox/Checkbox");
 exports.cnSelectItem = bem_1.cn('SelectItem');
 var sizeCheckboxMap = {
@@ -17,6 +17,6 @@ var sizeCheckboxMap = {
 exports.SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, disabled = props.disabled, otherProps = tslib_1.__rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent", "disabled"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent, disabled: disabled }, [className]), "aria-selected": active, "aria-disabled": disabled, role: "option" }),
-        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, size: getSizeByMap_1.getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, size: getByMap_1.getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/cjs-src/components/SelectComponentsDeprecated/SelectContainer/SelectContainer.d.ts

@@ -12,7 +12,7 @@ export declare type SelectContainerProps = PropsWithHTMLAttributes<{
 }, HTMLDivElement>;
 export declare const SelectContainer: React.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "xs" | "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     focused?: boolean | undefined;

package/__internal__/cjs-src/components/SelectComponentsDeprecated/SelectItem/SelectItem.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 require("./SelectItem.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var bem_1 = require("../../../utils/bem");
-var getSizeByMap_1 = require("../../../utils/getSizeByMap");
+var getByMap_1 = require("../../../utils/getByMap");
 var Checkbox_1 = require("../../Checkbox/Checkbox");
 exports.cnSelectItem = bem_1.cn('SelectItemDeprecated');
 // в дальнейшем уберем обязательность onChange у Checkbox
@@ -20,6 +20,6 @@ var sizeCheckboxMap = {
 exports.SelectItem = function (props) {
     var className = props.className, label = props.label, active = props.active, hovered = props.hovered, multiple = props.multiple, size = props.size, indent = props.indent, otherProps = tslib_1.__rest(props, ["className", "label", "active", "hovered", "multiple", "size", "indent"]);
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: exports.cnSelectItem({ active: active, hovered: hovered, multiple: multiple, size: size, indent: indent }, [className]), "aria-selected": active, role: "option" }),
-        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getSizeByMap_1.getSizeByMap(sizeCheckboxMap, size) })),
+        multiple && (react_1["default"].createElement(Checkbox_1.Checkbox, { className: exports.cnSelectItem('Checkbox'), checked: active, onChange: emptyFunction, size: getByMap_1.getByMap(sizeCheckboxMap, size) })),
         label));
 };

package/__internal__/cjs-src/components/SliderCanary/Slider.css

@@ -0,0 +1,72 @@
+.Slider {
+  --slider-side-margin: 0;
+  --slider-container-margin: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+}
+
+  .Slider_size_xs {
+      --slider-container-margin: var(--space-2xs);
+      --slider-side-margin: var(--space-xs);
+    }
+
+  .Slider_size_s {
+      --slider-container-margin: var(--space-2xs);
+      --slider-side-margin: var(--space-s);
+    }
+
+  .Slider_size_m {
+      --slider-container-margin: var(--space-2xs);
+      --slider-side-margin: var(--space-s);
+    }
+
+  .Slider_size_l {
+      --slider-container-margin: var(--space-xs);
+      --slider-side-margin: var(--space-l);
+    }
+
+  .Slider-Label {
+    margin-bottom: var(--slider-container-margin);
+  }
+
+  .Slider-Caption {
+    margin-top: var(--slider-container-margin);
+  }
+
+  .Slider-Container {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    width: 100%;
+    min-height: var(--space-m);
+  }
+
+  .Slider-Control {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    width: 100%;
+    height: var(--space-m);
+  }
+
+  .Slider-Side_position_left {
+        margin-right: var(--slider-side-margin);
+      }
+
+  .Slider-Side_position_right {
+        margin-left: var(--slider-side-margin);
+      }

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

@@ -0,0 +1,3 @@
+import './Slider.css';
+import { SliderComponent } from './helper';
+export declare const Slider: SliderComponent;

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

@@ -0,0 +1,69 @@
+"use strict";
+exports.__esModule = true;
+exports.Slider = void 0;
+var tslib_1 = require("tslib");
+require("./Slider.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useFlag_1 = require("../../hooks/useFlag/useFlag");
+var bem_1 = require("../../utils/bem");
+var getByMap_1 = require("../../utils/getByMap");
+var FieldCaption_1 = require("../FieldCaption/FieldCaption");
+var FieldLabel_1 = require("../FieldLabel/FieldLabel");
+var SliderInput_1 = require("./SliderInput/SliderInput");
+var SliderLine_1 = require("./SliderLine/SliderLine");
+var SliderPoint_1 = require("./SliderPoint/SliderPoint");
+var helper_1 = require("./useSlider/helper");
+var useSlider_1 = require("./useSlider/useSlider");
+var helper_2 = require("./helper");
+var useSliderStationing_1 = require("./useSliderStationing");
+var cnSlider = bem_1.cn('Slider');
+var sizeMap = {
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    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_2.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_2.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 _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 IconRight = rightSide;
+    var IconLeft = helper_2.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
+    var iconSize = getByMap_1.getByMap(sizeMap, size);
+    var _l = useSlider_1.useSlider({
+        disabled: disabled,
+        range: range,
+        value: value,
+        min: min,
+        max: max,
+        step: step,
+        onChange: onChange,
+        onAfterChange: onAfterChange,
+        sliderRef: sliderRef,
+        buttonRefs: [leftButtonRef, rightButtonRef]
+    }), onKeyPress = _l.onKeyPress, onFocus = _l.onFocus, dragPoint = _l.dragPoint, popoverPosition = _l.popoverPosition, activeButton = _l.activeButton, currentValue = _l.currentValue;
+    var _m = useSliderStationing_1.useSliderStationing(currentValue, min, max, view, range, step, [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),
+        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_2.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_2.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 }))),
+            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, onHover: changeHovered, lines: lineSizes, disabled: disabled, view: view }),
+                react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered, buttonRef: leftButtonRef, popoverPosition: popoverPosition[0], onKeyPress: onKeyPress, onFocus: onFocus, disabled: disabled, onMouseDown: dragPoint, position: buttonPositions[0], focused: activeButton === 'left', buttonLabel: "left", withTooltip: withTooltip, onHover: changeHovered, value: tooltipFormatter(helper_1.getActiveValue(currentValue, 'left')) }),
+                helper_2.isRangeParams(props) && (react_1["default"].createElement(SliderPoint_1.SliderPoint, { hovered: isHovered, buttonRef: rightButtonRef, onFocus: onFocus, popoverPosition: popoverPosition[1], onKeyPress: onKeyPress, disabled: disabled, onMouseDown: dragPoint, focused: activeButton === 'right', withTooltip: withTooltip, position: buttonPositions[1], buttonLabel: "right", onHover: changeHovered, value: tooltipFormatter(helper_1.getActiveValue(currentValue, 'right')) }))),
+            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))));
+}
+exports.Slider = react_1.forwardRef(SliderRender);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextFieldProps } from '../../TextField/helpers';
+declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min' | 'max' | 'step'> & {
+    value: number;
+    step?: number | number[];
+    min?: number;
+    max?: number;
+    onChange?: (props: {
+        e?: React.ChangeEvent | React.MouseEvent;
+        value: number;
+    }) => void;
+};
+export declare const SliderInput: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+exports.SliderInput = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var TextField_1 = require("../../TextField/TextField");
+var helper_1 = require("../useSlider/helper");
+exports.SliderInput = function (props) {
+    var value = props.value, onChange = props.onChange, _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, _c = props.step, step = _c === void 0 ? 1 : _c, otherProps = tslib_1.__rest(props, ["value", "onChange", "min", "max", "step"]);
+    var _d = tslib_1.__read(react_1.useState(value.toString()), 2), currentValue = _d[0], setCurrentValue = _d[1];
+    var handleChange = function (_a) {
+        var e = _a.e, value = _a.value;
+        setCurrentValue(value);
+        if (helper_1.isValidValue(Number(value), min, max, step)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ value: Number(value), e: e });
+        }
+    };
+    var commitChange = function () {
+        var validatedValue = helper_1.getValidValue(Number(currentValue), min, max, step);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: validatedValue });
+        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)));
+};

package/__internal__/cjs-src/components/SliderCanary/SliderLine/SliderLine.css

@@ -0,0 +1,39 @@
+.SliderLine {
+  --slider-line-radius: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  border-radius: var(--control-radius);
+}
+
+  .SliderLine_view_division {
+    --slider-line-radius: var(--control-radius);
+    gap: var(--space-2xs);
+  }
+
+  .SliderLine-Line {
+    --slider-line-color: var(--color-control-bg-ghost);
+    width: var(--slider-line-size);
+    height: var(--space-2xs);
+    background-color: var(--slider-line-color);
+    border-radius: var(--slider-line-radius);
+    -webkit-transition: background-color 0.3s, width 0.3s;
+    transition: background-color 0.3s, width 0.3s;
+  }
+
+  .SliderLine-Line_active {
+      --slider-line-color: var(--color-control-bg-primary);
+    }
+
+  .SliderLine-Line_hovered.SliderLine-Line_active {
+      --slider-line-color: var(--color-control-bg-primary-hover);
+    }
+
+  .SliderLine-Line_disabled {
+      --slider-line-color: var(--color-control-bg-disable);
+    }

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './SliderLine.css';
+import { SliderLineProps } from '../helper';
+export declare const SliderLine: (props: SliderLineProps) => JSX.Element;

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

@@ -0,0 +1,26 @@
+"use strict";
+exports.__esModule = true;
+exports.SliderLine = void 0;
+var tslib_1 = require("tslib");
+require("./SliderLine.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+var cnSliderLine = bem_1.cn('SliderLine');
+exports.SliderLine = function (props) {
+    var hovered = props.hovered, onHover = props.onHover, lines = props.lines, disabled = props.disabled, _a = props.view, view = _a === void 0 ? 'default' : _a, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "lines", "disabled", "view"]);
+    var handleHover = function (active, hover) {
+        if (!disabled && active) {
+            onHover === null || onHover === void 0 ? void 0 : onHover(hover);
+        }
+    };
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: cnSliderLine({ view: view }) }, otherProps), lines.map(function (line, index) {
+        var _a;
+        return (react_1["default"].createElement("div", { onMouseEnter: function () { return handleHover(line.active, true); }, onMouseLeave: function () { return handleHover(line.active, false); }, className: cnSliderLine('Line', {
+                active: line.active,
+                hovered: line.active && hovered,
+                disabled: disabled
+            }), key: cnSliderLine({ index: index }), style: (_a = {},
+                _a['--slider-line-size'] = line.width + "%",
+                _a) }));
+    })));
+};