@alfalab/core-components 44.5.1-beta.4 → 44.6.0

package/button/components/base-button/Component.js

@@ -17,7 +17,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var defaultColors = {"accent":"button__accent_94zrs","loader":"button__loader_94zrs","primary":"button__primary_94zrs","secondary":"button__secondary_94zrs","outlined":"button__outlined_94zrs","tertiary":"button__tertiary_94zrs","filled":"button__filled_94zrs","transparent":"button__transparent_94zrs","link":"button__link_94zrs","ghost":"button__ghost_94zrs","component":"button__component_94zrs","loading":"button__loading_94zrs"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
+var commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","allowBackdropBlur":"button__allowBackdropBlur_cir0l","secondary":"button__secondary_cir0l","accent":"button__accent_cir0l","primary":"button__primary_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
 require('./index.css');
 
 var invertedColors = {"accent":"button__accent_rjibc","loader":"button__loader_rjibc","primary":"button__primary_rjibc","secondary":"button__secondary_rjibc","outlined":"button__outlined_rjibc","tertiary":"button__tertiary_rjibc","filled":"button__filled_rjibc","transparent":"button__transparent_rjibc","link":"button__link_rjibc","ghost":"button__ghost_rjibc","component":"button__component_rjibc","loading":"button__loading_rjibc"};
@@ -50,7 +50,7 @@ var logWarning = function (view) {
 };
 var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["allowBackdropBlur", "children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -63,6 +63,7 @@ var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var iconOnly = !children;
     var componentProps = {
         className: cn__default.default(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+            _b[commonStyles.allowBackdropBlur] = allowBackdropBlur,
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
             _b[commonStyles.focused] = focused,
             _b[commonStyles.block] = block,

package/button/components/base-button/index.css

@@ -121,7 +121,12 @@
     font-weight: 400;
 
     display: block;
-} .button__focused_cir0l {
+} .button__allowBackdropBlur_cir0l.button__secondary_cir0l,
+    .button__allowBackdropBlur_cir0l.button__accent_cir0l[disabled],
+    .button__allowBackdropBlur_cir0l.button__primary_cir0l[disabled] {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
+    } .button__focused_cir0l {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } .button__loading_cir0l .button__text_cir0l,

package/button/cssm/components/base-button/Component.js

@@ -47,7 +47,7 @@ var logWarning = function (view) {
 };
 var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["allowBackdropBlur", "children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -60,6 +60,7 @@ var BaseButton = React__default.default.forwardRef(function (_a, ref) {
     var iconOnly = !children;
     var componentProps = {
         className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[view], commonStyles__default.default[size], commonStyles__default.default[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles__default.default[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+            _b[commonStyles__default.default.allowBackdropBlur] = allowBackdropBlur,
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
             _b[commonStyles__default.default.focused] = focused,
             _b[commonStyles__default.default.block] = block,

package/button/cssm/components/base-button/index.module.css

@@ -120,7 +120,12 @@
     font-weight: 400;
 
     display: block;
-} .focused {
+} .allowBackdropBlur.secondary,
+    .allowBackdropBlur.accent[disabled],
+    .allowBackdropBlur.primary[disabled] {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
+    } .focused {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } .loading .text,

package/button/cssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getButtonTestIds } from "../utils";

package/button/cssm/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getButtonTestIds = utils.getButtonTestIds;

package/button/cssm/typings.d.ts

@@ -80,6 +80,11 @@ type ComponentProps = {
      * Набор цветов для компонента
      */
     colors?: 'default' | 'inverted';
+    /**
+     * Включает размытие фона для некоторых вариантов кнопки
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Дочерние элементы.
      */

package/button/cssm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getButtonTestIds(dataTestId: string): {
+    button: string;
+    spinner: string;
+};
+export { getButtonTestIds };

package/button/cssm/utils.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
+
+function getButtonTestIds(dataTestId) {
+    return {
+        button: dataTestId,
+        spinner: coreComponentsShared.getDataTestId(dataTestId, 'loader'),
+    };
+}
+
+exports.getButtonTestIds = getButtonTestIds;

package/button/esm/components/base-button/Component.js

@@ -9,7 +9,7 @@ import { useFocus } from '@alfalab/hooks';
 var defaultColors = {"accent":"button__accent_94zrs","loader":"button__loader_94zrs","primary":"button__primary_94zrs","secondary":"button__secondary_94zrs","outlined":"button__outlined_94zrs","tertiary":"button__tertiary_94zrs","filled":"button__filled_94zrs","transparent":"button__transparent_94zrs","link":"button__link_94zrs","ghost":"button__ghost_94zrs","component":"button__component_94zrs","loading":"button__loading_94zrs"};
 require('./default.css');
 
-var commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
+var commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","allowBackdropBlur":"button__allowBackdropBlur_cir0l","secondary":"button__secondary_cir0l","accent":"button__accent_cir0l","primary":"button__primary_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
 require('./index.css');
 
 var invertedColors = {"accent":"button__accent_rjibc","loader":"button__loader_rjibc","primary":"button__primary_rjibc","secondary":"button__secondary_rjibc","outlined":"button__outlined_rjibc","tertiary":"button__tertiary_rjibc","filled":"button__filled_rjibc","transparent":"button__transparent_rjibc","link":"button__link_rjibc","ghost":"button__ghost_rjibc","component":"button__component_rjibc","loading":"button__loading_rjibc"};
@@ -42,7 +42,7 @@ var logWarning = function (view) {
 };
 var BaseButton = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = __rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var allowBackdropBlur = _a.allowBackdropBlur, children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = __rest(_a, ["allowBackdropBlur", "children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -55,6 +55,7 @@ var BaseButton = React.forwardRef(function (_a, ref) {
     var iconOnly = !children;
     var componentProps = {
         className: cn(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+            _b[commonStyles.allowBackdropBlur] = allowBackdropBlur,
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
             _b[commonStyles.focused] = focused,
             _b[commonStyles.block] = block,

package/button/esm/components/base-button/index.css

@@ -121,7 +121,12 @@
     font-weight: 400;
 
     display: block;
-} .button__focused_cir0l {
+} .button__allowBackdropBlur_cir0l.button__secondary_cir0l,
+    .button__allowBackdropBlur_cir0l.button__accent_cir0l[disabled],
+    .button__allowBackdropBlur_cir0l.button__primary_cir0l[disabled] {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
+    } .button__focused_cir0l {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } .button__loading_cir0l .button__text_cir0l,

package/button/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getButtonTestIds } from "../utils";

package/button/esm/shared/index.js

@@ -0,0 +1,2 @@
+export { getButtonTestIds } from '../utils.js';
+import '../../../shared/esm';

package/button/esm/typings.d.ts

@@ -80,6 +80,11 @@ type ComponentProps = {
      * Набор цветов для компонента
      */
     colors?: 'default' | 'inverted';
+    /**
+     * Включает размытие фона для некоторых вариантов кнопки
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Дочерние элементы.
      */

package/button/esm/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getButtonTestIds(dataTestId: string): {
+    button: string;
+    spinner: string;
+};
+export { getButtonTestIds };

package/button/esm/utils.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '../../shared/esm';
+
+function getButtonTestIds(dataTestId) {
+    return {
+        button: dataTestId,
+        spinner: getDataTestId(dataTestId, 'loader'),
+    };
+}
+
+export { getButtonTestIds };

package/button/modern/components/base-button/Component.js

@@ -8,7 +8,7 @@ import { useFocus } from '@alfalab/hooks';
 const defaultColors = {"accent":"button__accent_94zrs","loader":"button__loader_94zrs","primary":"button__primary_94zrs","secondary":"button__secondary_94zrs","outlined":"button__outlined_94zrs","tertiary":"button__tertiary_94zrs","filled":"button__filled_94zrs","transparent":"button__transparent_94zrs","link":"button__link_94zrs","ghost":"button__ghost_94zrs","component":"button__component_94zrs","loading":"button__loading_94zrs"};
 require('./default.css');
 
-const commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
+const commonStyles = {"component":"button__component_cir0l","hug":"button__hug_cir0l","fill":"button__fill_cir0l","hint":"button__hint_cir0l","allowBackdropBlur":"button__allowBackdropBlur_cir0l","secondary":"button__secondary_cir0l","accent":"button__accent_cir0l","primary":"button__primary_cir0l","focused":"button__focused_cir0l","loading":"button__loading_cir0l","text":"button__text_cir0l","addons":"button__addons_cir0l","stretchText":"button__stretchText_cir0l","loader":"button__loader_cir0l","xxs":"button__xxs_cir0l","iconOnly":"button__iconOnly_cir0l","xs":"button__xs_cir0l","s":"button__s_cir0l","m":"button__m_cir0l","l":"button__l_cir0l","xl":"button__xl_cir0l","withRightAddons":"button__withRightAddons_cir0l","ghost":"button__ghost_cir0l","withLeftAddons":"button__withLeftAddons_cir0l","link":"button__link_cir0l","block":"button__block_cir0l","nowrap":"button__nowrap_cir0l","rounded":"button__rounded_cir0l"};
 require('./index.css');
 
 const invertedColors = {"accent":"button__accent_rjibc","loader":"button__loader_rjibc","primary":"button__primary_rjibc","secondary":"button__secondary_rjibc","outlined":"button__outlined_rjibc","tertiary":"button__tertiary_rjibc","filled":"button__filled_rjibc","transparent":"button__transparent_rjibc","link":"button__link_rjibc","ghost":"button__ghost_rjibc","component":"button__component_rjibc","loading":"button__loading_rjibc"};
@@ -40,7 +40,7 @@ const logWarning = (view) => {
         `Используйте view='${viewsMap[view]}'. Чтобы поменять все кнопки на проекте разом, можно воспользоваться codemod: ` +
         'npx @alfalab/core-components-codemod --transformers=button-views src/**/*.tsx');
 };
-const BaseButton = React.forwardRef(({ children, view = 'secondary', shape = 'rectangular', textResizing = 'hug', hint, leftAddons, rightAddons, size = 'm', block = false, className, spinnerClassName, dataTestId, href, loading = false, nowrap = false, colors = 'default', Component = href ? 'a' : 'button', onClick, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
+const BaseButton = React.forwardRef(({ allowBackdropBlur, children, view = 'secondary', shape = 'rectangular', textResizing = 'hug', hint, leftAddons, rightAddons, size = 'm', block = false, className, spinnerClassName, dataTestId, href, loading = false, nowrap = false, colors = 'default', Component = href ? 'a' : 'button', onClick, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -53,6 +53,7 @@ const BaseButton = React.forwardRef(({ children, view = 'secondary', shape = 're
     const iconOnly = !children;
     const componentProps = {
         className: cn(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, {
+            [commonStyles.allowBackdropBlur]: allowBackdropBlur,
             [colorStylesMap[colors][view]]: Boolean(colorStylesMap[colors][view]),
             [commonStyles.focused]: focused,
             [commonStyles.block]: block,

package/button/modern/components/base-button/index.css

@@ -121,7 +121,12 @@
     font-weight: 400;
 
     display: block;
-} .button__focused_cir0l {
+} .button__allowBackdropBlur_cir0l.button__secondary_cir0l,
+    .button__allowBackdropBlur_cir0l.button__accent_cir0l[disabled],
+    .button__allowBackdropBlur_cir0l.button__primary_cir0l[disabled] {
+        -webkit-backdrop-filter: blur(80px);
+                backdrop-filter: blur(80px);
+    } .button__focused_cir0l {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 } .button__loading_cir0l .button__text_cir0l,

package/button/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getButtonTestIds } from "../utils";

package/button/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getButtonTestIds } from '../utils.js';
+import '../../../shared/modern';

package/button/modern/typings.d.ts

@@ -80,6 +80,11 @@ type ComponentProps = {
      * Набор цветов для компонента
      */
     colors?: 'default' | 'inverted';
+    /**
+     * Включает размытие фона для некоторых вариантов кнопки
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Дочерние элементы.
      */

package/button/modern/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getButtonTestIds(dataTestId: string): {
+    button: string;
+    spinner: string;
+};
+export { getButtonTestIds };

package/button/modern/utils.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '../../shared/modern';
+
+function getButtonTestIds(dataTestId) {
+    return {
+        button: dataTestId,
+        spinner: getDataTestId(dataTestId, 'loader'),
+    };
+}
+
+export { getButtonTestIds };

package/button/shared/index.d.ts

@@ -0,0 +1 @@
+export { getButtonTestIds } from "../utils";

package/button/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getButtonTestIds = utils.getButtonTestIds;

package/button/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/button/typings.d.ts

@@ -80,6 +80,11 @@ type ComponentProps = {
      * Набор цветов для компонента
      */
     colors?: 'default' | 'inverted';
+    /**
+     * Включает размытие фона для некоторых вариантов кнопки
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
     /**
      * Дочерние элементы.
      */

package/button/utils.d.ts

@@ -0,0 +1,5 @@
+declare function getButtonTestIds(dataTestId: string): {
+    button: string;
+    spinner: string;
+};
+export { getButtonTestIds };

package/button/utils.js

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../shared');
+
+function getButtonTestIds(dataTestId) {
+    return {
+        button: dataTestId,
+        spinner: coreComponentsShared.getDataTestId(dataTestId, 'loader'),
+    };
+}
+
+exports.getButtonTestIds = getButtonTestIds;

package/calendar/components/calendar-mobile/Component.js

@@ -30,7 +30,7 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var backdropTransitionStyles = {"appear":"calendar__appear_prqto","enter":"calendar__enter_prqto","appearActive":"calendar__appearActive_prqto","enterActive":"calendar__enterActive_prqto","appearDone":"calendar__appearDone_prqto","enterDone":"calendar__enterDone_prqto","exit":"calendar__exit_prqto","exitActive":"calendar__exitActive_prqto","exitDone":"calendar__exitDone_prqto"};
 require('./backdrop-transitions.css');
 
-var styles = {"wrapper":"calendar__wrapper_fandm","withZIndex":"calendar__withZIndex_fandm","calendar":"calendar__calendar_fandm","dayNames":"calendar__dayNames_fandm","withHeader":"calendar__withHeader_fandm","month":"calendar__month_fandm","daysTable":"calendar__daysTable_fandm","dayName":"calendar__dayName_fandm","header":"calendar__header_fandm","content":"calendar__content_fandm"};
+var styles = {"wrapper":"calendar__wrapper_fandm","withZIndex":"calendar__withZIndex_fandm","calendar":"calendar__calendar_fandm","dayNames":"calendar__dayNames_fandm","withHeader":"calendar__withHeader_fandm","month":"calendar__month_fandm","daysTable":"calendar__daysTable_fandm","dayName":"calendar__dayName_fandm","virtuoso":"calendar__virtuoso_fandm","contentModal":"calendar__contentModal_fandm","content":"calendar__content_fandm"};
 require('./index.css');
 
 var transitionStyles = {"appear":"calendar__appear_116q7","enter":"calendar__enter_116q7","appearActive":"calendar__appearActive_116q7","enterActive":"calendar__enterActive_116q7","exit":"calendar__exit_116q7","exitActive":"calendar__exitActive_116q7","exitDone":"calendar__exitDone_116q7"};
@@ -104,7 +104,7 @@ var CalendarMonthOnlyView = function (_a) {
             activeMonths[index].title,
             " ")),
         React__default.default.createElement(components_daysTable_Component.DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
-    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
+    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 var CalendarMobile = React.forwardRef(function (_a, ref) {
     var _b, _c;
@@ -136,7 +136,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), headerClassName: styles.header, contentClassName: styles.content }, commonProps, restProps)));
+        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), contentClassName: styles.content }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -161,7 +161,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             timeout: 360,
         } },
         hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn__default.default((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
-        React__default.default.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
+        React__default.default.createElement(mobile.ModalMobile.Content, { className: styles.contentModal, flex: true }, renderContent()),
         React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 

package/calendar/components/calendar-mobile/index.css

@@ -17,6 +17,7 @@
 } :root {
 } :root {
     --gap-xs: 8px;
+    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -98,8 +99,9 @@
 } @media (max-width: 374px) { .calendar__dayName_fandm {
         height: 36px
 }
-    } .calendar__header_fandm.calendar__header_fandm,
-.calendar__content_fandm.calendar__content_fandm {
+    } .calendar__virtuoso_fandm {
+    margin: 0 var(--gap-m);
+} .calendar__contentModal_fandm {
     padding-right: 0;
     padding-left: 0;
 } .calendar__content_fandm.calendar__content_fandm {

package/calendar/components/header/index.css

@@ -1,11 +1,10 @@
 /* hash: rh5s6 */
 :root {
-} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
-    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
 
     /* Hard */
 
@@ -47,5 +46,5 @@
     display: flex;
     justify-content: center;
 } .calendar__withShadow_3vjv5 {
-    box-shadow: var(--shadow-s);
+    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
 }

package/calendar/cssm/components/calendar-mobile/Component.js

@@ -101,7 +101,7 @@ var CalendarMonthOnlyView = function (_a) {
             activeMonths[index].title,
             " ")),
         React__default.default.createElement(components_daysTable_Component.DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
-    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
+    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles__default.default.virtuoso }));
 };
 var CalendarMobile = React.forwardRef(function (_a, ref) {
     var _b, _c;
@@ -133,7 +133,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), headerClassName: styles__default.default.header, contentClassName: styles__default.default.content }, commonProps, restProps)));
+        return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -158,7 +158,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             timeout: 360,
         } },
         hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn__default.default((_b = {}, _b[styles__default.default.withZIndex] = selectorView === 'full', _b)) })),
-        React__default.default.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
+        React__default.default.createElement(mobile.ModalMobile.Content, { className: styles__default.default.contentModal, flex: true }, renderContent()),
         React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles__default.default.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 

package/calendar/cssm/components/calendar-mobile/index.module.css

@@ -16,6 +16,7 @@
 } :root {
 } :root {
     --gap-xs: 8px;
+    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -97,8 +98,9 @@
 } @media (max-width: 374px) { .dayName {
         height: 36px
 }
-    } .header.header,
-.content.content {
+    } .virtuoso {
+    margin: 0 var(--gap-m);
+} .contentModal {
     padding-right: 0;
     padding-left: 0;
 } .content.content {

package/calendar/cssm/components/header/index.module.css

@@ -1,10 +1,9 @@
 :root {
-} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
 } :root {
-    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
 
     /* Hard */
 
@@ -46,5 +45,5 @@
     display: flex;
     justify-content: center;
 } .withShadow {
-    box-shadow: var(--shadow-s);
+    box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
 }

