@alfalab/core-components 27.0.0 → 27.2.0

package/themes/dist/skeleton/click.css

@@ -0,0 +1,8 @@
+:root {
+    /* theme */
+    --skeleton-default-color: var(--color-light-graphic-quaternary);
+    --skeleton-border-radius: var(--border-radius-s);
+    --skeleton-backdrop-filter: blur(20px);
+    --skeleton-gradient-animation-display: none;
+    --skeleton-bg-animation-display: block;
+}

package/themes/dist/slider/click.css

@@ -0,0 +1,16 @@
+:root {
+    /* progress */
+    --slider-progress-background: var(--color-light-graphic-quaternary);
+    --slider-progress-color: var(--color-light-graphic-positive);
+    --slider-progress-border-radius: var(--border-radius-s);
+    --slider-progress-height: 6px;
+    --slider-progress-hover-color: var(--color-light-graphic-positive-shade-10);
+    --slider-progress-hover-background: var(--color-light-graphic-quaternary-shade-10);
+
+    /* thumb */
+    --slider-thumb-color: var(--color-light-graphic-positive);
+    --slider-thumb-size: 24px;
+    --slider-thumb-box-shadow: var(--shadow-xs-hard);
+    --slider-thumb-border: 4px solid var(--color-light-border-key-inverted);
+    --slider-thumb-hover-color: var(--color-light-graphic-positive-shade-10);
+}

package/themes/dist/slider/intranet.css

@@ -0,0 +1,5 @@
+:root {
+    --slider-progress-background: var(--color-light-graphic-quaternary);
+    --slider-progress-hover-background: var(--color-light-graphic-quaternary);
+    --slider-range-offest: 0;
+}

package/themes/dist/slider/mobile.css

@@ -0,0 +1,5 @@
+:root {
+    --slider-progress-background: var(--color-light-graphic-quaternary);
+    --slider-progress-hover-background: var(--color-light-graphic-quaternary);
+    --slider-range-offest: 0;
+}

package/themes/dist/slider-input/intranet.css

@@ -0,0 +1,3 @@
+:root {
+    --slider-input-font-weight: normal;
+}

package/themes/dist/slider-input/mobile.css

@@ -0,0 +1,3 @@
+:root {
+    --slider-input-font-weight: normal;
+}

package/themes/dist/switch/click.css

@@ -0,0 +1,5 @@
+:root {
+    /* theme */
+    --switch-checked-bg-color: var(--color-light-graphic-positive);
+    --switch-checked-border-color: transparent;
+}

package/themes/dist/tabs/click.css

@@ -0,0 +1,20 @@
+: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);
+    --primary-tablist-s-padding: var(--gap-s) 0;
+    --primary-tablist-m-font-size: 20px;
+    --primary-tablist-m-font-weight: 500;
+    --primary-tablist-m-font-family: var(--font-family-styrene);
+    --primary-tablist-m-padding: var(--gap-s) 0;
+    --primary-tablist-l-font-size: 24px;
+    --primary-tablist-l-font-weight: 500;
+    --primary-tablist-l-font-family: var(--font-family-styrene);
+    --primary-tablist-l-padding: var(--gap-l) 0;
+    --primary-tablist-xl-font-size: 24px;
+    --primary-tablist-xl-font-weight: 500;
+    --primary-tablist-xl-font-family: var(--font-family-styrene);
+    --primary-tablist-xl-padding: var(--gap-l) 0;
+}

package/themes/dist/tabs/corp.css

@@ -0,0 +1,4 @@
+:root {
+    /* theme */
+    --primary-tablist-bottom-border-color: var(--color-light-border-underline);
+}

package/themes/dist/tabs/site.css

@@ -0,0 +1,8 @@
+:root {
+    /* theme */
+    --primary-tablist-m-gaps: var(--gap-4xl);
+    --primary-tablist-m-font-weight: 500;
+    --primary-tablist-l-gaps: var(--gap-4xl);
+    --primary-tablist-l-font-weight: 500;
+    --primary-tablist-bottom-border-color: var(--color-light-border-underline);
+}

package/themes/dist/tag/click.css

