@alfalab/core-components 32.0.0-beta.0 → 32.0.1

package/themes/tabs/click.css

@@ -1,6 +1,5 @@
 :root {
     /* theme */
-    --primary-tablist-mobile-padding: var(--gap-s) 0;
     --primary-tablist-s-font-size: 18px;
     --primary-tablist-s-font-weight: 500;
     --primary-tablist-s-font-family: var(--font-family-system);
@@ -17,4 +16,10 @@
     --primary-tablist-xl-font-weight: 500;
     --primary-tablist-xl-font-family: var(--font-family-styrene);
     --primary-tablist-xl-padding: var(--gap-l) 0;
+
+    /* mobile */
+    --primary-tablist-mobile-font-weight: 500;
+    --primary-tablist-mobile-font-family: var(--font-family-styrene);
+    --primary-tablist-mobile-font-size: 20px;
+    --primary-tablist-mobile-line-height: 28px;
 }

package/toast/component.d.ts

@@ -33,24 +33,25 @@ type ToastProps = ToastPlateProps & Pick<PopoverProps, 'position' | 'offset' | '
 };
 declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
-    titleClassName?: string | undefined;
+    titleClassName?: string | undefined; /**
+     * Элемент, относительного которого появляется тост.
+     * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+     */
     contentClassName?: string | undefined;
     actionSectionClassName?: string | undefined;
     children?: React.ReactNode;
     title?: React.ReactNode;
-    badge?: "negative" | "positive" | "attention" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined; /**
+     * z-index компонента
+     */
     leftAddons?: React.ReactNode;
     actionButton?: React.ReactNode;
-    dataTestId?: string | undefined; /**
-     * Обработчик закрытия компонента.
-     */
-    hasCloser?: boolean | undefined; /**
-     * Плашка тоста.
-     * По-дефолту рендерит компонент ToastPlate
-     */
+    dataTestId?: string | undefined;
+    hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../toast-plate").BadgeIcons) => import("../toast-plate").BadgeIcons) | undefined;
+    colors?: "default" | "inverted" | undefined;
 } & Pick<PopoverProps, "offset" | "getPortalContainer" | "transition" | "useAnchorWidth" | "position" | "preventFlip" | "open"> & {
     /**
      * Элемент, относительного которого появляется тост.
@@ -79,24 +80,25 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
      */
     ToastPlate?: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         className?: string | undefined;
-        titleClassName?: string | undefined;
+        titleClassName?: string | undefined; /**
+         * Элемент, относительного которого появляется тост.
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+         */
         contentClassName?: string | undefined;
         actionSectionClassName?: string | undefined;
         children?: React.ReactNode;
         title?: React.ReactNode;
-        badge?: "negative" | "positive" | "attention" | undefined;
+        badge?: "negative" | "positive" | "attention" | undefined; /**
+         * z-index компонента
+         */
         leftAddons?: React.ReactNode;
         actionButton?: React.ReactNode;
-        dataTestId?: string | undefined; /**
-         * Обработчик закрытия компонента.
-         */
-        hasCloser?: boolean | undefined; /**
-         * Плашка тоста.
-         * По-дефолту рендерит компонент ToastPlate
-         */
+        dataTestId?: string | undefined;
+        hasCloser?: boolean | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../toast-plate").BadgeIcons) => import("../toast-plate").BadgeIcons) | undefined;
+        colors?: "default" | "inverted" | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ToastProps, Toast };

package/toast/component.js

@@ -55,7 +55,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"toastPlate":"toast__toastPlate_8e2n3","title":"toast__title_8e2n3","popoverInner":"toast__popoverInner_8e2n3","block":"toast__block_8e2n3","fixed":"toast__fixed_8e2n3","enter":"toast__enter_8e2n3","enterActive":"toast__enterActive_8e2n3","exit":"toast__exit_8e2n3","exitActive":"toast__exitActive_8e2n3"};
+var styles = {"toastPlate":"toast__toastPlate_1dy0b","title":"toast__title_1dy0b","popoverInner":"toast__popoverInner_1dy0b","block":"toast__block_1dy0b","fixed":"toast__fixed_1dy0b","enter":"toast__enter_1dy0b","enterActive":"toast__enterActive_1dy0b","exit":"toast__exit_1dy0b","exitActive":"toast__exitActive_1dy0b"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/toast/cssm/component.d.ts

@@ -33,24 +33,25 @@ type ToastProps = ToastPlateProps & Pick<PopoverProps, 'position' | 'offset' | '
 };
 declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