package/calendar/cssm/usePeriod.js

@@ -61,6 +61,15 @@ function usePeriod(_a) {
             setSelectedTo(Math.max(date, selectedFrom));
             return;
         }
+        if (selectedTo === selectedFrom) {
+            if (date > selectedTo) {
+                setSelectedTo(date);
+            }
+            else {
+                setSelectedFrom(date);
+            }
+            return;
+        }
         // сдвигаем тот конец выделения, который ближе к выбранной дате
         if (Math.abs(differenceInDays__default.default(date, selectedTo)) >
             Math.abs(differenceInDays__default.default(date, selectedFrom))) {

package/calendar/esm/components/calendar-mobile/Component.js

@@ -69,7 +69,7 @@ import 'date-fns/isWithinInterval';
 var backdropTransitionStyles = {"appear":"calendar__appear_prqto","enter":"calendar__enter_prqto","appearActive":"calendar__appearActive_prqto","enterActive":"calendar__enterActive_prqto","appearDone":"calendar__appearDone_prqto","enterDone":"calendar__enterDone_prqto","exit":"calendar__exit_prqto","exitActive":"calendar__exitActive_prqto","exitDone":"calendar__exitDone_prqto"};
 require('./backdrop-transitions.css');
 
-var styles = {"wrapper":"calendar__wrapper_fandm","withZIndex":"calendar__withZIndex_fandm","calendar":"calendar__calendar_fandm","dayNames":"calendar__dayNames_fandm","withHeader":"calendar__withHeader_fandm","month":"calendar__month_fandm","daysTable":"calendar__daysTable_fandm","dayName":"calendar__dayName_fandm","header":"calendar__header_fandm","content":"calendar__content_fandm"};
+var styles = {"wrapper":"calendar__wrapper_fandm","withZIndex":"calendar__withZIndex_fandm","calendar":"calendar__calendar_fandm","dayNames":"calendar__dayNames_fandm","withHeader":"calendar__withHeader_fandm","month":"calendar__month_fandm","daysTable":"calendar__daysTable_fandm","dayName":"calendar__dayName_fandm","virtuoso":"calendar__virtuoso_fandm","contentModal":"calendar__contentModal_fandm","content":"calendar__content_fandm"};
 require('./index.css');
 
 var transitionStyles = {"appear":"calendar__appear_116q7","enter":"calendar__enter_116q7","appearActive":"calendar__appearActive_116q7","enterActive":"calendar__enterActive_116q7","exit":"calendar__exit_116q7","exitActive":"calendar__exitActive_116q7","exitDone":"calendar__exitDone_116q7"};
@@ -143,7 +143,7 @@ var CalendarMonthOnlyView = function (_a) {
             activeMonths[index].title,
             " ")),
         React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true, shape: shape }))); };
