@salutejs/plasma-new-hope 0.176.1-canary.1510.11572230988.0 → 0.176.1-canary.1517.11571952534.0

package/styled-components/cjs/components/Steps/ui/StepItem/StepItem.styles.js

@@ -8,6 +8,7 @@ var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/requir
 var _Steps = /*#__PURE__*/require("../../Steps.tokens");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Spinner = /*#__PURE__*/require("../../../Spinner");
+var _mixins = /*#__PURE__*/require("../../../../mixins");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
 var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
@@ -25,16 +26,21 @@ var StepItemContent = exports.StepItemContent = /*#__PURE__*/_styledComponents["
 })(["padding-top:var(", ");padding-right:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");word-break:break-word;color:var(", ");"], _Steps.tokens.contentPaddingTop, _Steps.tokens.contentSidePadding, _Steps.tokens.contentFontFamily, _Steps.tokens.contentFontSize, _Steps.tokens.contentFontStyle, _Steps.tokens.contentFontWeight, _Steps.tokens.contentLetterSpacing, _Steps.tokens.contentLineHeight, _Steps.tokens.contentColor);
 var BulletIndicatorWrapper = exports.BulletIndicatorWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-3"
-})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
-var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["display:flex;align-items:center;&:not(.", "){flex:0;&.", "{width:100%;min-height:var(", ");}&:not(.", "){width:100%;min-height:var(", ");}&.", "{padding-right:var(", ");}}&.", "{flex:0;justify-content:center;&.", "{width:var(", ");min-height:var(", ");}&:not(.", "){width:var(", ");min-height:var(", ");}}&.", "{flex-direction:column;align-items:center;justify-content:center;min-height:100%;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}}&.", "{justify-content:center;}"], _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.tokens.verticalContentPaddingLeft, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.classes.verticalOrientation, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.centered);
+var BulletIndicator = exports.BulletIndicator = /*#__PURE__*/_styledComponents["default"].button.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-4"
-})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&:before,&:after{background:var(", ");}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground);
+})(["display:flex;align-items:center;justify-content:center;width:var(", ");height:var(", ");border-radius:50%;box-sizing:border-box;position:relative;outline:none;padding:0;margin:0;border:none;color:var(", ");background-color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", " &.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");background:var(", ");}&.", "{color:var(", ");background:var(", ");&.", "{&:before,&:after{background:var(", ");}}}"], _Steps.tokens.indicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.completedIndicatorColor, _Steps.tokens.completedIndicatorBackground, _Steps.tokens.indicatorFontFamily, _Steps.tokens.indicatorFontSize, _Steps.tokens.indicatorFontStyle, _Steps.tokens.indicatorFontWeight, _Steps.tokens.indicatorLetterSpacing, _Steps.tokens.indicatorLineHeight, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.1875rem',
+  outlineSize: '0.0625rem',
+  outlineRadius: '50%',
+  outlineColor: /*#__PURE__*/"var(".concat(_Steps.tokens.focusColor, ")")
+}), _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorFontFamily, _Steps.tokens.activeIndicatorFontSize, _Steps.tokens.activeIndicatorFontStyle, _Steps.tokens.activeIndicatorFontWeight, _Steps.tokens.activeIndicatorLetterSpacing, _Steps.tokens.activeIndicatorLineHeight, _Steps.tokens.activeIndicatorColor, _Steps.tokens.activeIndicatorBackground, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.tokens.inactiveIndicatorBackground);
 var Bullet = exports.Bullet = /*#__PURE__*/(0, _styledComponents["default"])(BulletIndicator).withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-5"
-})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background-color:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
+})(["width:var(", ");height:var(", ");&.", "{width:var(", ");height:var(", ");border:var(", ") var(", ");background:var(", ");}"], _Steps.tokens.bulletSize, _Steps.tokens.bulletSize, _Steps.classes.active, _Steps.tokens.activeBulletSize, _Steps.tokens.activeBulletSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorBorder, _Steps.tokens.activeIndicatorBackground);
 var StepItemDivider = exports.StepItemDivider = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-6"
