@consta/uikit 3.9.0 → 3.10.0

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

@@ -44,7 +44,7 @@ export declare type TextFieldPropRightSide<TYPE> = TYPE extends 'number' ? {
 } : {
     rightSide?: string | React.FC<IconProps>;
 };
-export declare type Props<TYPE extends string> = {
+export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<{
     className?: string;
     value?: TextFieldPropValue;
     cols?: number;
@@ -82,7 +82,6 @@ export declare type Props<TYPE extends string> = {
     caption?: string;
     labelPosition?: 'top' | 'left';
     focused?: boolean;
-} & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
-export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<Props<TYPE>, HTMLDivElement>;
+}, HTMLDivElement> & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
 export declare type TextFieldComponent = <TYPE extends string>(props: TextFieldProps<TYPE> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 export declare const sizeMap: Record<TextFieldPropSize, IconPropSize>;

package/__internal__/cjs-src/components/Theme/_color/Theme_color_gpnDark.css

@@ -14,7 +14,7 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
   --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 89, 99); /* Цвет фона системнный */
+  --color-bg-system: rgb(77, 82, 91); /* Цвет фона системнный */
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +28,8 @@
   --color-typo-secondary: rgba(255, 255, 255, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(255, 255, 255, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(94, 121, 141); /* Цвет фона системнный */
+  --color-typo-system: rgb(99, 110, 131); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

package/__internal__/cjs-src/components/Theme/_color/Theme_color_gpnDefault.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(0, 32, 51, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 32, 51, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(206, 216, 222); /* Цвет фона системнный */
+  --color-bg-system: rgb(222, 228, 232); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(86, 185, 242); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(0, 32, 51, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(0, 32, 51, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(132, 167, 189); /* Цвет фона системнный */
+  --color-typo-system: rgb(151, 178, 196); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(51, 180, 255); /* Цвет фона нейтральный */
   --color-typo-success: rgb(9, 179, 123); /* Цвет текста успеха */
   --color-typo-caution: rgb(255, 161, 10); /* Цвет текста осторожности */

package/__internal__/cjs-src/components/Theme/_color/Theme_color_gpnDisplay.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 22, 31, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 98, 114); /* Цвет фона системнный */
+  --color-bg-system: rgb(49, 85, 129); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(246, 251, 253, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(246, 251, 253, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(96, 130, 154); /* Цвет фона системнный */
+  --color-typo-system: rgb(64, 114, 176); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

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

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useChoiceGroup_1 = require("../../hooks/useChoiceGroup/useChoiceGroup");
 var IconCheck_1 = require("../../icons/IconCheck/IconCheck");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var setRef_1 = require("../../utils/setRef");
 var Button_1 = require("../Button/Button");
 var ContextMenu_1 = require("../ContextMenu/ContextMenu");
@@ -38,8 +38,8 @@ exports.ThemeToggler = react_1["default"].forwardRef(function (props, componentR
         callBack: onChange,
         multiple: false
     }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
-    var iconSize = getSizeByMap_1.getSizeByMap(iconSizeMap, size);
-    var contextMenuSize = getSizeByMap_1.getSizeByMap(contextMenuSizeMap, size);
+    var iconSize = getByMap_1.getByMap(iconSizeMap, size);
+    var contextMenuSize = getByMap_1.getByMap(contextMenuSizeMap, size);
     var getButtonIcon = function () { return getItemIcon(items.find(function (theme) { return getChecked(theme); })); };
     var onButtonClick = function (e) {
         if (items.length > 2) {
@@ -62,5 +62,5 @@ exports.ThemeToggler = react_1["default"].forwardRef(function (props, componentR
     }
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
         react_1["default"].createElement(Button_1.Button, tslib_1.__assign({}, otherProps, { ref: ref, iconLeft: getButtonIcon(), onClick: onButtonClick, onlyIcon: true, size: size, view: "clear" })),
-        items.length > 2 && isOpen && (react_1["default"].createElement(ContextMenu_1.ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getOnClick: getOnChange, size: contextMenuSize }))));
+        items.length > 2 && isOpen && (react_1["default"].createElement(ContextMenu_1.ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getItemOnClick: getOnChange, size: contextMenuSize }))));
 });

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

@@ -6,7 +6,7 @@ require("./User.css");
 var react_1 = tslib_1.__importDefault(require("react"));
 var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var PropsWithAsAttributes_1 = require("../../utils/types/PropsWithAsAttributes");
 var Avatar_1 = require("../Avatar/Avatar");
 var Button_1 = require("../Button/Button");
@@ -46,11 +46,11 @@ exports.User = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
     var IconRight = iconRight;
     return (react_1["default"].createElement(Tag, tslib_1.__assign({}, otherProps, { className: exports.cnUser({ size: size, view: view, width: width, withArrow: withArrow, minified: onlyAvatar }, [className]), ref: ref }),
         react_1["default"].createElement("div", { className: exports.cnUser('AvatarWrapper', { status: status }) },
-            react_1["default"].createElement(Avatar_1.Avatar, { size: getSizeByMap_1.getSizeByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
+            react_1["default"].createElement(Avatar_1.Avatar, { size: getByMap_1.getByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
         !onlyAvatar && (name || info) && (react_1["default"].createElement("div", { className: exports.cnUser('Block') },
             name && (react_1["default"].createElement(Text_1.Text, { className: exports.cnUser('Name'), size: size, view: "primary", lineHeight: "2xs" }, name)),
-            info && size !== 's' && (react_1["default"].createElement(Text_1.Text, { className: exports.cnUser('Info'), size: getSizeByMap_1.getSizeByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
-        withArrow && (react_1["default"].createElement(IconSelect_1.IconSelect, { className: exports.cnUser('Icon'), size: getSizeByMap_1.getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && !onIconRightClick && (react_1["default"].createElement(IconRight, { className: exports.cnUser('Icon'), size: getSizeByMap_1.getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && onIconRightClick && (react_1["default"].createElement(Button_1.Button, { className: exports.cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getSizeByMap_1.getSizeByMap(buttonSizeMap, size), form: "round" }))));
+            info && size !== 's' && (react_1["default"].createElement(Text_1.Text, { className: exports.cnUser('Info'), size: getByMap_1.getByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
+        withArrow && (react_1["default"].createElement(IconSelect_1.IconSelect, { className: exports.cnUser('Icon'), size: getByMap_1.getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && !onIconRightClick && (react_1["default"].createElement(IconRight, { className: exports.cnUser('Icon'), size: getByMap_1.getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && onIconRightClick && (react_1["default"].createElement(Button_1.Button, { className: exports.cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getByMap_1.getByMap(buttonSizeMap, size), form: "round" }))));
 });

package/__internal__/cjs-src/hooks/useSelect/useSelect.js

@@ -69,13 +69,10 @@ function useSelect(params) {
         return optionForCreate ? tslib_1.__spread([optionForCreate], resultGroups) : resultGroups;
     }, [filteredOptions, groups, getItemGroupKey, getGroupKey, sortGroups, optionForCreate]);
     var notFound = react_1.useMemo(function () {
-        var flag = !params.onCreate;
+        var flag = false;
         if (searchValue.length > 0) {
-            visibleItems.forEach(function (group) {
-                if (exports.isOptionForCreate(group) || group.items.length > 0 || group.group) {
-                    flag = false;
-                }
-            });
+            flag =
+                visibleItems.filter(function (group) { return exports.isOptionForCreate(group) || group.items.length > 0 || group.group; }).length === 0 && !params.onCreate;
         }
         return flag;
     }, [visibleItems]);

package/__internal__/cjs-src/mixs/MixSpace/MixSpace.css

@@ -0,0 +1,400 @@
+.MixSpace_pT_3xs,
+    .MixSpace_pT_2xs,
+    .MixSpace_pT_xs,
+    .MixSpace_pT_s,
+    .MixSpace_pT_m,
+    .MixSpace_pT_l,
+    .MixSpace_pT_xl,
+    .MixSpace_pT_2xl,
+    .MixSpace_pT_3xl,
+    .MixSpace_pT_4xl,
+    .MixSpace_pT_5xl,
+    .MixSpace_pT_6xl {
+      padding-top: var(--space-padding-top);
+    }
+    .MixSpace_pT_3xs {
+      --space-padding-top: var(--space-3xs);
+    }
+    .MixSpace_pT_2xs {
+      --space-padding-top: var(--space-2xs);
+    }
+    .MixSpace_pT_xs {
+      --space-padding-top: var(--space-xs);
+    }
+    .MixSpace_pT_s {
+      --space-padding-top: var(--space-s);
+    }
+    .MixSpace_pT_m {
+      --space-padding-top: var(--space-m);
+    }
+    .MixSpace_pT_l {
+      --space-padding-top: var(--space-l);
+    }
+    .MixSpace_pT_xl {
+      --space-padding-top: var(--space-xl);
+    }
+    .MixSpace_pT_2xl {
+      --space-padding-top: var(--space-2xl);
+    }
+    .MixSpace_pT_3xl {
+      --space-padding-top: var(--space-3xl);
+    }
+    .MixSpace_pT_4xl {
+      --space-padding-top: var(--space-4xl);
+    }
+    .MixSpace_pT_5xl {
+      --space-padding-top: var(--space-5xl);
+    }
+    .MixSpace_pT_6xl {
+      --space-padding-top: var(--space-6xl);
+    }
+  .MixSpace_pL_3xs,
+    .MixSpace_pL_2xs,
+    .MixSpace_pL_xs,
+    .MixSpace_pL_s,
+    .MixSpace_pL_m,
+    .MixSpace_pL_l,
+    .MixSpace_pL_xl,
+    .MixSpace_pL_2xl,
+    .MixSpace_pL_3xl,
+    .MixSpace_pL_4xl,
+    .MixSpace_pL_5xl,
+    .MixSpace_pL_6xl {
+      padding-left: var(--space-padding-left);
+    }
+  .MixSpace_pL_3xs {
+      --space-padding-left: var(--space-3xs);
+    }
+  .MixSpace_pL_2xs {
+      --space-padding-left: var(--space-2xs);
+    }
+  .MixSpace_pL_xs {
+      --space-padding-left: var(--space-xs);
+    }
+  .MixSpace_pL_s {
+      --space-padding-left: var(--space-s);
+    }
+  .MixSpace_pL_m {
+      --space-padding-left: var(--space-m);
+    }
+  .MixSpace_pL_l {
+      --space-padding-left: var(--space-l);
+    }
+  .MixSpace_pL_xl {
+      --space-padding-left: var(--space-xl);
+    }
+  .MixSpace_pL_2xl {
+      --space-padding-left: var(--space-2xl);
+    }
+  .MixSpace_pL_3xl {
+      --space-padding-left: var(--space-3xl);
+    }
+  .MixSpace_pL_4xl {
+      --space-padding-left: var(--space-4xl);
+    }
+  .MixSpace_pL_5xl {
+      --space-padding-left: var(--space-5xl);
+    }
+  .MixSpace_pL_6xl {
+      --space-padding-left: var(--space-6xl);
+    }
+  .MixSpace_pR_3xs,
+    .MixSpace_pR_2xs,
+    .MixSpace_pR_xs,
+    .MixSpace_pR_s,
+    .MixSpace_pR_m,
+    .MixSpace_pR_l,
+    .MixSpace_pR_xl,
+    .MixSpace_pR_2xl,
+    .MixSpace_pR_3xl,
+    .MixSpace_pR_4xl,
+    .MixSpace_pR_5xl,
+    .MixSpace_pR_6xl {
+      padding-right: var(--space-padding-right);
+    }
+  .MixSpace_pR_3xs {
+      --space-padding-right: var(--space-3xs);
+    }
+  .MixSpace_pR_2xs {
+      --space-padding-right: var(--space-2xs);
+    }
+  .MixSpace_pR_xs {
+      --space-padding-right: var(--space-xs);
+    }
+  .MixSpace_pR_s {
+      --space-padding-right: var(--space-s);
+    }
+  .MixSpace_pR_m {
+      --space-padding-right: var(--space-m);
+    }
+  .MixSpace_pR_l {
+      --space-padding-right: var(--space-l);
+    }
+  .MixSpace_pR_xl {
+      --space-padding-right: var(--space-xl);
+    }
+  .MixSpace_pR_2xl {
+      --space-padding-right: var(--space-2xl);
+    }
+  .MixSpace_pR_3xl {
+      --space-padding-right: var(--space-3xl);
+    }
+  .MixSpace_pR_4xl {
+      --space-padding-right: var(--space-4xl);
+    }
+  .MixSpace_pR_5xl {
+      --space-padding-right: var(--space-5xl);
+    }
+  .MixSpace_pR_6xl {
+      --space-padding-right: var(--space-6xl);
+    }
+  .MixSpace_pB_3xs,
+    .MixSpace_pB_2xs,
+    .MixSpace_pB_xs,
+    .MixSpace_pB_s,
+    .MixSpace_pB_m,
+    .MixSpace_pB_l,
+    .MixSpace_pB_xl,
+    .MixSpace_pB_2xl,
+    .MixSpace_pB_3xl,
+    .MixSpace_pB_4xl,
+    .MixSpace_pB_5xl,
+    .MixSpace_pB_6xl {
+      padding-bottom: var(--space-padding-bottom);
+    }
+  .MixSpace_pB_3xs {
+      --space-padding-bottom: var(--space-3xs);
+    }
+  .MixSpace_pB_2xs {
+      --space-padding-bottom: var(--space-2xs);
+    }
+  .MixSpace_pB_xs {
+      --space-padding-bottom: var(--space-xs);
+    }
+  .MixSpace_pB_s {
+      --space-padding-bottom: var(--space-s);
+    }
+  .MixSpace_pB_m {
+      --space-padding-bottom: var(--space-m);
+    }
+  .MixSpace_pB_l {
+      --space-padding-bottom: var(--space-l);
+    }
+  .MixSpace_pB_xl {
+      --space-padding-bottom: var(--space-xl);
+    }
+  .MixSpace_pB_2xl {
+      --space-padding-bottom: var(--space-2xl);
+    }
+  .MixSpace_pB_3xl {
+      --space-padding-bottom: var(--space-3xl);
+    }
+  .MixSpace_pB_4xl {
+      --space-padding-bottom: var(--space-4xl);
+    }
+  .MixSpace_pB_5xl {
+      --space-padding-bottom: var(--space-5xl);
+    }
+  .MixSpace_pB_6xl {
+      --space-padding-bottom: var(--space-6xl);
+    }
+  .MixSpace_mT_3xs,
+    .MixSpace_mT_2xs,
+    .MixSpace_mT_xs,
+    .MixSpace_mT_s,
+    .MixSpace_mT_m,
+    .MixSpace_mT_l,
+    .MixSpace_mT_xl,
+    .MixSpace_mT_2xl,
+    .MixSpace_mT_3xl,
+    .MixSpace_mT_4xl,
+    .MixSpace_mT_5xl,
+    .MixSpace_mT_6xl {
+      margin-top: var(--space-margin-top);
+    }
+  .MixSpace_mT_3xs {
+      --space-margin-top: var(--space-3xs);
+    }
+  .MixSpace_mT_2xs {
+      --space-margin-top: var(--space-2xs);
+    }
+  .MixSpace_mT_xs {
+      --space-margin-top: var(--space-xs);
+    }
+  .MixSpace_mT_s {
+      --space-margin-top: var(--space-s);
+    }
+  .MixSpace_mT_m {
+      --space-margin-top: var(--space-m);
+    }
+  .MixSpace_mT_l {
+      --space-margin-top: var(--space-l);
+    }
+  .MixSpace_mT_xl {
+      --space-margin-top: var(--space-xl);
+    }
+  .MixSpace_mT_2xl {
+      --space-margin-top: var(--space-2xl);
+    }
+  .MixSpace_mT_3xl {
+      --space-margin-top: var(--space-3xl);
+    }
+  .MixSpace_mT_4xl {
+      --space-margin-top: var(--space-4xl);
+    }
+  .MixSpace_mT_5xl {
+      --space-margin-top: var(--space-5xl);
+    }
+  .MixSpace_mT_6xl {
+      --space-margin-top: var(--space-6xl);
+    }
+  .MixSpace_mL_3xs,
+    .MixSpace_mL_2xs,
+    .MixSpace_mL_xs,
+    .MixSpace_mL_s,
+    .MixSpace_mL_m,
+    .MixSpace_mL_l,
+    .MixSpace_mL_xl,
+    .MixSpace_mL_2xl,
+    .MixSpace_mL_3xl,
+    .MixSpace_mL_4xl,
+    .MixSpace_mL_5xl,
+    .MixSpace_mL_6xl {
+      margin-left: var(--space-margin-left);
+    }
+  .MixSpace_mL_3xs {
+      --space-margin-left: var(--space-3xs);
+    }
+  .MixSpace_mL_2xs {
+      --space-margin-left: var(--space-2xs);
+    }
+  .MixSpace_mL_xs {
+      --space-margin-left: var(--space-xs);
+    }
+  .MixSpace_mL_s {
+      --space-margin-left: var(--space-s);
+    }
+  .MixSpace_mL_m {
+      --space-margin-left: var(--space-m);
+    }
+  .MixSpace_mL_l {
+      --space-margin-left: var(--space-l);
+    }
+  .MixSpace_mL_xl {
+      --space-margin-left: var(--space-xl);
+    }
+  .MixSpace_mL_2xl {
+      --space-margin-left: var(--space-2xl);
+    }
+  .MixSpace_mL_3xl {
+      --space-margin-left: var(--space-3xl);
+    }
+  .MixSpace_mL_4xl {
+      --space-margin-left: var(--space-4xl);
+    }
+  .MixSpace_mL_5xl {
+      --space-margin-left: var(--space-5xl);
+    }
+  .MixSpace_mL_6xl {
+      --space-margin-left: var(--space-6xl);
+    }
+  .MixSpace_mR_3xs,
+    .MixSpace_mR_2xs,
+    .MixSpace_mR_xs,
+    .MixSpace_mR_s,
+    .MixSpace_mR_m,
+    .MixSpace_mR_l,
+    .MixSpace_mR_xl,
+    .MixSpace_mR_2xl,
+    .MixSpace_mR_3xl,
+    .MixSpace_mR_4xl,
+    .MixSpace_mR_5xl,
+    .MixSpace_mR_6xl {
+      margin-right: var(--space-margin-right);
+    }
+  .MixSpace_mR_3xs {
+      --space-margin-right: var(--space-3xs);
+    }
+  .MixSpace_mR_2xs {
+      --space-margin-right: var(--space-2xs);
+    }
+  .MixSpace_mR_xs {
+      --space-margin-right: var(--space-xs);
+    }
+  .MixSpace_mR_s {
+      --space-margin-right: var(--space-s);
+    }
+  .MixSpace_mR_m {
+      --space-margin-right: var(--space-m);
+    }
+  .MixSpace_mR_l {
+      --space-margin-right: var(--space-l);
+    }
+  .MixSpace_mR_xl {
+      --space-margin-right: var(--space-xl);
+    }
+  .MixSpace_mR_2xl {
+      --space-margin-right: var(--space-2xl);
+    }
+  .MixSpace_mR_3xl {
+      --space-margin-right: var(--space-3xl);
+    }
+  .MixSpace_mR_4xl {
+      --space-margin-right: var(--space-4xl);
+    }
+  .MixSpace_mR_5xl {
+      --space-margin-right: var(--space-5xl);
+    }
+  .MixSpace_mR_6xl {
+      --space-margin-right: var(--space-6xl);
+    }
+  .MixSpace_mB_3xs,
+    .MixSpace_mB_2xs,
+    .MixSpace_mB_xs,
+    .MixSpace_mB_s,
+    .MixSpace_mB_m,
+    .MixSpace_mB_l,
+    .MixSpace_mB_xl,
+    .MixSpace_mB_2xl,
+    .MixSpace_mB_3xl,
+    .MixSpace_mB_4xl,
+    .MixSpace_mB_5xl,
+    .MixSpace_mB_6xl {
+      margin-bottom: var(--space-margin-bottom);
+    }
+  .MixSpace_mB_3xs {
+      --space-margin-bottom: var(--space-3xs);
+    }
+  .MixSpace_mB_2xs {
+      --space-margin-bottom: var(--space-2xs);
+    }
+  .MixSpace_mB_xs {
+      --space-margin-bottom: var(--space-xs);
+    }
+  .MixSpace_mB_s {
+      --space-margin-bottom: var(--space-s);
+    }
+  .MixSpace_mB_m {
+      --space-margin-bottom: var(--space-m);
+    }
+  .MixSpace_mB_l {
+      --space-margin-bottom: var(--space-l);
+    }
+  .MixSpace_mB_xl {
+      --space-margin-bottom: var(--space-xl);
+    }
+  .MixSpace_mB_2xl {
+      --space-margin-bottom: var(--space-2xl);
+    }
+  .MixSpace_mB_3xl {
+      --space-margin-bottom: var(--space-3xl);
+    }
+  .MixSpace_mB_4xl {
+      --space-margin-bottom: var(--space-4xl);
+    }
+  .MixSpace_mB_5xl {
+      --space-margin-bottom: var(--space-5xl);
+    }
+  .MixSpace_mB_6xl {
+      --space-margin-bottom: var(--space-6xl);
+    }

package/__internal__/cjs-src/mixs/MixSpace/MixSpace.d.ts

@@ -0,0 +1,21 @@
+import './MixSpace.css';
+declare type PropSpace = 'm' | '3xs' | '2xs' | 'xs' | 's' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+declare type Props = {
+    p?: PropSpace;
+    m?: PropSpace;
+    pV?: PropSpace;
+    pH?: PropSpace;
+    mV?: PropSpace;
+    mH?: PropSpace;
+    mT?: PropSpace;
+    mL?: PropSpace;
+    mR?: PropSpace;
+    mB?: PropSpace;
+    pT?: PropSpace;
+    pL?: PropSpace;
+    pR?: PropSpace;
+    pB?: PropSpace;
+};
+declare type CnMixSpace = (props: Props) => string;
+export declare const cnMixSpace: CnMixSpace;
+export {};

package/__internal__/cjs-src/mixs/MixSpace/MixSpace.js

@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.cnMixSpace = void 0;
+require("./MixSpace.css");
+var bem_1 = require("../../utils/bem");
+var cnSpace = bem_1.cn('MixSpace');
+exports.cnMixSpace = function (props) {
+    var p = props.p, m = props.m, pV = props.pV, pH = props.pH, mV = props.mV, mH = props.mH, mT = props.mT, mL = props.mL, mR = props.mR, mB = props.mB, pT = props.pT, pL = props.pL, pR = props.pR, pB = props.pB;
+    return cnSpace({
+        pT: pT || pV || p,
+        pL: pL || pH || p,
+        pR: pR || pH || p,
+        pB: pB || pV || p,
+        mT: mT || mV || m,
+        mL: mL || mH || m,
+        mR: mR || mH || m,
+        mB: mB || mV || m
+    });
+};

package/__internal__/cjs-src/utils/getByMap.d.ts

@@ -0,0 +1 @@
+export declare function getByMap<COMPONENT_SIZE extends string | number, SIZE>(map: Record<COMPONENT_SIZE, SIZE>, componentSize: COMPONENT_SIZE, size?: SIZE): SIZE;

package/__internal__/cjs-src/utils/getByMap.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+exports.getByMap = void 0;
+function getByMap(map, componentSize, size) {
+    if (size) {
+        return size;
+    }
+    return map[componentSize];
+}
+exports.getByMap = getByMap;

package/__internal__/src/components/Avatar/Avatar.css

@@ -19,35 +19,38 @@
   --avatar-color-16: #1abc1a;
   --avatar-color-17: #6fb80a;
   overflow: hidden;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
   color: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.24)), to(rgba(255, 255, 255, 0))),
     -webkit-gradient(linear, left top, left bottom, from(var(--avatar-color)), to(var(--avatar-color)));
   background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
     linear-gradient(var(--avatar-color), var(--avatar-color));
+  font-size: var(--avatar-font-size);
   font-weight: var(--font-weight-text-semibold);
+  line-height: var(--avatar-size);
   text-align: center;
   letter-spacing: 0.1em;
 }
 
   .Avatar_size_xs {
-      width: 20px;
-      height: 20px;
-      font-size: 6px;
-      line-height: 20px;
+      --avatar-size: 20px;
+      --avatar-font-size: 6px;
     }
 
   .Avatar_size_s {
-      width: 24px;
-      height: 24px;
-      font-size: 8px;
-      line-height: 24px;
+      --avatar-size: 24px;
+      --avatar-font-size: 8px;
     }
 
   .Avatar_size_m {
-      width: 32px;
-      height: 32px;
-      font-size: 10px;
-      line-height: 32px;
+      --avatar-size: 32px;
+      --avatar-font-size: 10px;
+    }
+
+  .Avatar_size_l {
+      --avatar-size: 40px;
+      --avatar-font-size: 14px;
     }
 
   .Avatar_form_round {

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

@@ -1,5 +1,5 @@
 import './Avatar.css';
-export declare const avatarPropSize: readonly ["m", "s", "xs"];
+export declare const avatarPropSize: readonly ["m", "s", "xs", "l"];
 export declare type AvatarPropSize = typeof avatarPropSize[number];
 export declare const avatarPropSizeDefault: AvatarPropSize;
 export declare const avatarPropForm: readonly ["round", "brick", "default"];

package/__internal__/src/components/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import './Avatar.css';
 import React, { useMemo } from 'react';
 import { cn } from '../../utils/bem';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
-export var avatarPropSize = ['m', 's', 'xs'];
+export var avatarPropSize = ['m', 's', 'xs', 'l'];
 export var avatarPropSizeDefault = avatarPropSize[0];
 export var avatarPropForm = ['round', 'brick', 'default'];
 export var avatarPropFormDefault = avatarPropForm[0];