-    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true }));
+    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 var CalendarMobile = forwardRef(function (_a, ref) {
     var _b, _c;
@@ -175,7 +175,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         if (monthOnlyView) {
             return (React.createElement(CalendarMonthOnlyView, __assign({ open: open, yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick }, commonProps, restProps)));
         }
-        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), headerClassName: styles.header, contentClassName: styles.content }, commonProps, restProps)));
+        return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -200,7 +200,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
             timeout: 360,
         } },
         hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
-        React.createElement(ModalMobile.Content, { flex: true }, renderContent()),
+        React.createElement(ModalMobile.Content, { className: styles.contentModal, flex: true }, renderContent()),
         React.createElement(ModalMobile.Footer, { sticky: true, className: cn((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter())));
 });
 

package/calendar/esm/components/calendar-mobile/index.css

@@ -17,6 +17,7 @@
 } :root {
 } :root {
     --gap-xs: 8px;
+    --gap-m: 16px;
     --gap-2xl: 32px;
 } :root {
 } :root {
@@ -98,8 +99,9 @@
 } @media (max-width: 374px) { .calendar__dayName_fandm {
         height: 36px
 }
-    } .calendar__header_fandm.calendar__header_fandm,
-.calendar__content_fandm.calendar__content_fandm {
+    } .calendar__virtuoso_fandm {
+    margin: 0 var(--gap-m);
+} .calendar__contentModal_fandm {
     padding-right: 0;
     padding-left: 0;
 } .calendar__content_fandm.calendar__content_fandm {