@alfalab/core-components 23.12.0-beta.2 → 23.12.0-beta.6

package/calendar/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-4ab2b8f8.js');
+var tslib_es6 = require('./tslib.es6-2d027ca7.js');
 var React = require('react');
 var cn = require('classnames');
 var dateFns = require('date-fns');
@@ -13,6 +13,8 @@ var components_daysTable_Component = require('./components/days-table/Component.
 require('./components/select-button/Component.js');
 var components_monthsTable_Component = require('./components/months-table/Component.js');
 var components_yearsTable_Component = require('./components/years-table/Component.js');
+require('../icon-button');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
 require('./components/period-slider/utils.js');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');
 require('react-merge-refs');

package/calendar/components/days-table/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-4ab2b8f8.js');
+var tslib_es6 = require('../../tslib.es6-2d027ca7.js');
 var React = require('react');
 var cn = require('classnames');
 var dateFns = require('date-fns');

package/calendar/components/days-table/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/components/days-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 require('react');
 require('classnames');
 require('date-fns');

package/calendar/components/header/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/components/months-table/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-4ab2b8f8.js');
+var tslib_es6 = require('../../tslib.es6-2d027ca7.js');
 var React = require('react');
 require('classnames');
 var dateFns = require('date-fns');

package/calendar/components/months-table/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/components/months-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 require('react');
 require('classnames');
 require('date-fns');

package/calendar/components/period-slider/Component.js

@@ -1,12 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 var React = require('react');
 var cn = require('classnames');
 var dateFns = require('date-fns');
-var coreComponentsButton = require('../../../button');
+require('../../../button');
 var utils = require('../../utils.js');
 var components_selectButton_Component = require('../select-button/Component.js');
+var coreComponentsIconButton = require('../../../icon-button');
+var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
 var components_periodSlider_utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -81,9 +83,9 @@ var PeriodSlider = function (_a) {
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
             _b[styles.full] = view === 'full',
             _b)), "aria-live": 'polite', "data-test-id": dataTestId },
-        showPrevButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles.arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        showPrevButton && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: "xs", className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
         renderHeader(),
-        showNextButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles.arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showNextButton && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: "xs", className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
 };
 
 exports.PeriodSlider = PeriodSlider;

package/calendar/components/period-slider/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;
@@ -620,14 +619,8 @@
     }
 .calendar__arrow_s40ku {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    background: var(--calendar-arrow-background)
+    top: 4px
 }
-.calendar__arrow_s40ku:disabled {
-        opacity: 0.3;
-    }
 .calendar__arrow_s40ku:first-child {
         left: 0;
     }

package/calendar/components/period-slider/index.js

@@ -1,12 +1,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 require('react');
 require('classnames');
 require('date-fns');
 require('../../../button');
 require('../../utils.js');
 require('../select-button/Component.js');
+require('../../../icon-button');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
 var components_periodSlider_utils = require('./utils.js');
 var components_periodSlider_Component = require('./Component.js');
 

package/calendar/components/select-button/Component.d.ts

@@ -19,6 +19,6 @@ declare const SelectButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttr
     /**
      * Вид кнопки
      */
-    view?: "selected" | "outlined" | "filled" | "default" | undefined;
+    view?: "outlined" | "filled" | "default" | "selected" | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { SelectButtonProps, SelectButton };

package/calendar/components/select-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-4ab2b8f8.js');
+var tslib_es6 = require('../../tslib.es6-2d027ca7.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');

package/calendar/components/select-button/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/components/select-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 require('react');
 require('classnames');
 require('../../../button');

package/calendar/components/years-table/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-4ab2b8f8.js');
+var tslib_es6 = require('../../tslib.es6-2d027ca7.js');
 var React = require('react');
 require('classnames');
 var dateFns = require('date-fns');

package/calendar/components/years-table/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/components/years-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-4ab2b8f8.js');
+require('../../tslib.es6-2d027ca7.js');
 require('react');
 require('classnames');
 require('date-fns');

package/calendar/cssm/Component.js

@@ -18,6 +18,8 @@ require('./components/months-table/index.module.css');
 var components_monthsTable_Component = require('./components/months-table/Component.js');
 require('./components/years-table/index.module.css');
 var components_yearsTable_Component = require('./components/years-table/Component.js');