-})(["width:100%;height:var(", ");flex:1;background-color:var(", ");&.", "{background-color:var(", ");}&.", "{background-color:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
+})(["width:100%;height:var(", ");flex:1;background:var(", ");&.", "{background:var(", ");}&.", "{background:transparent;}&.", "{width:var(", ");height:100%;}&.", "{height:", ";min-height:", ";max-height:", ";&.", "{height:auto;max-height:none;}}"], _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.transparentDivider, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.classes.indentDivider, function (_ref2) {
   var indentToken = _ref2.indentToken;
   return indentToken || '';
 }, function (_ref3) {
@@ -49,4 +55,4 @@ var StepItemContentWrapper = exports.StepItemContentWrapper = /*#__PURE__*/_styl
 })(["&.", "{", "{padding-top:var(", ");padding-right:0;}", "{padding-top:var(", ");padding-bottom:var(", ");padding-right:0;}}"], _Steps.classes.verticalOrientation, StepItemTitle, _Steps.tokens.contentVerticalPadding, StepItemContent, _Steps.tokens.contentVerticalPadding, _Steps.tokens.contentVerticalPadding);
 var StepItemStyled = exports.StepItemStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-bjma6z-8"
-})(["display:flex;flex-direction:column;align-items:flex-start;flex:1;&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{", "{color:var(", ");}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{flex:0;}&.", "{opacity:var(", ");}"], _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.simple, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);
+})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;flex:1;color:var(", ");&.", "{flex-direction:row;align-items:stretch;", "{width:var(", ");height:100%;}}&.", "{", "{color:var(", ");}}&.", "{color:var(", ");", "{color:var(", ");}}&.", "{flex:0;align-items:center;justify-content:center;&.", "{min-width:var(", ");}&:not(.", "){min-width:var(", ");}&.", ",&:not(.", "){&:before,&:after{position:absolute;top:0;bottom:0;left:0;content:'';display:flex;align-self:center;width:calc((var(", ") - var(", ")) / 2);height:var(", ");background:var(", ");}&:after{left:auto;right:0;}&.", "{&:before,&:after{width:var(", ");height:calc((var(", ") - var(", ")) / 2);margin:0 auto;align-self:auto;}&:before{top:0;left:0;right:0;}&:after{top:auto;left:0;right:0;bottom:0;margin:0 auto;}}&.isFirst{&:before{display:none;}}&.isLast{&:after{display:none;}}}&.", "{&:after,&:before{background:var(", ");}}&.isPrevInactive{&:before{background:var(", ");}}&.isNextInactive{&:after{background:var(", ");}}}&:not(.", "):not(.", "){&.isNextActive{", "{width:calc(100% - (var(", ") - var(", ")) / 2);}}&.", "{", "{margin-left:calc((var(", ") - var(", ")) / -2);width:calc(100% + (var(", ") - var(", ")) / 2);}}}&.", "{&:not(.", "){", "{cursor:pointer;color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}&.", "{", "{color:var(", ");}", ",", "{color:var(", ");background:var(", ");}}", "{cursor:pointer;}}&.", "{align-items:center;", "{display:flex;flex-direction:column;align-items:center;padding-left:calc(var(", ") / 2);padding-right:calc(var(", ") / 2);", "{width:100%;}", ",", "{padding-right:0;text-align:center;}}}&.", "{opacity:var(", ");}"], _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, StepItemDivider, _Steps.tokens.dividerThickness, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColor, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorColor, StepItemTitle, _Steps.tokens.inactiveTitleColor, _Steps.classes.simple, _Steps.classes.hasIndicator, _Steps.tokens.activeIndicatorSize, _Steps.classes.hasIndicator, _Steps.tokens.activeBulletSize, _Steps.classes.inactive, _Steps.classes.active, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorColor, _Steps.classes.verticalOrientation, _Steps.tokens.dividerThickness, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.inactive, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.tokens.inactiveIndicatorBackground, _Steps.classes.simple, _Steps.classes.verticalOrientation, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.active, BulletIndicatorWrapper, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.tokens.activeIndicatorSize, _Steps.tokens.indicatorSize, _Steps.classes.hovered, _Steps.classes.active, StepItemTitle, _Steps.tokens.activeTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.completedIndicatorColorHover, _Steps.tokens.completedIndicatorBackgroundHover, _Steps.classes.inactive, StepItemTitle, _Steps.tokens.inactiveTitleColorHover, BulletIndicator, Bullet, _Steps.tokens.inactiveIndicatorColorHover, _Steps.tokens.inactiveIndicatorBackgroundHover, BulletIndicatorWrapper, _Steps.classes.centered, StepItemContentWrapper, _Steps.tokens.contentSidePadding, _Steps.tokens.contentSidePadding, StepItemTitle, StepItemTitle, StepItemContent, _Steps.classes.disabled, _Steps.tokens.disabledOpacity);

package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.js

@@ -16,16 +16,14 @@ var _engines = /*#__PURE__*/require("../../../../engines");
 var _Notification2 = /*#__PURE__*/require("./Notification.config");
 var _Modal = /*#__PURE__*/require("../../../../components/Modal");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.notificationConfig, _Notification2.config);
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.noticationConfig, _Notification2.config);
 var Notification = exports.Notification = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
