@salutejs/plasma-new-hope 0.176.0-dev.0 → 0.176.1-canary.1510.11572230988.0

package/emotion/es/examples/plasma_b2c/components/Notification/Notification.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { noticationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
+import { notificationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Notification.config';
 export { modalClasses } from '../../../../components/Modal';
-var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(notificationConfig, config);
 export var Notification = /*#__PURE__*/component(mergedConfig);
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
+    placement = _ref.placement;
   return /*#__PURE__*/React.createElement(Provider, {
     config: mergedConfig,
-    frame: frame
+    frame: frame,
+    placement: placement
   }, children);
 };

package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx

@@ -5,6 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 import {
+    NotificationPlacement,
     NotificationIconPlacement,
     NotificationLayout,
     addNotification,
@@ -20,6 +21,7 @@ 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.
@@ -49,6 +51,7 @@ interface StoryDefaultProps {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 }
 
 const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
@@ -111,9 +114,10 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
@@ -121,7 +125,7 @@ const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     }, [count, rest]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
@@ -135,20 +139,28 @@ 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 }: StoryWithModalProps) => {
+const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -157,7 +169,7 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     }, [count]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -172,6 +184,15 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
 export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
+        placement: 'bottom-right',
+    },
+    argTypes: {
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
     },
     render: (args) => <StoryWithModal {...args} />,
 };