@@ -0,0 +1,12 @@
+:root {
+    /* theme */
+    --tag-background-color: var(--color-light-specialbg-component);
+    --tag-background-color-hover: var(--color-light-specialbg-component-shade-10);
+    --tag-background-color-active: var(--color-light-specialbg-component-shade-30);
+    --tag-background-color-disabled: var(--color-light-specialbg-component);
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+    --tag-border-color-active: transparent;
+    --tag-border-color-checked: transparent;
+    --tag-border-color-disabled: transparent;
+}

package/themes/dist/tag/intranet.css

@@ -0,0 +1,16 @@
+:root {
+    /* theme */
+    --tag-background-color: var(--color-light-bg-secondary);
+    --tag-background-color-hover: var(--color-light-bg-secondary-shade-7);
+    --tag-background-color-active: var(--color-light-bg-secondary-shade-15);
+    --tag-background-color-disabled: var(--color-light-bg-secondary-alpha-30);
+    --tag-background-color-checked: var(--color-light-bg-secondary-inverted);
+    --tag-background-color-checked-hover: var(--color-light-bg-secondary-inverted-tint-15);
+    --tag-background-color-checked-active: var(--color-light-bg-secondary-inverted-tint-20);
+    --tag-background-color-checked-disabled: var(--color-light-bg-secondary-inverted-alpha-30);
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+    --tag-border-color-active: transparent;
+    --tag-border-color-checked: transparent;
+    --tag-border-color-disabled: transparent;
+}

package/themes/dist/tag/mobile.css

@@ -0,0 +1,17 @@
+:root {
+    /* theme */
+    --tag-border-radius: var(--border-radius-l);
+    --tag-background-color: var(--color-light-bg-secondary);
+    --tag-background-color-hover: var(--color-light-bg-secondary);
+    --tag-background-color-active: var(--color-light-bg-secondary-shade-15);
+    --tag-background-color-disabled: var(--color-light-bg-secondary-alpha-30);
+    --tag-background-color-checked: var(--color-light-bg-secondary-inverted);
+    --tag-background-color-checked-hover: var(--color-light-bg-secondary-inverted);
+    --tag-background-color-checked-active: var(--color-light-bg-secondary-inverted-tint-20);
+    --tag-background-color-checked-disabled: var(--color-light-bg-secondary-inverted-alpha-30);
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+    --tag-border-color-active: transparent;
+    --tag-border-color-checked: transparent;
+    --tag-border-color-disabled: transparent;
+}

package/themes/dist/toast-plate/click.css

@@ -0,0 +1,10 @@
+:root {
+    /* theme */
+    --toast-plate-title-font-weight: 400;
+    --toast-plate-bg-color: var(--color-light-bg-secondary-inverted);
+    --toast-plate-action-align: flex-start;
+    --toast-plate-action-padding: 0 0 0 var(--gap-xl);
+    --toast-plate-action-divider-display: none;
+    --toast-plate-content-with-closer-right-padding: 0;
+    --toast-plate-close-button-align: flex-start;
+}

package/themes/esm/compiled/mobile-dark-bluetint.js

@@ -1,4 +1 @@
-import styles from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
 export { default } from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
-
-// eslint-disable-next-line import/no-webpack-loader-syntax

package/themes/intranet.css

@@ -686,6 +686,7 @@
 :root {
     /* theme */
     --button-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-l);
     --button-active-transform: none;
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);

package/themes/mixins/button/click.css

@@ -1,5 +1,6 @@
 @define-mixin button-click {
     --button-border-radius: var(--border-radius-s);
+    --button-xxs-size-border-radius: var(--border-radius-s);
     --button-active-transform: none;
 
     /* secondary */

package/themes/mixins/button/corp.css

@@ -1,5 +1,6 @@
 @define-mixin button-corp {
     --button-border-radius: var(--border-radius-s);
+    --button-xxs-size-border-radius: var(--border-radius-s);
     --button-active-transform: none;
 
     /* secondary */

package/themes/mixins/button/intranet.css

@@ -1,6 +1,7 @@
 @define-mixin button-intranet {
     /* theme */
     --button-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-l);
     --button-active-transform: none;
 
     /* primary */

package/themes/mixins/button/mobile.css

@@ -1,6 +1,7 @@
 @define-mixin button-mobile {
     /* theme */
     --button-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-l);
     --button-active-transform: none;
 
     /* primary */

package/themes/mixins/toast-plate/click.css

@@ -5,4 +5,6 @@
     --toast-plate-action-align: flex-start;
     --toast-plate-action-padding: 0 0 0 var(--gap-xl);
     --toast-plate-action-divider-display: none;
+    --toast-plate-content-with-closer-right-padding: 0;
+    --toast-plate-close-button-align: flex-start;
 }

package/themes/mobile.css

@@ -686,6 +686,7 @@
 :root {
     /* theme */
     --button-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-l);
     --button-active-transform: none;
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);