-    placement = _ref.placement;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
   return /*#__PURE__*/_react["default"].createElement(_Notification.NotificationsProvider, {
     config: mergedConfig,
-    frame: frame,
-    placement: placement
+    frame: frame
   }, children);
 };

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

@@ -5,7 +5,6 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 import {
-    NotificationPlacement,
     NotificationIconPlacement,
     NotificationLayout,
     addNotification,
@@ -21,7 +20,6 @@ const titles = ['Выполнено', 'Внимание', 'Ошибка'];
 const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
 const size = ['xs', 'xxs'];
 const iconPlacement = ['top', 'left'];
-const notificationsPlacements = ['bottom-right', 'bottom-left'];
 
 const longText = `JavaScript frameworks are an essential part of modern front-end web development,
 providing developers with proven tools for building scalable, interactive web applications.
@@ -51,7 +49,6 @@ interface StoryDefaultProps {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
 }
 
 const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
@@ -114,10 +111,9 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
@@ -125,7 +121,7 @@ const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
     }, [count, rest]);
 
     return (
-        <NotificationsProvider placement={placement}>
+        <NotificationsProvider>
             <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
@@ -139,28 +135,20 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
                 type: 'select',
             },
         },
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         timeout: 3000,
         role: 'alert',
         layout: 'vertical',
-        placement: 'bottom-right',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };
 
 type StoryWithModalProps = ComponentProps<typeof Notification> & {
     timeout: number;
-    placement?: NotificationPlacement;
 };
 
-const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
+const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -169,7 +157,7 @@ const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
     }, [count]);
 
     return (
-        <NotificationsProvider placement={placement}>
+        <NotificationsProvider>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -184,15 +172,6 @@ const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
 export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
-        placement: 'bottom-right',
-    },
-    argTypes: {
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
     },
     render: (args) => <StoryWithModal {...args} />,
 };

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

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":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);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

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

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.js

@@ -16,16 +16,14 @@ var _engines = /*#__PURE__*/require("../../../../engines");
 var _Notification2 = /*#__PURE__*/require("./Notification.config");
 var _Modal = /*#__PURE__*/require("../../../../components/Modal");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.notificationConfig, _Notification2.config);
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.noticationConfig, _Notification2.config);
 var Notification = exports.Notification = /*#__PURE__*/(0, _engines.component)(mergedConfig);
 var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
-    placement = _ref.placement;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
   return /*#__PURE__*/_react["default"].createElement(_Notification.NotificationsProvider, {
     config: mergedConfig,
-    frame: frame,
-    placement: placement
+    frame: frame
   }, children);
 };

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

@@ -5,7 +5,6 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 import {
-    NotificationPlacement,
     NotificationIconPlacement,
     NotificationLayout,
     addNotification,
@@ -21,7 +20,6 @@ const titles = ['Выполнено', 'Внимание', 'Ошибка'];
 const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
 const size = ['xs', 'xxs'];
 const iconPlacement = ['top', 'left'];
-const notificationsPlacements = ['bottom-right', 'bottom-left'];
 
 const longText = `JavaScript frameworks are an essential part of modern front-end web development,
 providing developers with proven tools for building scalable, interactive web applications.
@@ -51,7 +49,6 @@ interface StoryDefaultProps {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
 }
 
 const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
@@ -114,10 +111,9 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
-    placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
@@ -125,7 +121,7 @@ const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
     }, [count, rest]);
 
     return (
-        <NotificationsProvider placement={placement}>
+        <NotificationsProvider>
             <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
@@ -139,28 +135,20 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
                 type: 'select',
             },
         },
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
     },
     args: {
         timeout: 3000,
         role: 'alert',
         layout: 'vertical',
-        placement: 'bottom-right',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };
 
 type StoryWithModalProps = ComponentProps<typeof Notification> & {
     timeout: number;
-    placement?: NotificationPlacement;
 };
 
