@consta/uikit 3.18.2 → 3.20.0

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

@@ -41,6 +41,5 @@ declare type Props = {
     position?: PaginationPropPosition;
 });
 declare type Pagination = (props: PropsWithHTMLAttributesAndRef<Props, HTMLDivElement>) => React.ReactElement | null;
-export declare const COMPONENT_NAME: "Pagination";
 export declare const Pagination: Pagination;
 export {};

package/__internal__/src/components/Pagination/Pagination.js

@@ -1,11 +1,10 @@
 import { __assign, __read, __rest, __spread } from "tslib";
 import './Pagination.css';
-import React, { useRef } from 'react';
+import React from 'react';
 import { IconBackward } from '../../icons/IconBackward/IconBackward';
 import { IconForward } from '../../icons/IconForward/IconForward';
 import { cn } from '../../utils/bem';
 import { Button } from '../Button/Button';
-import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Text } from '../Text/Text';
 import { TextField } from '../TextField/TextField';
 import { getPaginationInfo } from './helpers';
@@ -19,10 +18,8 @@ export var paginationPositions = ['left', 'center', 'right'];
 export var paginationDefaultPosition = 'center';
 var getDefaultLabel = function (totalPages) { return "\u0438\u0437 " + totalPages; };
 export var cnPagination = cn('Pagination');
-export var COMPONENT_NAME = 'Pagination';
 export var Pagination = React.forwardRef(function (props, ref) {
-    var paginationRef = useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, props, paginationRef), _b = _a.currentPage, currentPage = _b === void 0 ? 0 : _b, _c = _a.totalPages, totalPages = _c === void 0 ? 0 : _c, onChange = _a.onChange, _d = _a.getLabel, getLabel = _d === void 0 ? getDefaultLabel(totalPages) : _d, _e = _a.form, form = _e === void 0 ? paginationDefaultForm : _e, _f = _a.size, size = _f === void 0 ? paginationDefaultSize : _f, _g = _a.type, type = _g === void 0 ? paginationDefaultType : _g, _h = _a.position, position = _h === void 0 ? paginationDefaultPosition : _h, _j = _a.minified, minified = _j === void 0 ? false : _j, _k = _a.hotkeys, hotkeys = _k === void 0 ? {
+    var _a = props.currentPage, currentPage = _a === void 0 ? 0 : _a, _b = props.totalPages, totalPages = _b === void 0 ? 0 : _b, onChange = props.onChange, _c = props.getLabel, getLabel = _c === void 0 ? getDefaultLabel(totalPages) : _c, _d = props.form, form = _d === void 0 ? paginationDefaultForm : _d, _e = props.size, size = _e === void 0 ? paginationDefaultSize : _e, _f = props.type, type = _f === void 0 ? paginationDefaultType : _f, _g = props.position, position = _g === void 0 ? paginationDefaultPosition : _g, _h = props.minified, minified = _h === void 0 ? false : _h, _j = props.hotkeys, hotkeys = _j === void 0 ? {
         nextPage: {
             label: 'Alt →',
             values: ['Alt', 'ArrowRight']
@@ -31,10 +28,10 @@ export var Pagination = React.forwardRef(function (props, ref) {
             label: '← Alt',
             values: ['Alt', 'ArrowLeft']
         }
-    } : _k, _l = _a.containerEventListener, containerEventListener = _l === void 0 ? window : _l, className = _a.className, otherProps = __rest(_a, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
+    } : _j, _k = props.containerEventListener, containerEventListener = _k === void 0 ? window : _k, className = props.className, otherProps = __rest(props, ["currentPage", "totalPages", "onChange", "getLabel", "form", "size", "type", "position", "minified", "hotkeys", "containerEventListener", "className"]);
     var currPage = currentPage + 1;
-    var _m = getPaginationInfo(currPage, totalPages), prevPage = _m.prevPage, nextPage = _m.nextPage, isStartDots = _m.isStartDots, isEndDots = _m.isEndDots, pages = _m.pages, isEmpty = _m.isEmpty;
-    var _o = __read(React.useState([]), 2), keys = _o[0], setKeys = _o[1];
+    var _l = getPaginationInfo(currPage, totalPages), prevPage = _l.prevPage, nextPage = _l.nextPage, isStartDots = _l.isStartDots, isEndDots = _l.isEndDots, pages = _l.pages, isEmpty = _l.isEmpty;
+    var _m = __read(React.useState([]), 2), keys = _m[0], setKeys = _m[1];
     var changePage = function (page) {
         if (page && page !== currPage && onChange) {
             onChange(page - 1);

package/__internal__/src/components/PortalWithTheme/PortalWithTheme.js

@@ -5,13 +5,24 @@ import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { Theme } from '../Theme/Theme';
 import { PortalWithThemeProvider, usePortalContext, } from './PortalWithThemeContext/PortalWithThemeContext';
 export { usePortalContext };
+var getZIndex = function (contextZindex, propZindex) {
+    if (typeof propZindex === 'number') {
+        return propZindex;
+    }
+    if (contextZindex) {
+        return contextZindex + 1;
+    }
+    return undefined;
+};
 export var PortalWithTheme = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.container, container = _b === void 0 ? window.document.body : _b, rest = __rest(_a, ["children", "container"]);
-    var addRefs = usePortalContext().addRefs;
+    var children = _a.children, _b = _a.container, container = _b === void 0 ? window.document.body : _b, styleProp = _a.style, rest = __rest(_a, ["children", "container", "style"]);
+    var _c = usePortalContext(), addRefs = _c.addRefs, zIndexContext = _c.zIndex;
     var themeRef = useRef(null);
+    var zIndex = getZIndex(zIndexContext, styleProp === null || styleProp === void 0 ? void 0 : styleProp.zIndex);
+    var style = __assign(__assign({}, styleProp), { zIndex: zIndex });
     useEffect(function () {
         addRefs && addRefs([themeRef]);
     }, [themeRef]);
-    return ReactDOM.createPortal(React.createElement(PortalWithThemeProvider, null,
-        React.createElement(Theme, __assign({ ref: useForkRef([themeRef, ref]) }, rest), children)), container);
+    return ReactDOM.createPortal(React.createElement(PortalWithThemeProvider, { zIndex: zIndex },
+        React.createElement(Theme, __assign({ ref: useForkRef([themeRef, ref]), style: style }, rest), children)), container);
 });

package/__internal__/src/components/PortalWithTheme/PortalWithThemeContext/PortalWithThemeContext.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export declare function usePortalContext(): {
     refs: React.RefObject<HTMLElement>[];
     addRefs?: ((ref: React.RefObject<HTMLElement>[]) => void) | undefined;
+    zIndex?: number | undefined;
 };
 /**
  * PortalWithThemeProvider
@@ -12,4 +13,6 @@ export declare function usePortalContext(): {
  * компонент думал ччто клик произашел вне компонента и срабатывал onOutsideClick.
  * Сечас когда мы знаем рефы всех вложенных порталов мы можем игнорировать события кликов на вложенных порталах
  */
-export declare const PortalWithThemeProvider: React.FC;
+export declare const PortalWithThemeProvider: React.FC<{
+    zIndex?: number;
+}>;

package/__internal__/src/components/PortalWithTheme/PortalWithThemeContext/PortalWithThemeContext.js

@@ -1,7 +1,8 @@
 import { __read, __spread } from "tslib";
 import React, { createContext, useContext, useEffect, useState } from 'react';
 var Context = createContext({
-    refs: []
+    refs: [],
+    zIndex: undefined
 });
 export function usePortalContext() {
     return useContext(Context);
@@ -40,5 +41,5 @@ export var PortalWithThemeProvider = function (props) {
         contextAddRefs && contextAddRefs(refs);
     }, [refs]);
     useEffect(function () { return function () { return setRefs([]); }; }, []);
-    return React.createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs } }, props.children);
+    return (React.createElement(Context.Provider, { value: { refs: refs, addRefs: addRefs, zIndex: props.zIndex } }, props.children));
 };

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

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

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

