@consta/uikit 3.12.0 → 3.12.4

package/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Sidebar",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Skeleton",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SliderCanary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SliderCanary",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/SnackBar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/SnackBar",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Steps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/Steps",
-  "version": "3.12.0",
+  "version": "3.12.4",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/Switch/package.json

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

package/SwitchGroup/package.json

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

package/Table/package.json

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

package/Tabs/package.json

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

package/Tag/package.json

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

package/TagBase/package.json

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

package/Text/package.json

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

package/TextField/package.json

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

package/Theme/package.json

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

package/ThemeToggler/package.json

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

package/Timer/package.json

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

package/Tooltip/package.json

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

package/User/package.json

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

package/UserSelect/package.json

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

package/UserSelectDeprecated/package.json

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

package/__internal__/cjs-src/components/Checkbox/Checkbox.css

@@ -7,74 +7,18 @@
   cursor: pointer;
 }
 
-  .Checkbox-Input {
-    position: relative;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    width: var(--box-size);
-    height: var(--box-size);
-    margin: 0;
-    background-color: transparent;
-    border: var(--control-border-width) solid var(--color-control-bg-border-default);
-    border-radius: var(--control-radius);
-    cursor: pointer;
-    -webkit-transition: border-color 0.15s, background-color 0.15s;
-    transition: border-color 0.15s, background-color 0.15s;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
-    -webkit-appearance: none;
-  }
-
-  .Checkbox-Input::before {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      width: calc(var(--box-size) * 0.6);
-      height: calc(var(--box-size) * 0.35);
-      background-color: var(--color-control-bg-affect);
-      border-left: 2px solid var(--checkbox-checked-check);
-      border-bottom: 2px solid var(--checkbox-checked-check);
-      opacity: 0;
-      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
-      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
-      -webkit-transform: rotate(-50deg) scale(0, 1);
-              transform: rotate(-50deg) scale(0, 1);
-      -webkit-transform-origin: 0 0;
-              transform-origin: 0 0;
-    }
-
-  .Checkbox-Label {
-    margin-left: var(--offset);
-    color: var(--color-control-typo-default);
-    font-size: var(--checkbox-font-size);
-  }
-
   .Checkbox_size_m {
       --checkbox-font-size: var(--control-text-size-m);
-      --box-size: var(--control-box-size-m);
-      --offset: var(--space-xs);
+      --checkbox-size: var(--control-box-size-m);
+      --checkbox-offset: var(--space-xs);
     }
 
-  .Checkbox_size_m .Checkbox-Input::before {
-          top: 0.55em;
-          left: 0.15em;
-        }
-
   .Checkbox_size_l {
       --checkbox-font-size: var(--control-text-size-l);
-      --box-size: var(--control-box-size-l);
-      --offset: var(--space-s);
+      --checkbox-size: var(--control-box-size-l);
+      --checkbox-offset: var(--space-s);
     }
 
-  .Checkbox_size_l .Checkbox-Input::before {
-          top: 0.7em;
-          left: 0.2em;
-        }
-
   .Checkbox_view_primary {
       --checkbox-checked-border: var(--color-control-bg-primary);
       --checkbox-checked-background: var(--color-control-bg-primary);
@@ -91,26 +35,6 @@
       --checkbox-checked-background-hover: var(--color-control-bg-ghost-hover);
     }
 
-  .Checkbox-Input:checked {
-    background-color: var(--checkbox-checked-background);
-    border-color: var(--checkbox-checked-border);
-  }
-
-  .Checkbox-Input:checked::before {
-      opacity: 1;
-      -webkit-transform: rotate(-50deg) scale(1, 1);
-              transform: rotate(-50deg) scale(1, 1);
-    }
-
-  .Checkbox:hover .Checkbox-Input {
-    border-color: var(--color-control-bg-border-default-hover);
-  }
-
-  .Checkbox:hover .Checkbox-Input:checked {
-      background-color: var(--checkbox-checked-background-hover);
-      border-color: var(--checkbox-checked-border-hover);
-    }
-
   .Checkbox_intermediate .Checkbox-Input,
     .Checkbox_intermediate .Checkbox-Input:checked,
     .Checkbox_intermediate:hover .Checkbox-Input,