-const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
+const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -169,7 +157,7 @@ const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
     }, [count]);
 
     return (
-        <NotificationsProvider placement={placement}>
+        <NotificationsProvider>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -184,15 +172,6 @@ const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
 export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
-        placement: 'bottom-right',
-    },
-    argTypes: {
-        placement: {
-            options: notificationsPlacements,
-            control: {
-                type: 'select',
-            },
-        },
     },
     render: (args) => <StoryWithModal {...args} />,
 };

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

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":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);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

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

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/es/components/Notification/Notification.js

@@ -86,7 +86,7 @@ export var notificationRoot = function notificationRoot(Root) {
     })))));
   });
 };
-export var notificationConfig = {
+export var noticationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

package/styled-components/es/components/Notification/Notification.styles.js

@@ -58,10 +58,7 @@ export var StyledContent = /*#__PURE__*/styled.div.withConfig({
 })(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:var(", ");"], tokens.contentFontFamily, tokens.contentFontSize, tokens.contentFontStyle, tokens.contentFontWeight, tokens.contentFontLetterSpacing, tokens.contentFontLineHeight, /*#__PURE__*/String(applyHyphens), tokens.contentColor);
 export var StyledItemWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-8"
-})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], classes.notificationItemOpened, classes.notificationLeftToRightAnimation, classes.notificationItemHidden, classes.notificationLeftToRightAnimation);
+})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;}&&.", "{animation:0.4s hideAnimation ease-out;}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], classes.notificationItemOpened, classes.notificationItemHidden);
 export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1iufy9r-9"
-})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref8) {
-  var placement = _ref8.placement;
-  return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
-});
+})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:flex-end;"]);

package/styled-components/es/components/Notification/Notification.template-doc.mdx

@@ -10,15 +10,14 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения.
+Компонент `Notification` может использоваться для создания собственных систем оповещения. 
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`.
+Текстовая часть оповещения состоит из `title` и `children`. 
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
 ### Провайдер контекста
-Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна.
-В качестве свойств можно указать контейнер для оповещений через `frame` и расположение в контейнере через свойство `placement`, как `bottom-right` _(по умолчанию)_ или `bottom-left`.
+Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
 
 ```tsx title="index.ts"
 import ReactDOM from 'react-dom';