@@ -16,7 +16,6 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 export var SelectDropdown = function (props) {
     var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, isLoading = props.isLoading, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
-    var getIndex = fabricIndex(-1);
     var _b = __read(useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     var popoverRef = useRef(null);
@@ -25,22 +24,25 @@ export var SelectDropdown = function (props) {
             return isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
         }).length > 0);
     }, [visibleItems]);
-    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) { return (React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
-            className,
-            cnMixPopoverAnimate({ direction: direction, animate: animate }),
-        ]), equalAnchorWidth: true }),
-        React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
-            isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
-            visibleItems.map(function (group) {
-                if (isOptionForCreate(group)) {
-                    return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                }
-                return (React.createElement(Fragment, { key: group.key },
-                    group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                    group.items.map(function (item, i) {
-                        return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                    })));
-            }),
-            !isLoading && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-            !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
+    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) {
+        var getIndex = fabricIndex(-1);
+        return (React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
+                className,
+                cnMixPopoverAnimate({ direction: direction, animate: animate }),
+            ]), equalAnchorWidth: true }),
+            React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+                isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+                visibleItems.map(function (group) {
+                    if (isOptionForCreate(group)) {
+                        return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                    }
+                    return (React.createElement(Fragment, { key: group.key },
+                        group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                        group.items.map(function (item, i) {
+                            return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                        })));
+                }),
+                !isLoading && hasItems && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems)))));
+    }));
 };

package/__internal__/src/components/SelectComponents/SelectItem/SelectItem.css

@@ -5,6 +5,7 @@
   color: var(--text-color);
   background-color: var(--color-control-bg-clear);
   font-size: var(--font-size);
+  word-wrap: break-word;
   cursor: pointer;
 }
 

package/__internal__/src/components/Sidebar/Sidebar.css

@@ -47,18 +47,18 @@
     }
 
   .Sidebar-Overlay {
-    position: fixed;
+    position: absolute;
     top: 0;
+    right: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    bottom: 0;
     padding: 0;
     background: var(--color-bg-tone);
     border: none;
   }
 
   .Sidebar-Window {
-    z-index: 100;
+    position: absolute;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -143,15 +143,15 @@
   }
 
   .Sidebar_animate_appear .Sidebar-Overlay, .Sidebar_animate_enter .Sidebar-Overlay, .Sidebar_animate_exit .Sidebar-Overlay, .Sidebar_animate_appearActive .Sidebar-Overlay, .Sidebar_animate_enterActive .Sidebar-Overlay, .Sidebar_animate_exitActive .Sidebar-Overlay {
-          -webkit-transition: opacity 0.2s ease;
-          transition: opacity 0.2s ease;
+          -webkit-transition: opacity 0.24s ease;
+          transition: opacity 0.24s ease;
         }
 
   .Sidebar_animate_appear .Sidebar-Window, .Sidebar_animate_enter .Sidebar-Window, .Sidebar_animate_exit .Sidebar-Window, .Sidebar_animate_appearActive .Sidebar-Window, .Sidebar_animate_enterActive .Sidebar-Window, .Sidebar_animate_exitActive .Sidebar-Window {
-          -webkit-transition: -webkit-transform 0.2s ease;
-          transition: -webkit-transform 0.2s ease;
-          transition: transform 0.2s ease;
-          transition: transform 0.2s ease, -webkit-transform 0.2s ease;
+          -webkit-transition: -webkit-transform 0.24s ease;
+          transition: -webkit-transform 0.24s ease;
+          transition: transform 0.24s ease;
+          transition: transform 0.24s ease, -webkit-transform 0.24s ease;
         }
 
   .Sidebar_animate_appear .Sidebar-Overlay, .Sidebar_animate_enter .Sidebar-Overlay {

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

@@ -47,10 +47,10 @@ export var Sidebar = function (props) {
     useGlobalKeys({
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
-    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position, hasOverlay: hasOverlay }), classNames: cnForCssTransition(cnSidebar), timeout: 200, nodeRef: portalRef },
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position, hasOverlay: hasOverlay }), classNames: cnForCssTransition(cnSidebar), timeout: 240, nodeRef: portalRef },
         React.createElement(PortalWithTheme, { preset: theme, ref: portalRef, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && React.createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __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) + 1 })), className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