+require('../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
 require('./components/period-slider/utils.js');
 require('./components/period-slider/index.module.css');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/cssm/components/days-table/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

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

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/cssm/components/months-table/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/cssm/components/period-slider/Component.js

@@ -4,10 +4,12 @@ require('../../tslib.es6-ce870b46.js');
 var React = require('react');
 var cn = require('classnames');
 var dateFns = require('date-fns');
-var coreComponentsButton = require('../../../../button/cssm');
+require('../../../../button/cssm');
 var utils = require('../../utils.js');
 require('../select-button/index.module.css');
 var components_selectButton_Component = require('../select-button/Component.js');
+var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var ChevronBackMIcon = require('@alfalab/icons-glyph/ChevronBackMIcon');
 var components_periodSlider_utils = require('./utils.js');
 var styles = require('./index.module.css');
 
@@ -81,9 +83,9 @@ var PeriodSlider = function (_a) {
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className, (_b = {},
             _b[styles__default['default'].full] = view === 'full',
             _b)), "aria-live": 'polite', "data-test-id": dataTestId },
-        showPrevButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles__default['default'].arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        showPrevButton && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: "xs", className: styles__default['default'].arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
         renderHeader(),
-        showNextButton && (React__default['default'].createElement(coreComponentsButton.Button, { view: 'ghost', className: styles__default['default'].arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showNextButton && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: "xs", className: styles__default['default'].arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
 };
 
 exports.PeriodSlider = PeriodSlider;

package/calendar/cssm/components/period-slider/index.js

@@ -8,6 +8,8 @@ require('../../../../button/cssm');
 require('../../utils.js');
 require('../select-button/index.module.css');
 require('../select-button/Component.js');
+require('../../../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
 var components_periodSlider_utils = require('./utils.js');
 require('./index.module.css');
 var components_periodSlider_Component = require('./Component.js');

package/calendar/cssm/components/period-slider/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;
@@ -619,14 +618,8 @@
     }
 .arrow {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    background: var(--calendar-arrow-background)
+    top: 4px
 }
-.arrow:disabled {
-        opacity: 0.3;
-    }
 .arrow:first-child {
         left: 0;
     }

package/calendar/cssm/components/select-button/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/cssm/components/years-table/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/cssm/index.js

@@ -18,6 +18,8 @@ require('./components/months-table/index.module.css');
 require('./components/months-table/Component.js');
 require('./components/years-table/index.module.css');
 require('./components/years-table/Component.js');
+require('../../icon-button/cssm');
+require('@alfalab/icons-glyph/ChevronBackMIcon');
 var components_periodSlider_utils = require('./components/period-slider/utils.js');
 require('./components/period-slider/index.module.css');
 var components_periodSlider_Component = require('./components/period-slider/Component.js');

package/calendar/cssm/index.module.css

@@ -522,10 +522,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/cssm/vars.css

@@ -8,10 +8,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-e343fc3f.js';
+import { _ as __assign } from './tslib.es6-4766e71c.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
 import { startOfMonth, startOfDay, endOfDay } from 'date-fns';
@@ -11,6 +11,8 @@ import { DaysTable } from './components/days-table/Component.js';
 import './components/select-button/Component.js';
 import { MonthsTable } from './components/months-table/Component.js';
 import { YearsTable } from './components/years-table/Component.js';
+import '../../icon-button/esm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
 import './components/period-slider/utils.js';
 import { PeriodSlider } from './components/period-slider/Component.js';
 import 'react-merge-refs';

package/calendar/esm/components/days-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-e343fc3f.js';
+import { _ as __assign } from '../../tslib.es6-4766e71c.js';
 import React, { useRef, useCallback } from 'react';
 import cn from 'classnames';
 import { startOfMonth, isToday, isEqual, isSameDay, isWithinInterval, isLastDayOfMonth } from 'date-fns';

package/calendar/esm/components/days-table/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/esm/components/days-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-e343fc3f.js';
+import '../../tslib.es6-4766e71c.js';
 import 'react';
 import 'classnames';
 import 'date-fns';

package/calendar/esm/components/header/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/esm/components/months-table/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../../tslib.es6-e343fc3f.js';
+import { _ as __assign } from '../../tslib.es6-4766e71c.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import { isSameMonth, isThisMonth } from 'date-fns';

package/calendar/esm/components/months-table/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;

package/calendar/esm/components/months-table/index.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-e343fc3f.js';
+import '../../tslib.es6-4766e71c.js';
 import 'react';
 import 'classnames';
 import 'date-fns';

package/calendar/esm/components/period-slider/Component.js

@@ -1,10 +1,12 @@
-import '../../tslib.es6-e343fc3f.js';
+import '../../tslib.es6-4766e71c.js';
 import React, { useMemo } from 'react';
 import cn from 'classnames';
 import { startOfWeek, endOfWeek } from 'date-fns';
-import { Button } from '../../../../button/esm';
+import '../../../../button/esm';
 import { monthName } from '../../utils.js';
 import { SelectButton } from '../select-button/Component.js';
+import { IconButton } from '../../../../icon-button/esm';
+import { ChevronBackMIcon } from '@alfalab/icons-glyph/ChevronBackMIcon';
 import { shiftValues, formatPeriod } from './utils.js';
 
 var styles = {"component":"calendar__component_s40ku","month":"calendar__month_s40ku","year":"calendar__year_s40ku","buttonContent":"calendar__buttonContent_s40ku","period":"calendar__period_s40ku","empty":"calendar__empty_s40ku","upDownIcon":"calendar__upDownIcon_s40ku","arrow":"calendar__arrow_s40ku","full":"calendar__full_s40ku"};
@@ -74,9 +76,9 @@ var PeriodSlider = function (_a) {
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
             _b[styles.full] = view === 'full',
             _b)), "aria-live": 'polite', "data-test-id": dataTestId },
