@alfalab/core-components 39.3.0 → 39.4.0

package/toast/component.d.ts

@@ -48,6 +48,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
     actionButton?: React.ReactNode;
     dataTestId?: string | undefined;
     hasCloser?: boolean | undefined;
+    closerWrapperClassName?: string | undefined;
+    closerClassName?: string | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../toast-plate").BadgeIcons) => import("../toast-plate").BadgeIcons) | undefined;
@@ -95,6 +97,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
         actionButton?: React.ReactNode;
         dataTestId?: string | undefined;
         hasCloser?: boolean | undefined;
+        closerWrapperClassName?: string | undefined;
+        closerClassName?: string | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../toast-plate").BadgeIcons) => import("../toast-plate").BadgeIcons) | undefined;

package/toast/component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"toastPlate":"toast__toastPlate_1bmao","title":"toast__title_1bmao","popoverInner":"toast__popoverInner_1bmao","block":"toast__block_1bmao","fixed":"toast__fixed_1bmao","enter":"toast__enter_1bmao","enterActive":"toast__enterActive_1bmao","exit":"toast__exit_1bmao","exitActive":"toast__exitActive_1bmao"};
+var styles = {"toastPlate":"toast__toastPlate_1jmoj","title":"toast__title_1jmoj","popoverInner":"toast__popoverInner_1jmoj","block":"toast__block_1jmoj","fixed":"toast__fixed_1jmoj","enter":"toast__enter_1jmoj","enterActive":"toast__enterActive_1jmoj","exit":"toast__exit_1jmoj","exitActive":"toast__exitActive_1jmoj"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/toast/cssm/component.d.ts

@@ -48,6 +48,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
     actionButton?: React.ReactNode;
     dataTestId?: string | undefined;
     hasCloser?: boolean | undefined;
+    closerWrapperClassName?: string | undefined;
+    closerClassName?: string | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
@@ -95,6 +97,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
         actionButton?: React.ReactNode;
         dataTestId?: string | undefined;
         hasCloser?: boolean | undefined;
+        closerWrapperClassName?: string | undefined;
+        closerClassName?: string | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;

package/toast/esm/component.d.ts

@@ -48,6 +48,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
     actionButton?: React.ReactNode;
     dataTestId?: string | undefined;
     hasCloser?: boolean | undefined;
+    closerWrapperClassName?: string | undefined;
+    closerClassName?: string | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
@@ -95,6 +97,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
         actionButton?: React.ReactNode;
         dataTestId?: string | undefined;
         hasCloser?: boolean | undefined;
+        closerWrapperClassName?: string | undefined;
+        closerClassName?: string | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;

package/toast/esm/component.js

@@ -9,7 +9,7 @@ import { stackingOrder, Stack } from '../../stack/esm';
 import { ToastPlate } from '../../toast-plate/esm';
 import { usePrevious, useClickOutside } from '@alfalab/hooks';
 
-var styles = {"toastPlate":"toast__toastPlate_1bmao","title":"toast__title_1bmao","popoverInner":"toast__popoverInner_1bmao","block":"toast__block_1bmao","fixed":"toast__fixed_1bmao","enter":"toast__enter_1bmao","enterActive":"toast__enterActive_1bmao","exit":"toast__exit_1bmao","exitActive":"toast__exitActive_1bmao"};
+var styles = {"toastPlate":"toast__toastPlate_1jmoj","title":"toast__title_1jmoj","popoverInner":"toast__popoverInner_1jmoj","block":"toast__block_1jmoj","fixed":"toast__fixed_1jmoj","enter":"toast__enter_1jmoj","enterActive":"toast__enterActive_1jmoj","exit":"toast__exit_1jmoj","exitActive":"toast__exitActive_1jmoj"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/toast/esm/index.css

@@ -24,32 +24,32 @@
     /* inverted */
 } :root {
     --toast-box-shadow: var(--shadow-m);
-} .toast__toastPlate_1bmao {
+} .toast__toastPlate_1jmoj {
     box-shadow: var(--toast-box-shadow);
     word-break: break-word;
-} .toast__title_1bmao {
+} .toast__title_1jmoj {
     font-weight: 400;
-} .toast__popoverInner_1bmao {
+} .toast__popoverInner_1jmoj {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
-} .toast__block_1bmao {
+} .toast__block_1jmoj {
     width: 100%;
-} .toast__fixed_1bmao {
+} .toast__fixed_1jmoj {
     position: fixed;
     bottom: var(--gap-2xl)
-} .toast__fixed_1bmao.toast__enter_1bmao {
+} .toast__fixed_1jmoj.toast__enter_1jmoj {
         opacity: 0;
         transform: scale(0.98);
-    } .toast__fixed_1bmao.toast__enterActive_1bmao {
+    } .toast__fixed_1jmoj.toast__enterActive_1jmoj {
         opacity: 1;
         transform: scale(1);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
-    } .toast__fixed_1bmao.toast__exit_1bmao {
+    } .toast__fixed_1jmoj.toast__exit_1jmoj {
         opacity: 1;
         transform: scale(1);
-    } .toast__fixed_1bmao.toast__exitActive_1bmao {
+    } .toast__fixed_1jmoj.toast__exitActive_1jmoj {
         opacity: 0;
         transform: scale(0.98);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;

package/toast/index.css

@@ -24,32 +24,32 @@
     /* inverted */
 } :root {
     --toast-box-shadow: var(--shadow-m);
-} .toast__toastPlate_1bmao {
+} .toast__toastPlate_1jmoj {
     box-shadow: var(--toast-box-shadow);
     word-break: break-word;
-} .toast__title_1bmao {
+} .toast__title_1jmoj {
     font-weight: 400;
-} .toast__popoverInner_1bmao {
+} .toast__popoverInner_1jmoj {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
-} .toast__block_1bmao {
+} .toast__block_1jmoj {
     width: 100%;
-} .toast__fixed_1bmao {
+} .toast__fixed_1jmoj {
     position: fixed;
     bottom: var(--gap-2xl)
-} .toast__fixed_1bmao.toast__enter_1bmao {
+} .toast__fixed_1jmoj.toast__enter_1jmoj {
         opacity: 0;
         transform: scale(0.98);
-    } .toast__fixed_1bmao.toast__enterActive_1bmao {
+    } .toast__fixed_1jmoj.toast__enterActive_1jmoj {
         opacity: 1;
         transform: scale(1);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
-    } .toast__fixed_1bmao.toast__exit_1bmao {
+    } .toast__fixed_1jmoj.toast__exit_1jmoj {
         opacity: 1;
         transform: scale(1);
-    } .toast__fixed_1bmao.toast__exitActive_1bmao {
+    } .toast__fixed_1jmoj.toast__exitActive_1jmoj {
         opacity: 0;
         transform: scale(0.98);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;

package/toast/modern/component.d.ts

@@ -48,6 +48,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
     actionButton?: React.ReactNode;
     dataTestId?: string | undefined;
     hasCloser?: boolean | undefined;
+    closerWrapperClassName?: string | undefined;
+    closerClassName?: string | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
@@ -95,6 +97,8 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
         actionButton?: React.ReactNode;
         dataTestId?: string | undefined;
         hasCloser?: boolean | undefined;
+        closerWrapperClassName?: string | undefined;
+        closerClassName?: string | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;

package/toast/modern/component.js

@@ -8,7 +8,7 @@ import { Stack, stackingOrder } from '../../stack/modern';
 import { ToastPlate } from '../../toast-plate/modern';
 import { usePrevious, useClickOutside } from '@alfalab/hooks';
 
-const styles = {"toastPlate":"toast__toastPlate_1bmao","title":"toast__title_1bmao","popoverInner":"toast__popoverInner_1bmao","block":"toast__block_1bmao","fixed":"toast__fixed_1bmao","enter":"toast__enter_1bmao","enterActive":"toast__enterActive_1bmao","exit":"toast__exit_1bmao","exitActive":"toast__exitActive_1bmao"};
+const styles = {"toastPlate":"toast__toastPlate_1jmoj","title":"toast__title_1jmoj","popoverInner":"toast__popoverInner_1jmoj","block":"toast__block_1jmoj","fixed":"toast__fixed_1jmoj","enter":"toast__enter_1jmoj","enterActive":"toast__enterActive_1jmoj","exit":"toast__exit_1jmoj","exitActive":"toast__exitActive_1jmoj"};
 require('./index.css');
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/toast/modern/index.css

@@ -24,32 +24,32 @@
     /* inverted */
 } :root {
     --toast-box-shadow: var(--shadow-m);
-} .toast__toastPlate_1bmao {
+} .toast__toastPlate_1jmoj {
     box-shadow: var(--toast-box-shadow);
     word-break: break-word;
-} .toast__title_1bmao {
+} .toast__title_1jmoj {
     font-weight: 400;
-} .toast__popoverInner_1bmao {
+} .toast__popoverInner_1jmoj {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
-} .toast__block_1bmao {
+} .toast__block_1jmoj {
     width: 100%;
-} .toast__fixed_1bmao {
+} .toast__fixed_1jmoj {
     position: fixed;
     bottom: var(--gap-2xl)
-} .toast__fixed_1bmao.toast__enter_1bmao {
+} .toast__fixed_1jmoj.toast__enter_1jmoj {
         opacity: 0;
         transform: scale(0.98);
-    } .toast__fixed_1bmao.toast__enterActive_1bmao {
+    } .toast__fixed_1jmoj.toast__enterActive_1jmoj {
         opacity: 1;
         transform: scale(1);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
-    } .toast__fixed_1bmao.toast__exit_1bmao {
+    } .toast__fixed_1jmoj.toast__exit_1jmoj {
         opacity: 1;
         transform: scale(1);
-    } .toast__fixed_1bmao.toast__exitActive_1bmao {
+    } .toast__fixed_1jmoj.toast__exitActive_1jmoj {
         opacity: 0;
         transform: scale(0.98);
         transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;

package/toast-plate/component.d.ts

@@ -51,6 +51,14 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -113,6 +121,14 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean | undefined;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string | undefined;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string | undefined;
     /**
      * Растягивает компонент на ширину контейнера
      */

package/toast-plate/component.js

@@ -13,13 +13,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"component":"toast-plate__component_kphdm","closeButtonWrapper":"toast-plate__closeButtonWrapper_kphdm"};
+var defaultColors = {"component":"toast-plate__component_3cb2y","closeButtonWrapper":"toast-plate__closeButtonWrapper_3cb2y"};
 require('./default.css');
 
-var styles = {"component":"toast-plate__component_8esns","hasCloser":"toast-plate__hasCloser_8esns","contentWrap":"toast-plate__contentWrap_8esns","block":"toast-plate__block_8esns","content":"toast-plate__content_8esns","hasActionButton":"toast-plate__hasActionButton_8esns","actionSection":"toast-plate__actionSection_8esns","leftAddons":"toast-plate__leftAddons_8esns","title":"toast-plate__title_8esns","children":"toast-plate__children_8esns","closeButtonWrapper":"toast-plate__closeButtonWrapper_8esns","closeButton":"toast-plate__closeButton_8esns"};
+var styles = {"component":"toast-plate__component_h25uu","hasCloser":"toast-plate__hasCloser_h25uu","contentWrap":"toast-plate__contentWrap_h25uu","block":"toast-plate__block_h25uu","content":"toast-plate__content_h25uu","hasActionButton":"toast-plate__hasActionButton_h25uu","actionSection":"toast-plate__actionSection_h25uu","leftAddons":"toast-plate__leftAddons_h25uu","title":"toast-plate__title_h25uu","children":"toast-plate__children_h25uu","closeButtonWrapper":"toast-plate__closeButtonWrapper_h25uu","closeButton":"toast-plate__closeButton_h25uu"};
 require('./index.css');
 
-var invertedColors = {"component":"toast-plate__component_6wvft","closeButtonWrapper":"toast-plate__closeButtonWrapper_6wvft"};
+var invertedColors = {"component":"toast-plate__component_1okt7","closeButtonWrapper":"toast-plate__closeButtonWrapper_1okt7"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -33,7 +33,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, closerWrapperClassName = _a.closerWrapperClassName, closerClassName = _a.closerClassName, restProps = tslib.__rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors", "closerWrapperClassName", "closerClassName"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -56,8 +56,8 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             actionButton && (React__default.default.createElement("div", { className: cn__default.default(actionSectionClassName, styles.actionSection, (_d = {},
                     _d[styles.hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React__default.default.createElement("div", { className: cn__default.default(styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
-                React__default.default.createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default.default(styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React__default.default.createElement("div", { className: cn__default.default(styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper, closerWrapperClassName) },
+                React__default.default.createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default.default(styles.closeButton, closerClassName), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 exports.ToastPlate = ToastPlate;

package/toast-plate/cssm/component.d.ts

@@ -51,6 +51,14 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -113,6 +121,14 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean | undefined;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string | undefined;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string | undefined;
     /**
      * Растягивает компонент на ширину контейнера
      */

package/toast-plate/cssm/component.js

@@ -30,7 +30,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = tslib.__rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, closerWrapperClassName = _a.closerWrapperClassName, closerClassName = _a.closerClassName, restProps = tslib.__rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors", "closerWrapperClassName", "closerClassName"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -53,8 +53,8 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             actionButton && (React__default.default.createElement("div", { className: cn__default.default(actionSectionClassName, styles__default.default.actionSection, (_d = {},
                     _d[styles__default.default.hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
-                React__default.default.createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default.default(styles__default.default.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.closeButtonWrapper, colorStyles[colors].closeButtonWrapper, closerWrapperClassName) },
+                React__default.default.createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn__default.default(styles__default.default.closeButton, closerClassName), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 exports.ToastPlate = ToastPlate;

package/toast-plate/default.css

@@ -23,9 +23,9 @@
     --toast-plate-color: var(--color-light-text-primary-inverted);
 
     /* inverted */
-} .toast-plate__component_kphdm {
+} .toast-plate__component_3cb2y {
     color: var(--toast-plate-color);
     background-color: var(--toast-plate-bg-color);
-} .toast-plate__closeButtonWrapper_kphdm:before {
+} .toast-plate__closeButtonWrapper_3cb2y:before {
         background-color: var(--color-light-border-secondary-inverted);
     }

package/toast-plate/esm/component.d.ts

@@ -51,6 +51,14 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string;
     /**
      * Растягивает компонент на ширину контейнера
      */
@@ -113,6 +121,14 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Управляет отображением кнопки закрытия уведомления
      */
     hasCloser?: boolean | undefined;
+    /**
+     * Доп. класс враппера кнопки "закрыть".
+     */
+    closerWrapperClassName?: string | undefined;
+    /**
+     * Доп. класс кнопки "закрыть".
+     */
+    closerClassName?: string | undefined;
     /**
      * Растягивает компонент на ширину контейнера
      */

package/toast-plate/esm/component.js

@@ -8,13 +8,13 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
 import { CrossCircleMIcon } from '@alfalab/icons-glyph/CrossCircleMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
 
-var defaultColors = {"component":"toast-plate__component_kphdm","closeButtonWrapper":"toast-plate__closeButtonWrapper_kphdm"};
+var defaultColors = {"component":"toast-plate__component_3cb2y","closeButtonWrapper":"toast-plate__closeButtonWrapper_3cb2y"};
 require('./default.css');
 
-var styles = {"component":"toast-plate__component_8esns","hasCloser":"toast-plate__hasCloser_8esns","contentWrap":"toast-plate__contentWrap_8esns","block":"toast-plate__block_8esns","content":"toast-plate__content_8esns","hasActionButton":"toast-plate__hasActionButton_8esns","actionSection":"toast-plate__actionSection_8esns","leftAddons":"toast-plate__leftAddons_8esns","title":"toast-plate__title_8esns","children":"toast-plate__children_8esns","closeButtonWrapper":"toast-plate__closeButtonWrapper_8esns","closeButton":"toast-plate__closeButton_8esns"};
+var styles = {"component":"toast-plate__component_h25uu","hasCloser":"toast-plate__hasCloser_h25uu","contentWrap":"toast-plate__contentWrap_h25uu","block":"toast-plate__block_h25uu","content":"toast-plate__content_h25uu","hasActionButton":"toast-plate__hasActionButton_h25uu","actionSection":"toast-plate__actionSection_h25uu","leftAddons":"toast-plate__leftAddons_h25uu","title":"toast-plate__title_h25uu","children":"toast-plate__children_h25uu","closeButtonWrapper":"toast-plate__closeButtonWrapper_h25uu","closeButton":"toast-plate__closeButton_h25uu"};
 require('./index.css');
 
-var invertedColors = {"component":"toast-plate__component_6wvft","closeButtonWrapper":"toast-plate__closeButtonWrapper_6wvft"};
+var invertedColors = {"component":"toast-plate__component_1okt7","closeButtonWrapper":"toast-plate__closeButtonWrapper_1okt7"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -28,7 +28,7 @@ var iconDefaultComponents = {
 };
 var ToastPlate = forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors"]);
+    var dataTestId = _a.dataTestId, className = _a.className, titleClassName = _a.titleClassName, contentClassName = _a.contentClassName, actionSectionClassName = _a.actionSectionClassName, hasCloser = _a.hasCloser, leftAddons = _a.leftAddons, badge = _a.badge, title = _a.title, children = _a.children, actionButton = _a.actionButton, block = _a.block, onClose = _a.onClose, getBadgeIcons = _a.getBadgeIcons, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, closerWrapperClassName = _a.closerWrapperClassName, closerClassName = _a.closerClassName, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons", "colors", "closerWrapperClassName", "closerClassName"]);
     var needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -51,8 +51,8 @@ var ToastPlate = forwardRef(function (_a, ref) {
             actionButton && (React.createElement("div", { className: cn(actionSectionClassName, styles.actionSection, (_d = {},
                     _d[styles.hasCloser] = hasCloser,
                     _d)) }, actionButton)),
-            hasCloser && (React.createElement("div", { className: cn(styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper) },
-                React.createElement(IconButton, { icon: CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn(styles.closeButton), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
+            hasCloser && (React.createElement("div", { className: cn(styles.closeButtonWrapper, colorStyles[colors].closeButtonWrapper, closerWrapperClassName) },
+                React.createElement(IconButton, { icon: CrossMIcon, colors: colors === 'default' ? 'inverted' : 'default', className: cn(styles.closeButton, closerClassName), onClick: handleClose, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C' }))))));
 });
 
 export { ToastPlate };

package/toast-plate/esm/default.css

@@ -23,9 +23,9 @@
     --toast-plate-color: var(--color-light-text-primary-inverted);
 
     /* inverted */
-} .toast-plate__component_kphdm {
+} .toast-plate__component_3cb2y {
     color: var(--toast-plate-color);
     background-color: var(--toast-plate-bg-color);
-} .toast-plate__closeButtonWrapper_kphdm:before {
+} .toast-plate__closeButtonWrapper_3cb2y:before {
         background-color: var(--color-light-border-secondary-inverted);
     }

package/toast-plate/esm/index.css

@@ -32,7 +32,7 @@
     --toast-plate-close-button-align: center;
 
     /* inverted */
-} .toast-plate__component_8esns {
+} .toast-plate__component_h25uu {
     position: relative;
     display: inline-flex;
     flex-direction: column;
@@ -40,52 +40,52 @@
     border-radius: var(--toast-plate-border-radius);
     min-height: 56px;
     padding: var(--gap-m)
-} .toast-plate__component_8esns.toast-plate__hasCloser_8esns {
+} .toast-plate__component_h25uu.toast-plate__hasCloser_h25uu {
         /* 2×16 + 24 */
         padding-right: 56px;
-    } .toast-plate__contentWrap_8esns {
+    } .toast-plate__contentWrap_h25uu {
     display: flex;
-} .toast-plate__block_8esns {
+} .toast-plate__block_h25uu {
     display: flex;
     width: 100%;
-} .toast-plate__content_8esns {
+} .toast-plate__content_h25uu {
     display: flex;
     flex-grow: 1
-} .toast-plate__content_8esns.toast-plate__hasCloser_8esns:not(.toast-plate__hasActionButton_8esns) {
+} .toast-plate__content_h25uu.toast-plate__hasCloser_h25uu:not(.toast-plate__hasActionButton_h25uu) {
         padding-right: var(--toast-plate-content-with-closer-right-padding);
-    } .toast-plate__actionSection_8esns {
+    } .toast-plate__actionSection_h25uu {
     display: flex;
     align-items: var(--toast-plate-action-align);
     flex-shrink: 0;
     margin: var(--toast-plate-action-margin) 0;
     padding: var(--toast-plate-action-padding)
-} .toast-plate__actionSection_8esns:last-child {
+} .toast-plate__actionSection_h25uu:last-child {
         padding-right: 0;
-    } .toast-plate__leftAddons_8esns {
+    } .toast-plate__leftAddons_h25uu {
     display: flex;
     align-items: flex-start;
     flex-shrink: 0;
     padding-right: var(--gap-s);
-} .toast-plate__title_8esns {
+} .toast-plate__title_h25uu {
     font-size: 16px;
     line-height: 24px;
     font-weight: 700;
 
     font-weight: var(--toast-plate-title-font-weight);
-} .toast-plate__children_8esns {
+} .toast-plate__children_h25uu {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     word-break: break-word;
-} .toast-plate__title_8esns + .toast-plate__children_8esns {
+} .toast-plate__title_h25uu + .toast-plate__children_h25uu {
     margin-top: var(--gap-2xs);
-} .toast-plate__closeButtonWrapper_8esns {
+} .toast-plate__closeButtonWrapper_h25uu {
     position: absolute;
     top: var(--gap-2xs);
     bottom: var(--gap-2xs);
     right: var(--gap-2xs)
-} .toast-plate__closeButtonWrapper_8esns:before {
+} .toast-plate__closeButtonWrapper_h25uu:before {
         display: var(--toast-plate-action-divider-display);
         position: absolute;
         right: 51px;
@@ -93,7 +93,7 @@
         bottom: var(--gap-s);
         width: 1px;
         content: '';
-    } .toast-plate__closeButton_8esns {
+    } .toast-plate__closeButton_h25uu {
     display: flex;
     align-items: var(--toast-plate-close-button-align);
     height: 100%;

package/toast-plate/esm/inverted.css

@@ -23,9 +23,9 @@
     /* inverted */
     --toast-plate-inverted-color: var(--color-light-text-primary);
     --toast-plate-inverted-bg-color: var(--color-light-bg-primary);
-} .toast-plate__component_6wvft {
+} .toast-plate__component_1okt7 {
     color: var(--toast-plate-inverted-color);
     background-color: var(--toast-plate-inverted-bg-color);
-} .toast-plate__closeButtonWrapper_6wvft:before {
+} .toast-plate__closeButtonWrapper_1okt7:before {
         background-color: var(--color-light-border-secondary);
     }