@salutejs/plasma-new-hope 0.174.0-canary.1503.11466452273.0 → 0.174.0-canary.1504.11477432639.0

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

@@ -37,7 +37,7 @@ var Ul = exports.Ul = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", ",.", "{display:block;}"], _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target);
 var OuterLabel = exports.OuterLabel = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-2"
-})(["display:block;margin-bottom:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Select.tokens.labelOffset, _Select.constants.textfieldOuterLabelColor, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight);
+})(["display:block;margin-bottom:var(", ");color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], _Select.tokens.labelOffset, _Select.constants.textfieldOuterLabelColor, _Select.tokens.labelFontFamily, _Select.tokens.fontFamily, _Select.tokens.labelFontSize, _Select.tokens.fontSize, _Select.tokens.labelFontStyle, _Select.tokens.fontStyle, _Select.tokens.labelFontWeight, _Select.tokens.fontWeight, _Select.tokens.labelFontLetterSpacing, _Select.tokens.fontLetterSpacing, _Select.tokens.labelFontLineHeight, _Select.tokens.fontLineHeight);
 var HelperText = exports.HelperText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-3"
-})(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Select.tokens.helperTextOffset, _Select.tokens.helperTextColor, _Select.constants.fontFamily, _Select.constants.fontSize, _Select.constants.fontStyle, _Select.constants.fontWeight, _Select.constants.fontLetterSpacing, _Select.constants.fontLineHeight);
+})(["margin-top:var(", ");color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], _Select.tokens.helperTextOffset, _Select.tokens.helperTextColor, _Select.tokens.helperTextFontFamily, _Select.constants.fontFamily, _Select.tokens.helperTextFontSize, _Select.constants.fontSize, _Select.tokens.helperTextFontStyle, _Select.constants.fontStyle, _Select.tokens.helperTextFontWeight, _Select.constants.fontWeight, _Select.tokens.helperTextFontLetterSpacing, _Select.constants.fontLetterSpacing, _Select.tokens.helperTextFontLineHeight, _Select.constants.fontLineHeight);

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

@@ -26,6 +26,18 @@ var tokens = exports.tokens = {
   fontWeight: '--plasma-select-font-weight',
   fontLetterSpacing: '--plasma-select-font-letter-spacing',
   fontLineHeight: '--plasma-select-font-line-height',
+  labelFontFamily: '--plasma-select-label-font-family',
+  labelFontSize: '--plasma-select-label-font-size',
+  labelFontStyle: '--plasma-select-label-font-style',
+  labelFontWeight: '--plasma-select-label-font-weight',
+  labelFontLetterSpacing: '--plasma-select-label-font-letter-spacing',
+  labelFontLineHeight: '--plasma-select-label-font-line-height',
+  helperTextFontFamily: '--plasma-select-helper-text-font-family',
+  helperTextFontSize: '--plasma-select-helper-text-font-size',
+  helperTextFontStyle: '--plasma-select-helper-text-font-style',
+  helperTextFontWeight: '--plasma-select-helper-text-font-weight',
+  helperTextFontLetterSpacing: '--plasma-select-helper-text-font-letter-spacing',
+  helperTextFontLineHeight: '--plasma-select-helper-text-font-line-height',
   itemHeight: '--plasma-select-item-height',
   itemBorderRadius: '--plasma-select-item-border-radius',
   itemPadding: '--plasma-select-item-padding',
@@ -33,6 +45,8 @@ var tokens = exports.tokens = {
   itemIconSize: '--plasma-select-item-icon-size',
   itemIconSizeTight: '--plasma-select-item-icon-size-tight',
   itemIconMargin: '--plasma-select-item-icon-margin',
+  itemBackground: '--plasma-select-item-background',
+  itemBackgroundHover: '--plasma-select-item-background-hover',
   checkboxTriggerSize: '--plasma-select-checkbox-trigger-size',
   checkboxTriggerSizeTight: '--plasma-select-checkbox-trigger-size-tight',
   checkboxTriggerBorderRadius: '--plasma-select-checkbox-trigger-border-radius',
@@ -84,7 +98,9 @@ var tokens = exports.tokens = {
   helperTextColor: '--plasma-select-helper-text-color',
   helperTextOffset: '--plasma-select-helper-text-offset',
   spinnerSize: '--plasma-select-spinner-size',
-  spinnerSizeTight: '--plasma-select-spinner-size-tight'
+  spinnerSizeTight: '--plasma-select-spinner-size-tight',
+  disclosureIconColor: '--plasma-select-disclosure-icon-color',
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 var constants = exports.constants = {
   focusColor: '--surface-accent',

package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -29,7 +29,7 @@ var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledCompon
 })(["margin-left:auto;display:inline-flex;"]);
 var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
-})(["line-height:0;color:var(", ");&:hover{color:var(", ");}"], _Select.constants.disclosureIconColor, _Select.constants.disclosureIconColorHover);
+})(["line-height:0;color:var(", ",var(", "));&:hover{color:var(", ",var(", "));}"], _Select.tokens.disclosureIconColor, _Select.constants.disclosureIconColor, _Select.tokens.disclosureIconColorHover, _Select.constants.disclosureIconColorHover);
 var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-5"
 })(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");& .", "{--plasma-checkbox-trigger-size:", ";--plasma-checkbox-trigger-border-radius:", ";}"], function (_ref) {
@@ -53,10 +53,10 @@ var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].
 });
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref6) {
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ",var(", "));color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ",var(", "));}&.", "{background:var(", ",var(", "));}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, function (_ref6) {
   var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
-}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.itemBorderRadius, _Select.classes.dropdownItemIsDisabled, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
+}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.tokens.itemBackground, _Select.constants.itemBackground, _Select.tokens.itemBorderRadius, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.constants.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),

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_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/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.template-doc.mdx