@@ -35,32 +34,24 @@ ReactDOM.render(
 ```
 
 ### Вызов уведомления
-После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`, который приведет к отображению оповещения.
-Функция принимает значения свойств компонента `Notification`, включая необязательное поле `id`. И возвращает сгенерированный или переданный `id`, по которому можно закрыть оповещение через вызов `closeNotification`.
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`:
 
 ```tsx live
 import React from 'react';
-import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
 
 export function App() {
-    const handleShow = React.useCallback(() => {
+    const handleClick = React.useCallback(() => {
         addNotification({
-            id: 'incoming-call',
             title: 'Входящий вызов',
             children: 'Принять?',
         }, 1000);
     }, []);
 
-    const handleHide = React.useCallback(() => {
-        closeNotification('incoming-call');
-    }, []);
-
     return (
         <NotificationsProvider>
-            <ButtonGroup>
-                <Button text="Показать оповещение" onClick={handleShow} />
-                <Button text="Скрыть оповещение" onClick={handleHide} />
-            </ButtonGroup>
+            <Button text="Показать оповещение" onClick={handleClick} />
         </NotificationsProvider>
     );
 }

package/styled-components/es/components/Notification/Notification.tokens.js

@@ -13,8 +13,7 @@ export var classes = {
   withoutIcon: 'notification-without-icon',
   withoutCloseIcon: 'notification-without-close-icon',
   notificationItemOpened: 'notification-item-opened',
-  notificationItemHidden: 'notification-item-hidden',
-  notificationLeftToRightAnimation: 'notification-left-to-right-animation'
+  notificationItemHidden: 'notification-item-hidden'
 };
 export var tokens = {
   background: '--plasma-notification-backgorund',

package/styled-components/es/components/Notification/NotificationsPortal.js

@@ -24,9 +24,7 @@ var StyledPopup = /*#__PURE__*/styled(Popup).withConfig({
  */
 export var NotificationsPortal = function NotificationsPortal(_ref) {
   var config = _ref.config,
-    frame = _ref.frame,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement;
+    frame = _ref.frame;
   var _useStoreon = useStoreon('notifications'),
     notifications = _useStoreon.notifications;
   var Notification = useMemo(function () {
@@ -35,17 +33,15 @@ export var NotificationsPortal = function NotificationsPortal(_ref) {
   return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
     opened: true,
     frame: frame,
-    placement: placement,
+    placement: "bottom-right",
     zIndex: "9100"
-  }, /*#__PURE__*/React.createElement(StyledRoot, {
-    placement: placement
-  }, notifications.map(function (_ref2) {
+  }, /*#__PURE__*/React.createElement(StyledRoot, null, notifications.map(function (_ref2) {
     var id = _ref2.id,
       isHidden = _ref2.isHidden,
       rest = _objectWithoutProperties(_ref2, _excluded);
     return /*#__PURE__*/React.createElement(StyledItemWrapper, {
       key: id,
-      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened, placement === 'bottom-left' && classes.notificationLeftToRightAnimation),
+      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened),
       isHidden: isHidden || false
     }, /*#__PURE__*/React.createElement(Notification, _extends({
       key: id,

package/styled-components/es/components/Notification/NotificationsProvider.js

@@ -5,13 +5,11 @@ import { NotificationsPortal } from './NotificationsPortal';
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     config = _ref.config,
-    frame = _ref.frame,
-    placement = _ref.placement;
+    frame = _ref.frame;
   return /*#__PURE__*/React.createElement(StoreContext.Provider, {
     value: NotificationsStore
   }, children, /*#__PURE__*/React.createElement(NotificationsPortal, {
     frame: frame,
-    placement: placement,
     config: config
   }));
 };

package/styled-components/es/components/Notification/index.js

@@ -1,4 +1,4 @@
 export { NotificationsProvider } from './NotificationsProvider';
-export { notificationRoot, notificationConfig } from './Notification';
+export { notificationRoot, noticationConfig } from './Notification';
 export { addNotification, closeNotification } from './NotificationsStore';
 export { classes as notificationClasses, tokens as notificationTokens } from './Notification.tokens';

package/styled-components/es/components/Select/Select.tokens.js

@@ -93,8 +93,7 @@ export var tokens = {
   spinnerSize: '--plasma-select-spinner-size',
   spinnerSizeTight: '--plasma-select-spinner-size-tight',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
-  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
-  contentLeftColor: '--plasma-select-content-left-color'
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 export var constants = {
   focusColor: '--surface-accent',

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -63,7 +63,7 @@ export var InnerLabel = /*#__PURE__*/styled.label.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");text-align:left;"], constants.textfieldInnerLabelColor, constants.fontFamily, constants.fontSize, constants.fontStyle, constants.fontWeight, constants.fontLetterSpacing, constants.fontLineHeight);
 export var ContentLeftWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-10"
-})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;color:var(", ");"], tokens.contentLeftColor);
+})(["flex:none;margin-left:-0.125rem;margin-right:0.375rem;line-height:0;"]);
 export var Value = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-11"
 })(["", ""], /*#__PURE__*/applyEllipsis());

package/styled-components/es/components/Steps/Steps.tokens.js

@@ -56,6 +56,7 @@ export var tokens = {
   inactiveTitleColor: '--plasma-step-item-inactive-title-color',
   inactiveTitleColorHover: '--plasma-step-item-inactive-title-color-hover',
   contentColor: '--plasma-step-item-content-color',
+  focusColor: '--plasma-step-item-focus-color',
   activeIndicatorBorder: '--plasma-step-item-active-indicator-border',
   activeIndicatorBorderHover: '--plasma-step-item-active-indicator-border-hover',
   activeIndicatorColor: '--plasma-step-item-active-indicator-color',