@@ -121,6 +45,7 @@
 
   .Checkbox_intermediate .Checkbox-Input::before, .Checkbox_intermediate .Checkbox-Input:checked::before, .Checkbox_intermediate:hover .Checkbox-Input::before, .Checkbox_intermediate:hover .Checkbox-Input:checked::before {
         background-color: var(--checkbox-checked-check);
+        border: none;
         opacity: 1;
         -webkit-transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
         transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
@@ -166,3 +91,72 @@
   .Checkbox_align_top .Checkbox-Input {
         margin-top: var(--space-3xs);
       }
+
+  .Checkbox-Label {
+    margin-left: var(--checkbox-offset);
+    color: var(--color-control-typo-default);
+    font-size: var(--checkbox-font-size);
+  }
+
+  .Checkbox-Input {
+    position: relative;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: var(--control-border-width) solid var(--color-control-bg-border-default);
+    border-radius: var(--control-radius);
+    cursor: pointer;
+    -webkit-transition: border-color 0.15s, background-color 0.15s;
+    transition: border-color 0.15s, background-color 0.15s;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -webkit-appearance: none;
+  }
+
+  .Checkbox-Input::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: calc(var(--checkbox-size) / 2 - 1px);
+      left: calc(var(--checkbox-size) / 5 - 1px);
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      width: calc(var(--checkbox-size) * 0.6);
+      height: calc(var(--checkbox-size) * 0.35);
+      background-color: var(--color-control-bg-affect);
+      border-left: 2px solid var(--checkbox-checked-check);
+      border-bottom: 2px solid var(--checkbox-checked-check);
+      opacity: 0;
+      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
+      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
+      -webkit-transform: rotate(-50deg) scale(0, 1);
+              transform: rotate(-50deg) scale(0, 1);
+      -webkit-transform-origin: 0 0;
+              transform-origin: 0 0;
+    }
+
+  .Checkbox-Input:checked {
+    background-color: var(--checkbox-checked-background);
+    border-color: var(--checkbox-checked-border);
+  }
+
+  .Checkbox-Input:checked::before {
+      opacity: 1;
+      -webkit-transform: rotate(-50deg) scale(1, 1);
+              transform: rotate(-50deg) scale(1, 1);
+    }
+
+  .Checkbox:hover .Checkbox-Input {
+    border-color: var(--color-control-bg-border-default-hover);
+  }
+
+  .Checkbox:hover .Checkbox-Input:checked {
+      background-color: var(--checkbox-checked-background-hover);
+      border-color: var(--checkbox-checked-border-hover);
+    }

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

@@ -67,6 +67,9 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     endFieldOnFocus?: DatePickerPropCalendarStartOnFocus<TYPE>;
     startFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
     endFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
+    label?: string;
+    caption?: string;
+    labelPosition?: 'top' | 'left';
 }, HTMLDivElement>;
 export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
 export declare type DatePickerTypeDateComponent = (props: DatePickerProps<'date'>) => React.ReactElement | null;
@@ -150,6 +153,9 @@ export declare const isDateRangeParams: (params: DatePickerProps<DatePickerPropT
     endFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
     startFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
     endFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
+    label?: string | undefined;
+    caption?: string | undefined;
+    labelPosition?: "left" | "top" | undefined;
 }, HTMLDivElement>;
 export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
     type?: "date" | undefined;
@@ -201,6 +207,9 @@ export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPr
     endFieldOnFocus?: undefined;
     startFieldOnBlur?: undefined;
     endFieldOnBlur?: undefined;
+    label?: string | undefined;
+    caption?: string | undefined;
+    labelPosition?: "left" | "top" | undefined;
 }, HTMLDivElement>;
 export declare const datePickerPropSeparatorDefault = ".";
 export declare const datePickerPropFormatDefault: string;

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

