@consta/uikit 3.14.0 → 3.15.0

package/__internal__/src/components/BreadcrumbsCanary/types.js

@@ -1,2 +1,4 @@
 export var breadcrumbPropSize = ['m', 'xs', 's', 'l'];
 export var breadcrumbPropSizeDefault = breadcrumbPropSize[0];
+export var breadcrumbPropFitMode = ['dropdown', 'scroll'];
+export var breadcrumbPropFitModeDefault = breadcrumbPropFitMode[0];

package/__internal__/src/components/BreadcrumbsCanary/useElements.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare const useElements: <ITEM>(items: ITEM[]) => {
+    visibleItems: ITEM[];
+    hiddenItems: ITEM[];
+    itemsRefs: React.RefObject<HTMLLIElement>[];
+    wrapperRef: React.RefObject<HTMLUListElement>;
+    moreRef: React.RefObject<HTMLLIElement> | undefined;
+    firstItem: ITEM | undefined;
+    lastItem: ITEM | undefined;
+    readyToHideItems: ITEM[];
+    firstItemRef: React.RefObject<HTMLLIElement>;
+    lastItemRef: React.RefObject<HTMLLIElement>;
+    lastWidth: string;
+    compression: string;
+    elementsSizeSum: number;
+};

package/__internal__/src/components/BreadcrumbsCanary/useElements.js

