@salutejs/plasma-new-hope 0.326.1-canary.2043.15849605311.0 → 0.327.0-canary.1741.15743877104.0

package/es/components/Notification/Notification.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useMemo } from 'react';
 import { cx } from '../../utils/index.js';
 import { IconCross } from '../_Icon/Icons/IconCross.js';
@@ -12,98 +12,91 @@ import { layouts } from './Notification.types.js';
 import { Wrapper, ContentBox, IconWrapper, TextBox, StyledTitle, StyledContent, ButtonsWrapper, CloseIconWrapper, StyledNotification } from './Notification.styles.js';
 import { getLayoutClass } from './utils/index.js';
 
-var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "onCloseButtonClick"];
-
 /**
  * Компонент для небольших уведомлений пользователя
  */
-var notificationRoot = function notificationRoot(Root) {
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    var _props$role = props.role,
-      role = _props$role === void 0 ? 'status' : _props$role,
-      title = props.title,
-      content = props.children,
-      actions = props.actions,
-      view = props.view,
-      size = props.size,
-      iconPlacement = props.iconPlacement,
-      _props$showCloseIcon = props.showCloseIcon,
-      showCloseIcon = _props$showCloseIcon === void 0 ? true : _props$showCloseIcon,
-      _props$layout = props.layout,
-      layout = _props$layout === void 0 ? layouts.vertical : _props$layout,
-      icon = props.icon,
-      closeIconType = props.closeIconType,
-      textColor = props.textColor,
-      titleColor = props.titleColor,
-      backgroundColor = props.backgroundColor,
-      width = props.width,
-      maxWidth = props.maxWidth,
-      onCloseButtonClick = props.onCloseButtonClick,
-      rest = _objectWithoutProperties(props, _excluded);
-    var ariaLive = 'polite';
-    var ariaAtomic = false;
-    if (role === 'alert') {
-      ariaLive = 'assertive';
-    } else if (role === 'status') {
-      ariaAtomic = true;
-    }
-    var isOneLine = !content || !title;
-    var oneLineClass = isOneLine ? classes.oneLine : undefined;
-    var withoutIconClass = icon ? undefined : classes.withoutIcon;
-    var withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;
-    var IconPlacementInternal = useMemo(function () {
-      return icon ? iconPlacement : undefined;
-    }, [icon, iconPlacement]);
-    return /*#__PURE__*/React.createElement(Root, _extends({
-      view: view,
-      size: size,
-      layout: layout,
-      closeIconType: closeIconType,
-      ref: ref,
-      role: role,
-      "aria-live": ariaLive,
-      "aria-atomic": ariaAtomic
-    }, rest), /*#__PURE__*/React.createElement(Wrapper, {
-      backgroundColor: backgroundColor,
-      width: width,
-      maxWidth: maxWidth,
-      className: cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)
-    }, /*#__PURE__*/React.createElement(ContentBox, {
-      iconPlacement: IconPlacementInternal,
-      className: cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)
-    }, icon && /*#__PURE__*/React.createElement(IconWrapper, {
-      iconPlacement: IconPlacementInternal,
-      className: cx(classes.icon, getLayoutClass(layout))
-    }, icon), /*#__PURE__*/React.createElement(TextBox, {
-      iconPlacement: IconPlacementInternal,
-      showCloseIcon: showCloseIcon,
-      className: cx(classes.textbox, getLayoutClass(layout))
-    }, title && /*#__PURE__*/React.createElement(StyledTitle, {
-      className: classes.title,
-      textColor: titleColor
-    }, title), content && /*#__PURE__*/React.createElement(StyledContent, {
-      className: classes.text,
-      textColor: textColor
-    }, content))), actions && /*#__PURE__*/React.createElement(ButtonsWrapper, {
-      iconPlacement: IconPlacementInternal,
-      className: cx(classes.buttonsWrapper, getLayoutClass(layout))
-    }, actions), showCloseIcon && /*#__PURE__*/React.createElement(CloseIconWrapper, {
-      view: "clear",
-      size: "s",
-      onClick: onCloseButtonClick,
-      className: cx(classes.closeIcon, getLayoutClass(layout))
-    }, closeIconType === 'default' ? /*#__PURE__*/React.createElement(IconCross, {
-      size: "s",
-      sizeCustomProperty: tokens.closeIconSize,
-      color: "inherit"
-    }) : /*#__PURE__*/React.createElement(IconCrossThin, {
-      size: "s",
-      sizeCustomProperty: tokens.closeIconSize,
-      color: "inherit"
-    }))));
-  });
-};
-var notificationConfig = {
+const notificationRoot = Root => /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    role = 'status',
+    title,
+    children: content,
+    actions,
+    view,
+    size,
+    iconPlacement,
+    showCloseIcon = true,
+    layout = layouts.vertical,
+    icon,
+    closeIconType,
+    textColor,
+    titleColor,
+    backgroundColor,
+    width,
+    maxWidth,
+    onCloseButtonClick,
+    ...rest
+  } = props;
+  let ariaLive = 'polite';
+  let ariaAtomic = false;
+  if (role === 'alert') {
+    ariaLive = 'assertive';
+  } else if (role === 'status') {
+    ariaAtomic = true;
+  }
+  const isOneLine = !content || !title;
+  const oneLineClass = isOneLine ? classes.oneLine : undefined;
+  const withoutIconClass = icon ? undefined : classes.withoutIcon;
+  const withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;
+  const IconPlacementInternal = useMemo(() => icon ? iconPlacement : undefined, [icon, iconPlacement]);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    view: view,
+    size: size,
+    layout: layout,
+    closeIconType: closeIconType,
+    ref: ref,
+    role: role,
+    "aria-live": ariaLive,
+    "aria-atomic": ariaAtomic
+  }, rest), /*#__PURE__*/React.createElement(Wrapper, {
+    backgroundColor: backgroundColor,
+    width: width,
+    maxWidth: maxWidth,
+    className: cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)
+  }, /*#__PURE__*/React.createElement(ContentBox, {
+    iconPlacement: IconPlacementInternal,
+    className: cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)
+  }, icon && /*#__PURE__*/React.createElement(IconWrapper, {
+    iconPlacement: IconPlacementInternal,
+    className: cx(classes.icon, getLayoutClass(layout))
+  }, icon), /*#__PURE__*/React.createElement(TextBox, {
+    iconPlacement: IconPlacementInternal,
+    showCloseIcon: showCloseIcon,
+    className: cx(classes.textbox, getLayoutClass(layout))
+  }, title && /*#__PURE__*/React.createElement(StyledTitle, {
+    className: classes.title,
+    textColor: titleColor
+  }, title), content && /*#__PURE__*/React.createElement(StyledContent, {
+    className: classes.text,
+    textColor: textColor
+  }, content))), actions && /*#__PURE__*/React.createElement(ButtonsWrapper, {
+    iconPlacement: IconPlacementInternal,
+    className: cx(classes.buttonsWrapper, getLayoutClass(layout))
+  }, actions), showCloseIcon && /*#__PURE__*/React.createElement(CloseIconWrapper, {
+    view: "clear",
+    size: "s",
+    onClick: onCloseButtonClick,
+    className: cx(classes.closeIcon, getLayoutClass(layout))
+  }, closeIconType === 'default' ? /*#__PURE__*/React.createElement(IconCross, {
+    size: "s",
+    sizeCustomProperty: tokens.closeIconSize,
+    color: "inherit"
+  }) : /*#__PURE__*/React.createElement(IconCrossThin, {
+    size: "s",
+    sizeCustomProperty: tokens.closeIconSize,
+    color: "inherit"
+  }))));
+});
+const notificationConfig = {
   name: 'Notification',
   tag: 'div',
   layout: notificationRoot,

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';\nimport { IconCrossThin } from '../_Icon/Icons/IconCrossThin';\n\nimport { classes, tokens } 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 { base as closeIconTypeCSS } from './variations/_closeIconType/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            closeIconType,\n            textColor,\n            titleColor,\n            backgroundColor,\n            width,\n            maxWidth,\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                closeIconType={closeIconType}\n                ref={ref}\n                role={role}\n                aria-live={ariaLive}\n                aria-atomic={ariaAtomic}\n                {...rest}\n            >\n                <Wrapper\n                    backgroundColor={backgroundColor}\n                    width={width}\n                    maxWidth={maxWidth}\n                    className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)}\n                >\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 && (\n                                <StyledTitle className={classes.title} textColor={titleColor}>\n                                    {title}\n                                </StyledTitle>\n                            )}\n                            {content && (\n                                <StyledContent className={classes.text} textColor={textColor}>\n                                    {content}\n                                </StyledContent>\n                            )}\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                            {closeIconType === 'default' ? (\n                                <IconCross size=\"s\" sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n                            ) : (\n                                <IconCrossThin size=\"s\" sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n                            )}\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        closeIconType: {\n            css: closeIconTypeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        layout: layouts.vertical,\n        size: 'xs',\n        closeIconType: 'default',\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","closeIconType","textColor","titleColor","backgroundColor","width","maxWidth","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","sizeCustomProperty","tokens","closeIconSize","color","IconCrossThin","notificationConfig","name","tag","base","StyledNotification","variations","css","layoutCSS","viewCSS","sizeCSS","closeIconTypeCSS","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';\nimport { IconCrossThin } from '../_Icon/Icons/IconCrossThin';\n\nimport { classes, tokens } 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 { base as closeIconTypeCSS } from './variations/_closeIconType/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            closeIconType,\n            textColor,\n            titleColor,\n            backgroundColor,\n            width,\n            maxWidth,\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                closeIconType={closeIconType}\n                ref={ref}\n                role={role}\n                aria-live={ariaLive}\n                aria-atomic={ariaAtomic}\n                {...rest}\n            >\n                <Wrapper\n                    backgroundColor={backgroundColor}\n                    width={width}\n                    maxWidth={maxWidth}\n                    className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)}\n                >\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 && (\n                                <StyledTitle className={classes.title} textColor={titleColor}>\n                                    {title}\n                                </StyledTitle>\n                            )}\n                            {content && (\n                                <StyledContent className={classes.text} textColor={textColor}>\n                                    {content}\n                                </StyledContent>\n                            )}\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                            {closeIconType === 'default' ? (\n                                <IconCross size=\"s\" sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n                            ) : (\n                                <IconCrossThin size=\"s\" sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n                            )}\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        closeIconType: {\n            css: closeIconTypeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        layout: layouts.vertical,\n        size: 'xs',\n        closeIconType: 'default',\n    },\n};\n"],"names":["notificationRoot","Root","forwardRef","props","ref","role","title","children","content","actions","view","size","iconPlacement","showCloseIcon","layout","layouts","vertical","icon","closeIconType","textColor","titleColor","backgroundColor","width","maxWidth","onCloseButtonClick","rest","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","sizeCustomProperty","tokens","closeIconSize","color","IconCrossThin","notificationConfig","name","tag","base","StyledNotification","variations","css","layoutCSS","viewCSS","sizeCSS","closeIconTypeCSS","defaults"],"mappings":"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"}

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

