@salutejs/plasma-new-hope 0.248.2-canary.1712.12989534632.0 → 0.249.0-canary.1719.12951148116.0

package/es/components/Toast/variations/_pilled/base.js

@@ -1,4 +1,4 @@
-import './base_199qghc.css';
+import './base_13i59v3.css';
 var base = "bmt2xdv";
 
 export { base };

package/es/components/Toast/variations/_pilled/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sources":["../../../../../src/components/Toast/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Toast.tokens';\n\nexport const base = css`\n    &.${String(classes.toastPilled)} {\n        --plasma_private-left-content-margin: var(${tokens.leftContentMargin});\n        --plasma_private-close-icon-margin: var(${tokens.closeIconMargin});\n\n        border-radius: var(${tokens.pilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAOhB;;;;"}
+{"version":3,"file":"base.js","sources":["../../../../../src/components/Toast/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Toast.tokens';\n\nexport const base = css`\n    &.${String(classes.toastPilled)} {\n        --plasma_private-content-left-margin: var(${tokens.contentLeftMargin});\n        --plasma_private-close-icon-margin: var(${tokens.closeIconMargin});\n\n        border-radius: var(${tokens.pilledBorderRadius});\n    }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAOhB;;;;"}

package/es/components/Toast/variations/_pilled/base_13i59v3.css

@@ -0,0 +1 @@
+.bmt2xdv.toast-pilled{--plasma_private-content-left-margin:var(--plasma-toast-content-left-margin);--plasma_private-close-icon-margin:var(--plasma-toast-close-icon-margin);border-radius:var(--plasma-toast-pilled-border-radius);}

package/es/index.css

@@ -540,14 +540,14 @@
 
 .base_r51pt4_b1d1vtqu__bfcbbf25{padding:var(--plasma-toast-padding);border-radius:var(--plasma-toast-border-radius);max-width:var(--plasma-toast-max-width);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);font-family:var(--plasma-toast-font-family);font-size:var(--plasma-toast-font-size);font-style:var(--plasma-toast-font-style);font-weight:var(--plasma-toast-font-weight);-webkit-letter-spacing:var(--plasma-toast-letter-spacing);-moz-letter-spacing:var(--plasma-toast-letter-spacing);-ms-letter-spacing:var(--plasma-toast-letter-spacing);letter-spacing:var(--plasma-toast-letter-spacing);line-height:var(--plasma-toast-lineheight);}
 