@@ -0,0 +1,52 @@
+import { __assign, __read, __rest, __spread } from "tslib";
+import { useMemo } from 'react';
+import { useHideElementsInLine } from '../../hooks/useHideElementsInLine/useHideElementsInLine';
+import { useRefs } from '../../hooks/useRefs/useRefs';
+import { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';
+var useReadyToHideItems = function (items) {
+    return useMemo(function () {
+        var returnedItems = __spread(items);
+        var first = returnedItems.shift();
+        var last = returnedItems.pop();
+        return [first, returnedItems, last];
+    }, [items]);
+};
+var getLastWidth = function (wrapperWidth, fistWidth, itemsDimensions, hiddenItems) {
+    var widthExceptLast = fistWidth +
+        itemsDimensions.reduce(function (previous, current, currentIndex) { return previous + (hiddenItems[currentIndex] ? 0 : current); }, 0);
+    var lastWidthCalculate = wrapperWidth - widthExceptLast;
+    return lastWidthCalculate + "px";
+};
+var getCompression = function (componentWidth) {
+    if (componentWidth <= 380) {
+        return 's';
+    }
+    if (componentWidth <= 900) {
+        return 'm';
+    }
+    if (componentWidth <= 1200) {
+        return 'l';
+    }
+    return 'xl';
+};
+export var useElements = function (items) {
+    var _a = __read(useReadyToHideItems(items), 3), firstItem = _a[0], readyToHideItems = _a[1], lastItem = _a[2];
+    var noHideElementsRef = useRefs(2);
+    var noHideElementsSize = useResizeObserved(noHideElementsRef, function (el) {
+        return el
+            ? parseInt(getComputedStyle(el).marginRight, 10) +
+                parseInt(getComputedStyle(el).marginLeft, 10) +
+                el.offsetWidth
+            : 0;
+    });
+    var noHideElementsSizeSum = noHideElementsSize.reduce(function (previous, current) { return previous + current; }, 0);
+    var _b = useHideElementsInLine(readyToHideItems, noHideElementsSizeSum, true), itemsDimensions = _b.itemsDimensions, wrapperWidth = _b.wrapperWidth, hideElementsInLineResult = __rest(_b, ["itemsDimensions", "wrapperWidth"]);
+    var elementsSizeSum = noHideElementsSizeSum + itemsDimensions.reduce(function (previous, current) { return previous + current; }, 0);
+    var lastWidth = getLastWidth(wrapperWidth, noHideElementsSize[0], itemsDimensions, hideElementsInLineResult.hiddenItems);
+    var compression = getCompression(wrapperWidth);
+    return __assign({ firstItem: firstItem,
+        lastItem: lastItem,
+        readyToHideItems: readyToHideItems, firstItemRef: noHideElementsRef[0], lastItemRef: noHideElementsRef[1], lastWidth: lastWidth,
+        compression: compression,
+        elementsSizeSum: elementsSizeSum }, hideElementsInLineResult);
+};

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

@@ -1,2 +1,2 @@
-import { ContextMenuType } from './helpers';
-export declare const ContextMenu: ContextMenuType;
+import { ContextMenuComponent } from './helpers';
+export declare const ContextMenu: ContextMenuComponent;

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

@@ -1,10 +1,11 @@
 import { __assign, __read, __rest, __spread, __values } from "tslib";
-import React, { createRef, useEffect, useMemo, useState } from 'react';
+import React, { createRef, forwardRef, useEffect, useMemo, useState } from 'react';
 import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { directions } from '../Popover/Popover';
 import { clearTimers, ContextMenuLevel } from './ContextMenuLevel/ContextMenuLevel';
 import { contextMenuPropDefaultSubMenuDirection, contextMenuPropSubMenuDirections, } from './helpers';
-export var ContextMenu = function (props) {
+export var ContextMenu = forwardRef(function (props, ref) {
     var items = props.items, anchorRef = props.anchorRef, position = props.position, direction = props.direction, _a = props.possibleDirections, possibleDirections = _a === void 0 ? directions : _a, offset = props.offset, getKeyProp = props.getKey, getSubItems = props.getSubItems, _b = props.subMenuDirection, propSubMenuDirection = _b === void 0 ? contextMenuPropDefaultSubMenuDirection : _b, getLabel = props.getLabel, onClickOutside = props.onClickOutside, spareDirection = props.spareDirection, style = props.style, otherProps = __rest(props, ["items", "anchorRef", "position", "direction", "possibleDirections", "offset", "getKey", "getSubItems", "subMenuDirection", "getLabel", "onClickOutside", "spareDirection", "style"]);
     var getKey = getKeyProp || getLabel;
     var defaultLevels = [
@@ -53,6 +54,7 @@ export var ContextMenu = function (props) {
         return refs;
     };
     var levelsRefs = useMemo(constructItemRefs, [levels]);
+    var firstLevelRef = useForkRef([levelsRefs[0], ref]);
     useClickOutside({
         isActive: !!onClickOutside,
         ignoreClicksInsideRefs: __spread(levelsRefs, [anchorRef || { current: null }]),
@@ -101,6 +103,6 @@ export var ContextMenu = function (props) {
     }, [props.items, getSubItems, getKey]);
     return (React.createElement(React.Fragment, null, levels.map(function (level, index) {
         var onSetDirection = index > 0 ? setSubMenuDirection : undefined;
-        return (React.createElement(ContextMenuLevel, __assign({}, otherProps, { style: __assign(__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + index })), offset: level.offset, key: index, items: level.items, level: index, addLevel: addLevel, deleteLevel: deleteLevel, anchorRef: level.anchorRef, position: level.position, activeItem: level.activeItem, direction: level.direction, possibleDirections: level.possibleDirections, onSetDirection: onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getSubItems: getSubItems, getLabel: getLabel, ref: levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' })));
+        return (React.createElement(ContextMenuLevel, __assign({}, otherProps, { style: __assign(__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + index })), offset: level.offset, key: index, items: level.items, level: index, addLevel: addLevel, deleteLevel: deleteLevel, anchorRef: level.anchorRef, position: level.position, activeItem: level.activeItem, direction: level.direction, possibleDirections: level.possibleDirections, onSetDirection: onSetDirection, hoveredParenLevel: hoveredParenLevel, setHoveredParenLevel: setHoveredParenLevel, getSubItems: getSubItems, getLabel: getLabel, ref: index === 0 ? firstLevelRef : levelsRefs[index], spareDirection: index === 0 ? spareDirection : 'rightStartUp' })));
     })));
-};
+});

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

@@ -1,6 +1,4 @@
 .ContextMenuLevel {
-  --transform-direction: translateY(0);
-  --transform-animate: translateX(0);
   z-index: 9999;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -11,16 +9,16 @@
   border-radius: var(--control-radius);
   -webkit-box-shadow: var(--shadow-layer);
           box-shadow: var(--shadow-layer);
-  -webkit-transform: var(--transform-direction) var(--transform-animate);
-          transform: var(--transform-direction) var(--transform-animate);
 }
 
   .ContextMenuLevel:not(.ContextMenuLevel_firstLevel).ContextMenuLevel_direction_rightStartUp,
     .ContextMenuLevel:not(.ContextMenuLevel_firstLevel).ContextMenuLevel_direction_leftStartUp {
-      --transform-direction: translateY(calc(-1 * (var(--space-xs) + 1px)));
+      -webkit-transform: translateY(calc(-1 * (var(--space-xs) + 1px)));
+              transform: translateY(calc(-1 * (var(--space-xs) + 1px)));
     }
 
   .ContextMenuLevel:not(.ContextMenuLevel_firstLevel).ContextMenuLevel_direction_rightStartDown,
     .ContextMenuLevel:not(.ContextMenuLevel_firstLevel).ContextMenuLevel_direction_leftStartDown {
-      --transform-direction: translateY(calc(var(--space-xs) + 1px));
+      -webkit-transform: translateY(calc(var(--space-xs) + 1px));
+              transform: translateY(calc(var(--space-xs) + 1px));
     }

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

@@ -87,6 +87,6 @@ export declare type Level<ITEM> = {
     offset?: number;
 } & PositioningProps;
 export declare type ContextMenuItemComponent = <AS extends keyof JSX.IntrinsicElements = 'div'>(props: ContextMenuItemProps<AS>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
-export declare type ContextMenuType = <ITEM>(props: ContextMenuProps<ITEM>) => React.ReactElement | null;
+export declare type ContextMenuComponent = <ITEM>(props: ContextMenuProps<ITEM>) => React.ReactElement | null;
 export declare type ContextMenuLevelType = <ITEM>(props: ContextMenuLevelProps<ITEM>, ref: React.Ref<HTMLElement>) => React.ReactElement | null;
 export {};

package/__internal__/src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -23,7 +23,7 @@ export declare const eventInterceptorMap: {
     } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLLabelElement>) => P;
     readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement | null>) => PROPS;
     readonly SnackBar: <P_1 extends import("react").PropsWithChildren<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-        items: import("../SnackBar/SnackBar").Item[];
+        items: import("../SnackBar/helper").Item[];
         children?: undefined;
     }, HTMLDivElement>>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
     readonly TextField: <P_2 extends {
@@ -55,7 +55,7 @@ export declare const eventInterceptorMap: {
             size?: "xs" | "s" | "m" | undefined;
         }, HTMLSpanElement>> | undefined;
         withClearButton?: boolean | undefined;
-        autoComplete?: "on" | "off" | undefined;
+        autoComplete?: "on" | "off" | "tel" | "url" | "email" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         max?: string | number | undefined;
         min?: string | number | undefined;
         readOnly?: boolean | undefined;

package/__internal__/src/components/EventInterceptor/propsHandlers/useSnackBarEventsHandler.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EventInterceptorHandler } from '../EventInterceptor';
 export declare const useSnackBarEventsHandler: <P extends React.PropsWithChildren<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-    items: import("../../SnackBar/SnackBar").Item[];
+    items: import("../../SnackBar/helper").Item[];
     children?: undefined;
 }, HTMLDivElement>>>(props: P, handler: EventInterceptorHandler) => P;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const ResponsesExit: React.ForwardRefExoticComponent<Pick<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    size?: "m" | "l" | undefined;