@@ -2,179 +2,134 @@ import './Notification.styles_1uyb7ob.css';
 import { styled } from '@linaria/react';
 import { tokens } from './Notification.tokens.js';
 import { placements } from './Notification.types.js';
-import { component, mergeConfig } from '../../engines/common.js';
+import { mergeConfig, component } from '../../engines/common.js';
 import { buttonConfig } from '../Button/Button.js';
 
-var StyledNotification = "sb12p";
-var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
-var Button = /*#__PURE__*/component(mergedButtonConfig);
-var _exp = function _exp() {
-  return Button;
-};
-var CloseIconWrapper = /*#__PURE__*/styled(_exp())({
+const StyledNotification = "sb12p";
+const mergedButtonConfig = mergeConfig(buttonConfig);
+const Button = component(mergedButtonConfig);
+const _exp = /*#__PURE__*/() => Button;
+const CloseIconWrapper = /*#__PURE__*/styled(_exp())({
   name: "CloseIconWrapper",
-  "class": "crvd7hm",
+  class: "crvd7hm",
   propsAsIs: true
 });
-var _exp8 = function _exp8() {
-  return function (_ref) {
-    var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "var(".concat(tokens.width, ")") : _ref$width;
-    return width;
-  };
-};
-var _exp9 = function _exp9() {
-  return function (_ref2) {
-    var maxWidth = _ref2.maxWidth;
-    return maxWidth || 'unset';
-  };
-};
-var _exp13 = function _exp13() {
-  return function (_ref3) {
-    var backgroundColor = _ref3.backgroundColor;
-    return backgroundColor || "var(".concat(tokens.background, ")");
-  };
-};
-var Wrapper = /*#__PURE__*/styled('div')({
+const _exp8 = /*#__PURE__*/() => ({
+  width = `var(${tokens.width})`
+}) => width;
+const _exp9 = /*#__PURE__*/() => ({
+  maxWidth
+}) => maxWidth || 'unset';
+const _exp13 = /*#__PURE__*/() => ({
+  backgroundColor
+}) => backgroundColor || `var(${tokens.background})`;
+const Wrapper = /*#__PURE__*/styled('div')({
   name: "Wrapper",
-  "class": "wg1ga5v",
+  class: "wg1ga5v",
   propsAsIs: false,
   vars: {
-    "wg1ga5v-0": [/*#__PURE__*/_exp8()],
-    "wg1ga5v-1": [/*#__PURE__*/_exp9()],
-    "wg1ga5v-2": [/*#__PURE__*/_exp13()]
+    "wg1ga5v-0": [_exp8()],
+    "wg1ga5v-1": [_exp9()],
+    "wg1ga5v-2": [_exp13()]
   }
 });
-var _exp17 = function _exp17() {
-  return function (_ref4) {
-    var iconPlacement = _ref4.iconPlacement;
-    return iconPlacement === placements.left ? "var(".concat(tokens.buttonsMarginLeft, ")") : 'unset';
-  };
-};
-var ButtonsWrapper = /*#__PURE__*/styled('div')({
+const _exp17 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => iconPlacement === placements.left ? `var(${tokens.buttonsMarginLeft})` : 'unset';
+const ButtonsWrapper = /*#__PURE__*/styled('div')({
   name: "ButtonsWrapper",
-  "class": "b1amsn8a",
+  class: "b1amsn8a",
   propsAsIs: false,
   vars: {
-    "b1amsn8a-0": [/*#__PURE__*/_exp17()]
+    "b1amsn8a-0": [_exp17()]
   }
 });
-var _exp23 = function _exp23() {
-  return function (_ref5) {
-    var iconColor = _ref5.iconColor;
-    return iconColor || "var(".concat(tokens.contentLeftIconColor, ")");
-  };
-};
-var _exp24 = function _exp24() {
-  return function (_ref6) {
-    var iconPlacement = _ref6.iconPlacement;
-    return iconPlacement === placements.left ? "var(".concat(tokens.contentLeftIconMargin, ")") : 'unset';
-  };
-};
-var _exp25 = function _exp25() {
-  return function (_ref7) {
-    var iconPlacement = _ref7.iconPlacement;
-    return iconPlacement === placements.top ? "var(".concat(tokens.contentTopIconMargin, ")") : 'unset';
-  };
-};
-var IconWrapper = /*#__PURE__*/styled('div')({
+const _exp23 = /*#__PURE__*/() => ({
+  iconColor
+}) => iconColor || `var(${tokens.contentLeftIconColor})`;
+const _exp24 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset';
+const _exp25 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => iconPlacement === placements.top ? `var(${tokens.contentTopIconMargin})` : 'unset';
+const IconWrapper = /*#__PURE__*/styled('div')({
   name: "IconWrapper",
-  "class": "i14raqr9",
+  class: "i14raqr9",
   propsAsIs: false,
   vars: {
-    "i14raqr9-0": [/*#__PURE__*/_exp23()],
-    "i14raqr9-1": [/*#__PURE__*/_exp24()],
-    "i14raqr9-2": [/*#__PURE__*/_exp25()]
+    "i14raqr9-0": [_exp23()],
+    "i14raqr9-1": [_exp24()],
+    "i14raqr9-2": [_exp25()]
   }
 });
-var _exp28 = function _exp28() {
-  return function (_ref8) {
-    var iconPlacement = _ref8.iconPlacement;
-    return iconPlacement === placements.left ? 'flex' : 'block';
-  };
-};
-var _exp29 = function _exp29() {
-  return function (_ref9) {
-    var iconPlacement = _ref9.iconPlacement;
-    return iconPlacement ? "var(".concat(tokens.contentPaddingTop, ")") : "var(".concat(tokens.contentPaddingTopWithoutIcon, ")");
-  };
-};
-var ContentBox = /*#__PURE__*/styled('div')({
+const _exp28 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => iconPlacement === placements.left ? 'flex' : 'block';
+const _exp29 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`;
+const ContentBox = /*#__PURE__*/styled('div')({
   name: "ContentBox",
-  "class": "c157peez",
+  class: "c157peez",
   propsAsIs: false,
   vars: {
-    "c157peez-0": [/*#__PURE__*/_exp28()],
-    "c157peez-1": [/*#__PURE__*/_exp29()]
+    "c157peez-0": [_exp28()],
+    "c157peez-1": [_exp29()]
   }
 });
-var _exp35 = function _exp35() {
-  return function (_ref10) {
-    var iconPlacement = _ref10.iconPlacement;
-    return !iconPlacement || iconPlacement === placements.top ? "var(".concat(tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(tokens.textboxPaddingTop, ")");
-  };
-};
-var _exp36 = function _exp36() {
-  return function (_ref11) {
-    var showCloseIcon = _ref11.showCloseIcon,
-      iconPlacement = _ref11.iconPlacement;
-    return showCloseIcon && iconPlacement !== placements.top ? "var(".concat(tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(tokens.textboxPaddingRight, ")");
-  };
-};
-var TextBox = /*#__PURE__*/styled('div')({
+const _exp35 = /*#__PURE__*/() => ({
+  iconPlacement
+}) => !iconPlacement || iconPlacement === placements.top ? `var(${tokens.textboxPaddingTopWithTopIcon})` : `var(${tokens.textboxPaddingTop})`;
+const _exp36 = /*#__PURE__*/() => ({
+  showCloseIcon,
+  iconPlacement
+}) => showCloseIcon && iconPlacement !== placements.top ? `var(${tokens.textboxPaddingRightWithCloseIcon})` : `var(${tokens.textboxPaddingRight})`;
+const TextBox = /*#__PURE__*/styled('div')({
   name: "TextBox",
-  "class": "t1vmb0f2",
+  class: "t1vmb0f2",
   propsAsIs: false,
   vars: {
-    "t1vmb0f2-0": [/*#__PURE__*/_exp35()],
-    "t1vmb0f2-1": [/*#__PURE__*/_exp36()]
+    "t1vmb0f2-0": [_exp35()],
+    "t1vmb0f2-1": [_exp36()]
   }
 });
-var _exp46 = function _exp46() {
-  return function (_ref12) {
-    var textColor = _ref12.textColor;
-    return textColor || "var(".concat(tokens.titleColor, ")");
-  };
-};
-var StyledTitle = /*#__PURE__*/styled('div')({
+const _exp46 = /*#__PURE__*/() => ({
+  textColor
+}) => textColor || `var(${tokens.titleColor})`;
+const StyledTitle = /*#__PURE__*/styled('div')({
   name: "StyledTitle",
-  "class": "s1k4e58v",
+  class: "s1k4e58v",
   propsAsIs: false,
   vars: {
-    "s1k4e58v-0": [/*#__PURE__*/_exp46()]
+    "s1k4e58v-0": [_exp46()]
   }
 });
-var _exp54 = function _exp54() {
-  return function (_ref13) {
-    var textColor = _ref13.textColor;
-    return textColor || "var(".concat(tokens.contentColor, ")");
-  };
-};
-var StyledContent = /*#__PURE__*/styled('div')({
+const _exp54 = /*#__PURE__*/() => ({
+  textColor
+}) => textColor || `var(${tokens.contentColor})`;
+const StyledContent = /*#__PURE__*/styled('div')({
   name: "StyledContent",
-  "class": "s92kmpm",
+  class: "s92kmpm",
   propsAsIs: false,
   vars: {
-    "s92kmpm-0": [/*#__PURE__*/_exp54()]
+    "s92kmpm-0": [_exp54()]
   }
 });
-var StyledItemWrapper = /*#__PURE__*/styled('div')({
+const StyledItemWrapper = /*#__PURE__*/styled('div')({
   name: "StyledItemWrapper",
-  "class": "s18m0x6v",
+  class: "s18m0x6v",
   propsAsIs: false
 });
-var _exp61 = function _exp61() {
-  return function (_ref14) {
-    var placement = _ref14.placement;
-    return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
-  };
-};
-var StyledRoot = /*#__PURE__*/styled('div')({
+const _exp61 = /*#__PURE__*/() => ({
+  placement
+}) => placement === 'bottom-left' ? 'flex-start' : 'flex-end';
+const StyledRoot = /*#__PURE__*/styled('div')({
   name: "StyledRoot",
-  "class": "sfe5ql2",
+  class: "sfe5ql2",
   propsAsIs: false,
   vars: {
-    "sfe5ql2-0": [/*#__PURE__*/_exp61()]
+    "sfe5ql2-0": [_exp61()]
   }
 });
 

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 type { CSSProperties } from 'react';\nimport { 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: var(${tokens.closeIconButtonSize});\n    height: var(${tokens.closeIconButtonSize});\n    align-self: var(${tokens.horisontalIconCloseAlignSelf});\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    backgroundColor?: string;\n    width?: CSSProperties['width'];\n    maxWidth?: CSSProperties['maxWidth'];\n}>`\n    position: relative;\n    width: ${({ width = `var(${tokens.width})` }) => width};\n    max-width: ${({ maxWidth }) => maxWidth || 'unset'};\n\n    border-radius: var(${tokens.borderRadius});\n    border: var(${tokens.borderWidth}) solid var(${tokens.borderColor});\n\n    background: ${({ backgroundColor }) => backgroundColor || `var(${tokens.background})`};\n    box-sizing: border-box;\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    align-self: var(${tokens.horisontalActionsAlignSelf});\n\n    &.${classes.horizontal} {\n        margin-top: unset;\n        margin-left: unset;\n    }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType & { iconColor?: string }>`\n    width: var(${tokens.contentLeftIconSize});\n    height: var(${tokens.contentLeftIconSize});\n    align-self: var(${tokens.horisontalIconLeftAlignSelf});\n    color: ${({ iconColor }) => iconColor || `var(${tokens.contentLeftIconColor})`};\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<{ textColor?: string }>`\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    color: ${({ textColor }) => textColor || `var(${tokens.titleColor})`};\n`;\n\nexport const StyledContent = styled.div<{ textColor?: string }>`\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: ${({ textColor }) => textColor || `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        &.${classes.notificationTopToCenterAnimation} {\n            animation: 0.4s showTopToCenterAnimation ease-out;\n        }\n\n        &.${classes.notificationBottomToCenterAnimation} {\n            animation: 0.4s showBottomToCenterAnimation 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 showTopToCenterAnimation {\n        0% {\n            transform: translateY(-100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateY(0);\n            opacity: 1;\n        }\n    }\n\n    @keyframes showBottomToCenterAnimation {\n        0% {\n            transform: translateY(100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateY(0);\n            opacity: 1;\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","_exp8","_ref","_ref$width","width","concat","tokens","_exp9","_ref2","maxWidth","_exp13","_ref3","backgroundColor","background","Wrapper","vars","_exp17","_ref4","iconPlacement","placements","left","buttonsMarginLeft","ButtonsWrapper","_exp23","_ref5","iconColor","contentLeftIconColor","_exp24","_ref6","contentLeftIconMargin","_exp25","_ref7","top","contentTopIconMargin","IconWrapper","_exp28","_ref8","_exp29","_ref9","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp35","_ref10","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp36","_ref11","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","_exp46","_ref12","textColor","titleColor","StyledTitle","_exp54","_ref13","contentColor","StyledContent","StyledItemWrapper","_exp61","_ref14","placement","StyledRoot"],"mappings":"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"}
+{"version":3,"file":"Notification.styles.js","sources":["../../../src/components/Notification/Notification.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { 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: var(${tokens.closeIconButtonSize});\n    height: var(${tokens.closeIconButtonSize});\n    align-self: var(${tokens.horisontalIconCloseAlignSelf});\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    backgroundColor?: string;\n    width?: CSSProperties['width'];\n    maxWidth?: CSSProperties['maxWidth'];\n}>`\n    position: relative;\n    width: ${({ width = `var(${tokens.width})` }) => width};\n    max-width: ${({ maxWidth }) => maxWidth || 'unset'};\n\n    border-radius: var(${tokens.borderRadius});\n    border: var(${tokens.borderWidth}) solid var(${tokens.borderColor});\n\n    background: ${({ backgroundColor }) => backgroundColor || `var(${tokens.background})`};\n    box-sizing: border-box;\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    align-self: var(${tokens.horisontalActionsAlignSelf});\n\n    &.${classes.horizontal} {\n        margin-top: unset;\n        margin-left: unset;\n    }\n`;\n\nexport const IconWrapper = styled.div<IconPlacementType & { iconColor?: string }>`\n    width: var(${tokens.contentLeftIconSize});\n    height: var(${tokens.contentLeftIconSize});\n    align-self: var(${tokens.horisontalIconLeftAlignSelf});\n    color: ${({ iconColor }) => iconColor || `var(${tokens.contentLeftIconColor})`};\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<{ textColor?: string }>`\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    color: ${({ textColor }) => textColor || `var(${tokens.titleColor})`};\n`;\n\nexport const StyledContent = styled.div<{ textColor?: string }>`\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: ${({ textColor }) => textColor || `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        &.${classes.notificationTopToCenterAnimation} {\n            animation: 0.4s showTopToCenterAnimation ease-out;\n        }\n\n        &.${classes.notificationBottomToCenterAnimation} {\n            animation: 0.4s showBottomToCenterAnimation 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 showTopToCenterAnimation {\n        0% {\n            transform: translateY(-100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateY(0);\n            opacity: 1;\n        }\n    }\n\n    @keyframes showBottomToCenterAnimation {\n        0% {\n            transform: translateY(100%);\n            opacity: 0;\n        }\n\n        100% {\n            transform: translateY(0);\n            opacity: 1;\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","_exp8","width","tokens","_exp9","maxWidth","_exp13","backgroundColor","background","Wrapper","vars","_exp17","iconPlacement","placements","left","buttonsMarginLeft","ButtonsWrapper","_exp23","iconColor","contentLeftIconColor","_exp24","contentLeftIconMargin","_exp25","top","contentTopIconMargin","IconWrapper","_exp28","_exp29","contentPaddingTop","contentPaddingTopWithoutIcon","ContentBox","_exp35","textboxPaddingTopWithTopIcon","textboxPaddingTop","_exp36","showCloseIcon","textboxPaddingRightWithCloseIcon","textboxPaddingRight","TextBox","_exp46","textColor","titleColor","StyledTitle","_exp54","contentColor","StyledContent","StyledItemWrapper","_exp61","placement","StyledRoot"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var classes = {
+const classes = {
   textbox: 'notification-textbox',
   contentBox: 'notification-content-box',
   title: 'notification-title',
@@ -18,7 +18,7 @@ var classes = {
   notificationTopToCenterAnimation: 'notification-top-to-center-animation',
   notificationBottomToCenterAnimation: 'notification-bottom-to-center-animation'
 };
-var tokens = {
+const tokens = {
   background: '--plasma-notification-background',
   padding: '--plasma-notification-padding',
   horizontalLayoutPadding: '--plasma-notification-horizontal-layout-padding',