@@ -71,7 +71,8 @@ function ProgressStepBarRender(props, ref) {
             position: helpers_1.getItemPosition(index, steps.length),
             pointRef: stepsRef[index],
             direction: direction,
-            onClick: onClick || onItemClickHandler
+            onClick: onClick || onItemClickHandler,
+            key: helpers_1.cnProgressStepBar({ index: index })
         };
     };
     var isOverflow = useOverflow_1.useOverflow({ currentRef: listRef });

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

@@ -29,11 +29,11 @@ var renderPointContent = function (point, size, 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" });
+    if (typeof point === 'number') {
+        return (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
     }
-    return (react_1["default"].createElement(Text_1.Text, { className: cnProgressStepBarItem('PointText'), size: size === 's' ? '2xs' : 'xs', weight: "bold" }, point));
+    var Icon = point;
+    return react_1["default"].createElement(Icon, { size: "xs" });
 };
 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"]);

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

@@ -61,6 +61,10 @@
             align-items: center;
     width: 100%;
     height: var(--space-m);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
   }
 
   .Slider-Side_position_left {

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

@@ -12,9 +12,8 @@ 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 helper_1 = require("./helper");
 var useSliderStationing_1 = require("./useSliderStationing");
 var cnSlider = bem_1.cn('Slider');
 var sizeMap = {
@@ -24,13 +23,13 @@ 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_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 _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 _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 IconLeft = helper_1.isNotRangeParams && props.leftSide && props.leftSide !== 'input' ? props.leftSide : undefined;
     var iconSize = getByMap_1.getByMap(sizeMap, size);
     var _l = useSlider_1.useSlider({
         disabled: disabled,
@@ -43,8 +42,8 @@ function SliderRender(props, ref) {
         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;
+    }), 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 changeHovered = function (status) {
         if (status)
             on();
@@ -54,14 +53,13 @@ function SliderRender(props, ref) {
     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 }))),
+            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 }))),
             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')) }))),
+                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 })); })),
             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/SliderPoint/SliderPoint.css

@@ -14,6 +14,7 @@
           align-items: center;
   width: var(--space-m);
   height: var(--space-m);
+  padding: 0;
   background-color: var(--color-bg-default);
   border: var(--space-3xs) solid var(--color-control-bg-primary);
   border-radius: calc(var(--space-m) * 0.5);

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, onKeyPress = props.onKeyPress, buttonLabel = props.buttonLabel, onFocus = props.onFocus, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "onKeyPress", "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, otherProps = tslib_1.__rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus"]);
     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: {
@@ -59,11 +59,9 @@ exports.SliderPoint = function (props) {
     };
     var pointRef = react_1.useRef(null);
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement("button", tslib_1.__assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? MixFocus_1.cnMixFocus() : '']), onMouseOver: function () { return handleMouseAction(true); }, onMouseOut: function () { return handleMouseAction(false); }, onKeyDown: function (e) { return onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(e, buttonLabel); }, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, 
-            // onMouseUp={handleBlur}
-            ref: useForkRef_1.useForkRef([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
+        react_1["default"].createElement("button", tslib_1.__assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? MixFocus_1.cnMixFocus() : '']), onMouseOver: function () { return handleMouseAction(true); }, onMouseOut: function () { return handleMouseAction(false); }, onMouseDown: function () { return handlePress === null || handlePress === void 0 ? void 0 : handlePress(buttonLabel); }, onTouchStart: function () { return handlePress === null || handlePress === void 0 ? void 0 : handlePress(buttonLabel); }, onKeyDown: function (e) { return onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(e, buttonLabel); }, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, ref: useForkRef_1.useForkRef([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
                 _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'] }, value)))));
+            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)))));
 };

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

@@ -48,16 +48,18 @@ export declare type SliderLineProps = {
     onHover?: (hovered: boolean) => void;
 };
 export declare type SliderPointProps = PropsWithHTMLAttributes<{
-    value?: number | string;
+    value?: number;
     disabled?: boolean;
     focused?: boolean;
     hovered?: boolean;
     withTooltip?: boolean;
+    handlePress?: (typeButton: ActiveButton) => void;
     buttonLabel?: ActiveButton;
     buttonRef?: React.RefObject<HTMLButtonElement>;
     popoverPosition?: TrackPosition;
+    tooltipFormatter?: PropToolipFormatter;
     onFocus?: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
-    onKeyPress?: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
+    onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;
     onHover?: (hovered: boolean) => void;
     position: number;
 }, HTMLButtonElement>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropOnChange, SliderValue, TrackPosition } from '../helper';
-export declare type ActiveButton = 'left' | 'right' | null | undefined;
+export declare type ActiveButton = 0 | 1 | null | undefined;
 export declare type Stationing = {
     x: number;
     y: number;
@@ -22,14 +22,14 @@ export declare type UseSliderProps<RANGE extends boolean = false> = {
 export declare type UseSliderValues = {
     onKeyPress: (e: React.KeyboardEvent, typeButton: ActiveButton) => void;
     onFocus: (e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent, button: ActiveButton) => void;
+    handlePress: (typeButton: ActiveButton) => void;
     activeButton: ActiveButton;
-    dragPoint: () => void;
-    currentValue: number | [number, number];
+    currentValue: [number] | [number, number];
     popoverPosition: TrackPosition[];
 };
 export declare const isRangeParams: (params: UseSliderProps<boolean>) => params is UseSliderProps<true>;
 export declare const isNotRangeParams: (params: UseSliderProps<boolean>) => params is UseSliderProps<false>;
-export declare const trackPosition: (event: Event | React.TouchEvent | React.MouseEvent) => TrackPosition;
+export declare const trackPosition: (event: TouchEvent | MouseEvent) => TrackPosition;
 export declare const getActiveValue: (value: number | [number, number], active: ActiveButton) => number;
 export declare const detectActiveButton: (posittion: TrackPosition, buttons: React.RefObject<HTMLButtonElement>[]) => ActiveButton;
 export declare const getValidValue: (value: number, min: number, max: number, step?: number | number[] | undefined) => number;

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

@@ -16,11 +16,14 @@ exports.trackPosition = function (event) {
             y: event.clientY
         };
     }
-    return null;
+    return {
+        x: event.changedTouches[0].clientX,
+        y: event.changedTouches[0].clientY
+    };
 };
 exports.getActiveValue = function (value, active) {
     if (Array.isArray(value)) {
-        return active === 'left' ? value[0] : value[1];
+        return value[typeof active === 'number' ? active : 0];
     }
     return value;
 };
@@ -34,7 +37,7 @@ exports.detectActiveButton = function (position, buttons) {
                 x + width >= position.x &&
                 y <= position.y &&
                 y + height >= position.y) {
-                activeButton = index === 0 ? 'left' : 'right';
+                activeButton = index;
                 button.focus();
             }
         }
@@ -104,7 +107,7 @@ exports.getNewValue = function (changedValue, currentValue, step, min, max, acti
     var minRangeValue = min;
     if (Array.isArray(currentValue)) {
         var _a = tslib_1.__read(currentValue, 2), left = _a[0], right = _a[1];
-        if (activeButton === 'right') {
+        if (activeButton === 1) {
             minRangeValue = left;
         }
         else {
@@ -113,9 +116,7 @@ exports.getNewValue = function (changedValue, currentValue, step, min, max, acti
     }
     var analyzedValue = exports.getValidValue(exports.analyzeDivisionValue(changedValue, step, min, max), minRangeValue, maxRangeValue, step);
     if (Array.isArray(currentValue)) {
-        return activeButton === 'right'
-            ? [currentValue[0], analyzedValue]
-            : [analyzedValue, currentValue[1]];
+        return activeButton === 1 ? [currentValue[0], analyzedValue] : [analyzedValue, currentValue[1]];
     }
     return analyzedValue;
 };