+            React.createElement("div", __assign({}, otherProps, { style: __assign(__assign({}, style), { zIndex: undefined }), className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 Sidebar.Content = SidebarContent;

package/__internal__/src/components/Table/Table.js

@@ -8,6 +8,7 @@ import { IconSortUp } from '../../icons/IconSortUp/IconSortUp';
 import { IconUnsort } from '../../icons/IconUnsort/IconUnsort';
 import { sortBy as sortByDefault, updateAt } from '../../utils/array';
 import { cn } from '../../utils/bem';
+import { setRef } from '../../utils/setRef';
 import { isNotNil, isString } from '../../utils/type-guards';
 import { Button } from '../Button/Button';
 import { Text } from '../Text/Text';
@@ -334,9 +335,7 @@ var InternalTable = function (props, ref) {
         return result;
     };
     var handleCellClick = function (params) {
-        if (onCellClick) {
-            onCellClick(params);
-        }
+        onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(params);
     };
     return (React.createElement("div", { ref: useForkRef([tableRef, ref]), className: cnTable({
             size: size,
@@ -378,7 +377,7 @@ var InternalTable = function (props, ref) {
                 if (show) {
                     return (React.createElement(TableCell, { type: "content", key: column.accessor, ref: function (ref) {
                             cellsRefs.current[columnIdx + "-" + row.id] = ref;
-                            setBoundaryRef(columnIdx, rowIdx);
+                            setRef(setBoundaryRef(columnIdx, rowIdx), ref);
                         }, style: style, wrapperClassName: cnTable('ContentCell', {
                             isActive: activeRow ? activeRow.id === row.id : false,
                             isDarkned: activeRow

package/__internal__/src/hooks/useBreakpoints/useBreakpoints.js

@@ -52,11 +52,11 @@ var isEq = function (state, newState) {
 export var useBreakpoints = function (map) {
     var pointsMap = map || defaultMap;
     var _a = __read(useState(function () {
-        return mapping(document.documentElement.clientWidth, pointsMap);
+        return mapping(window.innerWidth, pointsMap);
     }), 2), points = _a[0], setSetPoints = _a[1];
     useLayoutEffect(function () {
         var subscribe = function () {
-            var newPoints = mapping(document.documentElement.clientWidth, pointsMap);
+            var newPoints = mapping(window.innerWidth, pointsMap);
             setSetPoints(function (state) { return (isEq(state, newPoints) ? state : newPoints); });
         };
         window.addEventListener('resize', subscribe);

package/__internal__/src/hooks/useClickOutside/useClickOutside.d.ts

@@ -1,9 +1,9 @@
 import { RefObject } from 'react';
 export declare type ClickOutsideHandler = (event: MouseEvent) => void;
 declare type UseClickOutsideProps = {
-    isActive: boolean;
-    ignoreClicksInsideRefs: ReadonlyArray<RefObject<HTMLElement>>;
-    handler: ClickOutsideHandler;
+    isActive?: boolean;
+    ignoreClicksInsideRefs?: ReadonlyArray<RefObject<HTMLElement>>;
+    handler?: ClickOutsideHandler;
 };
 export declare function useClickOutside({ isActive, ignoreClicksInsideRefs, handler, }: UseClickOutsideProps): void;
 export {};

package/__internal__/src/hooks/useClickOutside/useClickOutside.js

@@ -1,16 +1,27 @@
 import { useEffect } from 'react';
+import { useMutableRef } from '../useMutableRef/useMutableRef';
 export function useClickOutside(_a) {
+    // Аргументы вынесены в рефки за тем, чтобы не пересоздавать подписку `mousedown` при кажом чихе.
+    // Бывают кейсы когда на странице несколко `useClickOutside` и один вызывает рендер,
+    // А второй не успевает отрабатывать а просто пересоздается
+    // С такой реализацией пересоздание только при удалении из дома, а аргументы всегда актуалны.
     var isActive = _a.isActive, ignoreClicksInsideRefs = _a.ignoreClicksInsideRefs, handler = _a.handler;
+    var handlerRef = useMutableRef(handler);
+    var ignoreClicksInsideRefsRef = useMutableRef(ignoreClicksInsideRefs);
+    var isActiveRef = useMutableRef(isActive);
     useEffect(function () {
-        if (!isActive) {
-            return;
-        }
         var handleClick = function (event) {
+            var _a, _b;
+            if (!isActiveRef.current) {
+                return;
+            }
             var target = event.target;
-            var shouldCallHandler = ignoreClicksInsideRefs.every(function (ref) { var _a; return !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target)); });
-            shouldCallHandler && handler(event);
+            var shouldCallHandler = (_a = ignoreClicksInsideRefsRef.current) === null || _a === void 0 ? void 0 : _a.every(function (ref) { var _a; return !((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target)); });
+            shouldCallHandler && ((_b = handlerRef.current) === null || _b === void 0 ? void 0 : _b.call(handlerRef, event));
         };
         document.addEventListener('mousedown', handleClick);
-        return function () { return document.removeEventListener('mousedown', handleClick); };
-    }, [isActive, ignoreClicksInsideRefs, handler]);
+        return function () {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, []);
 }

package/__internal__/src/hooks/useForkRef/useForkRef.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-declare type AtributesRef<T> = React.Ref<T> | undefined;
-declare type ResultRef<T> = React.RefCallback<T> | null;
-export declare function useForkRef<T>(refs: AtributesRef<T>[]): ResultRef<T>;
-export {};
+export declare function useForkRef<T>(refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> | null;

package/__internal__/src/icons/IconFacebook/IconFacebook_size_m.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconFacebookSizeM(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 24 24" }, props),
-        React.createElement("path", { d: "M22 12C22 6.47656 17.5234 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C12.0586 22 12.1172 22 12.1758 21.9961V14.2148H10.0273V11.7109H12.1758V9.86719C12.1758 7.73047 13.4805 6.56641 15.3867 6.56641C16.3008 6.56641 17.0859 6.63281 17.3125 6.66406V8.89844H16C14.9648 8.89844 14.7617 9.39062 14.7617 10.1133V11.707H17.2422L16.918 14.2109H14.7617V21.6133C18.9414 20.4141 22 16.5664 22 12Z" })));
+        React.createElement("path", { d: "M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.059 0 .117 0 .176-.004v-7.781h-2.149V11.71h2.149V9.867c0-2.137 1.304-3.3 3.21-3.3.915 0 1.7.066 1.927.097v2.234H16c-1.035 0-1.238.493-1.238 1.215v1.594h2.48l-.324 2.504h-2.156v7.402C18.942 20.414 22 16.566 22 12z" })));
 }
 export default IconFacebookSizeM;

package/__internal__/src/icons/IconFacebook/IconFacebook_size_s.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconFacebookSizeS(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 16" }, props),
-        React.createElement("path", { d: "M14 8C14 4.68594 11.3141 2 8 2C4.68594 2 2 4.68594 2 8C2 11.3141 4.68594 14 8 14C8.03516 14 8.07031 14 8.10547 13.9977V9.32891H6.81641V7.82656H8.10547V6.72031C8.10547 5.43828 8.88828 4.73984 10.032 4.73984C10.5805 4.73984 11.0516 4.77969 11.1875 4.79844V6.13906H10.4C9.77891 6.13906 9.65703 6.43437 9.65703 6.86797V7.82422H11.1453L10.9508 9.32656H9.65703V13.768C12.1648 13.0484 14 10.7398 14 8Z" })));
+        React.createElement("path", { d: "M14 8A6 6 0 102 8a6 6 0 006 6c.035 0 .07 0 .105-.002v-4.67H6.816V7.828h1.29V6.72c0-1.282.782-1.98 1.926-1.98.549 0 1.02.04 1.155.058V6.14H10.4c-.621 0-.743.295-.743.729v.956h1.488l-.194 1.503H9.657v4.441A6.002 6.002 0 0014 8z" })));
 }
 export default IconFacebookSizeS;

package/__internal__/src/icons/IconInstagram/IconInstagram_size_m.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconInstagramSizeM(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 24 24" }, props),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.9492 7.88007C21.9023 6.81739 21.7304 6.08681 21.4842 5.45375C21.2302 4.78177 20.8394 4.18015 20.3274 3.68002C19.8272 3.17211 19.2215 2.77744 18.5572 2.52745C17.9203 2.28128 17.1934 2.10943 16.1306 2.06257C15.0597 2.01175 14.7198 2 12.0039 2C9.28799 2 8.94805 2.01175 7.8812 2.05861C6.81831 2.10546 6.08759 2.27746 5.45456 2.52348C4.7823 2.77744 4.18057 3.16814 3.68034 3.68002C3.17233 4.18015 2.77774 4.78574 2.52755 5.44993C2.28133 6.08681 2.10945 6.81342 2.06259 7.8761C2.01175 8.94672 2 9.2866 2 12.002C2 14.7174 2.01175 15.0572 2.05862 16.1239C2.10548 17.1866 2.27751 17.9172 2.52373 18.5502C2.77774 19.2222 3.17233 19.8238 3.68034 20.3239C4.18057 20.8319 4.78627 21.2265 5.45059 21.4765C6.08759 21.7227 6.81434 21.8945 7.87738 21.9414C8.94408 21.9884 9.28418 22 12.0001 22C14.716 22 15.0559 21.9884 16.1228 21.9414C17.1857 21.8945 17.9164 21.7227 18.5494 21.4765C19.8938 20.9569 20.9567 19.8942 21.4764 18.5502C21.7225 17.9133 21.8945 17.1866 21.9414 16.1239C21.9882 15.0572 22 14.7174 22 12.002C22 9.2866 21.996 8.94672 21.9492 7.88007ZM20.1478 16.0458C20.1047 17.0225 19.9406 17.55 19.8039 17.9016C19.4677 18.7729 18.7761 19.4644 17.9046 19.8005C17.5529 19.9372 17.0216 20.1013 16.0484 20.1442C14.9933 20.1912 14.6769 20.2028 12.0079 20.2028C9.33882 20.2028 9.01842 20.1912 7.96714 20.1442C6.99019 20.1013 6.46264 19.9372 6.11094 19.8005C5.67727 19.6402 5.28253 19.3863 4.96212 19.0542C4.62996 18.7299 4.37596 18.3391 4.21568 17.9056C4.0789 17.5539 3.91481 17.0225 3.87191 16.0497C3.8249 14.9948 3.8133 14.6783 3.8133 12.0098C3.8133 9.34124 3.8249 9.02089 3.87191 7.96996C3.91481 6.99321 4.0789 6.46576 4.21568 6.11413C4.37596 5.68039 4.62996 5.28587 4.96609 4.96537C5.29031 4.63327 5.68109 4.37932 6.11491 4.21922C6.46661 4.08247 6.99813 3.91841 7.9711 3.87537C9.0262 3.82852 9.34279 3.81677 12.0117 3.81677C14.6847 3.81677 15.0011 3.82852 16.0524 3.87537C17.0293 3.91841 17.5569 4.08247 17.9086 4.21922C18.3423 4.37932 18.737 4.63327 19.0574 4.96537C19.3896 5.28968 19.6436 5.68039 19.8039 6.11413C19.9406 6.46576 20.1047 6.99702 20.1478 7.96996C20.1946 9.02486 20.2064 9.34124 20.2064 12.0098C20.2064 14.6783 20.1946 14.9909 20.1478 16.0458ZM12.0039 6.8641C9.16693 6.8641 6.86516 9.16527 6.86516 12.0018C6.86516 14.8384 9.16693 17.1396 12.0039 17.1396C14.841 17.1396 17.1426 14.8384 17.1426 12.0018C17.1426 9.16527 14.841 6.8641 12.0039 6.8641ZM12.0039 15.3346C10.1634 15.3346 8.67052 13.8421 8.67052 12.0018C8.67052 10.1616 10.1634 8.66911 12.0039 8.66911C13.8445 8.66911 15.3372 10.1616 15.3372 12.0018C15.3372 13.8421 13.8445 15.3346 12.0039 15.3346ZM17.3458 7.86036C18.0084 7.86036 18.5456 7.3233 18.5456 6.66093C18.5456 5.99842 18.0084 5.46151 17.3458 5.46151C16.6833 5.46151 16.1461 5.99842 16.1461 6.66093C16.1461 7.3233 16.6833 7.86036 17.3458 7.86036Z" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.95 7.88c-.048-1.063-.22-1.793-.466-2.426a4.88 4.88 0 00-1.157-1.774 4.923 4.923 0 00-1.77-1.153c-.637-.246-1.364-.418-2.426-.464C15.06 2.012 14.72 2 12.004 2c-2.716 0-3.056.012-4.123.059-1.063.046-1.793.218-2.426.464A4.881 4.881 0 003.68 3.68a4.924 4.924 0 00-1.152 1.77c-.247.637-.419 1.363-.465 2.426C2.012 8.946 2 9.286 2 12.002c0 2.715.012 3.055.059 4.122.046 1.063.219 1.793.465 2.426a4.931 4.931 0 001.156 1.774c.5.508 1.106.902 1.77 1.152.638.247 1.364.419 2.427.465C8.944 21.988 9.284 22 12 22s3.056-.012 4.123-.059c1.063-.046 1.793-.218 2.426-.464a5.116 5.116 0 002.927-2.927c.247-.637.419-1.363.465-2.426.047-1.067.059-1.407.059-4.122s-.004-3.055-.05-4.122zm-1.802 8.166c-.043.977-.207 1.504-.344 1.856a3.318 3.318 0 01-1.9 1.898c-.351.137-.882.301-1.856.344-1.055.047-1.371.059-4.04.059-2.67 0-2.99-.012-4.04-.059-.978-.043-1.505-.207-1.857-.343a3.079 3.079 0 01-1.149-.747 3.11 3.11 0 01-.746-1.148c-.137-.352-.301-.883-.344-1.856-.047-1.055-.059-1.372-.059-4.04 0-2.669.012-2.99.059-4.04.043-.977.207-1.504.344-1.856a3.04 3.04 0 01.75-1.149 3.105 3.105 0 011.149-.746c.352-.137.883-.3 1.856-.344 1.055-.046 1.372-.058 4.04-.058 2.674 0 2.99.012 4.041.058.977.043 1.505.207 1.857.344.433.16.828.414 1.148.746.333.325.587.715.747 1.15.137.35.3.882.344 1.855.047 1.055.058 1.371.058 4.04 0 2.668-.011 2.98-.058 4.036zm-8.144-9.182a5.14 5.14 0 00-5.139 5.138 5.14 5.14 0 0010.278 0 5.14 5.14 0 00-5.14-5.138zm0 8.47a3.334 3.334 0 110-6.667 3.334 3.334 0 010 6.668zm5.342-7.474a1.2 1.2 0 100-2.399 1.2 1.2 0 000 2.4z" })));
 }
 export default IconInstagramSizeM;

package/__internal__/src/icons/IconInstagram/IconInstagram_size_s.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconInstagramSizeS(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 16" }, props),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.9695 5.52804C13.9414 4.89044 13.8383 4.45209 13.6905 4.07225C13.5381 3.66906 13.3037 3.30809 12.9965 3.00801C12.6963 2.70326 12.3329 2.46646 11.9343 2.31647C11.5522 2.16877 11.1161 2.06566 10.4783 2.03754C9.83584 2.00705 9.63188 2 8.00234 2C6.3728 2 6.16883 2.00705 5.52872 2.03516C4.89099 2.06328 4.45255 2.16648 4.07274 2.31409C3.66938 2.46646 3.30834 2.70088 3.0082 3.00801C2.7034 3.30809 2.46664 3.67144 2.31653 4.06996C2.1688 4.45209 2.06567 4.88805 2.03755 5.52566C2.00705 6.16803 2 6.37196 2 8.00119C2 9.63042 2.00705 9.83435 2.03517 10.4743C2.06329 11.1119 2.16651 11.5503 2.31424 11.9301C2.46664 12.3333 2.7034 12.6943 3.0082 12.9944C3.30834 13.2991 3.67176 13.5359 4.07036 13.6859C4.45255 13.8336 4.88861 13.9367 5.52643 13.9648C6.16645 13.993 6.37051 14 8.00005 14C9.62959 14 9.83355 13.993 10.4737 13.9648C11.1114 13.9367 11.5498 13.8336 11.9296 13.6859C12.7363 13.3741 13.374 12.7365 13.6859 11.9301C13.8335 11.548 13.9367 11.1119 13.9648 10.4743C13.9929 9.83435 14 9.63042 14 8.00119C14 6.37196 13.9976 6.16803 13.9695 5.52804ZM12.8887 10.4275C12.8628 11.0135 12.7644 11.33 12.6823 11.541C12.4806 12.0637 12.0657 12.4786 11.5428 12.6803C11.3318 12.7623 11.0129 12.8608 10.4291 12.8865C9.796 12.9147 9.60614 12.9217 8.00472 12.9217C6.40329 12.9217 6.21105 12.9147 5.58028 12.8865C4.99412 12.8608 4.67759 12.7623 4.46657 12.6803C4.20636 12.5841 3.96952 12.4318 3.77727 12.2325C3.57798 12.0379 3.42557 11.8035 3.32941 11.5433C3.24734 11.3324 3.14888 11.0135 3.12315 10.4298C3.09494 9.7969 3.08798 9.60698 3.08798 8.00586C3.08798 6.40474 3.09494 6.21254 3.12315 5.58198C3.14888 4.99592 3.24734 4.67946 3.32941 4.46848C3.42557 4.20823 3.57798 3.97152 3.77965 3.77922C3.97419 3.57996 4.20865 3.42759 4.46895 3.33153C4.67997 3.24948 4.99888 3.15105 5.58266 3.12522C6.21572 3.09711 6.40568 3.09006 8.00701 3.09006C9.61081 3.09006 9.80067 3.09711 10.4314 3.12522C11.0176 3.15105 11.3341 3.24948 11.5452 3.33153C11.8054 3.42759 12.0422 3.57996 12.2345 3.77922C12.4337 3.97381 12.5862 4.20823 12.6823 4.46848C12.7644 4.67946 12.8628 4.99821 12.8887 5.58198C12.9168 6.21492 12.9238 6.40474 12.9238 8.00586C12.9238 9.60698 12.9168 9.79451 12.8887 10.4275ZM8.00233 4.91855C6.30016 4.91855 4.9191 6.29925 4.9191 8.00119C4.9191 9.70312 6.30016 11.0838 8.00233 11.0838C9.70459 11.0838 11.0856 9.70312 11.0856 8.00119C11.0856 6.29925 9.70459 4.91855 8.00233 4.91855ZM8.00233 10.0008C6.89805 10.0008 6.00231 9.10535 6.00231 8.00119C6.00231 6.89703 6.89805 6.00155 8.00233 6.00155C9.1067 6.00155 10.0023 6.89703 10.0023 8.00119C10.0023 9.10535 9.1067 10.0008 8.00233 10.0008ZM11.2075 5.51632C11.605 5.51632 11.9273 5.19408 11.9273 4.79667C11.9273 4.39916 11.605 4.07701 11.2075 4.07701C10.81 4.07701 10.4877 4.39916 10.4877 4.79667C10.4877 5.19408 10.81 5.51632 11.2075 5.51632Z" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.97 5.528c-.029-.638-.132-1.076-.28-1.456a2.928 2.928 0 00-.694-1.064 2.954 2.954 0 00-1.062-.692c-.382-.147-.818-.25-1.456-.278C9.836 2.008 9.632 2 8.002 2s-1.833.007-2.473.035c-.638.028-1.076.131-1.456.28a2.929 2.929 0 00-1.065.693c-.305.3-.541.663-.691 1.062-.148.382-.251.818-.28 1.456C2.008 6.168 2 6.372 2 8c0 1.63.007 1.833.035 2.473.028.638.132 1.076.28 1.456.152.403.388.764.693 1.064.3.305.664.542 1.062.692.383.148.819.25 1.456.279.64.028.845.035 2.474.035 1.63 0 1.834-.007 2.474-.035.637-.028 1.076-.131 1.456-.28a3.07 3.07 0 001.756-1.755c.148-.382.25-.818.279-1.456.028-.64.035-.844.035-2.473s-.002-1.833-.03-2.473zm-1.081 4.9c-.026.585-.125.902-.207 1.113a1.991 1.991 0 01-1.14 1.14c-.21.081-.53.18-1.113.206-.633.028-.823.035-2.424.035-1.602 0-1.794-.007-2.425-.036-.586-.025-.902-.124-1.113-.206a1.847 1.847 0 01-.69-.447 1.865 1.865 0 01-.448-.69c-.082-.21-.18-.53-.206-1.113-.028-.633-.035-.823-.035-2.424s.007-1.793.035-2.424c.026-.586.124-.903.206-1.114.097-.26.249-.496.45-.689.195-.199.43-.351.69-.447.211-.083.53-.18 1.114-.207.633-.028.823-.035 2.424-.035 1.604 0 1.794.007 2.424.035.587.026.903.124 1.114.207.26.096.497.248.69.447.199.195.351.43.447.69.082.21.18.53.207 1.113.028.633.035.823.035 2.424s-.007 1.789-.035 2.421zm-4.887-5.51a3.084 3.084 0 10.001 6.168 3.084 3.084 0 000-6.167zm0 5.083a2 2 0 110-4 2 2 0 010 4zm3.205-4.485a.72.72 0 100-1.44.72.72 0 000 1.44z" })));
 }
 export default IconInstagramSizeS;

package/__internal__/src/icons/IconVkontakte/IconVkontakte_size_m.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconVkontakteSizeM(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 24 24" }, props),
-        React.createElement("path", { d: "M20.9045 16.7747C20.8827 16.7278 20.8624 16.6888 20.8435 16.6576C20.5312 16.0951 19.9345 15.4048 19.0535 14.5863L19.0349 14.5675L19.0256 14.5583L19.0162 14.5489H19.0067C18.6069 14.1678 18.3537 13.9115 18.2477 13.7803C18.0537 13.5304 18.0102 13.2774 18.1163 13.0211C18.1912 12.8274 18.4726 12.4184 18.9597 11.7935C19.216 11.4623 19.419 11.1969 19.5688 10.9969C20.6498 9.55983 21.1185 8.64152 20.9747 8.24161L20.9188 8.14815C20.8813 8.09189 20.7845 8.04042 20.6285 7.99348C20.4721 7.94664 20.2722 7.93889 20.0285 7.97011L17.3295 7.98875C17.2858 7.97326 17.2233 7.97471 17.142 7.99348C17.0607 8.01226 17.0201 8.02168 17.0201 8.02168L16.9731 8.04515L16.9358 8.07335C16.9046 8.09199 16.8702 8.12478 16.8327 8.17166C16.7954 8.21837 16.7642 8.27318 16.7392 8.33565C16.4454 9.09165 16.1113 9.79453 15.7363 10.4443C15.5051 10.8317 15.2928 11.1675 15.0989 11.4518C14.9053 11.736 14.7428 11.9454 14.6117 12.0796C14.4804 12.2139 14.3619 12.3216 14.2555 12.4029C14.1492 12.4842 14.0681 12.5186 14.012 12.506C13.9557 12.4935 13.9027 12.481 13.8525 12.4685C13.7651 12.4122 13.6947 12.3357 13.6417 12.2389C13.5885 12.1421 13.5526 12.0202 13.5339 11.8734C13.5153 11.7264 13.5042 11.6001 13.5011 11.4938C13.4982 11.3877 13.4995 11.2376 13.5058 11.0439C13.5123 10.8501 13.5153 10.719 13.5153 10.6503C13.5153 10.4128 13.5199 10.1551 13.5292 9.87709C13.5386 9.59906 13.5463 9.37877 13.5527 9.21648C13.559 9.05403 13.562 8.88216 13.562 8.70096C13.562 8.51977 13.551 8.37767 13.5292 8.27453C13.5076 8.17153 13.4746 8.07154 13.431 7.97461C13.3872 7.87777 13.3231 7.80287 13.2389 7.74969C13.1546 7.69658 13.0497 7.65443 12.925 7.62311C12.5938 7.54818 12.1721 7.50764 11.6596 7.50133C10.4976 7.48886 9.75093 7.5639 9.41979 7.72635C9.28859 7.79499 9.16986 7.88877 9.0637 8.0074C8.95121 8.1449 8.93552 8.21994 9.01673 8.23229C9.39166 8.28845 9.65708 8.4228 9.8133 8.63521L9.86959 8.74777C9.91338 8.82898 9.9571 8.97276 10.0009 9.1789C10.0445 9.38504 10.0727 9.61308 10.0852 9.86288C10.1163 10.319 10.1163 10.7095 10.0852 11.0344C10.0539 11.3593 10.0243 11.6123 9.99613 11.7935C9.96794 11.9747 9.92579 12.1215 9.86959 12.234C9.8133 12.3464 9.77584 12.4152 9.75707 12.4401C9.73832 12.4651 9.7227 12.4808 9.71029 12.487C9.62908 12.5181 9.54462 12.5339 9.45721 12.5339C9.36966 12.5339 9.26351 12.4901 9.13857 12.4026C9.01367 12.3151 8.88405 12.1949 8.74969 12.0418C8.61534 11.8887 8.46382 11.6747 8.29507 11.3998C8.12644 11.1249 7.95148 10.8001 7.77029 10.4252L7.62038 10.1533C7.52666 9.97845 7.39864 9.7238 7.23619 9.3896C7.07364 9.05528 6.92996 8.73188 6.80506 8.41949C6.75514 8.28828 6.68013 8.1884 6.58018 8.11966L6.53327 8.09146C6.50209 8.06652 6.45203 8.04003 6.38336 8.0118C6.31459 7.9836 6.24283 7.96338 6.1678 7.95094L3.59991 7.96958C3.33751 7.96958 3.15946 8.02903 3.06572 8.14776L3.0282 8.20392C3.00945 8.23521 3 8.28517 3 8.35394C3 8.42267 3.01874 8.50703 3.05626 8.60692C3.43113 9.48795 3.83878 10.3376 4.27923 11.1561C4.71968 11.9746 5.10242 12.6338 5.42723 13.1334C5.7521 13.6333 6.08324 14.1051 6.42065 14.5485C6.75806 14.9922 6.9814 15.2765 7.09068 15.4014C7.20008 15.5265 7.28602 15.6201 7.34849 15.6825L7.58282 15.9074C7.73277 16.0574 7.95296 16.237 8.2435 16.4463C8.5341 16.6557 8.85582 16.8618 9.20882 17.065C9.56189 17.2679 9.97263 17.4335 10.4413 17.5615C10.9099 17.6897 11.3659 17.7412 11.8096 17.7163H12.8873C13.1059 17.6975 13.2715 17.6287 13.3841 17.5101L13.4214 17.4631C13.4465 17.4258 13.4699 17.3679 13.4916 17.2899C13.5135 17.2118 13.5244 17.1258 13.5244 17.0322C13.518 16.7636 13.5385 16.5215 13.5852 16.306C13.6319 16.0905 13.6852 15.9281 13.7447 15.8187C13.8042 15.7094 13.8714 15.6171 13.9461 15.5424C14.021 15.4674 14.0744 15.422 14.1057 15.4064C14.1368 15.3907 14.1617 15.38 14.1804 15.3736C14.3304 15.3236 14.5068 15.372 14.7101 15.519C14.9132 15.6658 15.1037 15.8471 15.2818 16.0626C15.4599 16.2782 15.6739 16.5202 15.9237 16.7888C16.1738 17.0575 16.3924 17.2572 16.5798 17.3886L16.7671 17.5011C16.8922 17.5761 17.0547 17.6449 17.2547 17.7073C17.4543 17.7698 17.6292 17.7854 17.7793 17.7542L20.1784 17.7168C20.4157 17.7168 20.6004 17.6775 20.7314 17.5995C20.8626 17.5214 20.9405 17.4354 20.9657 17.3418C20.9908 17.2481 20.9921 17.1418 20.9704 17.023C20.9482 16.9045 20.9263 16.8216 20.9045 16.7747Z" })));
+        React.createElement("path", { d: "M20.904 16.775a1.233 1.233 0 00-.06-.117c-.313-.563-.91-1.253-1.79-2.072l-.02-.018-.008-.01-.01-.01h-.01c-.4-.38-.652-.636-.758-.768-.194-.25-.238-.503-.132-.759.075-.194.357-.603.844-1.228.256-.33.459-.596.609-.796 1.08-1.437 1.55-2.355 1.406-2.755l-.056-.094c-.038-.056-.134-.108-.29-.155-.157-.046-.357-.054-.6-.023l-2.7.019a.35.35 0 00-.187.004l-.122.029-.047.023-.037.028a.417.417 0 00-.103.099.645.645 0 00-.094.164 15.294 15.294 0 01-1.003 2.108c-.23.388-.443.723-.637 1.008a4.843 4.843 0 01-.487.628c-.132.134-.25.242-.357.323-.106.081-.187.116-.243.103a6.405 6.405 0 01-.16-.037.624.624 0 01-.21-.23 1.028 1.028 0 01-.108-.366 4.028 4.028 0 01-.033-.38 7.973 7.973 0 01.005-.45c.006-.193.01-.324.01-.393 0-.237.004-.495.013-.773.01-.278.017-.498.024-.66.006-.163.009-.335.009-.516s-.011-.323-.033-.426a1.46 1.46 0 00-.098-.3.505.505 0 00-.192-.225 1.083 1.083 0 00-.314-.127c-.331-.075-.753-.115-1.265-.122-1.162-.012-1.91.063-2.24.225-.131.069-.25.163-.356.281-.113.138-.128.213-.047.225.375.056.64.19.796.403l.057.113c.043.081.087.225.13.43.044.207.073.435.085.685.031.456.031.847 0 1.171a14 14 0 01-.089.76 1.52 1.52 0 01-.239.646.161.161 0 01-.047.047.702.702 0 01-.253.047c-.087 0-.193-.044-.318-.131a2.248 2.248 0 01-.39-.361 4.82 4.82 0 01-.454-.642c-.169-.275-.344-.6-.525-.975l-.15-.272c-.093-.175-.221-.43-.384-.763a14.728 14.728 0 01-.43-.97.618.618 0 00-.226-.3l-.047-.029a.642.642 0 00-.15-.08.995.995 0 00-.215-.06L3.6 7.97c-.262 0-.44.059-.534.178l-.038.056a.303.303 0 00-.028.15c0 .069.019.153.056.253.375.881.783 1.73 1.223 2.55.44.818.823 1.477 1.148 1.976.325.5.656.972.994 1.416.337.443.56.728.67.852.11.126.195.22.257.281l.235.225c.15.15.37.33.66.54.291.209.613.415.966.618s.764.368 1.232.496c.469.129.925.18 1.369.155h1.077c.219-.018.384-.087.497-.206l.037-.047a.621.621 0 00.07-.173.953.953 0 00.033-.258 3.09 3.09 0 01.061-.726c.047-.216.1-.378.16-.487a1.197 1.197 0 01.36-.413.617.617 0 01.075-.032c.15-.05.327-.002.53.145s.394.328.572.544c.178.215.392.457.642.726.25.268.468.468.656.6l.187.112c.125.075.288.144.488.206.2.063.374.078.524.047l2.4-.037c.237 0 .421-.04.552-.117.132-.079.21-.165.235-.258a.725.725 0 00.004-.319 1.177 1.177 0 00-.066-.248z" })));
 }
 export default IconVkontakteSizeM;

package/__internal__/src/icons/IconVkontakte/IconVkontakte_size_s.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconVkontakteSizeS(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 16" }, props),
-        React.createElement("path", { d: "M13.9364 11.1832C13.9218 11.1518 13.9083 11.1259 13.8957 11.1051C13.6875 10.7301 13.2896 10.2698 12.7024 9.72417L12.6899 9.71168L12.6837 9.70555L12.6774 9.69927H12.6711C12.4046 9.44518 12.2358 9.27434 12.1651 9.18687C12.0358 9.02025 12.0068 8.85159 12.0775 8.6807C12.1274 8.55159 12.315 8.27892 12.6398 7.86233C12.8107 7.64154 12.946 7.4646 13.0459 7.33128C13.7665 6.37322 14.079 5.76101 13.9831 5.4944L13.9459 5.4321C13.9209 5.39459 13.8563 5.36028 13.7523 5.32899C13.6481 5.29776 13.5148 5.2926 13.3523 5.31341L11.553 5.32584C11.5238 5.31551 11.4822 5.31647 11.428 5.32899C11.3738 5.34151 11.3467 5.34779 11.3467 5.34779L11.3154 5.36343L11.2906 5.38223C11.2697 5.39466 11.2468 5.41652 11.2218 5.44777C11.1969 5.47891 11.1761 5.51546 11.1595 5.5571C10.9636 6.0611 10.7408 6.52969 10.4909 6.96285C10.3367 7.22114 10.1952 7.44499 10.0659 7.63452C9.93685 7.82399 9.82855 7.96358 9.74115 8.05306C9.65361 8.14263 9.57461 8.21439 9.50367 8.26859C9.43283 8.32282 9.37875 8.34573 9.34131 8.33735C9.30378 8.32897 9.26844 8.32065 9.23498 8.31234C9.17671 8.27483 9.12983 8.22382 9.09449 8.15926C9.05899 8.09471 9.0351 8.01345 9.0226 7.91557C9.01017 7.81762 9.00282 7.73337 9.00072 7.66253C8.99877 7.59178 8.99967 7.49171 9.00389 7.3626C9.00822 7.23342 9.01017 7.14602 9.01017 7.10019C9.01017 6.94189 9.01326 6.77008 9.01945 6.58473C9.02575 6.39937 9.03085 6.25251 9.03512 6.14432C9.03936 6.03602 9.04133 5.92144 9.04133 5.80064C9.04133 5.67985 9.03398 5.58511 9.01945 5.51635C9.0051 5.44768 8.98306 5.38103 8.95402 5.3164C8.9248 5.25185 8.88204 5.20191 8.82593 5.16646C8.76972 5.13105 8.69982 5.10295 8.61664 5.08208C8.39586 5.03212 8.11472 5.00509 7.7731 5.00089C6.9984 4.99257 6.50062 5.0426 6.27986 5.1509C6.19239 5.19666 6.11324 5.25918 6.04247 5.33827C5.96747 5.42994 5.95701 5.47996 6.01115 5.48819C6.26111 5.52563 6.43805 5.6152 6.5422 5.75681L6.57973 5.83185C6.60892 5.88599 6.63807 5.98184 6.66724 6.11927C6.69637 6.25669 6.71517 6.40872 6.72344 6.57525C6.74423 6.87937 6.74423 7.13969 6.72344 7.35625C6.70258 7.5729 6.68289 7.74155 6.66409 7.86235C6.64529 7.98315 6.61719 8.08103 6.57973 8.15598C6.5422 8.23095 6.51723 8.27678 6.50471 8.29341C6.49222 8.31004 6.4818 8.32052 6.47353 8.32464C6.41939 8.34538 6.36308 8.35595 6.30481 8.35595C6.24644 8.35595 6.17567 8.32676 6.09238 8.26842C6.00912 8.21008 5.9227 8.12994 5.83313 8.02788C5.74356 7.92579 5.64255 7.78313 5.53004 7.59988C5.41763 7.41663 5.30099 7.20005 5.18019 6.95014L5.08025 6.7689C5.01777 6.6523 4.93243 6.48253 4.82413 6.25974C4.71576 6.03685 4.61998 5.82126 4.53671 5.61299C4.50342 5.52552 4.45342 5.45893 4.38679 5.41311L4.35551 5.39431C4.33473 5.37768 4.30135 5.36002 4.25557 5.3412C4.20973 5.3224 4.16189 5.30892 4.11186 5.30063L2.39994 5.31306C2.22501 5.31306 2.10631 5.35269 2.04381 5.43184L2.0188 5.46928C2.0063 5.49014 2 5.52344 2 5.56929C2 5.61511 2.0125 5.67135 2.03751 5.73795C2.28742 6.3253 2.55919 6.89175 2.85282 7.43739C3.14645 7.98304 3.40161 8.42257 3.61815 8.75559C3.83473 9.08885 4.05549 9.40338 4.28043 9.69903C4.50537 9.99478 4.65427 10.1843 4.72712 10.2676C4.80006 10.351 4.85735 10.4134 4.89899 10.455L5.05522 10.6049C5.15518 10.7049 5.30197 10.8247 5.49567 10.9642C5.6894 11.1038 5.90388 11.2412 6.13921 11.3767C6.37459 11.5119 6.64842 11.6223 6.96085 11.7077C7.27324 11.7931 7.57729 11.8274 7.87304 11.8109H8.59156C8.73729 11.7983 8.84769 11.7525 8.92273 11.6734L8.94758 11.6421C8.9643 11.6172 8.97995 11.5786 8.99439 11.5266C9.00901 11.4746 9.01628 11.4172 9.01628 11.3548C9.01201 11.1757 9.02564 11.0144 9.05681 10.8707C9.08795 10.727 9.12344 10.6187 9.16314 10.5458C9.20281 10.4729 9.24759 10.4114 9.29741 10.3616C9.34735 10.3116 9.38294 10.2813 9.40381 10.2709C9.42456 10.2604 9.44112 10.2533 9.45362 10.2491C9.55358 10.2158 9.67123 10.248 9.80673 10.346C9.94212 10.4439 10.0691 10.5647 10.1879 10.7084C10.3066 10.8522 10.4493 11.0135 10.6158 11.1925C10.7825 11.3717 10.9283 11.5048 11.0532 11.5924L11.1781 11.6674C11.2615 11.7174 11.3698 11.7633 11.5031 11.8049C11.6362 11.8465 11.7528 11.8569 11.8529 11.8361L13.4523 11.8112C13.6105 11.8112 13.7336 11.785 13.8209 11.733C13.9084 11.6809 13.9604 11.6236 13.9771 11.5612C13.9938 11.4987 13.9947 11.4279 13.9803 11.3487C13.9655 11.2696 13.9509 11.2144 13.9364 11.1832Z" })));
+        React.createElement("path", { d: "M13.936 11.183a.822.822 0 00-.04-.078c-.209-.375-.606-.835-1.194-1.38l-.012-.013-.006-.006-.007-.007h-.006a7.223 7.223 0 01-.506-.512c-.13-.167-.158-.335-.087-.506.05-.13.237-.402.562-.819.17-.22.306-.397.406-.53.72-.959 1.033-1.571.937-1.838l-.037-.062c-.025-.037-.09-.072-.194-.103a.984.984 0 00-.4-.016l-1.799.013a.233.233 0 00-.125.003l-.081.019-.032.015-.024.02a.276.276 0 00-.07.065.427.427 0 00-.062.11 10.21 10.21 0 01-.668 1.405c-.154.258-.296.482-.425.672-.13.189-.237.329-.325.418-.087.09-.166.161-.237.216-.071.054-.125.077-.163.068a4.601 4.601 0 01-.106-.025.415.415 0 01-.14-.153.685.685 0 01-.072-.243 2.686 2.686 0 01-.02-.553c.005-.13.007-.217.007-.263 0-.158.003-.33.01-.515.006-.186.01-.332.015-.44.004-.109.006-.224.006-.344 0-.121-.007-.216-.022-.285a.972.972 0 00-.065-.2.337.337 0 00-.128-.15.722.722 0 00-.21-.084 4.157 4.157 0 00-.843-.081c-.775-.008-1.272.042-1.493.15a.842.842 0 00-.238.187c-.075.092-.085.142-.03.15.25.038.426.127.53.269l.038.075c.029.054.058.15.087.287.03.138.048.29.056.456.021.304.021.565 0 .781-.02.217-.04.386-.059.506a1.013 1.013 0 01-.16.431.108.108 0 01-.03.032.468.468 0 01-.17.031c-.058 0-.128-.03-.212-.088a1.5 1.5 0 01-.259-.24A3.217 3.217 0 015.53 7.6a7.47 7.47 0 01-.35-.65l-.1-.181a15.59 15.59 0 01-.256-.51 9.819 9.819 0 01-.287-.646.412.412 0 00-.15-.2l-.031-.019a.663.663 0 00-.244-.094L2.4 5.314c-.175 0-.294.04-.356.119l-.025.037a.202.202 0 00-.019.1c0 .046.013.102.038.169.25.587.521 1.154.815 1.7.293.545.549.985.765 1.318.217.333.437.647.662.943.225.296.374.485.447.569.073.083.13.145.172.187l.156.15c.1.1.247.22.44.36.194.139.409.276.644.412.236.135.51.245.822.33.312.086.616.12.912.104h.719a.498.498 0 00.33-.138l.026-.03a.415.415 0 00.046-.116.634.634 0 00.022-.172c-.004-.18.01-.34.04-.484.032-.144.067-.252.107-.325a.797.797 0 01.24-.275.393.393 0 01.05-.022c.1-.033.218-.001.354.097.135.098.262.219.38.362.12.144.262.306.429.485.167.179.312.312.437.4l.125.074c.083.05.192.096.325.138a.7.7 0 00.35.031l1.6-.025a.724.724 0 00.368-.078c.087-.052.14-.11.156-.172a.485.485 0 00.003-.212.784.784 0 00-.044-.166z" })));
 }
 export default IconVkontakteSizeS;

package/__internal__/src/icons/IconYandexDzen/IconYandexDzen_size_m.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconYandexDzenSizeM(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 24 24" }, props),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.0008 11.7983C6.11445 11.751 8.41685 11.4818 9.94934 9.94927C11.4818 8.41678 11.7511 6.11438 11.7984 2.00073C6.43518 2.1072 2.10727 6.43511 2.0008 11.7983ZM12.3957 2.00638C12.4431 6.11649 12.7128 8.41748 14.2446 9.94927C15.7531 11.4577 18.0075 11.7422 22.0008 11.7959C21.8944 6.49809 17.6688 2.21108 12.3957 2.00638ZM21.9951 12.398C18.0053 12.4519 15.7524 12.7368 14.2446 14.2446C12.7369 15.7523 12.4519 18.0052 12.3981 21.995C17.6061 21.7916 21.7917 17.6061 21.9951 12.398ZM11.796 22.0007C11.7423 18.0074 11.4578 15.753 9.94934 14.2446C8.41755 12.7128 6.11656 12.4431 2.00645 12.3956C2.21115 17.6688 6.49818 21.8943 11.796 22.0007Z" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 11.798c4.114-.047 6.417-.316 7.95-1.849 1.532-1.532 1.801-3.835 1.848-7.948-5.363.106-9.69 4.434-9.797 9.797zm10.396-9.792c.047 4.11.317 6.411 1.849 7.943 1.508 1.509 3.763 1.793 7.756 1.847-.107-5.298-4.332-9.585-9.605-9.79zm9.6 10.392c-3.99.054-6.244.339-7.751 1.847-1.508 1.507-1.793 3.76-1.847 7.75a10.002 10.002 0 009.597-9.597zm-10.2 9.603c-.054-3.994-.338-6.248-1.847-7.756-1.531-1.532-3.832-1.802-7.943-1.85.205 5.274 4.492 9.5 9.79 9.606z" })));
 }
 export default IconYandexDzenSizeM;

package/__internal__/src/icons/IconYandexDzen/IconYandexDzen_size_s.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconYandexDzenSizeS(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 16" }, props),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 7.87737C4.46769 7.84898 5.84885 7.68746 6.76815 6.76815C7.68746 5.84885 7.84898 4.46769 7.87737 2C4.66008 2.06387 2.06387 4.66008 2 7.87737ZM8.23566 2.00339C8.26413 4.46895 8.42592 5.84927 9.34481 6.76815C10.2497 7.67303 11.602 7.84372 13.9976 7.87591C13.9337 4.69786 11.3989 2.12618 8.23566 2.00339ZM13.9941 8.2371C11.6008 8.2694 10.2493 8.44036 9.34481 9.34481C8.44036 10.2493 8.2694 11.6008 8.2371 13.9941C11.3613 13.8721 13.8721 11.3613 13.9941 8.2371ZM7.87593 13.9976C7.84372 11.602 7.67303 10.2497 6.76815 9.34481C5.84927 8.42592 4.46895 8.26413 2.00339 8.23566C2.12618 11.3989 4.69788 13.9337 7.87593 13.9976Z" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 7.877c2.468-.028 3.849-.19 4.768-1.109.92-.92 1.081-2.3 1.11-4.768A6 6 0 002 7.877zm6.236-5.874c.028 2.466.19 3.846 1.109 4.765.905.905 2.257 1.076 4.653 1.108a6 6 0 00-5.762-5.873zm5.758 6.234c-2.393.032-3.745.203-4.65 1.108-.904.904-1.075 2.256-1.107 4.65a6 6 0 005.757-5.758zm-6.118 5.76c-.032-2.395-.203-3.747-1.108-4.652-.919-.92-2.299-1.08-4.765-1.11a6 6 0 005.873 5.763z" })));
 }
 export default IconYandexDzenSizeS;

package/__internal__/src/icons/IconYoutube/IconYoutube_size_m.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconYoutubeSizeM(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 24 24" }, props),
-        React.createElement("path", { d: "M21.5879 7.19117C21.3575 6.33435 20.6819 5.65894 19.8252 5.42822C18.2602 5 11.9998 5 11.9998 5C11.9998 5 5.73963 5 4.17456 5.41199C3.33435 5.64246 2.64234 6.33448 2.41187 7.19117C2 8.75611 2 12.0016 2 12.0016C2 12.0016 2 15.2634 2.41187 16.812C2.64258 17.6687 3.31787 18.3441 4.17469 18.5749C5.75611 19.0032 12 19.0032 12 19.0032C12 19.0032 18.2602 19.0032 19.8252 18.5912C20.682 18.3606 21.3575 17.6852 21.5882 16.8285C21.9999 15.2634 21.9999 12.0181 21.9999 12.0181C21.9999 12.0181 22.0164 8.75611 21.5879 7.19117ZM10.0066 14.9999V9.0033L15.2124 12.0016L10.0066 14.9999Z" })));
+        React.createElement("path", { d: "M21.588 7.191a2.505 2.505 0 00-1.763-1.763C18.26 5 12 5 12 5s-6.26 0-7.825.412c-.84.23-1.533.922-1.763 1.78C2 8.755 2 12.001 2 12.001s0 3.261.412 4.81c.23.857.906 1.532 1.763 1.763 1.581.428 7.825.428 7.825.428s6.26 0 7.825-.412a2.506 2.506 0 001.763-1.763c.412-1.565.412-4.81.412-4.81s.016-3.262-.412-4.827zM10.007 15V9.003l5.205 2.999L10.007 15z" })));
 }
 export default IconYoutubeSizeM;

package/__internal__/src/icons/IconYoutube/IconYoutube_size_s.js

@@ -2,6 +2,6 @@ import { __assign } from "tslib";
 import * as React from 'react';
 function IconYoutubeSizeS(props) {
     return (React.createElement("svg", __assign({ viewBox: "0 0 16 16" }, props),
-        React.createElement("path", { d: "M13.7528 5.3147C13.6145 4.80061 13.2092 4.39536 12.6951 4.25693C11.7561 4 7.99987 4 7.99987 4C7.99987 4 4.24378 4 3.30474 4.24719C2.80061 4.38547 2.3854 4.80069 2.24712 5.3147C2 6.25367 2 8.20096 2 8.20096C2 8.20096 2 10.1581 2.24712 11.0872C2.38555 11.6012 2.79072 12.0065 3.30481 12.1449C4.25367 12.4019 8.00001 12.4019 8.00001 12.4019C8.00001 12.4019 11.7561 12.4019 12.6951 12.1547C13.2092 12.0164 13.6145 11.6111 13.7529 11.0971C13.9999 10.1581 13.9999 8.21085 13.9999 8.21085C13.9999 8.21085 14.0098 6.25367 13.7528 5.3147ZM6.80396 9.99994V6.40198L9.92746 8.20096L6.80396 9.99994Z" })));
+        React.createElement("path", { d: "M13.753 5.315a1.503 1.503 0 00-1.058-1.058C11.756 4 8 4 8 4s-3.756 0-4.695.247c-.504.138-.92.554-1.058 1.068C2 6.254 2 8.2 2 8.2s0 1.957.247 2.886c.139.514.544.92 1.058 1.058.949.257 4.695.257 4.695.257s3.756 0 4.695-.247c.514-.139.92-.544 1.058-1.058C14 10.158 14 8.211 14 8.211s.01-1.957-.247-2.896zM6.804 10V6.402l3.123 1.799L6.804 10z" })));
 }
 export default IconYoutubeSizeS;

package/createIcon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createIcon",
-  "version": "3.18.2",
+  "version": "3.20.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [