@megafon/ui-core 3.0.0-beta.3 → 3.0.0-beta.7

package/dist/es/components/Collapse/Collapse.js

@@ -1,6 +1,8 @@
 import "core-js/modules/web.timers";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
+import { filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 var BROWSER_DELAY = 100;
 
@@ -12,7 +14,8 @@ var Collapse = function Collapse(props) {
       _props$animationDurat = props.animationDuration,
       animationDuration = _props$animationDurat === void 0 ? 300 : _props$animationDurat,
       children = props.children,
-      isOpened = props.isOpened;
+      isOpened = props.isOpened,
+      dataAttrs = props.dataAttrs;
   var canUpdate = React.useRef(false);
   var timer = React.useRef(undefined);
   var rootNode = React.useRef(null);
@@ -59,7 +62,7 @@ var Collapse = function Collapse(props) {
       return clearTimeout(timer.current);
     };
   }, [isOpened, duration]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: className,
     style: {
       overflow: 'hidden',
@@ -67,9 +70,9 @@ var Collapse = function Collapse(props) {
       transition: transition
     },
     ref: rootNode
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
     className: classNameContainer
-  }, children));
+  }), children));
 };
 
 Collapse.propTypes = {
@@ -78,6 +81,10 @@ Collapse.propTypes = {
   isOpened: PropTypes.bool.isRequired,
   animationDuration: PropTypes.number,
   animation: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   children: PropTypes.node.isRequired
 };
 export default Collapse;

package/dist/es/components/ContentArea/ContentArea.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,
@@ -52,9 +5,11 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-content-area_color_base,
+.mfui-content-area_color_default {
+  background-color: var(--content);
+}
 .mfui-content-area_color_white {
-  background-color: var(--base);
+  background-color: var(--stcWhite);
 }
 .mfui-content-area_color_transparent {
   background-color: transparent;
@@ -74,10 +29,6 @@ h5 {
 .mfui-content-area_color_spbSky2 {
   background-color: var(--spbSky2);
 }
-.mfui-content-area_color_content,
-.mfui-content-area_color_freshAsphalt {
-  background-color: var(--content);
-}
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
@@ -126,9 +77,11 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
-.mfui-content-area__inner_color_base,
+.mfui-content-area__inner_color_default {
+  background-color: var(--content);
+}
 .mfui-content-area__inner_color_white {
-  background-color: var(--base);
+  background-color: var(--stcWhite);
 }
 .mfui-content-area__inner_color_transparent {
   background-color: transparent;
@@ -148,7 +101,3 @@ h5 {
 .mfui-content-area__inner_color_spbSky2 {
   background-color: var(--spbSky2);
 }
-.mfui-content-area__inner_color_content,
-.mfui-content-area__inner_color_freshAsphalt {
-  background-color: var(--content);
-}

package/dist/es/components/ContentArea/ContentArea.d.ts

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    readonly BASE: "base";
+    readonly DEFAULT: "default";
+    readonly WHITE: "white";
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
     readonly PURPLE: "purple";
     readonly SPB_SKY_0: "spbSky0";
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
-    readonly CONTENT: "content";
-    /** @deprecated */
-    readonly WHITE: "white";
-    /** @deprecated */
-    readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,26 +1,17 @@
-import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.includes";
 import "core-js/modules/es.object.values";
-import "core-js/modules/es.string.includes";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
-  BASE: 'base',
+  DEFAULT: 'default',
+  WHITE: 'white',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2',
-  CONTENT: 'content',
-
-  /** @deprecated */
-  WHITE: 'white',
-
-  /** @deprecated */
-  FRESH_ASPHALT: 'freshAsphalt'
+  SPB_SKY_2: 'spbSky2'
 };
 var DisableIndents = {
   MOBILE: 'mobile',
@@ -49,26 +40,6 @@ var ContentArea = function ContentArea(_ref) {
   }, children));
 };
 
-var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
-  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
-  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
-  var propValue = props[propName];
-
-  if (propValue && !Object.values(BACKGROUND_COLORS).includes(propValue)) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        expected one of [").concat(Object.values(BACKGROUND_COLORS), "]"));
-  }
-
-  if (propValue && propValue === deprecatedBlackValue) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
-  }
-
-  if (propValue && propValue === deprecatedWhiteValue) {
-    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.BASE, "'"));
-  }
-
-  return null;
-};
-
 ContentArea.propTypes = {
   disableIndents: PropTypes.oneOf(Object.values(DisableIndents)),
   className: PropTypes.string,
@@ -76,12 +47,8 @@ ContentArea.propTypes = {
     root: PropTypes.string,
     inner: PropTypes.string
   }),