package/themes/modern/compiled/mobile-dark-bluetint.js

@@ -1,4 +1 @@
-import styles from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
 export { default } from '!!css-loader!@alfalab/core-components/themes/compiled/mobile-dark-bluetint.css';
-
-// eslint-disable-next-line import/no-webpack-loader-syntax

package/themes/package.json

@@ -1,12 +1,3 @@
 {
-    "name": "@alfalab/core-components-themes",
-    "version": "8.1.3",
-    "description": "",
-    "keywords": [],
-    "license": "MIT",
-    "publishConfig": {
-        "access": "public",
-        "directory": "dist"
-    },
-    "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+    "module": "./esm/index.js"
 }

package/themes/toast-plate/click.css

@@ -5,4 +5,6 @@
     --toast-plate-action-align: flex-start;
     --toast-plate-action-padding: 0 0 0 var(--gap-xl);
     --toast-plate-action-divider-display: none;
+    --toast-plate-content-with-closer-right-padding: 0;
+    --toast-plate-close-button-align: flex-start;
 }

package/toast/component.d.ts

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

package/toast/component.js

@@ -55,7 +55,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"toastPlate":"toast__toastPlate_1a91o","popoverInner":"toast__popoverInner_1a91o","block":"toast__block_1a91o","fixed":"toast__fixed_1a91o","enter":"toast__enter_1a91o","enterActive":"toast__enterActive_1a91o","exit":"toast__exit_1a91o","exitActive":"toast__exitActive_1a91o"};
+var styles = {"toastPlate":"toast__toastPlate_1ixi7","title":"toast__title_1ixi7","popoverInner":"toast__popoverInner_1ixi7","block":"toast__block_1ixi7","fixed":"toast__fixed_1ixi7","enter":"toast__enter_1ixi7","enterActive":"toast__enterActive_1ixi7","exit":"toast__exit_1ixi7","exitActive":"toast__exitActive_1ixi7"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {
@@ -67,7 +67,7 @@ var CSS_TRANSITION_CLASS_NAMES = {
 var DefaultToastPlate = React.forwardRef(function (props, ref) { return (React__default['default'].createElement(coreComponentsToastPlate.ToastPlate, __assign({ ref: ref }, props))); });
 var Toast = React.forwardRef(function (_a, ref) {
     var _b;
-    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
     var plateRef = React.useRef(null);
     var timerId = React.useRef(0);
     var prevOpen = hooks.usePrevious(open);
@@ -108,6 +108,7 @@ var Toast = React.forwardRef(function (_a, ref) {
     }, [open, prevOpen, startTimer, stopTimer]);
     var props = {
         block: block,
+        titleClassName: cn__default['default'](titleClassName, styles.title),
         onClose: onClose,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,

package/toast/cssm/component.d.ts

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

package/toast/cssm/component.js

@@ -66,7 +66,7 @@ var CSS_TRANSITION_CLASS_NAMES = {
 var DefaultToastPlate = React.forwardRef(function (props, ref) { return (React__default['default'].createElement(coreComponentsToastPlate.ToastPlate, __assign({ ref: ref }, props))); });
 var Toast = React.forwardRef(function (_a, ref) {
     var _b;
-    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
     var plateRef = React.useRef(null);
     var timerId = React.useRef(0);
     var prevOpen = hooks.usePrevious(open);
@@ -107,6 +107,7 @@ var Toast = React.forwardRef(function (_a, ref) {
     }, [open, prevOpen, startTimer, stopTimer]);
     var props = {
         block: block,
+        titleClassName: cn__default['default'](titleClassName, styles__default['default'].title),
         onClose: onClose,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,

package/toast/cssm/index.module.css

@@ -17,6 +17,9 @@
     box-shadow: var(--toast-box-shadow);
     word-break: break-all;
 }
+.title {
+    font-weight: 400;
+}
 .popoverInner {
     border: none;
     border-radius: var(--toast-plate-border-radius);

package/toast/esm/component.d.ts

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

package/toast/esm/component.js

@@ -47,7 +47,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"toastPlate":"toast__toastPlate_1a91o","popoverInner":"toast__popoverInner_1a91o","block":"toast__block_1a91o","fixed":"toast__fixed_1a91o","enter":"toast__enter_1a91o","enterActive":"toast__enterActive_1a91o","exit":"toast__exit_1a91o","exitActive":"toast__exitActive_1a91o"};
+var styles = {"toastPlate":"toast__toastPlate_1ixi7","title":"toast__title_1ixi7","popoverInner":"toast__popoverInner_1ixi7","block":"toast__block_1ixi7","fixed":"toast__fixed_1ixi7","enter":"toast__enter_1ixi7","enterActive":"toast__enterActive_1ixi7","exit":"toast__exit_1ixi7","exitActive":"toast__exitActive_1ixi7"};
 require('./index.css');
 
 var CSS_TRANSITION_CLASS_NAMES = {
@@ -59,7 +59,7 @@ var CSS_TRANSITION_CLASS_NAMES = {
 var DefaultToastPlate = forwardRef(function (props, ref) { return (React.createElement(ToastPlate, __assign({ ref: ref }, props))); });
 var Toast = forwardRef(function (_a, ref) {
     var _b;
-    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? stackingOrder.TOAST : _e, _f = _a.ToastPlate, ToastPlate = _f === void 0 ? DefaultToastPlate : _f, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, restProps = __rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth"]);
     var plateRef = useRef(null);
     var timerId = useRef(0);
     var prevOpen = usePrevious(open);
@@ -100,6 +100,7 @@ var Toast = forwardRef(function (_a, ref) {
     }, [open, prevOpen, startTimer, stopTimer]);
     var props = {
         block: block,
+        titleClassName: cn(titleClassName, styles.title),
         onClose: onClose,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,

package/toast/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 16qmr */
+/* hash: 2qked */
 :root {
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
 
@@ -14,37 +14,40 @@
 :root {
     --toast-box-shadow: var(--shadow-m);
 }
-.toast__toastPlate_1a91o {
+.toast__toastPlate_1ixi7 {
     box-shadow: var(--toast-box-shadow);
     word-break: break-all;
 }
-.toast__popoverInner_1a91o {
+.toast__title_1ixi7 {
+    font-weight: 400;
+}
+.toast__popoverInner_1ixi7 {
     border: none;
     border-radius: var(--toast-plate-border-radius);
     box-shadow: var(--toast-box-shadow);
     background-color: transparent;
 }
-.toast__block_1a91o {
+.toast__block_1ixi7 {
     width: 100%;
 }
-.toast__fixed_1a91o {
+.toast__fixed_1ixi7 {
     position: fixed;
     bottom: var(--gap-2xl);
     transition: opacity 150ms ease-in-out, transform 150ms ease-in-out
 }
-.toast__fixed_1a91o.toast__enter_1a91o {
+.toast__fixed_1ixi7.toast__enter_1ixi7 {
         opacity: 0;
         transform: scale(0.98);
     }
-.toast__fixed_1a91o.toast__enterActive_1a91o {
+.toast__fixed_1ixi7.toast__enterActive_1ixi7 {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_1a91o.toast__exit_1a91o {
+.toast__fixed_1ixi7.toast__exit_1ixi7 {
         opacity: 1;
         transform: scale(1);
     }
-.toast__fixed_1a91o.toast__exitActive_1a91o {
+.toast__fixed_1ixi7.toast__exitActive_1ixi7 {
         opacity: 0;
         transform: scale(0.98);
     }