package/emotion/es/examples/plasma_web/components/Notification/Notification.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import { noticationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
+import { notificationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Notification.config';
 export { modalClasses } from '../../../../components/Modal';
-var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(notificationConfig, config);
 export var Notification = /*#__PURE__*/component(mergedConfig);
 export var NotificationsProvider = function NotificationsProvider(_ref) {
   var children = _ref.children,
     _ref$frame = _ref.frame,
-    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame,
+    placement = _ref.placement;
   return /*#__PURE__*/React.createElement(Provider, {
     config: mergedConfig,
-    frame: frame
+    frame: frame,
+    placement: placement
   }, children);
 };

package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx

@@ -5,6 +5,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { Button } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 import {
+    NotificationPlacement,
     NotificationIconPlacement,
     NotificationLayout,
     addNotification,
@@ -20,6 +21,7 @@ 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.
@@ -49,6 +51,7 @@ interface StoryDefaultProps {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 }
 
 const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
@@ -111,9 +114,10 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
     iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
@@ -121,7 +125,7 @@ const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
     }, [count, rest]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <Button text="Добавить уведомление" onClick={handleClick} />
         </NotificationsProvider>
     );
@@ -135,20 +139,28 @@ 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 }: StoryWithModalProps) => {
+const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
     const count = useRef(0);
     const handleClick = useCallback(() => {
@@ -157,7 +169,7 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
     }, [count]);
 
     return (
-        <NotificationsProvider>
+        <NotificationsProvider placement={placement}>
             <PopupProvider>
                 <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
                 <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
@@ -172,6 +184,15 @@ const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
 export const WithModal: StoryObj<StoryLiveDemoProps> = {
     args: {
         timeout: 3500,
+        placement: 'bottom-right',
+    },
+    argTypes: {
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
     },
     render: (args) => <StoryWithModal {...args} />,
 };

package/es/components/Notification/Notification.css

@@ -30,14 +30,14 @@
 .Button_styles_1sopr3d_s1rjh7ra__8219590b{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:var(--plasma-button-right-content-margin);-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);}
 .Button_styles_1sopr3d_b9ga1dj__8219590b{position:relative;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;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_1sopr3d_b9ga1dj__8219590b{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_1sopr3d_b9ga1dj__8219590b.Button_styles_1sopr3d_b9ga1dj__8219590b.Button_styles_1sopr3d_buttonSquare__8219590b{width:var(--plasma-button-height);padding:0;}
 
-.Notification_styles_7h8hp0_sb12p__2b784e15{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
-.Notification_styles_7h8hp0_crvd7hm__2b784e15{position:absolute;width:1.5rem;height:1.5rem;color:var(--plasma-notification-close-icon-color);}.Notification_styles_7h8hp0_crvd7hm__2b784e15:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_7h8hp0_crvd7hm__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{position:relative;}
-.Notification_styles_7h8hp0_wg1ga5v__2b784e15{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);}.Notification_styles_7h8hp0_wg1ga5v__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-notification-horizontal-layout-gap);}
-.Notification_styles_7h8hp0_b1amsn8a__2b784e15{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);}.Notification_styles_7h8hp0_b1amsn8a__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{margin-top:unset;margin-left:unset;}
-.Notification_styles_7h8hp0_i14raqr9__2b784e15{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_7h8hp0_i14raqr9__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
-.Notification_styles_7h8hp0_c157peez__2b784e15{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_7h8hp0_c157peez__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{padding:unset;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
-.Notification_styles_7h8hp0_t1vmb0f2__2b784e15{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_7h8hp0_t1vmb0f2__2b784e15.Notification_styles_7h8hp0_notificationLayoutHorizontal__2b784e15{padding:unset;}
-.Notification_styles_7h8hp0_s1k4e58v__2b784e15{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
-.Notification_styles_7h8hp0_s92kmpm__2b784e15{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
-.Notification_styles_7h8hp0_s18m0x6v__2b784e15{margin-top:1rem;opacity:1;}.Notification_styles_7h8hp0_s18m0x6v__2b784e15.Notification_styles_7h8hp0_s18m0x6v__2b784e15.Notification_styles_7h8hp0_notificationItemOpened__2b784e15{-webkit-animation:0.4s Notification_styles_7h8hp0_showAnimationS18m0x6v__2b784e15 ease-out;animation:0.4s Notification_styles_7h8hp0_showAnimationS18m0x6v__2b784e15 ease-out;}.Notification_styles_7h8hp0_s18m0x6v__2b784e15.Notification_styles_7h8hp0_s18m0x6v__2b784e15.Notification_styles_7h8hp0_notificationItemHidden__2b784e15{-webkit-animation:0.4s Notification_styles_7h8hp0_hideAnimationS18m0x6v__2b784e15 ease-out;animation:0.4s Notification_styles_7h8hp0_hideAnimationS18m0x6v__2b784e15 ease-out;}@-webkit-keyframes Notification_styles_7h8hp0_showAnimationS18m0x6v__2b784e15{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_7h8hp0_showAnimationS18m0x6v__2b784e15{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_7h8hp0_hideAnimationS18m0x6v__2b784e15{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_7h8hp0_hideAnimationS18m0x6v__2b784e15{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
-.Notification_styles_7h8hp0_sfe5ql2__2b784e15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}
+.Notification_styles_e6274r_sb12p__56467d3e{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
+.Notification_styles_e6274r_crvd7hm__56467d3e{position:absolute;width:1.5rem;height:1.5rem;color:var(--plasma-notification-close-icon-color);}.Notification_styles_e6274r_crvd7hm__56467d3e:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_e6274r_crvd7hm__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{position:relative;}
+.Notification_styles_e6274r_wg1ga5v__56467d3e{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);}.Notification_styles_e6274r_wg1ga5v__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-notification-horizontal-layout-gap);}
+.Notification_styles_e6274r_b1amsn8a__56467d3e{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);}.Notification_styles_e6274r_b1amsn8a__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{margin-top:unset;margin-left:unset;}
+.Notification_styles_e6274r_i14raqr9__56467d3e{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_e6274r_i14raqr9__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
+.Notification_styles_e6274r_c157peez__56467d3e{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_e6274r_c157peez__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{padding:unset;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
+.Notification_styles_e6274r_t1vmb0f2__56467d3e{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_e6274r_t1vmb0f2__56467d3e.Notification_styles_e6274r_notificationLayoutHorizontal__56467d3e{padding:unset;}
+.Notification_styles_e6274r_s1k4e58v__56467d3e{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
+.Notification_styles_e6274r_s92kmpm__56467d3e{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
+.Notification_styles_e6274r_s18m0x6v__56467d3e{margin-top:1rem;opacity:1;}.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_notificationItemOpened__56467d3e{-webkit-animation:0.4s Notification_styles_e6274r_showAnimationS18m0x6v__56467d3e ease-out;animation:0.4s Notification_styles_e6274r_showAnimationS18m0x6v__56467d3e ease-out;}.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_notificationItemOpened__56467d3e.Notification_styles_e6274r_notificationLeftToRightAnimation__56467d3e{-webkit-animation:0.4s Notification_styles_e6274r_showLeftToRightAnimationS18m0x6v__56467d3e ease-out;animation:0.4s Notification_styles_e6274r_showLeftToRightAnimationS18m0x6v__56467d3e ease-out;}.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_notificationItemHidden__56467d3e{-webkit-animation:0.4s Notification_styles_e6274r_hideAnimationS18m0x6v__56467d3e ease-out;animation:0.4s Notification_styles_e6274r_hideAnimationS18m0x6v__56467d3e ease-out;}.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_s18m0x6v__56467d3e.Notification_styles_e6274r_notificationItemHidden__56467d3e.Notification_styles_e6274r_notificationLeftToRightAnimation__56467d3e{-webkit-animation:0.4s Notification_styles_e6274r_hideLeftToRightAnimationS18m0x6v__56467d3e ease-out;animation:0.4s Notification_styles_e6274r_hideLeftToRightAnimationS18m0x6v__56467d3e ease-out;}@-webkit-keyframes Notification_styles_e6274r_showLeftToRightAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_e6274r_showLeftToRightAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_e6274r_hideLeftToRightAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes Notification_styles_e6274r_hideLeftToRightAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes Notification_styles_e6274r_showAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_e6274r_showAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_e6274r_hideAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_e6274r_hideAnimationS18m0x6v__56467d3e{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
+.Notification_styles_e6274r_sfe5ql2__56467d3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}

package/es/components/Notification/Notification.js

@@ -85,7 +85,7 @@ var notificationRoot = function notificationRoot(Root) {
     })))));
   });
 };
-var noticationConfig = {
+var notificationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,
@@ -108,5 +108,5 @@ var noticationConfig = {
   }
 };
 
-export { noticationConfig, notificationRoot };
+export { notificationConfig, notificationRoot };
 //# sourceMappingURL=Notification.js.map

package/es/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCross } from '../_Icon/Icons/IconCross';\n\nimport { classes } from './Notification.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as layoutCSS } from './variations/_layout/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { NotificationLayout, NotificationProps, layouts } from './Notification.types';\nimport {\n    ButtonsWrapper,\n    CloseIconWrapper,\n    ContentBox,\n    IconWrapper,\n    StyledContent,\n    StyledNotification,\n    StyledTitle,\n    TextBox,\n    Wrapper,\n} from './Notification.styles';\nimport { getLayoutClass } from './utils';\n\n/**\n * Компонент для небольших уведомлений пользователя\n */\nexport const notificationRoot = (Root: RootProps<HTMLDivElement, NotificationProps>) =>\n    forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n        const {\n            role = 'status',\n            title,\n            children: content,\n            actions,\n            view,\n            size,\n            iconPlacement,\n            showCloseIcon = true,\n            layout = layouts.vertical as NotificationLayout,\n            icon,\n            onCloseButtonClick,\n            ...rest\n        } = props;\n\n        let ariaLive: 'assertive' | 'polite' = 'polite';\n        let ariaAtomic = false;\n\n        if (role === 'alert') {\n            ariaLive = 'assertive';\n        } else if (role === 'status') {\n            ariaAtomic = true;\n        }\n\n        const isOneLine = !content || !title;\n        const oneLineClass = isOneLine ? classes.oneLine : undefined;\n        const withoutIconClass = icon ? undefined : classes.withoutIcon;\n        const withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;\n\n        const IconPlacementInternal = useMemo(() => (icon ? iconPlacement : undefined), [icon, iconPlacement]);\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                layout={layout}\n                ref={ref}\n                role={role}\n                aria-live={ariaLive}\n                aria-atomic={ariaAtomic}\n                {...rest}\n            >\n                <Wrapper className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)}>\n                    <ContentBox\n                        iconPlacement={IconPlacementInternal}\n                        className={cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)}\n                    >\n                        {icon && (\n                            <IconWrapper\n                                iconPlacement={IconPlacementInternal}\n                                className={cx(classes.icon, getLayoutClass(layout))}\n                            >\n                                {icon}\n                            </IconWrapper>\n                        )}\n                        <TextBox\n                            iconPlacement={IconPlacementInternal}\n                            showCloseIcon={showCloseIcon}\n                            className={cx(classes.textbox, getLayoutClass(layout))}\n                        >\n                            {title && <StyledTitle className={classes.title}>{title}</StyledTitle>}\n                            {content && <StyledContent className={classes.text}>{content}</StyledContent>}\n                        </TextBox>\n                    </ContentBox>\n                    {actions && (\n                        <ButtonsWrapper\n                            iconPlacement={IconPlacementInternal}\n                            className={cx(classes.buttonsWrapper, getLayoutClass(layout))}\n                        >\n                            {actions}\n                        </ButtonsWrapper>\n                    )}\n\n                    {showCloseIcon && (\n                        <CloseIconWrapper\n                            view=\"clear\"\n                            size=\"s\"\n                            onClick={onCloseButtonClick}\n                            className={cx(classes.closeIcon, getLayoutClass(layout))}\n                        >\n                            <IconCross size=\"s\" color=\"inherit\" />\n                        </CloseIconWrapper>\n                    )}\n                </Wrapper>\n            </Root>\n        );\n    });\n\nexport const noticationConfig = {\n    name: 'Notification',\n    tag: 'div',\n    layout: notificationRoot,\n    base: StyledNotification,\n    variations: {\n        layout: {\n            css: layoutCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        layout: layouts.vertical,\n        size: 'xs',\n    },\n};\n"],"names":["notificationRoot","Root","forwardRef","props","ref","_props$role","role","title","content","children","actions","view","size","iconPlacement","_props$showCloseIcon","showCloseIcon","_props$layout","layout","layouts","vertical","icon","onCloseButtonClick","rest","_objectWithoutProperties","_excluded","ariaLive","ariaAtomic","isOneLine","oneLineClass","classes","oneLine","undefined","withoutIconClass","withoutIcon","withoutCloseIconClass","withoutCloseIcon","IconPlacementInternal","useMemo","React","createElement","_extends","Wrapper","className","cx","wrapper","getLayoutClass","ContentBox","contentBox","IconWrapper","TextBox","textbox","StyledTitle","StyledContent","text","ButtonsWrapper","buttonsWrapper","CloseIconWrapper","onClick","closeIcon","_IconCross","IconCross","color","noticationConfig","name","tag","base","StyledNotification","variations","css","layoutCSS","viewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCross } from '../_Icon/Icons/IconCross';\n\nimport { classes } from './Notification.tokens';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as layoutCSS } from './variations/_layout/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { NotificationLayout, NotificationProps, layouts } from './Notification.types';\nimport {\n    ButtonsWrapper,\n    CloseIconWrapper,\n    ContentBox,\n    IconWrapper,\n    StyledContent,\n    StyledNotification,\n    StyledTitle,\n    TextBox,\n    Wrapper,\n} from './Notification.styles';\nimport { getLayoutClass } from './utils';\n\n/**\n * Компонент для небольших уведомлений пользователя\n */\nexport const notificationRoot = (Root: RootProps<HTMLDivElement, Omit<NotificationProps, 'title'>>) =>\n    forwardRef<HTMLDivElement, NotificationProps>((props, ref) => {\n        const {\n            role = 'status',\n            title,\n            children: content,\n            actions,\n            view,\n            size,\n            iconPlacement,\n            showCloseIcon = true,\n            layout = layouts.vertical as NotificationLayout,\n            icon,\n            onCloseButtonClick,\n            ...rest\n        } = props;\n\n        let ariaLive: 'assertive' | 'polite' = 'polite';\n        let ariaAtomic = false;\n\n        if (role === 'alert') {\n            ariaLive = 'assertive';\n        } else if (role === 'status') {\n            ariaAtomic = true;\n        }\n\n        const isOneLine = !content || !title;\n        const oneLineClass = isOneLine ? classes.oneLine : undefined;\n        const withoutIconClass = icon ? undefined : classes.withoutIcon;\n        const withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;\n\n        const IconPlacementInternal = useMemo(() => (icon ? iconPlacement : undefined), [icon, iconPlacement]);\n\n        return (\n            <Root\n                view={view}\n                size={size}\n                layout={layout}\n                ref={ref}\n                role={role}\n                aria-live={ariaLive}\n                aria-atomic={ariaAtomic}\n                {...rest}\n            >\n                <Wrapper className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)}>\n                    <ContentBox\n                        iconPlacement={IconPlacementInternal}\n                        className={cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)}\n                    >\n                        {icon && (\n                            <IconWrapper\n                                iconPlacement={IconPlacementInternal}\n                                className={cx(classes.icon, getLayoutClass(layout))}\n                            >\n                                {icon}\n                            </IconWrapper>\n                        )}\n                        <TextBox\n                            iconPlacement={IconPlacementInternal}\n                            showCloseIcon={showCloseIcon}\n                            className={cx(classes.textbox, getLayoutClass(layout))}\n                        >\n                            {title && <StyledTitle className={classes.title}>{title}</StyledTitle>}\n                            {content && <StyledContent className={classes.text}>{content}</StyledContent>}\n                        </TextBox>\n                    </ContentBox>\n                    {actions && (\n                        <ButtonsWrapper\n                            iconPlacement={IconPlacementInternal}\n                            className={cx(classes.buttonsWrapper, getLayoutClass(layout))}\n                        >\n                            {actions}\n                        </ButtonsWrapper>\n                    )}\n\n                    {showCloseIcon && (\n                        <CloseIconWrapper\n                            view=\"clear\"\n                            size=\"s\"\n                            onClick={onCloseButtonClick}\n                            className={cx(classes.closeIcon, getLayoutClass(layout))}\n                        >\n                            <IconCross size=\"s\" color=\"inherit\" />\n                        </CloseIconWrapper>\n                    )}\n                </Wrapper>\n            </Root>\n        );\n    });\n\nexport const notificationConfig = {\n    name: 'Notification',\n    tag: 'div',\n    layout: notificationRoot,\n    base: StyledNotification,\n    variations: {\n        layout: {\n            css: layoutCSS,\n        },\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        layout: layouts.vertical,\n        size: 'xs',\n    },\n};\n"],"names":["notificationRoot","Root","forwardRef","props","ref","_props$role","role","title","content","children","actions","view","size","iconPlacement","_props$showCloseIcon","showCloseIcon","_props$layout","layout","layouts","vertical","icon","onCloseButtonClick","rest","_objectWithoutProperties","_excluded","ariaLive","ariaAtomic","isOneLine","oneLineClass","classes","oneLine","undefined","withoutIconClass","withoutIcon","withoutCloseIconClass","withoutCloseIcon","IconPlacementInternal","useMemo","React","createElement","_extends","Wrapper","className","cx","wrapper","getLayoutClass","ContentBox","contentBox","IconWrapper","TextBox","textbox","StyledTitle","StyledContent","text","ButtonsWrapper","buttonsWrapper","CloseIconWrapper","onClick","closeIcon","_IconCross","IconCross","color","notificationConfig","name","tag","base","StyledNotification","variations","css","layoutCSS","viewCSS","sizeCSS","defaults"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import './Notification.styles_7h8hp0.css';
+import './Notification.styles_e6274r.css';
 import { styled } from '@linaria/react';
 import { tokens } from './Notification.tokens.js';
 import { placements } from './Notification.types.js';
@@ -114,10 +114,19 @@ var StyledItemWrapper = /*#__PURE__*/styled('div')({
   "class": "s18m0x6v",
   propsAsIs: false
 });
+var _exp48 = function _exp48() {
+  return function (_ref8) {
+    var placement = _ref8.placement;
+    return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
+  };
+};
 var StyledRoot = /*#__PURE__*/styled('div')({
   name: "StyledRoot",
   "class": "sfe5ql2",
-  propsAsIs: false
+  propsAsIs: false,
+  vars: {
+    "sfe5ql2-0": [/*#__PURE__*/_exp48()]
+  }
 });
 
 export { ButtonsWrapper, CloseIconWrapper, ContentBox, IconWrapper, StyledContent, StyledItemWrapper, StyledNotification, StyledRoot, StyledTitle, TextBox, Wrapper };

package/es/components/Notification/Notification.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.styles.js","sources":["../../../src/components/Notification/Notification.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyHyphens } from '../../mixins';\nimport { buttonConfig } from '../Button';\nimport { component, mergeConfig } from '../../engines';\n\nimport { classes, tokens } from './Notification.tokens';\nimport { CloseIconType, IconPlacementType, placements } from './Notification.types';\n\nexport const StyledNotification = css`\n    width: fit-content;\n`;\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const CloseIconWrapper = styled(Button)`\n    position: absolute;\n    width: 1.5rem;\n    height: 1.5rem;\n\n    color: var(${tokens.closeIconColor});\n\n    :hover {\n        color: var(${tokens.closeIconColorOnHover});\n    }\n\n    &.${classes.horizontal} {\n        position: relative;\n    }\n`;\n\nexport const Wrapper = styled.div`\n    position: relative;\n    box-sizing: border-box;\n\n    background: var(${tokens.background});\n    border-radius: var(${tokens.borderRadius});\n\n    &.${classes.horizontal} {\n        display: flex;\n        align-items: center;\n        gap: var(${tokens.horizontalLayoutGap});\n    }\n`;\n\nexport const ButtonsWrapper = styled.div<IconPlacementType>`\n    margin-top: var(${tokens.buttonsMarginTop});\n    margin-left: ${({ iconPlacement }) =>\n        iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'};\n\n    &.${classes.horizontal} {\n        margin-top: unset;\n        margin-left: unset;\n    }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType>`\n    width: var(${tokens.contentLeftIconSize});\n    height: var(${tokens.contentLeftIconSize});\n\n    margin-right: ${({ iconPlacement }) =>\n        iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'};\n    margin-bottom: ${({ iconPlacement }) =>\n        iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset'};\n\n    &.${classes.horizontal} {\n        margin-right: var(${tokens.horizontalLayoutLeftIconMargin});\n        margin-bottom: unset;\n    }\n`;\n\nexport const ContentBox = styled.div<IconPlacementType>`\n    // TODO: переделать, когда научимся работать с токенами при пересечнии свойств\n    // issue #909\n    display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')};\n\n    padding-top: ${({ iconPlacement }) =>\n        iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`};\n\n    &.${classes.horizontal} {\n        padding: unset;\n        display: flex;\n        align-items: center;\n        flex-grow: 1;\n    }\n`;\n\nexport const TextBox = styled.div<CloseIconType & IconPlacementType>`\n    padding: var(${tokens.textboxPaddingTop}) var(${tokens.textboxPaddingRight}) var(${tokens.textboxPaddingBottom})\n        var(${tokens.textboxPaddingLeft});\n\n    padding-top: ${({ iconPlacement }) =>\n        !iconPlacement || iconPlacement === placements.top\n            ? `var(${tokens.textboxPaddingTopWithTopIcon})`\n            : `var(${tokens.textboxPaddingTop})`};\n    padding-right: ${({ showCloseIcon, iconPlacement }) =>\n        showCloseIcon && iconPlacement !== placements.top\n            ? `var(${tokens.textboxPaddingRightWithCloseIcon})`\n            : `var(${tokens.textboxPaddingRight})`};\n\n    display: flex;\n    flex-direction: column;\n    row-gap: var(${tokens.textboxGap});\n    word-break: break-word;\n\n    &.${classes.horizontal} {\n        padding: unset;\n    }\n`;\n\nexport const StyledTitle = styled.div`\n    font-family: var(${tokens.titleFontFamily});\n    font-size: var(${tokens.titleFontSize});\n    font-style: var(${tokens.titleFontStyle});\n    font-weight: var(${tokens.titleFontWeight});\n    letter-spacing: var(${tokens.titleFontLetterSpacing});\n    line-height: var(${tokens.titleFontLineHeight});\n    ${String(applyHyphens)};\n`;\n\nexport const StyledContent = styled.div`\n    font-family: var(${tokens.contentFontFamily});\n    font-size: var(${tokens.contentFontSize});\n    font-style: var(${tokens.contentFontStyle});\n    font-weight: var(${tokens.contentFontWeight});\n    letter-spacing: var(${tokens.contentFontLetterSpacing});\n    line-height: var(${tokens.contentFontLineHeight});\n    ${String(applyHyphens)};\n\n    color: var(${tokens.contentColor});\n`;\n\nexport const StyledItemWrapper = styled.div<{ isHidden: boolean }>`\n    margin-top: 1rem;\n    opacity: 1;\n\n    &&.${classes.notificationItemOpened} {\n        animation: 0.4s showAnimation ease-out;\n    }\n\n    &&.${classes.notificationItemHidden} {\n        animation: 0.4s hideAnimation ease-out;\n    }\n\n    @keyframes showAnimation {\n        0% {\n            transform: translateX(100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n    }\n\n    @keyframes hideAnimation {\n        0% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: translateX(100%);\n            opacity: 0;\n        }\n    }\n`;\n\nexport const StyledRoot = styled.div`\n    display: flex;\n    flex-direction: column-reverse;\n    box-sizing: border-box;\n    padding: 0 1.5rem 1.5rem;\n    max-height: 100%;\n    align-items: flex-end;\n`;\n"],"names":["StyledNotification","mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp","CloseIconWrapper","styled","name","class","propsAsIs","Wrapper","_exp10","_ref","iconPlacement","placements","left","concat","tokens","buttonsMarginLeft","ButtonsWrapper","vars","_exp14","_ref2","contentLeftIconMargin","_exp15","_ref3","top","contentTopIconMargin","IconWrapper","_exp18","_ref4","_exp19","_ref5","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp25","_ref6","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp26","_ref7","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","StyledTitle","StyledContent","StyledItemWrapper","StyledRoot"],"mappings":"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"}
+{"version":3,"file":"Notification.styles.js","sources":["../../../src/components/Notification/Notification.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { applyHyphens } from '../../mixins';\nimport { buttonConfig } from '../Button';\nimport { component, mergeConfig } from '../../engines';\n\nimport { classes, tokens } from './Notification.tokens';\nimport { CloseIconType, IconPlacementType, NotificationPlacement, placements } from './Notification.types';\n\nexport const StyledNotification = css`\n    width: fit-content;\n`;\n\nconst mergedButtonConfig = mergeConfig(buttonConfig);\nconst Button = component(mergedButtonConfig);\n\nexport const CloseIconWrapper = styled(Button)`\n    position: absolute;\n    width: 1.5rem;\n    height: 1.5rem;\n\n    color: var(${tokens.closeIconColor});\n\n    :hover {\n        color: var(${tokens.closeIconColorOnHover});\n    }\n\n    &.${classes.horizontal} {\n        position: relative;\n    }\n`;\n\nexport const Wrapper = styled.div`\n    position: relative;\n    box-sizing: border-box;\n\n    background: var(${tokens.background});\n    border-radius: var(${tokens.borderRadius});\n\n    &.${classes.horizontal} {\n        display: flex;\n        align-items: center;\n        gap: var(${tokens.horizontalLayoutGap});\n    }\n`;\n\nexport const ButtonsWrapper = styled.div<IconPlacementType>`\n    margin-top: var(${tokens.buttonsMarginTop});\n    margin-left: ${({ iconPlacement }) =>\n        iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset'};\n\n    &.${classes.horizontal} {\n        margin-top: unset;\n        margin-left: unset;\n    }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType>`\n    width: var(${tokens.contentLeftIconSize});\n    height: var(${tokens.contentLeftIconSize});\n\n    margin-right: ${({ iconPlacement }) =>\n        iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'};\n    margin-bottom: ${({ iconPlacement }) =>\n        iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset'};\n\n    &.${classes.horizontal} {\n        margin-right: var(${tokens.horizontalLayoutLeftIconMargin});\n        margin-bottom: unset;\n    }\n`;\n\nexport const ContentBox = styled.div<IconPlacementType>`\n    // TODO: переделать, когда научимся работать с токенами при пересечнии свойств\n    // issue #909\n    display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')};\n\n    padding-top: ${({ iconPlacement }) =>\n        iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`};\n\n    &.${classes.horizontal} {\n        padding: unset;\n        display: flex;\n        align-items: center;\n        flex-grow: 1;\n    }\n`;\n\nexport const TextBox = styled.div<CloseIconType & IconPlacementType>`\n    padding: var(${tokens.textboxPaddingTop}) var(${tokens.textboxPaddingRight}) var(${tokens.textboxPaddingBottom})\n        var(${tokens.textboxPaddingLeft});\n\n    padding-top: ${({ iconPlacement }) =>\n        !iconPlacement || iconPlacement === placements.top\n            ? `var(${tokens.textboxPaddingTopWithTopIcon})`\n            : `var(${tokens.textboxPaddingTop})`};\n    padding-right: ${({ showCloseIcon, iconPlacement }) =>\n        showCloseIcon && iconPlacement !== placements.top\n            ? `var(${tokens.textboxPaddingRightWithCloseIcon})`\n            : `var(${tokens.textboxPaddingRight})`};\n\n    display: flex;\n    flex-direction: column;\n    row-gap: var(${tokens.textboxGap});\n    word-break: break-word;\n\n    &.${classes.horizontal} {\n        padding: unset;\n    }\n`;\n\nexport const StyledTitle = styled.div`\n    font-family: var(${tokens.titleFontFamily});\n    font-size: var(${tokens.titleFontSize});\n    font-style: var(${tokens.titleFontStyle});\n    font-weight: var(${tokens.titleFontWeight});\n    letter-spacing: var(${tokens.titleFontLetterSpacing});\n    line-height: var(${tokens.titleFontLineHeight});\n    ${String(applyHyphens)};\n`;\n\nexport const StyledContent = styled.div`\n    font-family: var(${tokens.contentFontFamily});\n    font-size: var(${tokens.contentFontSize});\n    font-style: var(${tokens.contentFontStyle});\n    font-weight: var(${tokens.contentFontWeight});\n    letter-spacing: var(${tokens.contentFontLetterSpacing});\n    line-height: var(${tokens.contentFontLineHeight});\n    ${String(applyHyphens)};\n\n    color: var(${tokens.contentColor});\n`;\n\nexport const StyledItemWrapper = styled.div<{ isHidden: boolean }>`\n    margin-top: 1rem;\n    opacity: 1;\n\n    &&.${classes.notificationItemOpened} {\n        animation: 0.4s showAnimation ease-out;\n\n        &.${classes.notificationLeftToRightAnimation} {\n            animation: 0.4s showLeftToRightAnimation ease-out;\n        }\n    }\n\n    &&.${classes.notificationItemHidden} {\n        animation: 0.4s hideAnimation ease-out;\n\n        &.${classes.notificationLeftToRightAnimation} {\n            animation: 0.4s hideLeftToRightAnimation ease-out;\n        }\n    }\n\n    @keyframes showLeftToRightAnimation {\n        0% {\n            transform: translateX(-100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n    }\n\n    @keyframes hideLeftToRightAnimation {\n        0% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: translateX(-100%);\n            opacity: 0;\n        }\n    }\n\n    @keyframes showAnimation {\n        0% {\n            transform: translateX(100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n    }\n\n    @keyframes hideAnimation {\n        0% {\n            transform: translateX(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: translateX(100%);\n            opacity: 0;\n        }\n    }\n`;\n\nexport const StyledRoot = styled.div<{ placement?: NotificationPlacement }>`\n    display: flex;\n    flex-direction: column-reverse;\n    box-sizing: border-box;\n    padding: 0 1.5rem 1.5rem;\n    max-height: 100%;\n    align-items: ${({ placement }) => (placement === 'bottom-left' ? 'flex-start' : 'flex-end')};\n`;\n"],"names":["StyledNotification","mergedButtonConfig","mergeConfig","buttonConfig","Button","component","_exp","CloseIconWrapper","styled","name","class","propsAsIs","Wrapper","_exp10","_ref","iconPlacement","placements","left","concat","tokens","buttonsMarginLeft","ButtonsWrapper","vars","_exp14","_ref2","contentLeftIconMargin","_exp15","_ref3","top","contentTopIconMargin","IconWrapper","_exp18","_ref4","_exp19","_ref5","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp25","_ref6","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp26","_ref7","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","StyledTitle","StyledContent","StyledItemWrapper","_exp48","_ref8","placement","StyledRoot"],"mappings":"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"}

package/es/components/Notification/{Notification.styles_7h8hp0.css → Notification.styles_e6274r.css}

@@ -7,5 +7,5 @@
 .t1vmb0f2{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.t1vmb0f2.notification-layout-horizontal{padding:unset;}
 .s1k4e58v{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
 .s92kmpm{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
-.s18m0x6v{margin-top:1rem;opacity:1;}.s18m0x6v.s18m0x6v.notification-item-opened{-webkit-animation:0.4s showAnimation-s18m0x6v ease-out;animation:0.4s showAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-hidden{-webkit-animation:0.4s hideAnimation-s18m0x6v ease-out;animation:0.4s hideAnimation-s18m0x6v ease-out;}@-webkit-keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
-.sfe5ql2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}
+.s18m0x6v{margin-top:1rem;opacity:1;}.s18m0x6v.s18m0x6v.notification-item-opened{-webkit-animation:0.4s showAnimation-s18m0x6v ease-out;animation:0.4s showAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-opened.notification-left-to-right-animation{-webkit-animation:0.4s showLeftToRightAnimation-s18m0x6v ease-out;animation:0.4s showLeftToRightAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-hidden{-webkit-animation:0.4s hideAnimation-s18m0x6v ease-out;animation:0.4s hideAnimation-s18m0x6v ease-out;}.s18m0x6v.s18m0x6v.notification-item-hidden.notification-left-to-right-animation{-webkit-animation:0.4s hideLeftToRightAnimation-s18m0x6v ease-out;animation:0.4s hideLeftToRightAnimation-s18m0x6v ease-out;}@-webkit-keyframes showLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes showLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes hideLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes hideLeftToRightAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes showAnimation-s18m0x6v{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes hideAnimation-s18m0x6v{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
+.sfe5ql2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}

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

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

package/es/components/Notification/Notification.tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.tokens.js","sources":["../../../src/components/Notification/Notification.tokens.ts"],"sourcesContent":["export const classes = {\n    textbox: 'notificaiton-textbox',\n    contentBox: 'notificaiton-content-box',\n    title: 'notification-title',\n    text: 'notification-text',\n    wrapper: 'notification-wrapper',\n    icon: 'notification-icon',\n    closeIcon: 'notification-close-icon',\n    buttonsWrapper: 'notification-buttons-wrapper',\n\n    horizontal: 'notification-layout-horizontal',\n    vertical: 'notification-layout-vertical',\n    oneLine: 'notification-one-line-textbox',\n    withoutIcon: 'notification-without-icon',\n    withoutCloseIcon: 'notification-without-close-icon',\n\n    notificationItemOpened: 'notification-item-opened',\n    notificationItemHidden: 'notification-item-hidden',\n};\n\nexport const tokens = {\n    background: '--plasma-notification-backgorund',\n    padding: '--plasma-notification-padding',\n    horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding',\n    width: '--plasma-notification-width',\n    borderRadius: '--plasma-notification-border-radius',\n\n    paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox',\n    horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap',\n    horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin',\n    horizontalLayoutRightPaddingWithoutCloseIcon:\n        '--plasma-notification-horizontal-layout-right-padding-without-close-icon',\n\n    contentPaddingTop: '--plasma-notification-content-padding-top',\n    contentPaddingRight: '--plasma-notification-content-padding-right',\n    contentPaddingBottom: '--plasma-notification-content-padding-bottom',\n    contentPaddingLeft: '--plasma-notification-content-padding-left',\n\n    contentPaddingTopWithoutIcon: '--plasma-notification-content-padding-top-without-icon',\n\n    textboxPaddingTop: '--plasma-notification-textbox-padding-top',\n    textboxPaddingRight: '--plasma-notification-textbox-padding-right',\n    textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom',\n    textboxPaddingLeft: '--plasma-notification-textbox-padding-left',\n\n    textboxPaddingTopWithTopIcon: '--plasma-notification-textbox-padding-top-with-top-icon',\n    textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon',\n    textboxGap: '--plasma-notification-textbox-gap',\n\n    buttonsMarginTop: '--plasma-notification-buttons-margin-top',\n    buttonsMarginLeft: '--plasma-notification-buttons-margin-left',\n\n    contentLeftIconSize: '--plasma-notification-content-left-icon-size',\n    contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',\n    contentTopIconMargin: '--plasma-notification-content-top-icon-margin',\n\n    contentColor: '--plasma-notification-content-color',\n    contentFontFamily: '--plasma-notification-content-font-family',\n    contentFontSize: '--plasma-notification-content-font-size',\n    contentFontStyle: '--plasma-notification-content-font-style',\n    contentFontWeight: '--plasma-notification-content-font-weight',\n    contentFontWeightBold: '--plasma-notification-content-font-weight-bold',\n    contentFontLetterSpacing: '--plasma-notification-content-font-letter-spacing',\n    contentFontLineHeight: '--plasma-notification-content-font-line-height',\n\n    titleColor: '--plasma-notification-title-color',\n    titleFontFamily: '--plasma-notification-title-font-family',\n    titleFontSize: '--plasma-notification-title-font-size',\n    titleFontStyle: '--plasma-notification-title-font-style',\n    titleFontWeight: '--plasma-notification-title-font-weight',\n    titleFontWeightBold: '--plasma-notification-title-font-weight-bold',\n    titleFontLetterSpacing: '--plasma-notification-title-font-letter-spacing',\n    titleFontLineHeight: '--plasma-notification-title-font-line-height',\n\n    closeIconTop: '--plasma-notification-close-icon-top',\n    closeIconRight: '--plasma-notification-close-icon-right',\n    closeIconColor: '--plasma-notification-close-icon-color',\n    closeIconColorOnHover: '--plasma-notification-close-icon-color-on-hover',\n};\n"],"names":["classes","textbox","contentBox","title","text","wrapper","icon","closeIcon","buttonsWrapper","horizontal","vertical","oneLine","withoutIcon","withoutCloseIcon","notificationItemOpened","notificationItemHidden","tokens","background","padding","horizontalLayoutPadding","width","borderRadius","paddingOneLineTextbox","horizontalLayoutGap","horizontalLayoutLeftIconMargin","horizontalLayoutRightPaddingWithoutCloseIcon","contentPaddingTop","contentPaddingRight","contentPaddingBottom","contentPaddingLeft","contentPaddingTopWithoutIcon","textboxPaddingTop","textboxPaddingRight","textboxPaddingBottom","textboxPaddingLeft","textboxPaddingTopWithTopIcon","textboxPaddingRightWithCloseIcon","textboxGap","buttonsMarginTop","buttonsMarginLeft","contentLeftIconSize","contentLeftIconMargin","contentTopIconMargin","contentColor","contentFontFamily","contentFontSize","contentFontStyle","contentFontWeight","contentFontWeightBold","contentFontLetterSpacing","contentFontLineHeight","titleColor","titleFontFamily","titleFontSize","titleFontStyle","titleFontWeight","titleFontWeightBold","titleFontLetterSpacing","titleFontLineHeight","closeIconTop","closeIconRight","closeIconColor","closeIconColorOnHover"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,OAAO,EAAE,sBAAsB;AAC/BC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,oBAAoB;AAC3BC,EAAAA,IAAI,EAAE,mBAAmB;AACzBC,EAAAA,OAAO,EAAE,sBAAsB;AAC/BC,EAAAA,IAAI,EAAE,mBAAmB;AACzBC,EAAAA,SAAS,EAAE,yBAAyB;AACpCC,EAAAA,cAAc,EAAE,8BAA8B;AAE9CC,EAAAA,UAAU,EAAE,gCAAgC;AAC5CC,EAAAA,QAAQ,EAAE,8BAA8B;AACxCC,EAAAA,OAAO,EAAE,+BAA+B;AACxCC,EAAAA,WAAW,EAAE,2BAA2B;AACxCC,EAAAA,gBAAgB,EAAE,iCAAiC;AAEnDC,EAAAA,sBAAsB,EAAE,0BAA0B;AAClDC,EAAAA,sBAAsB,EAAE,0BAAA;AAC5B,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,kCAAkC;AAC9CC,EAAAA,OAAO,EAAE,+BAA+B;AACxCC,EAAAA,uBAAuB,EAAE,iDAAiD;AAC1EC,EAAAA,KAAK,EAAE,6BAA6B;AACpCC,EAAAA,YAAY,EAAE,qCAAqC;AAEnDC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,8BAA8B,EAAE,0DAA0D;AAC1FC,EAAAA,4CAA4C,EACxC,0EAA0E;AAE9EC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,oBAAoB,EAAE,8CAA8C;AACpEC,EAAAA,kBAAkB,EAAE,4CAA4C;AAEhEC,EAAAA,4BAA4B,EAAE,wDAAwD;AAEtFC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,oBAAoB,EAAE,8CAA8C;AACpEC,EAAAA,kBAAkB,EAAE,4CAA4C;AAEhEC,EAAAA,4BAA4B,EAAE,yDAAyD;AACvFC,EAAAA,gCAAgC,EAAE,6DAA6D;AAC/FC,EAAAA,UAAU,EAAE,mCAAmC;AAE/CC,EAAAA,gBAAgB,EAAE,0CAA0C;AAC5DC,EAAAA,iBAAiB,EAAE,2CAA2C;AAE9DC,EAAAA,mBAAmB,EAAE,8CAA8C;AACnEC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,oBAAoB,EAAE,+CAA+C;AAErEC,EAAAA,YAAY,EAAE,qCAAqC;AACnDC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,gBAAgB,EAAE,0CAA0C;AAC5DC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,wBAAwB,EAAE,mDAAmD;AAC7EC,EAAAA,qBAAqB,EAAE,gDAAgD;AAEvEC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,aAAa,EAAE,uCAAuC;AACtDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,mBAAmB,EAAE,8CAA8C;AACnEC,EAAAA,sBAAsB,EAAE,iDAAiD;AACzEC,EAAAA,mBAAmB,EAAE,8CAA8C;AAEnEC,EAAAA,YAAY,EAAE,sCAAsC;AACpDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,qBAAqB,EAAE,iDAAA;AAC3B;;;;"}
+{"version":3,"file":"Notification.tokens.js","sources":["../../../src/components/Notification/Notification.tokens.ts"],"sourcesContent":["export const classes = {\n    textbox: 'notificaiton-textbox',\n    contentBox: 'notificaiton-content-box',\n    title: 'notification-title',\n    text: 'notification-text',\n    wrapper: 'notification-wrapper',\n    icon: 'notification-icon',\n    closeIcon: 'notification-close-icon',\n    buttonsWrapper: 'notification-buttons-wrapper',\n\n    horizontal: 'notification-layout-horizontal',\n    vertical: 'notification-layout-vertical',\n    oneLine: 'notification-one-line-textbox',\n    withoutIcon: 'notification-without-icon',\n    withoutCloseIcon: 'notification-without-close-icon',\n\n    notificationItemOpened: 'notification-item-opened',\n    notificationItemHidden: 'notification-item-hidden',\n    notificationLeftToRightAnimation: 'notification-left-to-right-animation',\n};\n\nexport const tokens = {\n    background: '--plasma-notification-backgorund',\n    padding: '--plasma-notification-padding',\n    horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding',\n    width: '--plasma-notification-width',\n    borderRadius: '--plasma-notification-border-radius',\n\n    paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox',\n    horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap',\n    horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin',\n    horizontalLayoutRightPaddingWithoutCloseIcon:\n        '--plasma-notification-horizontal-layout-right-padding-without-close-icon',\n\n    contentPaddingTop: '--plasma-notification-content-padding-top',\n    contentPaddingRight: '--plasma-notification-content-padding-right',\n    contentPaddingBottom: '--plasma-notification-content-padding-bottom',\n    contentPaddingLeft: '--plasma-notification-content-padding-left',\n\n    contentPaddingTopWithoutIcon: '--plasma-notification-content-padding-top-without-icon',\n\n    textboxPaddingTop: '--plasma-notification-textbox-padding-top',\n    textboxPaddingRight: '--plasma-notification-textbox-padding-right',\n    textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom',\n    textboxPaddingLeft: '--plasma-notification-textbox-padding-left',\n\n    textboxPaddingTopWithTopIcon: '--plasma-notification-textbox-padding-top-with-top-icon',\n    textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon',\n    textboxGap: '--plasma-notification-textbox-gap',\n\n    buttonsMarginTop: '--plasma-notification-buttons-margin-top',\n    buttonsMarginLeft: '--plasma-notification-buttons-margin-left',\n\n    contentLeftIconSize: '--plasma-notification-content-left-icon-size',\n    contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',\n    contentTopIconMargin: '--plasma-notification-content-top-icon-margin',\n\n    contentColor: '--plasma-notification-content-color',\n    contentFontFamily: '--plasma-notification-content-font-family',\n    contentFontSize: '--plasma-notification-content-font-size',\n    contentFontStyle: '--plasma-notification-content-font-style',\n    contentFontWeight: '--plasma-notification-content-font-weight',\n    contentFontWeightBold: '--plasma-notification-content-font-weight-bold',\n    contentFontLetterSpacing: '--plasma-notification-content-font-letter-spacing',\n    contentFontLineHeight: '--plasma-notification-content-font-line-height',\n\n    titleColor: '--plasma-notification-title-color',\n    titleFontFamily: '--plasma-notification-title-font-family',\n    titleFontSize: '--plasma-notification-title-font-size',\n    titleFontStyle: '--plasma-notification-title-font-style',\n    titleFontWeight: '--plasma-notification-title-font-weight',\n    titleFontWeightBold: '--plasma-notification-title-font-weight-bold',\n    titleFontLetterSpacing: '--plasma-notification-title-font-letter-spacing',\n    titleFontLineHeight: '--plasma-notification-title-font-line-height',\n\n    closeIconTop: '--plasma-notification-close-icon-top',\n    closeIconRight: '--plasma-notification-close-icon-right',\n    closeIconColor: '--plasma-notification-close-icon-color',\n    closeIconColorOnHover: '--plasma-notification-close-icon-color-on-hover',\n};\n"],"names":["classes","textbox","contentBox","title","text","wrapper","icon","closeIcon","buttonsWrapper","horizontal","vertical","oneLine","withoutIcon","withoutCloseIcon","notificationItemOpened","notificationItemHidden","notificationLeftToRightAnimation","tokens","background","padding","horizontalLayoutPadding","width","borderRadius","paddingOneLineTextbox","horizontalLayoutGap","horizontalLayoutLeftIconMargin","horizontalLayoutRightPaddingWithoutCloseIcon","contentPaddingTop","contentPaddingRight","contentPaddingBottom","contentPaddingLeft","contentPaddingTopWithoutIcon","textboxPaddingTop","textboxPaddingRight","textboxPaddingBottom","textboxPaddingLeft","textboxPaddingTopWithTopIcon","textboxPaddingRightWithCloseIcon","textboxGap","buttonsMarginTop","buttonsMarginLeft","contentLeftIconSize","contentLeftIconMargin","contentTopIconMargin","contentColor","contentFontFamily","contentFontSize","contentFontStyle","contentFontWeight","contentFontWeightBold","contentFontLetterSpacing","contentFontLineHeight","titleColor","titleFontFamily","titleFontSize","titleFontStyle","titleFontWeight","titleFontWeightBold","titleFontLetterSpacing","titleFontLineHeight","closeIconTop","closeIconRight","closeIconColor","closeIconColorOnHover"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,OAAO,EAAE,sBAAsB;AAC/BC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,oBAAoB;AAC3BC,EAAAA,IAAI,EAAE,mBAAmB;AACzBC,EAAAA,OAAO,EAAE,sBAAsB;AAC/BC,EAAAA,IAAI,EAAE,mBAAmB;AACzBC,EAAAA,SAAS,EAAE,yBAAyB;AACpCC,EAAAA,cAAc,EAAE,8BAA8B;AAE9CC,EAAAA,UAAU,EAAE,gCAAgC;AAC5CC,EAAAA,QAAQ,EAAE,8BAA8B;AACxCC,EAAAA,OAAO,EAAE,+BAA+B;AACxCC,EAAAA,WAAW,EAAE,2BAA2B;AACxCC,EAAAA,gBAAgB,EAAE,iCAAiC;AAEnDC,EAAAA,sBAAsB,EAAE,0BAA0B;AAClDC,EAAAA,sBAAsB,EAAE,0BAA0B;AAClDC,EAAAA,gCAAgC,EAAE,sCAAA;AACtC,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,kCAAkC;AAC9CC,EAAAA,OAAO,EAAE,+BAA+B;AACxCC,EAAAA,uBAAuB,EAAE,iDAAiD;AAC1EC,EAAAA,KAAK,EAAE,6BAA6B;AACpCC,EAAAA,YAAY,EAAE,qCAAqC;AAEnDC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,8BAA8B,EAAE,0DAA0D;AAC1FC,EAAAA,4CAA4C,EACxC,0EAA0E;AAE9EC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,oBAAoB,EAAE,8CAA8C;AACpEC,EAAAA,kBAAkB,EAAE,4CAA4C;AAEhEC,EAAAA,4BAA4B,EAAE,wDAAwD;AAEtFC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,mBAAmB,EAAE,6CAA6C;AAClEC,EAAAA,oBAAoB,EAAE,8CAA8C;AACpEC,EAAAA,kBAAkB,EAAE,4CAA4C;AAEhEC,EAAAA,4BAA4B,EAAE,yDAAyD;AACvFC,EAAAA,gCAAgC,EAAE,6DAA6D;AAC/FC,EAAAA,UAAU,EAAE,mCAAmC;AAE/CC,EAAAA,gBAAgB,EAAE,0CAA0C;AAC5DC,EAAAA,iBAAiB,EAAE,2CAA2C;AAE9DC,EAAAA,mBAAmB,EAAE,8CAA8C;AACnEC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,oBAAoB,EAAE,+CAA+C;AAErEC,EAAAA,YAAY,EAAE,qCAAqC;AACnDC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,gBAAgB,EAAE,0CAA0C;AAC5DC,EAAAA,iBAAiB,EAAE,2CAA2C;AAC9DC,EAAAA,qBAAqB,EAAE,gDAAgD;AACvEC,EAAAA,wBAAwB,EAAE,mDAAmD;AAC7EC,EAAAA,qBAAqB,EAAE,gDAAgD;AAEvEC,EAAAA,UAAU,EAAE,mCAAmC;AAC/CC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,aAAa,EAAE,uCAAuC;AACtDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,eAAe,EAAE,yCAAyC;AAC1DC,EAAAA,mBAAmB,EAAE,8CAA8C;AACnEC,EAAAA,sBAAsB,EAAE,iDAAiD;AACzEC,EAAAA,mBAAmB,EAAE,8CAA8C;AAEnEC,EAAAA,YAAY,EAAE,sCAAsC;AACpDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,cAAc,EAAE,wCAAwC;AACxDC,EAAAA,qBAAqB,EAAE,iDAAA;AAC3B;;;;"}

package/es/components/Notification/Notification.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode, RefAttributes } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\n\nexport const layouts = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n    top: 'top',\n    left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\n\nexport type LayoutType = {\n    layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n    iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n    showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, HTMLAttributes<HTMLDivElement> {\n    /**\n     * Заголовок.\n     */\n    title?: string;\n    /**\n     * Контент под заголовком.\n     */\n    children?: ReactNode;\n    /**\n     *  Кнопки снизу/справа для необходимых действий.\n     */\n    actions?: ReactNode;\n    /**\n     * Cхема расположение блоков Notification.\n     */\n    layout?: NotificationLayout;\n    /**\n     * Иконка слева.\n     */\n    icon?: ReactNode;\n    /**\n     * Расположение иконки слева внутри Textbox.\n     */\n    iconPlacement?: NotificationIconPlacement;\n    /**\n     * Показывать ли иконку закрытия справа.\n     * @default\n     * true\n     */\n    showCloseIcon?: boolean;\n    /**\n     * Колбек при нажатии на кнопку закрытия.\n     */\n    onCloseButtonClick?: () => void;\n    /**\n     * @deprecated\n     * Не влияет на отображение компонента.\n     * Статус компонента Notification.\n     */\n    status?: string;\n\n    /**\n     * Вид Notification.\n     */\n    view?: string;\n    /**\n     * Размер Notification (необходимо связать с размером используемых Button).\n     */\n    size?: string;\n}\n\nexport interface NotificationPortalProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Конфиг компонента Notification.\n     */\n    config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & RefAttributes<HTMLDivElement>>;\n    /**\n     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.\n     */\n    frame?: string;\n}\n"],"names":["layouts","horizontal","vertical","placements","top","left"],"mappings":"AAKO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACd,EAAC;AAIM,IAAMC,UAAU,GAAG;AACtBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAA;AACV;;;;"}
+{"version":3,"file":"Notification.types.js","sources":["../../../src/components/Notification/Notification.types.ts"],"sourcesContent":["import type { AsProps } from '@salutejs/plasma-core';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nimport { ComponentConfig, PropsType, Variants } from '../../engines/types';\n\nexport const layouts = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n};\n\nexport type NotificationLayout = keyof typeof layouts;\n\nexport const placements = {\n    top: 'top',\n    left: 'left',\n};\n\nexport type NotificationIconPlacement = keyof typeof placements;\nexport type NotificationPlacement = 'bottom-right' | 'bottom-left';\n\nexport type LayoutType = {\n    layout?: NotificationLayout;\n};\n\nexport type IconPlacementType = {\n    iconPlacement?: NotificationIconPlacement;\n};\n\nexport type CloseIconType = {\n    showCloseIcon?: boolean;\n};\n\nexport interface NotificationProps extends AsProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Заголовок.\n     */\n    title?: ReactNode;\n    /**\n     * Контент под заголовком.\n     */\n    children?: ReactNode;\n    /**\n     *  Кнопки снизу/справа для необходимых действий.\n     */\n    actions?: ReactNode;\n    /**\n     * Cхема расположение блоков Notification.\n     */\n    layout?: NotificationLayout;\n    /**\n     * Иконка слева.\n     */\n    icon?: ReactNode;\n    /**\n     * Расположение иконки слева внутри Textbox.\n     */\n    iconPlacement?: NotificationIconPlacement;\n    /**\n     * Показывать ли иконку закрытия справа.\n     * @default\n     * true\n     */\n    showCloseIcon?: boolean;\n    /**\n     * Колбек при нажатии на кнопку закрытия.\n     */\n    onCloseButtonClick?: () => void;\n    /**\n     * @deprecated\n     * Не влияет на отображение компонента.\n     * Статус компонента Notification.\n     */\n    status?: string;\n\n    /**\n     * Вид Notification.\n     */\n    view?: string;\n    /**\n     * Размер Notification (необходимо связать с размером используемых Button).\n     */\n    size?: string;\n}\n\nexport interface NotificationPortalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n    /**\n     * Конфиг компонента Notification.\n     */\n    config: ComponentConfig<string, Variants, PropsType<Variants>, NotificationProps & HTMLAttributes<HTMLDivElement>>;\n    /**\n     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.\n     */\n    frame?: string;\n    /**\n     * Расположение компонента Notification во frame\n     * @default bottom-right\n     */\n    placement?: NotificationPlacement;\n}\n"],"names":["layouts","horizontal","vertical","placements","top","left"],"mappings":"AAKO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACd,EAAC;AAIM,IAAMC,UAAU,GAAG;AACtBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,IAAI,EAAE,MAAA;AACV;;;;"}

package/es/components/Notification/NotificationsPortal.js

@@ -29,7 +29,9 @@ var StyledPopup = /*#__PURE__*/styled(_exp())({
  */
 var NotificationsPortal = function NotificationsPortal(_ref) {
   var config = _ref.config,
-    frame = _ref.frame;
+    frame = _ref.frame,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-right' : _ref$placement;
   var _useStoreon = useStoreon('notifications'),
     notifications = _useStoreon.notifications;
   var Notification = useMemo(function () {
@@ -38,15 +40,17 @@ var NotificationsPortal = function NotificationsPortal(_ref) {
   return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
     opened: true,
     frame: frame,
-    placement: "bottom-right",
+    placement: placement,
     zIndex: "9100"
-  }, /*#__PURE__*/React.createElement(StyledRoot, null, notifications.map(function (_ref2) {
+  }, /*#__PURE__*/React.createElement(StyledRoot, {
+    placement: placement
+  }, 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),
+      className: cx(isHidden ? classes.notificationItemHidden : classes.notificationItemOpened, placement === 'bottom-left' && classes.notificationLeftToRightAnimation),
       isHidden: isHidden || false
     }, /*#__PURE__*/React.createElement(Notification, _extends({
       key: id,