@alfalab/core-components 26.3.1-beta.1 → 26.4.0

package/alert/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: l4dkv */
+/* hash: 1rehp */
 :root {
 
     /* Hard */

package/alert/index.css

@@ -1,4 +1,4 @@
-/* hash: l4dkv */
+/* hash: 1rehp */
 :root {
 
     /* Hard */

package/alert/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: l4dkv */
+/* hash: 1rehp */
 :root {
 
     /* Hard */

package/amount/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 19vpk */
+/* hash: 11wi9 */
 :root {
 
     /* Hard */

package/amount/esm/pure/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fs2f */
+/* hash: sfzad */
 .amount__component_17gnk {
     white-space: nowrap;
 }

package/amount/index.css

@@ -1,4 +1,4 @@
-/* hash: 19vpk */
+/* hash: 11wi9 */
 :root {
 
     /* Hard */

package/amount/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 19vpk */
+/* hash: 11wi9 */
 :root {
 
     /* Hard */

package/amount/modern/pure/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fs2f */
+/* hash: sfzad */
 .amount__component_17gnk {
     white-space: nowrap;
 }

package/amount/pure/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fs2f */
+/* hash: sfzad */
 .amount__component_17gnk {
     white-space: nowrap;
 }

package/amount-input/default.css

@@ -1,4 +1,4 @@
-/* hash: 1y6vm */
+/* hash: 1nlj7 */
 :root {
     --color-light-text-secondary: #546272;
 }

package/amount-input/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: 1y6vm */
+/* hash: 1nlj7 */
 :root {
     --color-light-text-secondary: #546272;
 }

package/amount-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 12zz4 */
+/* hash: 1ir6d */
 :root {
 
     /* Hard */

package/amount-input/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1eq4v */
+/* hash: 144sg */
 :root {
 
     /* Hard */

package/amount-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 12zz4 */
+/* hash: 1ir6d */
 :root {
 
     /* Hard */

package/amount-input/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1eq4v */
+/* hash: 144sg */
 :root {
 
     /* Hard */

package/amount-input/modern/default.css

@@ -1,4 +1,4 @@
-/* hash: 1y6vm */
+/* hash: 1nlj7 */
 :root {
     --color-light-text-secondary: #546272;
 }

package/amount-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 12zz4 */
+/* hash: 1ir6d */
 :root {
 
     /* Hard */

package/amount-input/modern/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1eq4v */
+/* hash: 144sg */
 :root {
 
     /* Hard */

package/attach/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1stnz */
+/* hash: 1kqtn */
 :root {
     --color-light-border-link: #007aff;
 }

package/attach/index.css

@@ -1,4 +1,4 @@
-/* hash: 1stnz */
+/* hash: 1kqtn */
 :root {
     --color-light-border-link: #007aff;
 }

package/attach/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1stnz */
+/* hash: 1kqtn */
 :root {
     --color-light-border-link: #007aff;
 }

package/backdrop/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1i5x1 */
+/* hash: 1tb4b */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
 }

package/backdrop/index.css

@@ -1,4 +1,4 @@
-/* hash: 1i5x1 */
+/* hash: 1tb4b */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
 }

package/backdrop/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1i5x1 */
+/* hash: 1tb4b */
 :root {
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
 }

package/badge/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wwuk */
+/* hash: gn779 */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;

package/badge/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wwuk */
+/* hash: gn779 */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;

package/badge/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wwuk */
+/* hash: gn779 */
 :root {
     --color-light-bg-accent: #ef3124;
     --color-light-bg-primary: #fff;

package/bank-card/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l9d2 */
+/* hash: iob18 */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l9d2 */
+/* hash: iob18 */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l9d2 */
+/* hash: iob18 */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: mfxn1 */
+/* hash: 1shy2 */
 :root {
     --color-light-bg-primary: #fff;
 }

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: mfxn1 */
+/* hash: 1shy2 */
 :root {
     --color-light-bg-primary: #fff;
 }

package/base-modal/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: mfxn1 */
+/* hash: 1shy2 */
 :root {
     --color-light-bg-primary: #fff;
 }

package/bottom-sheet/{component-840d48fa.d.ts → component-8680d27f.d.ts}

@@ -12,7 +12,7 @@ type HeaderProps = {
     /**
      * Дополнительный класс
      */
-    className?: string;
+    headerClassName?: string;
     /**
      * Дополнительный класс для аддонов
      */
@@ -85,10 +85,18 @@ type BottomSheetProps = {
      * Дополнительный класс
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
     /**
      * Дополнительный класс шапки
      */
     headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
     /**
      * Дополнительный класс для аддонов
      */

package/bottom-sheet/{component-840d48fa.js → component-8680d27f.js}

@@ -1,4 +1,4 @@
-var tslib_es6 = require('./tslib.es6-3f0b3608.js');
+var tslib_es6 = require('./tslib.es6-c74c8bbc.js');
 var React = require('react');
 var cn = require('classnames');
 var reactDiv100vh = require('react-div-100vh');
@@ -20,7 +20,7 @@ require('./components/header/index.css');
 
 var Header = function (_a) {
     var _b, _c, _d, _e;
-    var title = _a.title, className = _a.className, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, onBack = _a.onBack;
+    var title = _a.title, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, onBack = _a.onBack;
     var _f = React.useContext(coreComponentsBaseModal.BaseModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader, setHeaderOffset = _f.setHeaderOffset;
     var hasLeftPart = hasBacker || leftAddons || titleAlign === 'center';
     var hasRightPart = hasCloser || rightAddons || titleAlign === 'center';
@@ -42,7 +42,7 @@ var Header = function (_a) {
             _a[styles.titleIndentRight] = !sticky && !titleAlignedCenter && hasRightPart,
             _a));
     };
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, className, (_b = {},
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.header, headerClassName, (_b = {},
             _b[styles.justifyEnd] = !title,
             _b[styles.highlighted] = headerHighlighted && sticky,
             _b[styles.sticky] = sticky,
@@ -75,7 +75,7 @@ var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, onClose = _a.onClose, onBack = _a.onBack;
+    var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, onClose = _a.onClose, onBack = _a.onBack;
     var _k = React.useState(0), sheetOffset = _k[0], setSheetOffset = _k[1];
     var _l = React.useState(1), backdropOpacity = _l[0], setBackdropOpacity = _l[1];
     var _m = React.useState(false), scrollLocked = _m[0], setScrollLocked = _m[1];
@@ -219,7 +219,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles$1.component, className, (_b = {},
                 _b[styles$1.withTransition] = !sheetOffset,
                 _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles$1.scrollableContainer, (_c = {},
+            React__default['default'].createElement("div", { className: cn__default['default'](styles$1.scrollableContainer, containerClassName, (_c = {},
                     _c[styles$1.scrollLocked] = scrollLocked,
                     _c)), ref: scrollableContainer },
                 swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles$1.marker) }),
@@ -228,7 +228,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
                         _d[styles$1.noHeader] = hideHeader || emptyHeader,
                         _d[styles$1.noFooter] = !actionButton,
                         _d)) }, children),
-                actionButton && React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter }, actionButton)))));
+                actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton))))));
 });
 
 exports.BottomSheet = BottomSheet;