-.base_199qghc_bmt2xdv__2079f9e5.base_199qghc_toastPilled__2079f9e5{--plasma_private-left-content-margin:var(--plasma-toast-left-content-margin);--plasma_private-close-icon-margin:var(--plasma-toast-close-icon-margin);border-radius:var(--plasma-toast-pilled-border-radius);}
-
-.Toast_styles_1nei944_b1xqk743__24d4ce6e{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma-button-width:1rem;}
-.Toast_styles_1nei944_s1ajsqhx__24d4ce6e{position:fixed;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:9901;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:0;top:var(--s1ajsqhx-0);bottom:var(--s1ajsqhx-1);}.Toast_styles_1nei944_s1ajsqhx__24d4ce6e.Toast_styles_1nei944_toastShowed__24d4ce6e{-webkit-animation:0.3s Toast_styles_1nei944_showToastAnimationS1ajsqhx__24d4ce6e ease-out forwards;animation:0.3s Toast_styles_1nei944_showToastAnimationS1ajsqhx__24d4ce6e ease-out forwards;}.Toast_styles_1nei944_s1ajsqhx__24d4ce6e.Toast_styles_1nei944_toastHidden__24d4ce6e{-webkit-animation:0.3s Toast_styles_1nei944_hideToastAnimationS1ajsqhx__24d4ce6e ease-out forwards;animation:0.3s Toast_styles_1nei944_hideToastAnimationS1ajsqhx__24d4ce6e ease-out forwards;}@-webkit-keyframes Toast_styles_1nei944_showToastAnimationS1ajsqhx__24d4ce6e{0%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}80%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{opacity:1;}}@keyframes Toast_styles_1nei944_showToastAnimationS1ajsqhx__24d4ce6e{0%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}80%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{opacity:1;}}@-webkit-keyframes Toast_styles_1nei944_hideToastAnimationS1ajsqhx__24d4ce6e{0%{opacity:1;}20%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}}@keyframes Toast_styles_1nei944_hideToastAnimationS1ajsqhx__24d4ce6e{0%{opacity:1;}20%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}}
-.Toast_styles_1nei944_cb0tpdq__24d4ce6e{height:var(--plasma-toast-close-icon-button-size);--plasma_private-close-icon-margin:var(--plasma-toast-close-icon-margin);margin:var(--plasma_private-close-icon-margin);color:var(--plasma-toast-close-icon-color);}.Toast_styles_1nei944_cb0tpdq__24d4ce6e:hover{color:var(--plasma-toast-close-icon-color-on-hover);}
-.Toast_styles_1nei944_segu2tf__24d4ce6e.Toast_styles_1nei944_segu2tf__24d4ce6e.Toast_styles_1nei944_toastFadeShowed__24d4ce6e{-webkit-animation:0.3s Toast_styles_1nei944_showFadeAnimationSegu2tf__24d4ce6e ease-out forwards;animation:0.3s Toast_styles_1nei944_showFadeAnimationSegu2tf__24d4ce6e ease-out forwards;}.Toast_styles_1nei944_segu2tf__24d4ce6e.Toast_styles_1nei944_segu2tf__24d4ce6e.Toast_styles_1nei944_toastFadeHidden__24d4ce6e{-webkit-animation:0.3s Toast_styles_1nei944_hideFadeAnimationSegu2tf__24d4ce6e ease-out forwards;animation:0.3s Toast_styles_1nei944_hideFadeAnimationSegu2tf__24d4ce6e ease-out forwards;}@-webkit-keyframes Toast_styles_1nei944_showFadeAnimationSegu2tf__24d4ce6e{0%{opacity:0;}100%{opacity:1;}}@keyframes Toast_styles_1nei944_showFadeAnimationSegu2tf__24d4ce6e{0%{opacity:0;}100%{opacity:1;}}@-webkit-keyframes Toast_styles_1nei944_hideFadeAnimationSegu2tf__24d4ce6e{0%{opacity:1;}100%{opacity:0;}}@keyframes Toast_styles_1nei944_hideFadeAnimationSegu2tf__24d4ce6e{0%{opacity:1;}100%{opacity:0;}}
-.Toast_styles_1nei944_s1bt6ppa__24d4ce6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;--plasma_private-left-content-margin:var(--plasma-toast-left-content-margin);margin:var(--plasma_private-left-content-margin);}
-
+.base_13i59v3_bmt2xdv__6505c4ad.base_13i59v3_toastPilled__6505c4ad{--plasma_private-content-left-margin:var(--plasma-toast-content-left-margin);--plasma_private-close-icon-margin:var(--plasma-toast-close-icon-margin);border-radius:var(--plasma-toast-pilled-border-radius);}
+
+.Toast_styles_1kasmzh_b1xqk743__8ac79e0c{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma-button-width:1rem;}
+.Toast_styles_1kasmzh_s1ajsqhx__8ac79e0c{position:fixed;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:9901;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:0;top:var(--s1ajsqhx-0);bottom:var(--s1ajsqhx-1);}.Toast_styles_1kasmzh_s1ajsqhx__8ac79e0c.Toast_styles_1kasmzh_toastShowed__8ac79e0c{-webkit-animation:0.3s Toast_styles_1kasmzh_showToastAnimationS1ajsqhx__8ac79e0c ease-out forwards;animation:0.3s Toast_styles_1kasmzh_showToastAnimationS1ajsqhx__8ac79e0c ease-out forwards;}.Toast_styles_1kasmzh_s1ajsqhx__8ac79e0c.Toast_styles_1kasmzh_toastHidden__8ac79e0c{-webkit-animation:0.3s Toast_styles_1kasmzh_hideToastAnimationS1ajsqhx__8ac79e0c ease-out forwards;animation:0.3s Toast_styles_1kasmzh_hideToastAnimationS1ajsqhx__8ac79e0c ease-out forwards;}@-webkit-keyframes Toast_styles_1kasmzh_showToastAnimationS1ajsqhx__8ac79e0c{0%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}80%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{opacity:1;}}@keyframes Toast_styles_1kasmzh_showToastAnimationS1ajsqhx__8ac79e0c{0%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}80%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{opacity:1;}}@-webkit-keyframes Toast_styles_1kasmzh_hideToastAnimationS1ajsqhx__8ac79e0c{0%{opacity:1;}20%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}}@keyframes Toast_styles_1kasmzh_hideToastAnimationS1ajsqhx__8ac79e0c{0%{opacity:1;}20%{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);opacity:0.7;}100%{-webkit-transform:var(--s1ajsqhx-2);-ms-transform:var(--s1ajsqhx-2);transform:var(--s1ajsqhx-2);opacity:0;}}
+.Toast_styles_1kasmzh_cb0tpdq__8ac79e0c{height:var(--plasma-toast-close-icon-button-size);--plasma_private-close-icon-margin:var(--plasma-toast-close-icon-margin);margin:var(--plasma_private-close-icon-margin);color:var(--plasma-toast-close-icon-color);}.Toast_styles_1kasmzh_cb0tpdq__8ac79e0c:hover{color:var(--plasma-toast-close-icon-color-on-hover);}
+.Toast_styles_1kasmzh_segu2tf__8ac79e0c.Toast_styles_1kasmzh_segu2tf__8ac79e0c.Toast_styles_1kasmzh_toastFadeShowed__8ac79e0c{-webkit-animation:0.3s Toast_styles_1kasmzh_showFadeAnimationSegu2tf__8ac79e0c ease-out forwards;animation:0.3s Toast_styles_1kasmzh_showFadeAnimationSegu2tf__8ac79e0c ease-out forwards;}.Toast_styles_1kasmzh_segu2tf__8ac79e0c.Toast_styles_1kasmzh_segu2tf__8ac79e0c.Toast_styles_1kasmzh_toastFadeHidden__8ac79e0c{-webkit-animation:0.3s Toast_styles_1kasmzh_hideFadeAnimationSegu2tf__8ac79e0c ease-out forwards;animation:0.3s Toast_styles_1kasmzh_hideFadeAnimationSegu2tf__8ac79e0c ease-out forwards;}@-webkit-keyframes Toast_styles_1kasmzh_showFadeAnimationSegu2tf__8ac79e0c{0%{opacity:0;}100%{opacity:1;}}@keyframes Toast_styles_1kasmzh_showFadeAnimationSegu2tf__8ac79e0c{0%{opacity:0;}100%{opacity:1;}}@-webkit-keyframes Toast_styles_1kasmzh_hideFadeAnimationSegu2tf__8ac79e0c{0%{opacity:1;}100%{opacity:0;}}@keyframes Toast_styles_1kasmzh_hideFadeAnimationSegu2tf__8ac79e0c{0%{opacity:1;}100%{opacity:0;}}
+.Toast_styles_1kasmzh_s1bt6ppa__8ac79e0c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;--plasma_private-content-left-margin:var(--plasma-toast-content-left-margin);margin:var(--plasma_private-content-left-margin);color:var(--plasma-toast-content-left-color);}
+.Toast_styles_1kasmzh_s1h44nk1__8ac79e0c{color:var(--s1h44nk1-0);}
 
 .Overlay_styles_cxej3y_s1afr8la__70d4dd9a{position:fixed;inset:0;z-index:var(--s1afr8la-0);--plasma_private-overlay-background-color:var(--s1afr8la-1);--plasma_private-overlay-backdrop-filter:var(--s1afr8la-2);background:var(--s1afr8la-3);-webkit-backdrop-filter:var(--s1afr8la-4);backdrop-filter:var(--s1afr8la-4);cursor:var(--s1afr8la-5);}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.248.2-canary.1712.12989534632.0",