-        showPrevButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+        showPrevButton && (React.createElement(IconButton, { size: "xs", className: styles.arrow, icon: ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
         renderHeader(),
-        showNextButton && (React.createElement(Button, { view: 'ghost', className: styles.arrow, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showNextButton && (React.createElement(IconButton, { size: "xs", className: styles.arrow, icon: ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
 };
 
 export { PeriodSlider };

package/calendar/esm/components/period-slider/index.css

@@ -523,10 +523,9 @@
     --calendar-selector-button-outline-border-color: var(--color-light-border-key);
 
     /* Шапка */
-    --calendar-arrow-background: url('https://alfabank.gcdn.co/icons/icon_arrow-left_m_black.svg');
     --calendar-select-icon-background: url('https://alfabank.gcdn.co/icons/icon_arrow-select_m_black.svg');
-    --calendar-header-paddings: var(--gap-m) var(--gap-m) var(--gap-s);
-    --calendar-month-only-header-paddings: var(--gap-m) var(--gap-2xl) var(--gap-s);
+    --calendar-header-paddings: var(--gap-m) var(--gap-s) var(--gap-s);
+    --calendar-month-only-header-paddings: var(--gap-m) 28px var(--gap-s);
     --calendar-month-only-header-font-family: var(--font-family-system);
     --calendar-month-only-header-font-size: 16px;
     --calendar-month-only-header-font-weight: 400;
@@ -620,14 +619,8 @@
     }
 .calendar__arrow_s40ku {
     position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    background: var(--calendar-arrow-background)
+    top: 4px
 }
-.calendar__arrow_s40ku:disabled {
-        opacity: 0.3;
-    }
 .calendar__arrow_s40ku:first-child {
         left: 0;
     }

package/calendar/esm/components/period-slider/index.js

@@ -1,9 +1,11 @@
-import '../../tslib.es6-e343fc3f.js';
+import '../../tslib.es6-4766e71c.js';
 import 'react';
 import 'classnames';
 import 'date-fns';
 import '../../../../button/esm';
 import '../../utils.js';
 import '../select-button/Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
 export { shiftValues } from './utils.js';
 export { PeriodSlider } from './Component.js';

package/calendar/esm/components/select-button/Component.js

@@ -1,4 +1,4 @@
-import { a as __rest, _ as __assign } from '../../tslib.es6-e343fc3f.js';
+import { a as __rest, _ as __assign } from '../../tslib.es6-4766e71c.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Button } from '../../../../button/esm';