-    titleClassName?: string | undefined;
+    titleClassName?: string | undefined; /**
+     * Элемент, относительного которого появляется тост.
+     * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+     */
     contentClassName?: string | undefined;
     actionSectionClassName?: string | undefined;
     children?: React.ReactNode;
     title?: React.ReactNode;
-    badge?: "negative" | "positive" | "attention" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined; /**
+     * z-index компонента
+     */
     leftAddons?: React.ReactNode;
     actionButton?: React.ReactNode;
-    dataTestId?: string | undefined; /**
-     * Обработчик закрытия компонента.
-     */
-    hasCloser?: boolean | undefined; /**
-     * Плашка тоста.
-     * По-дефолту рендерит компонент ToastPlate
-     */
+    dataTestId?: string | undefined;
+    hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+    colors?: "default" | "inverted" | undefined;
 } & Pick<PopoverProps, "offset" | "getPortalContainer" | "transition" | "useAnchorWidth" | "position" | "preventFlip" | "open"> & {
     /**
      * Элемент, относительного которого появляется тост.
@@ -79,24 +80,25 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
      */
     ToastPlate?: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         className?: string | undefined;
-        titleClassName?: string | undefined;
+        titleClassName?: string | undefined; /**
+         * Элемент, относительного которого появляется тост.
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+         */
         contentClassName?: string | undefined;
         actionSectionClassName?: string | undefined;
         children?: React.ReactNode;
         title?: React.ReactNode;
-        badge?: "negative" | "positive" | "attention" | undefined;
+        badge?: "negative" | "positive" | "attention" | undefined; /**
+         * z-index компонента
+         */
         leftAddons?: React.ReactNode;
         actionButton?: React.ReactNode;
-        dataTestId?: string | undefined; /**
-         * Обработчик закрытия компонента.
-         */
-        hasCloser?: boolean | undefined; /**
-         * Плашка тоста.
-         * По-дефолту рендерит компонент ToastPlate
-         */
+        dataTestId?: string | undefined;
+        hasCloser?: boolean | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+        colors?: "default" | "inverted" | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ToastProps, Toast };

package/toast/cssm/index.module.css

@@ -10,12 +10,21 @@
 :root {
     --gap-2xl: 32px;
 }
+:root {
+    --border-radius-m: 8px;
+}
+:root {
+    /* default */
+    --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
+}
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
 .toastPlate {
     box-shadow: var(--toast-box-shadow);
-    word-break: break-all;
+    word-break: break-word;
 }
 .title {
     font-weight: 400;

package/toast/esm/component.d.ts

@@ -33,24 +33,25 @@ type ToastProps = ToastPlateProps & Pick<PopoverProps, 'position' | 'offset' | '
 };
 declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
-    titleClassName?: string | undefined;
+    titleClassName?: string | undefined; /**
+     * Элемент, относительного которого появляется тост.
+     * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+     */
     contentClassName?: string | undefined;
     actionSectionClassName?: string | undefined;
     children?: React.ReactNode;
     title?: React.ReactNode;
-    badge?: "negative" | "positive" | "attention" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined; /**
+     * z-index компонента
+     */
     leftAddons?: React.ReactNode;
     actionButton?: React.ReactNode;
-    dataTestId?: string | undefined; /**
-     * Обработчик закрытия компонента.
-     */
-    hasCloser?: boolean | undefined; /**
-     * Плашка тоста.
-     * По-дефолту рендерит компонент ToastPlate
-     */
+    dataTestId?: string | undefined;
+    hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+    colors?: "default" | "inverted" | undefined;
 } & Pick<PopoverProps, "offset" | "getPortalContainer" | "transition" | "useAnchorWidth" | "position" | "preventFlip" | "open"> & {
     /**
      * Элемент, относительного которого появляется тост.
@@ -79,24 +80,25 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
      */
     ToastPlate?: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         className?: string | undefined;
-        titleClassName?: string | undefined;
+        titleClassName?: string | undefined; /**
+         * Элемент, относительного которого появляется тост.
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+         */
         contentClassName?: string | undefined;
         actionSectionClassName?: string | undefined;
         children?: React.ReactNode;
         title?: React.ReactNode;
-        badge?: "negative" | "positive" | "attention" | undefined;
+        badge?: "negative" | "positive" | "attention" | undefined; /**
+         * z-index компонента
+         */
         leftAddons?: React.ReactNode;
         actionButton?: React.ReactNode;
-        dataTestId?: string | undefined; /**
-         * Обработчик закрытия компонента.
-         */
-        hasCloser?: boolean | undefined; /**
-         * Плашка тоста.
-         * По-дефолту рендерит компонент ToastPlate
-         */
+        dataTestId?: string | undefined;
+        hasCloser?: boolean | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+        colors?: "default" | "inverted" | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ToastProps, Toast };