package/bottom-sheet/component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-3f0b3608.js');
+require('./tslib.es6-c74c8bbc.js');
 require('react');
 require('classnames');
 require('react-div-100vh');
@@ -12,7 +12,7 @@ require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/closer/Component.js');
 require('@alfalab/icons-glyph/ArrowBackMIcon');
 require('./components/backer/Component.js');
-var components_header_Component = require('./component-840d48fa.js');
+var components_header_Component = require('./component-8680d27f.js');
 require('./components/footer/Component.js');
 require('../backdrop');
 require('./components/swipeable-backdrop/Component.js');

package/bottom-sheet/components/backer/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-3f0b3608.js');
+var tslib_es6 = require('../../tslib.es6-c74c8bbc.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsIconButton = require('../../../icon-button');

package/bottom-sheet/components/backer/index.css

@@ -1,6 +1,6 @@
-/* hash: 1tute */
+/* hash: 11qdr */
 :root {
-    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .bottom-sheet__backer_kyu8g {
@@ -10,6 +10,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .bottom-sheet__button_kyu8g {

package/bottom-sheet/components/closer/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-3f0b3608.js');
+var tslib_es6 = require('../../tslib.es6-c74c8bbc.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBaseModal = require('../../../base-modal');

package/bottom-sheet/components/closer/index.css

@@ -1,6 +1,6 @@
-/* hash: 73k5t */
+/* hash: 1lw2h */
 :root {
-    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .bottom-sheet__closer_2ue0t {
@@ -10,6 +10,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .bottom-sheet__button_2ue0t {

package/bottom-sheet/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1vzhp */
+/* hash: 12ev6 */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;

package/bottom-sheet/components/header/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-3f0b3608.js');
+require('../../tslib.es6-c74c8bbc.js');
 require('react');
 require('classnames');
 require('react-div-100vh');
@@ -12,7 +12,7 @@ require('@alfalab/icons-glyph/CrossMIcon');
 require('../closer/Component.js');
 require('@alfalab/icons-glyph/ArrowBackMIcon');
 require('../backer/Component.js');
-var components_header_Component = require('../../component-840d48fa.js');
+var components_header_Component = require('../../component-8680d27f.js');
 require('../footer/Component.js');
 require('../../../backdrop');
 require('../swipeable-backdrop/Component.js');

package/bottom-sheet/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1dmvw */
+/* hash: c5fqk */
 :root {
     --color-light-bg-primary: #fff;
 }
@@ -32,12 +32,12 @@
 }
 .bottom-sheet__header_1ezhe {
     display: flex;
-    align-items: center;
     padding: var(--gap-xs);
     padding-bottom: 0;
     background-color: var(--color-light-bg-primary);
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
+    z-index: 1;
 }
 .bottom-sheet__sticky_1ezhe {
     position: sticky;
@@ -68,7 +68,6 @@
     margin-right: var(--gap-xs);
 }
 .bottom-sheet__title_1ezhe {
-    height: 24px;
     padding: var(--gap-xs) var(--gap-xs);
     margin: var(--bottom-sheet-title-margin-vertical) 0;
     width: 100%;

package/bottom-sheet/components/swipeable-backdrop/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-3f0b3608.js');
+var tslib_es6 = require('../../tslib.es6-c74c8bbc.js');
 var React = require('react');
 var coreComponentsBackdrop = require('../../../backdrop');
 

package/bottom-sheet/{esm/component-af8f8198.d.ts → cssm/component-d1b19e73.d.ts}

@@ -12,7 +12,7 @@ type HeaderProps = {
     /**
      * Дополнительный класс
      */
-    className?: string;
+    headerClassName?: string;
     /**
      * Дополнительный класс для аддонов
      */
@@ -85,10 +85,18 @@ type BottomSheetProps = {
      * Дополнительный класс
      */
     contentClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
     /**
      * Дополнительный класс шапки
      */
     headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
     /**
      * Дополнительный класс для аддонов
      */

package/bottom-sheet/cssm/{component-1deadd87.js → component-d1b19e73.js}

@@ -21,7 +21,7 @@ var styles__default$1 = /*#__PURE__*/_interopDefaultLegacy(styles$1);
 
 var Header = function (_a) {
     var _b, _c, _d, _e;
-    var title = _a.title, className = _a.className, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, onBack = _a.onBack;
+    var title = _a.title, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, titleAlign = _a.titleAlign, trimTitle = _a.trimTitle, sticky = _a.sticky, onBack = _a.onBack;
     var _f = React.useContext(coreComponentsBaseModal.BaseModalContext), headerHighlighted = _f.headerHighlighted, setHasHeader = _f.setHasHeader, setHeaderOffset = _f.setHeaderOffset;
     var hasLeftPart = hasBacker || leftAddons || titleAlign === 'center';
     var hasRightPart = hasCloser || rightAddons || titleAlign === 'center';
@@ -43,7 +43,7 @@ var Header = function (_a) {
             _a[styles__default['default'].titleIndentRight] = !sticky && !titleAlignedCenter && hasRightPart,
             _a));
     };
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, className, (_b = {},
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].header, headerClassName, (_b = {},
             _b[styles__default['default'].justifyEnd] = !title,
             _b[styles__default['default'].highlighted] = headerHighlighted && sticky,
             _b[styles__default['default'].sticky] = sticky,
@@ -73,7 +73,7 @@ var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, headerClassName = _a.headerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, onClose = _a.onClose, onBack = _a.onBack;
+    var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, onClose = _a.onClose, onBack = _a.onBack;
     var _k = React.useState(0), sheetOffset = _k[0], setSheetOffset = _k[1];
     var _l = React.useState(1), backdropOpacity = _l[0], setBackdropOpacity = _l[1];
     var _m = React.useState(false), scrollLocked = _m[0], setScrollLocked = _m[1];
@@ -217,7 +217,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles__default$1['default'].component, className, (_b = {},
                 _b[styles__default$1['default'].withTransition] = !sheetOffset,
                 _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
-            React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].scrollableContainer, (_c = {},
+            React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].scrollableContainer, containerClassName, (_c = {},
                     _c[styles__default$1['default'].scrollLocked] = scrollLocked,
                     _c)), ref: scrollableContainer },
                 swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].marker) }),
@@ -226,7 +226,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
                         _d[styles__default$1['default'].noHeader] = hideHeader || emptyHeader,
                         _d[styles__default$1['default'].noFooter] = !actionButton,
                         _d)) }, children),