-  outerBackgroundColor: function outerBackgroundColor(props, propName, componentName) {
-    return colorsCustomPropTypes(props, propName, componentName);
-  },
-  innerBackgroundColor: function innerBackgroundColor(props, propName, componentName) {
-    return colorsCustomPropTypes(props, propName, componentName);
-  }
+  outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
+  innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };
 ContentArea.defaultProps = {
   outerBackgroundColor: 'transparent',

package/dist/es/components/Counter/Counter.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,

package/dist/es/components/Grid/Grid.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,

package/dist/es/components/Header/Header.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './Header.less';
-interface IHeaderProps extends IFilterDataAttrs {
+interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Цвет */
@@ -13,26 +11,14 @@ interface IHeaderProps extends IFilterDataAttrs {
     addition?: JSX.Element;
     /** Дополнительный класс корневого элемента */
     className?: string | string[];
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Горизонтальное выравнивание */
     hAlign?: 'inherit' | 'left' | 'center' | 'right';
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }
-declare class Header extends React.Component<IHeaderProps, {}> {
-    static propTypes: {
-        as: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        margin: PropTypes.Requireable<boolean>;
-        addition: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        hAlign: PropTypes.Requireable<string>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string | null | undefined;
-        }>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    static defaultProps: Partial<IHeaderProps>;
-    renderAddition(): JSX.Element;
-    render(): JSX.Element;
-}
+declare const Header: React.FC<IHeaderProps>;
 export default Header;

package/dist/es/components/Header/Header.js

@@ -1,68 +1,36 @@
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Header.css";
 var cn = cnCreate('mfui-header');
 
-var Header = /*#__PURE__*/function (_React$Component) {
-  _inherits(Header, _React$Component);
-
-  var _super = _createSuper(Header);
-
-  function Header() {
-    _classCallCheck(this, Header);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(Header, [{
-    key: "renderAddition",
-    value: function renderAddition() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('addition')
-      }, this.props.addition);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          color = _this$props.color,
-          margin = _this$props.margin,
-          level = _this$props.as,
-          hAlign = _this$props.hAlign,
-          onClick = _this$props.onClick,
-          dataAttrs = _this$props.dataAttrs,
-          className = _this$props.className;
-      var ElementType = level;
-      return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs), {
-        className: cn({
-          color: color,
-          margin: margin,
-          level: level,
-          'h-align': hAlign
-        }, className),
-        onClick: onClick
-      }), this.props.children, this.props.addition && this.renderAddition());
-    }
-  }]);
-
-  return Header;
-}(React.Component);
+var Header = function Header(_ref) {
+  var addition = _ref.addition,
+      _ref$as = _ref.as,
+      level = _ref$as === void 0 ? 'h1' : _ref$as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      dataAttrs = _ref.dataAttrs,
+      _ref$hAlign = _ref.hAlign,
+      hAlign = _ref$hAlign === void 0 ? 'inherit' : _ref$hAlign,
+      margin = _ref.margin,
+      onClick = _ref.onClick;
+  var ElementType = level;
+  return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      margin: margin,
+      level: level,
+      'h-align': hAlign
+    }, className),
+    onClick: onClick
+  }), children, addition && /*#__PURE__*/React.createElement("div", {
+    className: cn('addition')
+  }, addition));
+};
 
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
@@ -70,13 +38,9 @@ Header.propTypes = {
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),
-  dataAttrs: PropTypes.objectOf(PropTypes.string),
-  onClick: PropTypes.func,
-  children: PropTypes.node
-};
-Header.defaultProps = {
-  as: 'h1',
-  color: 'default',
-  hAlign: 'inherit'
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClick: PropTypes.func
 };
 export default Header;

package/dist/es/components/InputLabel/InputLabel.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import './InputLabel.less';
 export interface IInputLabelProps {
     htmlFor?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const InputLabel: React.FC<IInputLabelProps>;
 export default InputLabel;

package/dist/es/components/InputLabel/InputLabel.js

@@ -1,19 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./InputLabel.css";
 var cn = cnCreate('mfui-input-label');
 
 var InputLabel = function InputLabel(_ref) {
   var htmlFor = _ref.htmlFor,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("label", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     htmlFor: htmlFor,
     className: cn()
-  }, children);
+  }), children);
 };
 
 InputLabel.propTypes = {
-  htmlFor: PropTypes.string
+  htmlFor: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default InputLabel;

package/dist/es/components/Link/Link.d.ts

@@ -8,11 +8,15 @@ export interface ILinkProps {
     target?: '_self' | '_blank' | '_parent' | '_top';
     /** rel - аргумент тега <a> */
     rel?: string;
-    /** Обработчик клика */
-    onClick?: (e: React.MouseEvent<EventTarget>) => void;
     /** Добавление атрибута download */
     download?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
+    /** Обработчик клика */
+    onClick?: (e: React.MouseEvent<EventTarget>) => void;
 }
 declare const Link: React.FC<ILinkProps>;
 export default Link;

package/dist/es/components/Link/Link.js

@@ -1,11 +1,32 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
+import _extends from "@babel/runtime/helpers/extends";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 import * as React from 'react';
+import { filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 
-var Link = function Link(props) {
+var Link = function Link(_a) {
+  var dataAttrs = _a.dataAttrs,
+      props = __rest(_a, ["dataAttrs"]);
+
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    React.createElement("a", props)
+    React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), props))
   );
 };
 
@@ -14,8 +35,11 @@ Link.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node]),
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rel: PropTypes.string,
-  onClick: PropTypes.func,
-  download: PropTypes.bool
+  download: PropTypes.bool,
+  onClick: PropTypes.func
 };
 export default Link;

package/dist/es/components/Notification/Notification.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,

package/dist/es/components/Notification/Notification.d.ts

@@ -37,6 +37,14 @@ export interface INotificationProps {
     target?: '_self' | '_blank' | '_parent' | '_top';
     /** Иконка */
     icon?: JSX.Element;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+        close?: Record<string, string>;
+    };
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */