@consta/uikit 3.9.3 → 3.10.0

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

@@ -10,7 +10,7 @@ var IconClose_1 = require("../../icons/IconClose/IconClose");
 var IconSelect_1 = require("../../icons/IconSelect/IconSelect");
 var IconSelectOpen_1 = require("../../icons/IconSelectOpen/IconSelectOpen");
 var bem_1 = require("../../utils/bem");
-var getSizeByMap_1 = require("../../utils/getSizeByMap");
+var getByMap_1 = require("../../utils/getByMap");
 var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var FieldCaption_1 = require("../FieldCaption/FieldCaption");
 var FieldLabel_1 = require("../FieldLabel/FieldLabel");
@@ -27,7 +27,7 @@ function TextFieldRender(props, ref) {
     var RightIcon = rightSide;
     var leftSideIsString = typeof leftSide === 'string';
     var rightSideIsString = typeof rightSide === 'string';
-    var iconSize = getSizeByMap_1.getSizeByMap(helpers_1.sizeMap, size, iconSizeProp);
+    var iconSize = getByMap_1.getByMap(helpers_1.sizeMap, size, iconSizeProp);
     var handleChange = function (e) {
         var value = e.target.value;
         !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange({ e: e, id: id, name: name, value: value || null }));

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

@@ -72,7 +72,7 @@ function useSelect(params) {
         var flag = false;
         if (searchValue.length > 0) {
             flag =
-                visibleItems.filter(function (group) { return exports.isOptionForCreate(group) || group.items.length > 0 || group.group; }).length === 0 || !params.onCreate;
+                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/Breadcrumbs/Breadcrumbs.js

@@ -3,7 +3,7 @@ import './Breadcrumbs.css';
 import React, { useMemo } from 'react';
 import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { Button } from '../Button/Button';
 export var breadcrumbPropSize = ['m', 'xs', 's', 'l'];
 export var breadcrumbPropSizeDefault = breadcrumbPropSize[0];
@@ -16,7 +16,7 @@ var sizeMap = {
 };
 export var Breadcrumbs = React.forwardRef(function (props, ref) {
     var pages = props.pages, getLabel = props.getLabel, getIsActive = props.getIsActive, getLink = props.getLink, getIcon = props.getIcon, _a = props.size, size = _a === void 0 ? breadcrumbPropSizeDefault : _a, _b = props.maxCount, maxCount = _b === void 0 ? 0 : _b, onClick = props.onClick, _c = props.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = props.className, restProps = __rest(props, ["pages", "getLabel", "getIsActive", "getLink", "getIcon", "size", "maxCount", "onClick", "onlyIconRoot", "className"]);
-    var iconSize = getSizeByMap(sizeMap, size);
+    var iconSize = getByMap(sizeMap, size);
     var _d = useMemo(function () {
         var rest = pages.slice();
         var head = rest.splice(0, 1);

package/__internal__/src/components/Button/Button.js

@@ -1,9 +1,10 @@
 import { __assign, __rest } from "tslib";
 import './Button.css';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { cnMixFocus } from '../../mixs/MixFocus/MixFocus';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { Loader } from '../Loader/Loader';
@@ -38,7 +39,8 @@ var sizeMapOnlyIcon = {
     l: 'm'
 };
 export var Button = forwardRefWithAs(function (props, ref) {
-    var _a = usePropsHandler(COMPONENT_NAME, props, ref), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = __rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
+    var buttonRef = useRef(null);
+    var _a = usePropsHandler(COMPONENT_NAME, props, buttonRef), _b = _a.size, size = _b === void 0 ? buttonPropSizeDefault : _b, _c = _a.view, view = _c === void 0 ? buttonPropViewDefault : _c, _d = _a.width, width = _d === void 0 ? buttonPropWidthDefault : _d, _e = _a.form, form = _e === void 0 ? buttonPropFormDefault : _e, iconLeft = _a.iconLeft, iconRight = _a.iconRight, label = _a.label, className = _a.className, onClick = _a.onClick, disabled = _a.disabled, loading = _a.loading, tabIndex = _a.tabIndex, _f = _a.as, as = _f === void 0 ? 'button' : _f, onlyIcon = _a.onlyIcon, iconSizeProp = _a.iconSize, otherProps = __rest(_a, ["size", "view", "width", "form", "iconLeft", "iconRight", "label", "className", "onClick", "disabled", "loading", "tabIndex", "as", "onlyIcon", "iconSize"]);
     var Tag = as;
     var IconOnly = (!label || onlyIcon) && (iconLeft || iconRight);
     var IconLeft = iconLeft;
@@ -46,8 +48,8 @@ export var Button = forwardRefWithAs(function (props, ref) {
     var withIcon = !!iconLeft || !!iconRight;
     var title = props.title || (!!IconOnly && label) || undefined;
     var iconSize = IconOnly
-        ? getSizeByMap(sizeMapOnlyIcon, size, iconSizeProp)
-        : getSizeByMap(sizeMap, size, iconSizeProp);
+        ? getByMap(sizeMapOnlyIcon, size, iconSizeProp)
+        : getByMap(sizeMap, size, iconSizeProp);
     var handleClick = function (e) {
         if (!disabled && !loading && onClick) {
             onClick(e);
@@ -62,7 +64,7 @@ export var Button = forwardRefWithAs(function (props, ref) {
             loading: loading,
             withIcon: withIcon,
             onlyIcon: !!IconOnly
-        }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: ref }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
+        }, [cnMixFocus(), className]), tabIndex: tabIndex, title: title, ref: useForkRef([ref, buttonRef]) }, (Tag === 'button' ? { disabled: disabled || loading } : {})),
         IconOnly && React.createElement(IconOnly, { className: cnButton('Icon'), size: iconSize }),
         !IconOnly &&
             ((IconLeft || IconRight) && label ? (React.createElement(React.Fragment, null,