@consta/uikit 3.12.3 → 3.15.0

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

@@ -20,7 +20,7 @@ var getTooltipPosition = function (popoverPosition, buttonRef) {
 };
 export var 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 = __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, tooltipZIndex = props.tooltipZIndex, otherProps = __rest(props, ["hovered", "onHover", "value", "position", "disabled", "withTooltip", "focused", "popoverPosition", "buttonRef", "handlePress", "onKeyPress", "tooltipFormatter", "buttonLabel", "onFocus", "tooltipZIndex"]);
     var _b = __read(useFlag(false), 2), tooltipVisible = _b[0], _c = _b[1], on = _c.on, off = _c.off;
     var theme = useTheme().theme;
     var tooltipTheme = __assign(__assign({}, theme), { color: {
@@ -56,11 +56,9 @@ export var SliderPoint = function (props) {
     };
     var pointRef = useRef(null);
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", __assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? 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([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
+        React.createElement("button", __assign({ type: "button", "aria-label": buttonLabel + "-button", className: cnSliderPoint({ hovered: hovered, disabled: disabled }, [!disabled ? 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([buttonRef, pointRef]), tabIndex: 0, style: (_a = {},
                 _a['--slider-button-left'] = position + "%",
                 _a) }, otherProps)),
         tooltipVisible && withTooltip && popoverPosition && (React.createElement(ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
-            React.createElement(Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'] }, value)))));
+            React.createElement(Tooltip, { position: getTooltipPosition(popoverPosition, buttonRef || pointRef), className: cnSliderPoint('Tooltip'), direction: "downCenter", possibleDirections: ['downCenter', 'leftDown', 'rightDown'], style: { zIndex: tooltipZIndex } }, tooltipFormatter ? tooltipFormatter(value) : value)))));
 };

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

@@ -48,18 +48,21 @@ 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;
+    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__/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__/src/components/SliderCanary/useSlider/helper.js

@@ -13,11 +13,14 @@ export var trackPosition = function (event) {
             y: event.clientY
         };
     }
-    return null;
+    return {
+        x: event.changedTouches[0].clientX,
+        y: event.changedTouches[0].clientY
+    };
 };
 export var getActiveValue = function (value, active) {
     if (Array.isArray(value)) {
-        return active === 'left' ? value[0] : value[1];
+        return value[typeof active === 'number' ? active : 0];
     }
     return value;
 };
@@ -31,7 +34,7 @@ export var detectActiveButton = function (position, buttons) {
                 x + width >= position.x &&
                 y <= position.y &&
                 y + height >= position.y) {
-                activeButton = index === 0 ? 'left' : 'right';
+                activeButton = index;
                 button.focus();
             }
         }