+  "version": "0.249.0-canary.1719.12951148116.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -131,5 +131,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "5f06d6471a17e9e38bf4c4c2e577fa9fc903655f"
+  "gitHead": "948aef0496344b4eb08549a4a05ae39eaca108a4"
 }

package/styled-components/cjs/components/Toast/Toast.js

@@ -15,7 +15,7 @@ var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
 var _Toast2 = /*#__PURE__*/require("./Toast.styles");
-var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick"];
+var _excluded = ["role", "width", "text", "hasClose", "contentLeft", "view", "size", "pilled", "className", "style", "closeIconType", "onCloseButtonClick", "textColor"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -42,6 +42,7 @@ var toastRoot = exports.toastRoot = function toastRoot(Root) {
       style = props.style,
       closeIconType = props.closeIconType,
       onCloseButtonClick = props.onCloseButtonClick,
+      textColor = props.textColor,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? _Toast.classes.toastPilled : undefined;
     var fixedWidth = !Number.isNaN(Number(width)) ? "".concat(width, "%") : width;
@@ -65,7 +66,9 @@ var toastRoot = exports.toastRoot = function toastRoot(Root) {
       role: role,
       "aria-live": ariaLive,
       "aria-atomic": ariaAtomic
-    }, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContent, null, text), hasClose && /*#__PURE__*/_react["default"].createElement(_Toast2.CloseIconWrapper, {
+    }, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Toast2.StyledContent, {
+      textColor: textColor
+    }, text), hasClose && /*#__PURE__*/_react["default"].createElement(_Toast2.CloseIconWrapper, {
       view: "clear",
       size: "s",
       onClick: onCloseButtonClick,

package/styled-components/cjs/components/Toast/Toast.styles.js

@@ -42,7 +42,10 @@ var StyledOverlay = exports.StyledOverlay = /*#__PURE__*/(0, _styledComponents["
 })(["&&.", "{animation:0.3s showFadeAnimation ease-out forwards;}&&.", "{animation:0.3s hideFadeAnimation ease-out forwards;}@keyframes showFadeAnimation{0%{opacity:0;}100%{opacity:1;}}@keyframes hideFadeAnimation{0%{opacity:1;}100%{opacity:0;}}"], /*#__PURE__*/String(_Toast.classes.toastFadeShowed), /*#__PURE__*/String(_Toast.classes.toastFadeHidden));
 var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-3"
-})(["display:flex;--plasma_private-left-content-margin:var(", ");margin:var(--plasma_private-left-content-margin);"], _Toast.tokens.leftContentMargin);
+})(["display:flex;--plasma_private-content-left-margin:var(", ");margin:var(--plasma_private-content-left-margin);color:var(", ");"], _Toast.tokens.contentLeftMargin, _Toast.tokens.contentLeftColor);
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-19l9ekl-4"
-})([""]);
+})(["color:", ";"], function (_ref5) {
+  var textColor = _ref5.textColor;
+  return textColor || 'currentColor';
+});