-                actionButton && React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter }, actionButton)))));
+                actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton))))));
 });
 
 exports.BottomSheet = BottomSheet;

package/bottom-sheet/cssm/component.js

@@ -15,7 +15,7 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
 require('./components/backer/index.module.css');
 require('./components/backer/Component.js');
 require('./components/header/index.module.css');
-var components_header_Component = require('./component-1deadd87.js');
+var components_header_Component = require('./component-d1b19e73.js');
 require('./components/footer/index.module.css');
 require('./components/footer/Component.js');
 require('../../backdrop/cssm');

package/bottom-sheet/cssm/components/backer/index.module.css

@@ -1,5 +1,5 @@
 :root {
-    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .backer {
@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .button {

package/bottom-sheet/cssm/components/closer/index.module.css

@@ -1,5 +1,5 @@
 :root {
-    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-alpha-40);
+    --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
 }
 
 .closer {
@@ -9,6 +9,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    color: var(--color-light-graphic-primary);
 }
 
 .button {

package/bottom-sheet/cssm/components/header/Component.js

@@ -15,7 +15,7 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
 require('../backer/index.module.css');
 require('../backer/Component.js');
 require('./index.module.css');
-var components_header_Component = require('../../component-1deadd87.js');
+var components_header_Component = require('../../component-d1b19e73.js');
 require('../footer/index.module.css');
 require('../footer/Component.js');
 require('../../../../backdrop/cssm');

package/bottom-sheet/cssm/components/header/index.module.css

@@ -31,12 +31,12 @@
 }
 .header {
     display: flex;
-    align-items: center;
     padding: var(--gap-xs);
     padding-bottom: 0;
     background-color: var(--color-light-bg-primary);
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
+    z-index: 1;
 }
 .sticky {
     position: sticky;
@@ -67,7 +67,6 @@
     margin-right: var(--gap-xs);
 }
 .title {
-    height: 24px;
     padding: var(--gap-xs) var(--gap-xs);
     margin: var(--bottom-sheet-title-margin-vertical) 0;
     width: 100%;

package/bottom-sheet/cssm/index.d.ts

@@ -1 +1 @@
-export * from "./component-1deadd87";
+export * from "./component-d1b19e73";

package/bottom-sheet/cssm/index.js

@@ -15,7 +15,7 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
 require('./components/backer/index.module.css');
 require('./components/backer/Component.js');
 require('./components/header/index.module.css');
-var components_header_Component = require('./component-1deadd87.js');
+var components_header_Component = require('./component-d1b19e73.js');
 require('./components/footer/index.module.css');
 require('./components/footer/Component.js');
 require('../../backdrop/cssm');