+    image: React.FC<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>;
+    actions?: React.ReactNode;
+    children?: undefined;
+}, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "description" | "size" | "actions"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ResponsesExit as ResponsesImageExit } from '../../responsesImages/ResponsesExit/ResponsesExit';
+import { Button } from '../Button/Button';
+import { createResponses } from '../Responses/createResponses';
+export var ResponsesExit = createResponses({
+    name: 'ResponsesExit',
+    image: ResponsesImageExit,
+    title: 'Вы вышли из системы ',
+    description: 'Хотите вернутся?',
+    actions: React.createElement(Button, { label: "\u0412\u043E\u0439\u0442\u0438 \u0441\u043D\u043E\u0432\u0430" })
+});

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

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

@@ -0,0 +1,37 @@
+.SnackBarLine {
+  overflow: hidden;
+  width: 100%;
+  height: var(--space-m);
+  border-radius: var(--space-xs);
+  opacity: 0.8;
+}
+
+  .SnackBarLine::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 200%;
+    height: var(--space-2xs);
+    background: -webkit-gradient(
+      linear,
+      left top, right top,
+      from(var(--color-bg-default)),
+      color-stop(50%, var(--color-bg-default)),
+      color-stop(50%, var(--color-bg-ghost)),
+      to(var(--color-bg-ghost))
+    );
+    background: linear-gradient(
+      90deg,
+      var(--color-bg-default) 0%,
+      var(--color-bg-default) 50%,
+      var(--color-bg-ghost) 50%,
+      var(--color-bg-ghost) 100%
+    );
+    -webkit-transition: -webkit-transform 1s linear;
+    transition: -webkit-transform 1s linear;
+    transition: transform 1s linear;
+    transition: transform 1s linear, -webkit-transform 1s linear;
+    -webkit-transform: translate(var(--progress-line-progress));
+            transform: translate(var(--progress-line-progress));
+  }

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

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

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

@@ -0,0 +1,31 @@
+import { __read } from "tslib";
+import './SnackBarLine.css';
+import React, { useEffect, useState } from 'react';
+import { useTimer } from '../../../hooks/useTimer/useTimer';
+import { cn } from '../../../utils/bem';
+import { cnTheme } from '../../Theme/Theme';
+var interval = 1000;
+var cnSnackBarLine = cn('SnackBarLine');
+export var SnackBarLine = function (props) {
+    var _a;
+    var _b = __read(useState(false), 2), running = _b[0], setRunning = _b[1];
+    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime, className = props.className;
+    var startTime = startTimeprop * interval;
+    var _c = useTimer({
+        endTime: 0,
+        startTime: startTime,
+        timerType: 'DECREMENTAL',
+        onTimeOver: onTimeIsOver
+    }), time = _c.time, start = _c.start, pause = _c.pause, isRunning = _c.isRunning;
+    useEffect(function () {
+        onMount({ start: start, pause: pause });
+        start();
+    }, []);
+    useEffect(function () {
+        setRunning(isRunning);
+    }, [isRunning]);
+    var progress = running ? ((time - interval) / startTime) * 100 : (time / startTime) * 100;
+    return (React.createElement("div", { className: cnSnackBarLine({ running: running }, [cnTheme({ color: 'gpnDefault' }), className]), style: (_a = {},
+            _a['--progress-line-progress'] = "-" + progress / 2 + "%",
+            _a) }));
+};

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

@@ -0,0 +1,5 @@
+.SnackBarTimer {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+}

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

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