@@ -10,9 +10,9 @@ import { PropsTable, Description } from '@site/src/components';
 <PropsTable name="Notification" />
 
 ## Использование
-Компонент `Notification` может использоваться для создания собственных систем оповещения.
+Компонент `Notification` может использоваться для создания собственных систем оповещения. 
 Вид компонента контролируется свойствами (props).
-Текстовая часть оповещения состоит из `title` и `children`.
+Текстовая часть оповещения состоит из `title` и `children`. 
 Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
 Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
 
@@ -34,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/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,7 +33,7 @@ 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, null, notifications.map(function (_ref2) {
     var id = _ref2.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.styles.js

@@ -29,7 +29,7 @@ export var Ul = /*#__PURE__*/styled.ul.withConfig({
 export var base = /*#__PURE__*/css([".", ",.", "{display:block;}"], popoverClasses.wrapper, popoverClasses.target);
 export var OuterLabel = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-2"
-})(["display:block;margin-bottom:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelOffset, constants.textfieldOuterLabelColor, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight);
+})(["display:block;margin-bottom:var(", ");color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], tokens.labelOffset, constants.textfieldOuterLabelColor, tokens.labelFontFamily, tokens.fontFamily, tokens.labelFontSize, tokens.fontSize, tokens.labelFontStyle, tokens.fontStyle, tokens.labelFontWeight, tokens.fontWeight, tokens.labelFontLetterSpacing, tokens.fontLetterSpacing, tokens.labelFontLineHeight, tokens.fontLineHeight);
 export var HelperText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-3"
-})(["margin-top:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.helperTextOffset, tokens.helperTextColor, constants.fontFamily, constants.fontSize, constants.fontStyle, constants.fontWeight, constants.fontLetterSpacing, constants.fontLineHeight);
+})(["margin-top:var(", ");color:var(", ");font-family:var(", ",var(", "));font-size:var(", ",var(", "));font-style:var(", ",var(", "));font-weight:var(", ",var(", "));letter-spacing:var(", ",var(", "));line-height:var(", ",var(", "));"], tokens.helperTextOffset, tokens.helperTextColor, tokens.helperTextFontFamily, constants.fontFamily, tokens.helperTextFontSize, constants.fontSize, tokens.helperTextFontStyle, constants.fontStyle, tokens.helperTextFontWeight, constants.fontWeight, tokens.helperTextFontLetterSpacing, constants.fontLetterSpacing, tokens.helperTextFontLineHeight, constants.fontLineHeight);

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

@@ -20,6 +20,18 @@ export var tokens = {
   fontWeight: '--plasma-select-font-weight',
   fontLetterSpacing: '--plasma-select-font-letter-spacing',
   fontLineHeight: '--plasma-select-font-line-height',
+  labelFontFamily: '--plasma-select-label-font-family',
+  labelFontSize: '--plasma-select-label-font-size',
+  labelFontStyle: '--plasma-select-label-font-style',
+  labelFontWeight: '--plasma-select-label-font-weight',
+  labelFontLetterSpacing: '--plasma-select-label-font-letter-spacing',
+  labelFontLineHeight: '--plasma-select-label-font-line-height',
+  helperTextFontFamily: '--plasma-select-helper-text-font-family',
+  helperTextFontSize: '--plasma-select-helper-text-font-size',
+  helperTextFontStyle: '--plasma-select-helper-text-font-style',
+  helperTextFontWeight: '--plasma-select-helper-text-font-weight',
+  helperTextFontLetterSpacing: '--plasma-select-helper-text-font-letter-spacing',
+  helperTextFontLineHeight: '--plasma-select-helper-text-font-line-height',
   itemHeight: '--plasma-select-item-height',
   itemBorderRadius: '--plasma-select-item-border-radius',
   itemPadding: '--plasma-select-item-padding',
@@ -27,6 +39,8 @@ export var tokens = {
   itemIconSize: '--plasma-select-item-icon-size',
   itemIconSizeTight: '--plasma-select-item-icon-size-tight',
   itemIconMargin: '--plasma-select-item-icon-margin',
+  itemBackground: '--plasma-select-item-background',
+  itemBackgroundHover: '--plasma-select-item-background-hover',
   checkboxTriggerSize: '--plasma-select-checkbox-trigger-size',
   checkboxTriggerSizeTight: '--plasma-select-checkbox-trigger-size-tight',
   checkboxTriggerBorderRadius: '--plasma-select-checkbox-trigger-border-radius',
@@ -78,7 +92,9 @@ export var tokens = {
   helperTextColor: '--plasma-select-helper-text-color',
   helperTextOffset: '--plasma-select-helper-text-offset',
   spinnerSize: '--plasma-select-spinner-size',
-  spinnerSizeTight: '--plasma-select-spinner-size-tight'
+  spinnerSizeTight: '--plasma-select-spinner-size-tight',
+  disclosureIconColor: '--plasma-select-disclosure-icon-color',
+  disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'
 };
 export var constants = {
   focusColor: '--surface-accent',

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -22,7 +22,7 @@ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
 })(["margin-left:auto;display:inline-flex;"]);
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
-})(["line-height:0;color:var(", ");&:hover{color:var(", ");}"], constants.disclosureIconColor, constants.disclosureIconColorHover);
+})(["line-height:0;color:var(", ",var(", "));&:hover{color:var(", ",var(", "));}"], tokens.disclosureIconColor, constants.disclosureIconColor, tokens.disclosureIconColorHover, constants.disclosureIconColorHover);
 export var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-5"
 })(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");& .", "{--plasma-checkbox-trigger-size:", ";--plasma-checkbox-trigger-border-radius:", ";}"], function (_ref) {
@@ -46,10 +46,10 @@ export var StyledText = /*#__PURE__*/styled.div.withConfig({
 });
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref6) {
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ",var(", "));color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ",var(", "));}&.", "{background:var(", ",var(", "));}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref6) {
   var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, constants.itemBackgroundHover, classes.dropdownItemIsActive, constants.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, tokens.itemBackground, constants.itemBackground, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, constants.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, constants.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),

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

@@ -1,18 +1,16 @@
 import React from 'react';
-import { notificationConfig, NotificationsProvider as Provider } from '../../../../components/Notification';
+import { noticationConfig, 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(notificationConfig, config);
+var mergedConfig = /*#__PURE__*/mergeConfig(noticationConfig, 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,
-    placement = _ref.placement;
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
   return /*#__PURE__*/React.createElement(Provider, {
     config: mergedConfig,
-    frame: frame,
-    placement: placement
+    frame: frame
   }, children);
 };

package/styled-components/es/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} />,
 };