package/toast/esm/component.js

@@ -47,7 +47,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"toastPlate":"toast__toastPlate_8e2n3","title":"toast__title_8e2n3","popoverInner":"toast__popoverInner_8e2n3","block":"toast__block_8e2n3","fixed":"toast__fixed_8e2n3","enter":"toast__enter_8e2n3","enterActive":"toast__enterActive_8e2n3","exit":"toast__exit_8e2n3","exitActive":"toast__exitActive_8e2n3"};
+var styles = {"toastPlate":"toast__toastPlate_1dy0b","title":"toast__title_1dy0b","popoverInner":"toast__popoverInner_1dy0b","block":"toast__block_1dy0b","fixed":"toast__fixed_1dy0b","enter":"toast__enter_1dy0b","enterActive":"toast__enterActive_1dy0b","exit":"toast__exit_1dy0b","exitActive":"toast__exitActive_1dy0b"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {

package/toast/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: jlyy0 */
+/* hash: 1rdov */
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
 
@@ -11,43 +11,52 @@
 :root {
     --gap-2xl: 32px;
 }
+:root {
+    --border-radius-m: 8px;
+}
+:root {
+    /* default */
+    --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
+}
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_8e2n3 {
+.toast__toastPlate_1dy0b {
     box-shadow: var(--toast-box-shadow);
-    word-break: break-all;
+    word-break: break-word;
 }
-.toast__title_8e2n3 {
+.toast__title_1dy0b {
     font-weight: 400;
 }
-.toast__popoverInner_8e2n3 {
+.toast__popoverInner_1dy0b {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_8e2n3 {
+.toast__block_1dy0b {
     width: 100%;
 }
-.toast__fixed_8e2n3 {
+.toast__fixed_1dy0b {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_8e2n3.toast__enter_8e2n3 {
+.toast__fixed_1dy0b.toast__enter_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_8e2n3.toast__enterActive_8e2n3 {
+.toast__fixed_1dy0b.toast__enterActive_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exit_8e2n3 {
+.toast__fixed_1dy0b.toast__exit_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exitActive_8e2n3 {
+.toast__fixed_1dy0b.toast__exitActive_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }

package/toast/index.css

@@ -1,4 +1,4 @@
-/* hash: jlyy0 */
+/* hash: 1rdov */
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
 
@@ -11,43 +11,52 @@
 :root {
     --gap-2xl: 32px;
 }
+:root {
+    --border-radius-m: 8px;
+}
+:root {
+    /* default */
+    --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
+}
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_8e2n3 {
+.toast__toastPlate_1dy0b {
     box-shadow: var(--toast-box-shadow);
-    word-break: break-all;
+    word-break: break-word;
 }
-.toast__title_8e2n3 {
+.toast__title_1dy0b {
     font-weight: 400;
 }
-.toast__popoverInner_8e2n3 {
+.toast__popoverInner_1dy0b {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_8e2n3 {
+.toast__block_1dy0b {
     width: 100%;
 }
-.toast__fixed_8e2n3 {
+.toast__fixed_1dy0b {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_8e2n3.toast__enter_8e2n3 {
+.toast__fixed_1dy0b.toast__enter_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_8e2n3.toast__enterActive_8e2n3 {
+.toast__fixed_1dy0b.toast__enterActive_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exit_8e2n3 {
+.toast__fixed_1dy0b.toast__exit_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exitActive_8e2n3 {
+.toast__fixed_1dy0b.toast__exitActive_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }

package/toast/modern/component.d.ts

@@ -33,24 +33,25 @@ type ToastProps = ToastPlateProps & Pick<PopoverProps, 'position' | 'offset' | '
 };
 declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     className?: string | undefined;
-    titleClassName?: string | undefined;
+    titleClassName?: string | undefined; /**
+     * Элемент, относительного которого появляется тост.
+     * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+     */
     contentClassName?: string | undefined;
     actionSectionClassName?: string | undefined;
     children?: React.ReactNode;
     title?: React.ReactNode;
-    badge?: "negative" | "positive" | "attention" | undefined;
+    badge?: "negative" | "positive" | "attention" | undefined; /**
+     * z-index компонента
+     */
     leftAddons?: React.ReactNode;
     actionButton?: React.ReactNode;
-    dataTestId?: string | undefined; /**
-     * Обработчик закрытия компонента.
-     */
-    hasCloser?: boolean | undefined; /**
-     * Плашка тоста.
-     * По-дефолту рендерит компонент ToastPlate
-     */
+    dataTestId?: string | undefined;
+    hasCloser?: boolean | undefined;
     block?: boolean | undefined;
     onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
     getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+    colors?: "default" | "inverted" | undefined;
 } & Pick<PopoverProps, "offset" | "getPortalContainer" | "transition" | "useAnchorWidth" | "position" | "preventFlip" | "open"> & {
     /**
      * Элемент, относительного которого появляется тост.
@@ -79,24 +80,25 @@ declare const Toast: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDi
      */
     ToastPlate?: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
         className?: string | undefined;
-        titleClassName?: string | undefined;
+        titleClassName?: string | undefined; /**
+         * Элемент, относительного которого появляется тост.
+         * Если не передавать, тост будет позиционирован снизу экрана (position: fixed).
+         */
         contentClassName?: string | undefined;
         actionSectionClassName?: string | undefined;
         children?: React.ReactNode;
         title?: React.ReactNode;
-        badge?: "negative" | "positive" | "attention" | undefined;
+        badge?: "negative" | "positive" | "attention" | undefined; /**
+         * z-index компонента
+         */
         leftAddons?: React.ReactNode;
         actionButton?: React.ReactNode;
-        dataTestId?: string | undefined; /**
-         * Обработчик закрытия компонента.
-         */
-        hasCloser?: boolean | undefined; /**
-         * Плашка тоста.
-         * По-дефолту рендерит компонент ToastPlate
-         */
+        dataTestId?: string | undefined;
+        hasCloser?: boolean | undefined;
         block?: boolean | undefined;
         onClose?: ((event?: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined) => void) | undefined;
         getBadgeIcons?: ((icons: import("../../toast-plate").BadgeIcons) => import("../../toast-plate").BadgeIcons) | undefined;
+        colors?: "default" | "inverted" | undefined;
     } & React.RefAttributes<HTMLDivElement>> | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { ToastProps, Toast };

package/toast/modern/component.js

@@ -8,7 +8,7 @@ import { Popover } from '../../popover/modern';
 import { Portal } from '../../portal/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
 
-var styles = {"toastPlate":"toast__toastPlate_8e2n3","title":"toast__title_8e2n3","popoverInner":"toast__popoverInner_8e2n3","block":"toast__block_8e2n3","fixed":"toast__fixed_8e2n3","enter":"toast__enter_8e2n3","enterActive":"toast__enterActive_8e2n3","exit":"toast__exit_8e2n3","exitActive":"toast__exitActive_8e2n3"};
+var styles = {"toastPlate":"toast__toastPlate_1dy0b","title":"toast__title_1dy0b","popoverInner":"toast__popoverInner_1dy0b","block":"toast__block_1dy0b","fixed":"toast__fixed_1dy0b","enter":"toast__enter_1dy0b","enterActive":"toast__enterActive_1dy0b","exit":"toast__exit_1dy0b","exitActive":"toast__exitActive_1dy0b"};
 require('./index.css');
 
 const CSS_TRANSITION_CLASS_NAMES = {

package/toast/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: jlyy0 */
+/* hash: 1rdov */
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
 
@@ -11,43 +11,52 @@
 :root {
     --gap-2xl: 32px;
 }
+:root {
+    --border-radius-m: 8px;
+}
+:root {
+    /* default */
+    --toast-plate-border-radius: var(--border-radius-m);
+
+    /* inverted */
+}
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_8e2n3 {
+.toast__toastPlate_1dy0b {
     box-shadow: var(--toast-box-shadow);
-    word-break: break-all;
+    word-break: break-word;
 }
-.toast__title_8e2n3 {
+.toast__title_1dy0b {
     font-weight: 400;
 }
-.toast__popoverInner_8e2n3 {
+.toast__popoverInner_1dy0b {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_8e2n3 {
+.toast__block_1dy0b {
     width: 100%;
 }
-.toast__fixed_8e2n3 {
+.toast__fixed_1dy0b {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_8e2n3.toast__enter_8e2n3 {
+.toast__fixed_1dy0b.toast__enter_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_8e2n3.toast__enterActive_8e2n3 {
+.toast__fixed_1dy0b.toast__enterActive_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exit_8e2n3 {
+.toast__fixed_1dy0b.toast__exit_1dy0b {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_8e2n3.toast__exitActive_8e2n3 {
+.toast__fixed_1dy0b.toast__exitActive_1dy0b {
         opacity: 0;
         transform: scale(0.98);
     }

package/toast-plate/component.d.ts

@@ -63,6 +63,10 @@ type ToastPlateProps = HTMLAttributes<HTMLDivElement> & {
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: (icons: BadgeIcons) => BadgeIcons;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
 };
 declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -121,5 +125,9 @@ declare const ToastPlate: React.ForwardRefExoticComponent<React.HTMLAttributes<H
      * Функция, с помощью которой можно переопределить иконки в Badge
      */
     getBadgeIcons?: ((icons: BadgeIcons) => BadgeIcons) | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export { BadgeIcons, ToastPlateProps, ToastPlate };

package/toast-plate/component.js

@@ -53,9 +53,19 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"toast-plate__component_16k37","hasCloser":"toast-plate__hasCloser_16k37","contentWrap":"toast-plate__contentWrap_16k37","block":"toast-plate__block_16k37","content":"toast-plate__content_16k37","hasActionButton":"toast-plate__hasActionButton_16k37","actionSection":"toast-plate__actionSection_16k37","leftAddons":"toast-plate__leftAddons_16k37","title":"toast-plate__title_16k37","children":"toast-plate__children_16k37","closeButtonWrapper":"toast-plate__closeButtonWrapper_16k37","closeButton":"toast-plate__closeButton_16k37"};
+var styles = {"component":"toast-plate__component_11z80","hasCloser":"toast-plate__hasCloser_11z80","contentWrap":"toast-plate__contentWrap_11z80","block":"toast-plate__block_11z80","content":"toast-plate__content_11z80","hasActionButton":"toast-plate__hasActionButton_11z80","actionSection":"toast-plate__actionSection_11z80","leftAddons":"toast-plate__leftAddons_11z80","title":"toast-plate__title_11z80","children":"toast-plate__children_11z80","closeButtonWrapper":"toast-plate__closeButtonWrapper_11z80","closeButton":"toast-plate__closeButton_11z80"};
 require('./index.css');
 
+var defaultColors = {"component":"toast-plate__component_1e72a","closeButtonWrapper":"toast-plate__closeButtonWrapper_1e72a"};
+require('./default.css');
+
+var invertedColors = {"component":"toast-plate__component_1vsne","closeButtonWrapper":"toast-plate__closeButtonWrapper_1vsne"};
+require('./inverted.css');
+
+var colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 var iconDefaultComponents = {
     negative: React__default['default'].createElement(CrossCircleMIcon.CrossCircleMIcon, { className: styles.badgeIcon }),
     positive: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles.badgeIcon }),
@@ -63,7 +73,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, restProps = __rest(_a, ["dataTestId", "className", "titleClassName", "contentClassName", "actionSectionClassName", "hasCloser", "leftAddons", "badge", "title", "children", "actionButton", "block", "onClose", "getBadgeIcons"]);
+    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 needRenderLeftAddons = Boolean(leftAddons || badge);
     var iconComponents = getBadgeIcons
         ? getBadgeIcons(iconDefaultComponents)
@@ -73,7 +83,7 @@ var ToastPlate = React.forwardRef(function (_a, ref) {
             onClose(event);
         }
     }, [onClose]);
-    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles.component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
+    return (React__default['default'].createElement("div", __assign({ className: cn__default['default'](styles.component, colorStyles[colors].component, (_b = {}, _b[styles.block] = block, _b[styles.hasCloser] = hasCloser, _b), className), ref: ref, "data-test-id": dataTestId }, restProps),
         React__default['default'].createElement("div", { className: styles.contentWrap },
             React__default['default'].createElement("div", { className: cn__default['default'](contentClassName, styles.content, (_c = {},
                     _c[styles.hasCloser] = hasCloser,
@@ -86,8 +96,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: styles.closeButtonWrapper },
-                React__default['default'].createElement(coreComponentsIconButton.IconButton, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', 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) },
+                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' }))))));
 });
 
 exports.ToastPlate = ToastPlate;