@@ -101,7 +104,7 @@ export var getNewValue = function (changedValue, currentValue, step, min, max, a
     var minRangeValue = min;
     if (Array.isArray(currentValue)) {
         var _a = __read(currentValue, 2), left = _a[0], right = _a[1];
-        if (activeButton === 'right') {
+        if (activeButton === 1) {
             minRangeValue = left;
         }
         else {
@@ -110,9 +113,7 @@ export var getNewValue = function (changedValue, currentValue, step, min, max, a
     }
     var analyzedValue = getValidValue(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;
 };

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

@@ -1,7 +1,7 @@
 import { __read, __spread } from "tslib";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useComponentSize } from '../../../hooks/useComponentSize/useComponentSize';
-import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';
 import { getActiveValue, getNewValue, getValidValue, getValueByPosition, isNotRangeParams, isRangeParams, trackPosition, } from './helper';
 export function useSlider(props) {
     var disabled = props.disabled, range = props.range, value = props.value, min = props.min, max = props.max, _a = props.step, step = _a === void 0 ? 1 : _a, onChange = props.onChange, onAfterChange = props.onAfterChange, sliderRef = props.sliderRef, buttonRefs = props.buttonRefs;
@@ -10,51 +10,34 @@ export function useSlider(props) {
     var _b = __read(useState(value), 2), currentValue = _b[0], setCurrentValue = _b[1];
     var _c = __read(useState(null), 2), leftPopover = _c[0], setLeftPopover = _c[1];
     var _d = __read(useState(null), 2), rightPopover = _d[0], setRightPopover = _d[1];
-    var _e = __read(useFlag(false), 2), draggable = _e[0], _f = _e[1], on = _f.on, off = _f.off;
     var activeButton = useRef(null);
     var sizeSlider = useComponentSize(sliderRef);
-    var addListeners = function () {
-        document.addEventListener('mouseup', handleTouchEnd);
-        document.addEventListener('touchend', handleTouchEnd);
-        document.addEventListener('mousemove', handleTouchMove);
-        document.addEventListener('touchmove', handleTouchMove);
-    };
-    var removeListeners = function () {
-        document.removeEventListener('mouseup', handleTouchEnd);
-        document.removeEventListener('touchend', handleTouchEnd);
-        document.removeEventListener('mousemove', handleTouchMove);
-        document.removeEventListener('touchmove', handleTouchMove);
-    };
+    var lastValue = useMutableRef(currentValue);
     useEffect(function () {
-        addListeners();
-        return function () {
-            removeListeners();
-        };
-    }, [
-        activeButton.current,
-        step,
-        currentValue,
-        value,
-        min,
-        max,
-        sliderRef.current,
-        buttonRefs,
-        disabled,
-        draggable,
-    ]);
+        if (disabled) {
+            controlListeners('remove');
+        }
+    }, [disabled]);
+    var controlListeners = function (type) {
+        var method = type === 'add' ? 'addEventListener' : 'removeEventListener';
+        document[method]('mouseup', handleRelease);
+        document[method]('touchend', handleRelease);
+        document[method]('mousemove', handleTouchMove);
+        document[method]('touchmove', handleTouchMove);
+    };
     useEffect(function () {
         if (Array.isArray(currentValue)) {
-            setTooltipPosition(currentValue[0], 'left');
-            setTooltipPosition(currentValue[1], 'right');
+            setTooltipPosition(currentValue[0], 0);
+            setTooltipPosition(currentValue[1], 1);
         }
         else {
-            setTooltipPosition(currentValue, 'left');
+            setTooltipPosition(currentValue, 0);
         }
     }, [currentValue]);
     useEffect(function () {
         if (JSON.stringify(value) !== JSON.stringify(currentValue)) {
             setCurrentValue(value);
-            setTooltipPosition(getActiveValue(value, activeButton.current), 'left');
+            setTooltipPosition(getActiveValue(value, activeButton.current), 0);
             activeButton.current = null;
         }
     }, [value]);
@@ -62,10 +45,10 @@ export function useSlider(props) {
         onChange === null || onChange === void 0 ? void 0 : onChange({
             value: Array.isArray(currentValue)
                 ? [
-                    getNewValue(currentValue[0], currentValue[0], step, min, max, 'left'),
-                    getNewValue(currentValue[1], currentValue[1], step, min, max, 'right'),
+                    getNewValue(currentValue[0], currentValue[0], step, min, max, 0),
+                    getNewValue(currentValue[1], currentValue[1], step, min, max, 1),
                 ]
-                : getNewValue(currentValue, currentValue, step, min, max, 'left')
+                : getNewValue(currentValue, currentValue, step, min, max, 0)
         });
     }, [step]);
     useEffect(function () {
@@ -89,7 +72,7 @@ export function useSlider(props) {
         }
     }, []);
     var onKeyPress = useCallback(function (event, typeButton) {
-        if (!disabled && typeof typeButton === 'string' && typeof currentValue !== 'undefined') {
+        if (!disabled && typeof typeButton === 'number' && typeof currentValue !== 'undefined') {
             var stepIncrement_1 = !Array.isArray(step) ? step || 1 : 1;
             var validKeyCode = false;
             var changedValue_1 = getActiveValue(currentValue, typeButton);
@@ -118,7 +101,7 @@ export function useSlider(props) {
                         stepsArr_1 = __spread(stepsArr_1, [maxValue]);
                     }
                     stepsArr_1.forEach(function (stepPoint, index) {
-                        if (typeof typeButton === 'string' && changedValue_1 === stepPoint) {
+                        if (typeof typeButton === 'number' && changedValue_1 === stepPoint) {
                             if (stepIncrement_1 >= 0) {
                                 if (index === 0) {
                                     stepIncrement_1 = stepsArr_1[1] - minValue;
@@ -152,14 +135,14 @@ export function useSlider(props) {
         }
     }, [currentValue, step, min, max]);
     var setTooltipPosition = function (value, position) {
-        if (sliderRef.current && position) {
-            var button = buttonRefs[position === 'left' ? 0 : 1].current || sliderRef.current;
+        if (sliderRef.current && typeof position === 'number') {
+            var button = buttonRefs[position].current || sliderRef.current;
             var _a = sliderRef.current.getBoundingClientRect(), x = _a.x, width = _a.width;
             var newPosition = {
                 y: button.offsetTop + button.offsetHeight + 50,
                 x: x + Math.abs((value - minValue) / (maxValue - minValue)) * width
             };
-            if (position === 'left') {
+            if (position === 0) {
                 setLeftPopover(newPosition);
             }
             else {
@@ -169,7 +152,7 @@ export function useSlider(props) {
     };
     var changePosition = function (event) {
         var nativeEvent = event;
-        if (typeof activeButton.current !== 'string') {
+        if (typeof activeButton.current !== 'number') {
             return value;
         }
         var position = trackPosition(nativeEvent);
@@ -179,49 +162,53 @@ export function useSlider(props) {
     var onFocus = function (e, button) {
         activeButton.current = button;
     };
-    var handleTouchMove = function (event) {
-        if (typeof activeButton.current === 'string' && draggable) {
+    var handleTouchMove = function (event, typeButton) {
+        var button = typeButton || activeButton.current;
+        if (typeof button === 'number') {
             var position = changePosition(event);
-            var oldValue = getActiveValue(currentValue, activeButton.current);
-            var newValue = getActiveValue(position, activeButton.current);
+            var oldValue = getActiveValue(currentValue, button);
+            var newValue = getActiveValue(position, button);
             if (oldValue !== newValue) {
                 setCurrentValue(position);
                 onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange({ e: event, value: position });
             }
         }
     };
-    var handleTouchEnd = function (event) {
-        var position = changePosition(event);
-        if (typeof position !== 'undefined') {
-            setCurrentValue(position);
-            onChange === null || onChange === void 0 ? void 0 : onChange({ e: event, value: position });
-        }
-        off();
-        if (JSON.stringify(position) !== JSON.stringify(currentValue)) {
-            buttonRefs.forEach(function (button) {
-                var _a;
-                (_a = button.current) === null || _a === void 0 ? void 0 : _a.blur();
-            });
-            activeButton.current = null;
-        }
-    };
     useEffect(function () {
         if (isRangeParams(props)) {
             props.value.forEach(function (val, index) {
-                setTooltipPosition(getActiveValue(val, activeButton.current), index === 0 ? 'left' : 'right');
+                setTooltipPosition(getActiveValue(val, activeButton.current), index === 0 ? 0 : 1);
             });
         }
         if (isNotRangeParams(props)) {
-            setTooltipPosition(getActiveValue(value, activeButton.current), 'left');
+            setTooltipPosition(getActiveValue(value, activeButton.current), 0);
         }
         activeButton.current = null;
     }, [sizeSlider, typeof value]);
+    var handleRelease = useCallback(function (e) {
+        var _a, _b;
+        controlListeners('remove');
+        if (isRangeParams(props) && Array.isArray(lastValue.current)) {
+            var copyValues = __spread(lastValue.current).sort(function (a, b) { return Number(a) - Number(b); });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { e: e, value: copyValues });
+        }
+        if (isNotRangeParams(props) && typeof lastValue.current === 'number') {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: lastValue.current });
+        }
+        activeButton.current = null;
+    }, [lastValue, value, onChange, handleTouchMove]);
+    var handlePress = useCallback(function (typeButton) {
+        if (!disabled) {
+            activeButton.current = typeButton;
+            controlListeners('add');
+        }
+    }, [currentValue, value, onChange, handleTouchMove, disabled]);
     return {
         onKeyPress: onKeyPress,
         onFocus: onFocus,
-        dragPoint: on,
+        handlePress: handlePress,
         activeButton: activeButton.current,
         popoverPosition: [leftPopover, rightPopover],
-        currentValue: currentValue
+        currentValue: Array.isArray(currentValue) ? currentValue : [currentValue]
     };
 }

package/__internal__/src/components/SliderCanary/useSliderStationing.js

@@ -1,4 +1,4 @@
-import { __read } from "tslib";
+import { __read, __spread } from "tslib";
 import { useCallback, useEffect, useState } from 'react';
 export var getSteps = function (step, min, max) {
     var stepsArray = [];
@@ -48,18 +48,15 @@ export var useSliderStationing = function (value, min, max, view, range, step, b
                     });
                 }
                 else if (Array.isArray(value) && value) {
-                    sizesArray.push({
-                        width: ((value[0] - min) / absoluteSize) * 100,
-                        active: false
-                    });
-                    sizesArray.push({
-                        width: ((value[1] - value[0]) / absoluteSize) * 100,
-                        active: true
-                    });
-                    sizesArray.push({
-                        width: ((max - value[1]) / absoluteSize) * 100,
-                        active: false
-                    });
+                    var endPointArray = __spread(value);
+                    endPointArray.unshift(min);
+                    endPointArray.push(max);
+                    for (var i = 0; i < endPointArray.length - 1; i++) {
+                        sizesArray.push({
+                            width: ((endPointArray[i + 1] - endPointArray[i]) / absoluteSize) * 100,
+                            active: endPointArray[i] !== min && endPointArray[i + 1] !== max
+                        });
+                    }
                 }
                 else {
                     sizesArray.push({
@@ -74,7 +71,7 @@ export var useSliderStationing = function (value, min, max, view, range, step, b
                         width: (Math.abs(stepSize.max - stepSize.min) * 100) / absoluteSize,
                         active: (typeof value === 'number' || Array.isArray(value)) &&
                             (range && Array.isArray(value)
-                                ? stepSize.max > value[0] && stepSize.min < value[1]
+                                ? stepSize.max > value[0] && stepSize.min < value[value.length - 1]
                                 : stepSize.max <= value)
                     });
                 });

package/__internal__/src/components/SnackBar/SnackBar.css

@@ -14,6 +14,10 @@
   padding-left: var(--space-xs);
 }
 
+  .SnackBar-Item:not(:first-child) {
+      margin-bottom: var(--space-s);
+    }
+
   .SnackBar-Item_animate_appear,
       .SnackBar-Item_animate_enter,
       .SnackBar-Item_animate_exit,

package/__internal__/src/components/SnackBar/SnackBar.d.ts

@@ -1,32 +1,5 @@
 import './SnackBar.css';
 import React from 'react';
-import { IconComponent } from '../../icons/Icon/Icon';
-import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
-export declare type SnackBarPropItemAction = {
-    label: string | number;
-    onClick: React.EventHandler<React.MouseEvent>;
-};
-export declare const snackBarItemStatus: readonly ["normal", "system", "success", "warning", "alert"];
-export declare type SnackBarItemStatus = typeof snackBarItemStatus[number];
-export declare const snackBarItemStatusDefault: SnackBarItemStatus;
-export declare type Item = {
-    key: string | number;
-    message?: string | number | React.ReactNode;
-    status?: SnackBarItemStatus;
-    autoClose?: boolean | number;
-    showProgress?: 'timer';
-    icon?: IconComponent;
-    actions?: SnackBarPropItemAction[];
-    onClose?: (item: Item) => void;
-    onAutoClose?: (item: Item) => void;
-};
-declare type Props = {
-    items: Item[];
-    children?: never;
-};
-export declare type SnackBarProps = PropsWithHTMLAttributes<Props, HTMLDivElement>;
-export declare const COMPONENT_NAME: "SnackBar";
+import { SnackBarProps } from './helper';
 export declare const cnSnackBar: import("@bem-react/classname").ClassNameFormatter;
-export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
 export declare const SnackBar: React.FC<SnackBarProps>;
-export {};

package/__internal__/src/components/SnackBar/SnackBar.js

@@ -5,15 +5,11 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { cn } from '../../utils/bem';
 import { cnForCssTransition } from '../../utils/cnForCssTransition';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
-import { SnackBarItem } from './Item/SnackBar-Item';
-export var snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
-export var snackBarItemStatusDefault = snackBarItemStatus[0];
-export var COMPONENT_NAME = 'SnackBar';
-export var cnSnackBar = cn(COMPONENT_NAME);
-export var cnSnackBarItem = cn(COMPONENT_NAME, 'Item');
-var cssTransitionClassNames = cnForCssTransition(cnSnackBarItem);
+import { SnackBarItem } from './SnackBarItem/SnackBarItem';
+export var cnSnackBar = cn('SnackBar');
+var cssTransitionClassNames = cnForCssTransition(cnSnackBar, 'Item');
 export var SnackBar = function (props) {
-    var _a = usePropsHandler(COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
+    var _a = usePropsHandler('SnackBar', props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
     var refs = useMemo(function () {
         var refArray = [];
         for (var i = 0; i < items.length; i++) {
@@ -23,6 +19,6 @@ export var SnackBar = function (props) {
     }, [items]);
     return (React.createElement(TransitionGroup, __assign({}, otherProps, { className: cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item, index) {
         return (React.createElement(CSSTransition, { nodeRef: refs[index], classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
-            React.createElement(SnackBarItem, { item: item, ref: refs[index] })));
+            React.createElement(SnackBarItem, { item: item, ref: refs[index], className: cnSnackBar('Item') })));
     })));
 };

package/__internal__/src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.css

@@ -0,0 +1,8 @@
+.SnackBarActionButton {
+  -webkit-filter: drop-shadow(0 0 0 var(--color-bg-soft));
+          filter: drop-shadow(0 0 0 var(--color-bg-soft));
+}
+
+  .SnackBarActionButton-ActionButtonsWrapper > .SnackBarActionButton:not(:last-child) {
+    margin-right: var(--space-xs);
+  }

package/__internal__/src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.d.ts

@@ -0,0 +1,4 @@
+import './SnackBarActionButton.css';
+import React from 'react';
+import { SnackBarActionButtonProps } from '../helper';
+export declare const SnackBarActionButton: React.FC<SnackBarActionButtonProps>;

package/__internal__/src/components/SnackBar/SnackBarActionButton/SnackBarActionButton.js

@@ -0,0 +1,12 @@
+import './SnackBarActionButton.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+import { Button } from '../../Button/Button';
+var cnSnackBarActionButton = cn('SnackBarActionButton');
+export var SnackBarActionButton = function (props) {
+    var actions = props.actions, className = props.className;
+    if (actions.length < 1) {
+        return null;
+    }
+    return (React.createElement("div", { className: cnSnackBarActionButton('ActionButtonsWrapper', [className]) }, actions.map(function (item, index) { return (React.createElement(Button, { className: cnSnackBarActionButton(), key: cnSnackBarActionButton() + "-" + index, size: "s", view: "ghost", label: item.label, onClick: item.onClick })); })));
+};

package/__internal__/src/components/SnackBar/SnackBarItem/SnackBarItem.css

@@ -0,0 +1,68 @@
+.SnackBarItem {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: var(--space-m) var(--space-2xl) var(--space-m) var(--space-m);
+  color: var(--color-typo-primary);
+  border-radius: var(--space-xs);
+  -webkit-box-shadow: var(--shadow-group);
+          box-shadow: var(--shadow-group);
+}
+
+  .SnackBarItem_showProgress_line {
+      padding-bottom: calc(var(--space-m) + var(--space-2xs));
+    }
+
+  .SnackBarItem-ActionButton {
+    margin-top: calc(var(--space-2xs) + var(--space-xs));
+  }
+
+  .SnackBarItem_status_system {
+      background-color: var(--color-bg-system);
+    }
+
+  .SnackBarItem_status_normal {
+      background-color: var(--color-bg-normal);
+    }
+
+  .SnackBarItem_status_success {
+      background-color: var(--color-bg-success);
+    }
+
+  .SnackBarItem_status_warning {
+      background-color: var(--color-bg-warning);
+    }
+
+  .SnackBarItem_status_alert {
+      background-color: var(--color-bg-alert);
+    }
+
+  .SnackBarItem-Timer {
+    margin-right: var(--space-m);
+  }
+
+  .SnackBarItem-Line {
+    position: absolute;
+    left: 0%;
+    bottom: 0;
+  }
+
+  .SnackBarItem-Icon {
+    -webkit-box-flex: 0;
+        -ms-flex: none;
+            flex: none;
+    margin-right: var(--space-m);
+  }
+
+  .SnackBarItem-Content {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+  }
+
+  .SnackBarItem-CloseButton {
+    position: absolute;
+    top: var(--space-2xs);
+    right: var(--space-2xs);
+  }

package/__internal__/src/components/SnackBar/{Item/SnackBar-Item.d.ts → SnackBarItem/SnackBarItem.d.ts}

@@ -1,11 +1,9 @@
 import '../../Theme/_color/Theme_color_gpnDark.css';
-import './SnackBar-Item.css';
+import './SnackBarItem.css';
 import React from 'react';
 import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
-import { Item } from '../SnackBar';
-export declare type SnackBarItemProps = {
-    item: Item;
-};
+import { SnackBarItemProps } from '../helper';
 declare type SnackBarItemComponent = (props: PropsWithHTMLAttributesAndRef<SnackBarItemProps, HTMLDivElement>) => React.ReactElement | null;
+export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
 export declare const SnackBarItem: SnackBarItemComponent;
 export {};

package/__internal__/src/components/SnackBar/{Item/SnackBar-Item.js → SnackBarItem/SnackBarItem.js}

@@ -1,17 +1,20 @@
 import { __read } from "tslib";
 import '../../Theme/_color/Theme_color_gpnDark.css';
-import './SnackBar-Item.css';
+import './SnackBarItem.css';
 import React, { useEffect, useState } from 'react';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { IconClose } from '../../../icons/IconClose/IconClose';
+import { cn } from '../../../utils/bem';
 import { isNumber, isString } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Text } from '../../Text/Text';
 import { cnTheme } from '../../Theme/Theme';
-import { SnackBarActionButton } from '../ActionButton/SnackBar-ActionButton';
-import { cnSnackBar, cnSnackBarItem, snackBarItemStatusDefault } from '../SnackBar';
-import { SnackBarTimer } from '../Timer/SnackBar-Timer';
+import { snackBarItemStatusDefault, } from '../helper';
+import { SnackBarActionButton } from '../SnackBarActionButton/SnackBarActionButton';
+import { SnackBarLine } from '../SnackBarLine/SnackBarLine';
+import { SnackBarTimer } from '../SnackBarTimer/SnackBarTimer';
 var defaultInitialTimerTime = 3;
+export var cnSnackBarItem = cn('SnackBarItem');
 var getAutoCloseTime = function (autoClose) {
     if (autoClose) {
         if (typeof autoClose === 'number') {
@@ -22,7 +25,7 @@ var getAutoCloseTime = function (autoClose) {
     return false;
 };
 export var SnackBarItem = React.forwardRef(function (props, ref) {
-    var item = props.item;
+    var item = props.item, className = props.className;
     var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = __read(useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = __read(useFlag(false), 2), hover = _c[0], _d = _c[1], onHover = _d.on, offHover = _d.off;
@@ -57,11 +60,15 @@ export var SnackBarItem = React.forwardRef(function (props, ref) {
         onAutoClose(item);
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
-    return (React.createElement("div", { ref: ref, className: cnSnackBarItem({ status: status }, [cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
-        autoCloseTime && (React.createElement(SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
-        hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBar('Icon'), size: "m" }),
-        React.createElement("div", { className: cnSnackBar('Content') },
-            isString(message) || isNumber(message) ? (React.createElement(Text, { className: cnSnackBar('Message'), lineHeight: "s" }, message)) : (React.createElement(React.Fragment, null, message)),
-            actions && React.createElement(SnackBarActionButton, { actions: actions })),
-        onClose && (React.createElement(Button, { className: cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose }))));
+    return (React.createElement("div", { ref: ref, className: cnSnackBarItem({ status: status, showProgress: showProgress }, [
+            cnTheme({ color: 'gpnDark' }),
+            className,
+        ]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
+        autoCloseTime && showProgress !== 'line' && (React.createElement(SnackBarTimer, { className: cnSnackBarItem('Timer'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
+        hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBarItem('Icon'), size: "m" }),
+        React.createElement("div", { className: cnSnackBarItem('Content') },
+            isString(message) || isNumber(message) ? (React.createElement(Text, { className: cnSnackBarItem('Message'), lineHeight: "s" }, message)) : (React.createElement(React.Fragment, null, message)),
+            actions && (React.createElement(SnackBarActionButton, { actions: actions, className: cnSnackBarItem('ActionButton') }))),
+        onClose && (React.createElement(Button, { className: cnSnackBarItem('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose })),
+        autoCloseTime && showProgress === 'line' && (React.createElement(SnackBarLine, { className: cnSnackBarItem('Line'), onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime }))));
 });