package/styled-components/cjs/components/Toast/Toast.template-doc.mdx

@@ -104,6 +104,10 @@ export interface ShowToastArgs {
      * Время отображения подсказки. Если не передать значение, подсказка будет отображаться пока ее не закроют.
      */
     timeout?: number;
+    /**
+     * Цвет текста (по умолчанию берётся цвет из view)
+     */
+    textColor?: string;
     /**
      * callback срабатывающий в момент события hideToast
      */
@@ -117,9 +121,11 @@ export interface ShowToastArgs {
 
 ## Пример использования
 
+Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
+
 ```jsx live
 import React from 'react'
-import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
+import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ package }}'
 
 export function App() {
 
@@ -130,12 +136,13 @@ export function App() {
         const onHide = () => {}
         const toastData = {
             text: 'Подсказка вызванная showToast',
+            textColor: 'cyan',
             position: 'bottom',
             role: 'status',
             hasClose: true,
             fade: false,
             size: 'm',
-            view: 'dark',
+            view: 'default',
             timeout: 3000,
             onShow,
             onHide
@@ -145,9 +152,19 @@ export function App() {
     }
 
     return (
-        <ToastProvider>
-            <ToastExample />
-        </ToastProvider>
+        <div style=\{{ display: 'flex', gap: '1rem' }}>
+            <ViewContainer view="onLight">
+                <ToastProvider>
+                    <ToastExample />
+                </ToastProvider>
+            </ViewContainer>
+
+            <ViewContainer view="onDark">
+                <ToastProvider>
+                    <ToastExample />
+                </ToastProvider>
+            </ViewContainer>
+        </div>
     )
 }
 ```

package/styled-components/cjs/components/Toast/Toast.tokens.js

@@ -25,7 +25,8 @@ var tokens = exports.tokens = {
   letterSpacing: '--plasma-toast-letter-spacing',
   lineHeight: '--plasma-toast-lineheight',
   pilledBorderRadius: '--plasma-toast-pilled-border-radius',
-  leftContentMargin: '--plasma-toast-left-content-margin',
+  contentLeftMargin: '--plasma-toast-content-left-margin',
+  contentLeftColor: '--plasma-toast-content-left-color',
   closeIconMargin: '--plasma-toast-close-icon-margin',
   closeIconColor: '--plasma-toast-close-icon-color',
   closeIconColorOnHover: '--plasma-toast-close-icon-color-on-hover',

package/styled-components/cjs/components/Toast/ToastController.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastControllerHoc = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _Toast = /*#__PURE__*/require("./Toast.tokens");
 var _Toast2 = /*#__PURE__*/require("./Toast.styles");
 var _ToastProvider = /*#__PURE__*/require("./ToastProvider");
 var _utils = /*#__PURE__*/require("./utils");
 var _excluded = ["position", "offset", "fade", "text"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -29,7 +30,9 @@ var ToastControllerHoc = exports.ToastControllerHoc = function ToastControllerHo
       rest = _objectWithoutProperties(props, _excluded);
     var _useToastInner = (0, _ToastProvider.useToastInner)(),
       hideToast = _useToastInner.hideToast,
-      isVisible = _useToastInner.isVisible;
+      isVisible = _useToastInner.isVisible,
+      hideTimeout = _useToastInner.hideTimeout,
+      animationRunTimeout = _useToastInner.animationRunTimeout;
     var toastKey = "".concat(text).concat(position);
     var showedClass = isVisible ? _Toast.classes.toastShowed : _Toast.classes.toastHidden;
     var showedFadeClass = isVisible ? _Toast.classes.toastFadeShowed : _Toast.classes.toastFadeHidden;
@@ -37,6 +40,16 @@ var ToastControllerHoc = exports.ToastControllerHoc = function ToastControllerHo
       text: text,
       onCloseButtonClick: hideToast
     }, rest);
+    (0, _react.useEffect)(function () {
+      return function () {
+        if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
+          clearTimeout(hideTimeout.current);
+        }
+        if (animationRunTimeout !== null && animationRunTimeout !== void 0 && animationRunTimeout.current) {
+          clearTimeout(animationRunTimeout.current);
+        }
+      };
+    }, []);
     if (!text) {
       return null;
     }

package/styled-components/cjs/components/Toast/ToastProvider/ToastProvider.js

@@ -126,6 +126,9 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
         size = _getShowToastCallSign.size,
         view = _getShowToastCallSign.view,
         width = _getShowToastCallSign.width,
+        _getShowToastCallSign4 = _getShowToastCallSign.closeIconType,
+        closeIconType = _getShowToastCallSign4 === void 0 ? _utils.DEFAULT_CLOSE_ICON_TYPE : _getShowToastCallSign4,
+        textColor = _getShowToastCallSign.textColor,
         onHide = _getShowToastCallSign.onHide,
         onShow = _getShowToastCallSign.onShow;
       setToastProps({
@@ -139,7 +142,9 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
         pilled: pilled,
         hasClose: hasClose,
         size: size,
-        view: view
+        view: view,
+        closeIconType: closeIconType,
+        textColor: textColor
       });
       setToastInfo({
         timeout: timeout,
@@ -153,16 +158,15 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
     var onHide = toastInfo.onHide,
       timeout = toastInfo.timeout;
     var hideToast = (0, _react.useCallback)(function () {
+      if (!isVisible) {
+        return;
+      }
       if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
         clearTimeout(hideTimeout.current);
         hideTimeout.current = null;
       }
-      if (!isVisible) {
-        return;
-      }
       onHide === null || onHide === void 0 || onHide();
       setIsVisible(false);
-      console.log('!!! set animationRunTimeout');
       animationRunTimeout.current = setTimeout(function () {
         setIsHidden(true);
         setToastProps(initialToastData);
@@ -170,31 +174,16 @@ var ToastProviderHoc = exports.ToastProviderHoc = function ToastProviderHoc(Toas
     }, [onHide, isVisible, isHidden]);
     (0, _react.useEffect)(function () {
       if (timeout === null && animationRunTimeout.current !== null) {
-        console.log('!!! clean animationRunTimeout');
         clearTimeout(animationRunTimeout.current);
         animationRunTimeout.current = null;
       }
-      return function () {
-        console.log('!!! clean:return animationRunTimeout');
-        if (animationRunTimeout !== null && animationRunTimeout !== void 0 && animationRunTimeout.current) {
-          clearTimeout(animationRunTimeout.current);
-        }
-      };
     }, [timeout]);
     (0, _react.useEffect)(function () {
       if (timeout && isVisible) {
-        console.log('!!! set hideTimeout');
         hideTimeout.current = setTimeout(function () {
           hideToast();
         }, timeout);
       }
-      return function () {
-        console.log('!!! clean hideTimeout');
-        if (hideTimeout !== null && hideTimeout !== void 0 && hideTimeout.current) {
-          clearTimeout(hideTimeout.current);
-          hideTimeout.current = null;
-        }
-      };
     }, [isVisible, timeout]);
     return /*#__PURE__*/_react["default"].createElement(ToastContext.Provider, {
       value: {

package/styled-components/cjs/components/Toast/utils.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gradients = exports.TOAST_Z_INDEX = exports.TIMER_DELAY = exports.FADE_Z_INDEX = exports.DEFAULT_POSITION = exports.DEFAULT_FADE = exports.Button = void 0;
+exports.gradients = exports.TOAST_Z_INDEX = exports.TIMER_DELAY = exports.FADE_Z_INDEX = exports.DEFAULT_POSITION = exports.DEFAULT_FADE = exports.DEFAULT_CLOSE_ICON_TYPE = exports.Button = void 0;
 var _Button = /*#__PURE__*/require("../Button");
 var _engines = /*#__PURE__*/require("../../engines");
 var DEFAULT_FADE = exports.DEFAULT_FADE = true;
 var DEFAULT_POSITION = exports.DEFAULT_POSITION = 'bottom';
+var DEFAULT_CLOSE_ICON_TYPE = exports.DEFAULT_CLOSE_ICON_TYPE = 'default';
 var TIMER_DELAY = exports.TIMER_DELAY = 300;
 var FADE_Z_INDEX = exports.FADE_Z_INDEX = '9900';
 var TOAST_Z_INDEX = exports.TOAST_Z_INDEX = '9901';

package/styled-components/cjs/components/Toast/variations/_pilled/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Toast = /*#__PURE__*/require("../../Toast.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-left-content-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(_Toast.classes.toastPilled), _Toast.tokens.leftContentMargin, _Toast.tokens.closeIconMargin, _Toast.tokens.pilledBorderRadius);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{--plasma_private-content-left-margin:var(", ");--plasma_private-close-icon-margin:var(", ");border-radius:var(", ");}"], /*#__PURE__*/String(_Toast.classes.toastPilled), _Toast.tokens.contentLeftMargin, _Toast.tokens.closeIconMargin, _Toast.tokens.pilledBorderRadius);

package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js

@@ -15,14 +15,24 @@ var config = exports.config = {
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;"], _Toast.toastTokens.closeIconButtonSize, _Toast.toastTokens.closeIconSize),

package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.stories.tsx

@@ -4,21 +4,39 @@ import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { toastConfig } from '../../../../components/Toast';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopupProvider } from '../Popup/Popup';
 import { addNotification } from '../../../../../src/components/Notification';
 import { NotificationsProvider } from '../Notification/Notification';
 import { Modal } from '../Modal/Modal';
 
-import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
+const views = ['default', 'positive', 'negative'];
+const closeIconTypes = ['default', 'thin'];
+
 const meta: Meta<typeof ToastController> = {
     title: 'b2c/Overlay/Toast',
     decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        closeIconType: {
+            options: closeIconTypes,
+            control: {
+                type: 'select',
+            },
+        },
+        textColor: {
+            control: 'color',
+        },
+        ...disableProps(['size']),
+    },
 };
 
 export default meta;
@@ -49,7 +67,6 @@ const StyledWrapper = styled.div`
 `;
 
 const ToastContainer = styled.div`
-    position: fixed;
     transform: translateX(50%);
 `;
 
@@ -61,6 +78,7 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
+        textColor: undefined,
         view: 'default',
         closeIconType: 'default',
         size: 'm',
@@ -68,14 +86,6 @@ export const ToastComponent: StoryComponent = {
         enableContentLeft: true,
         pilled: false,
     },
-    argTypes: {
-        closeIconType: {
-            options: ['default', 'thin'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
     render: ({ enableContentLeft, ...args }) => (
         <ToastContainer>
             <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
@@ -94,6 +104,8 @@ const StoryLiveDemo = ({
     size,
     hasClose,
     enableContentLeft,
+    closeIconType,
+    textColor,
 }: StoryProps) => {
     const { showToast, hideToast } = useToast();
     const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
@@ -114,6 +126,8 @@ const StoryLiveDemo = ({
                         view,
                         size,
                         hasClose,
+                        closeIconType,
+                        textColor,
                         onHide: action('onHide'),
                         onShow: action('onShow'),
                     });
@@ -141,7 +155,6 @@ export const LiveDemo: Story = {
                 type: 'inline-radio',
             },
         },
-        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
         ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
     },
     parameters: {
@@ -167,6 +180,8 @@ const StoryComplex = ({
     size,
     hasClose,
     enableContentLeft,
+    closeIconType,
+    textColor,
 }: StoryProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -185,6 +200,8 @@ const StoryComplex = ({
             view,
             size,
             hasClose,
+            closeIconType,
+            textColor,
             onHide: action('onHide'),
             onShow: action('onShow'),
         });

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js

@@ -15,14 +15,24 @@ var config = exports.config = {
   variations: {
     view: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.contentLeftColor, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
+      /**
+       * @deprecated
+       * светлый и темный фон регулировать через `view` компонента `ViewContainer`
+       */
       light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
     },
     size: {
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":calc(100vw - 5rem);", ":0.5625rem 0.75rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.375rem -0.0625rem -0.125rem;", ":-0.0625rem -0.25rem -0.0625rem 0.5rem;"], _Toast.toastTokens.borderRadius, _Toast.toastTokens.maxWidth, _Toast.toastTokens.padding, _Toast.toastTokens.fontFamily, _Toast.toastTokens.fontSize, _Toast.toastTokens.fontStyle, _Toast.toastTokens.fontWeight, _Toast.toastTokens.letterSpacing, _Toast.toastTokens.lineHeight, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.leftContentMargin, _Toast.toastTokens.closeIconMargin)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":-0.0625rem 0.375rem -0.0625rem -0.25rem;", ":-0.0625rem -0.25rem -0.0625rem 0.375rem;"], _Toast.toastTokens.pilledBorderRadius, _Toast.toastTokens.contentLeftMargin, _Toast.toastTokens.closeIconMargin)
     },
     closeIconType: {
       "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;"], _Toast.toastTokens.closeIconButtonSize, _Toast.toastTokens.closeIconSize),

package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.stories.tsx

@@ -4,21 +4,39 @@ import { action } from '@storybook/addon-actions';
 import styled from 'styled-components';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 
-import { toastConfig } from '../../../../components/Toast';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+import { WithTheme } from '../../../_helpers';
 import { Button } from '../Button/Button';
 import { PopupProvider } from '../Popup/Popup';
 import { addNotification } from '../../../../../src/components/Notification';
 import { NotificationsProvider } from '../Notification/Notification';
 import { Modal } from '../Modal/Modal';
 
-import { config } from './Toast.config';
 import { Toast, ToastController, ToastProvider, useToast } from './Toast';
 
+const views = ['default', 'positive', 'negative'];
+const closeIconTypes = ['default', 'thin'];
+
 const meta: Meta<typeof ToastController> = {
     title: 'web/Overlay/Toast',
     decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        closeIconType: {
+            options: closeIconTypes,
+            control: {
+                type: 'select',
+            },
+        },
+        textColor: {
+            control: 'color',
+        },
+        ...disableProps(['size']),
+    },
 };
 
 export default meta;
@@ -49,7 +67,6 @@ const StyledWrapper = styled.div`
 `;
 
 const ToastContainer = styled.div`
-    position: fixed;
     transform: translateX(50%);
 `;
 
@@ -61,6 +78,7 @@ const Container = styled.div`
 export const ToastComponent: StoryComponent = {
     args: {
         text: 'Текст всплывающего уведомления',
+        textColor: undefined,
         view: 'default',
         closeIconType: 'default',
         size: 'm',
@@ -68,14 +86,6 @@ export const ToastComponent: StoryComponent = {
         enableContentLeft: true,
         pilled: false,
     },
-    argTypes: {
-        closeIconType: {
-            options: ['default', 'thin'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
     render: ({ enableContentLeft, ...args }) => (
         <ToastContainer>
             <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
@@ -94,6 +104,8 @@ const StoryLiveDemo = ({
     size,
     hasClose,
     enableContentLeft,
+    closeIconType,
+    textColor,
 }: StoryProps) => {
     const { showToast, hideToast } = useToast();
     const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
@@ -114,6 +126,8 @@ const StoryLiveDemo = ({
                         view,
                         size,
                         hasClose,
+                        closeIconType,
+                        textColor,
                         onHide: action('onHide'),
                         onShow: action('onShow'),
                     });
@@ -141,7 +155,6 @@ export const LiveDemo: Story = {
                 type: 'inline-radio',
             },
         },
-        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
         ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
     },
     parameters: {
@@ -167,6 +180,8 @@ const StoryComplex = ({
     size,
     hasClose,
     enableContentLeft,
+    closeIconType,
+    textColor,
 }: StoryProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -185,6 +200,8 @@ const StoryComplex = ({
             view,
             size,
             hasClose,
+            closeIconType,
+            textColor,
             onHide: action('onHide'),
             onShow: action('onShow'),
         });