@megafon/ui-core 3.0.0-beta.2 → 3.0.0-beta.6

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.5...@megafon/ui-core@3.0.0-beta.6) (2022-02-02)
+
+
+### Bug Fixes
+
+* color props values changes ([b279f2b](https://github.com/MegafonWebLab/megafon-ui/commit/b279f2b5af0edae92fe9825bbfa90a207cb8009a))
+* remove deprecated props values ([add76f3](https://github.com/MegafonWebLab/megafon-ui/commit/add76f38a9ebad8b5b6504dfe6aae862746f0dfc))
+* **colors:** rename green and purple to brandGreen and brandPurple ([2266734](https://github.com/MegafonWebLab/megafon-ui/commit/2266734336be1a0faa5f1736fdf39070442837b3))
+* **core:** fix build ui-core ([458c824](https://github.com/MegafonWebLab/megafon-ui/commit/458c824aab639e4802db261d0416b3cee58ac274))
+* **core:** separated colors.css file ([f0a4d72](https://github.com/MegafonWebLab/megafon-ui/commit/f0a4d728e0b30c5caeae5c8d9607e624fb4ea288))
+* **textlink:** fix color prop type ([6edcea0](https://github.com/MegafonWebLab/megafon-ui/commit/6edcea06ce26d137611aaf022d3ee6f7da295366))
+
+
+### BREAKING CHANGES
+
+* ContentArea: prop color change values from 'base' to 'white' and from 'content' to 'default';
+remove depreacted value 'freshAsphalt'
+Paragraph: prop color change values from 'base' to 'white' and from 'contend' to 'default';
+remove deprecared values 'freshAsphalt' and 'clearWhite'
+StoreBanner: prop theme change value from 'black' to 'default'; remove deprecated value 'clearWhite'
+* ContentArea, Paragraph, StoreBanner and Breadcrumbs components from no don't have
+freshAsphalt and clearWhite as values for colorize props
+
+
+
+
+
+# [3.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.4...@megafon/ui-core@3.0.0-beta.5) (2022-01-28)
+
+
+### Features
+
+* **header:** made header as a functional component ([81701ad](https://github.com/MegafonWebLab/megafon-ui/commit/81701ad87b6e9df2fe630bf4e183383264c0bb01))
+* **radiobutton:** made radiobutton as a functional component ([65406af](https://github.com/MegafonWebLab/megafon-ui/commit/65406afc90fd82f7eb0fdcbbe78569fc98164e78))
+
+
+
+
+
+# [3.0.0-beta.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.3...@megafon/ui-core@3.0.0-beta.4) (2022-01-27)
+
+**Note:** Version bump only for package @megafon/ui-core
+
+
+
+
+
+# [3.0.0-beta.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.2...@megafon/ui-core@3.0.0-beta.3) (2022-01-24)
+
+
+### Bug Fixes
+
+* **accordion:** add focus on arrow after tab press, add open/close accordion after enter press ([9bfa0ac](https://github.com/MegafonWebLab/megafon-ui/commit/9bfa0ac5348ac25c0e37a4df51e26e2dabde02ba))
+* **accordion:** change type of onClickAccordion prop ([9a150c5](https://github.com/MegafonWebLab/megafon-ui/commit/9a150c5de309547763a714b0eb630dfb386a8107))
+* **calendar/month:** add focus on month arrows, add enter press handlers ([63f1e47](https://github.com/MegafonWebLab/megafon-ui/commit/63f1e4761e57ed6d56464b632dce9fd5e77655e1))
+* **checkbox:** add focus on custom checkbox, add enter press handler ([83d111d](https://github.com/MegafonWebLab/megafon-ui/commit/83d111d0e4b41d3915bdd079bed4a7f9715ce7a5))
+* **checkbox:** add isChecked state, change type of onChange prop ([f535caf](https://github.com/MegafonWebLab/megafon-ui/commit/f535caf39a02ab6793d3c63b654a1f1f3e9b2b93))
+* **tooltip:** add check event function from ui-helpers ([a784ab4](https://github.com/MegafonWebLab/megafon-ui/commit/a784ab4f288124eb941fe8f52e46b2efc9aa2f82))
+
+
+### BREAKING CHANGES
+
+* **checkbox:** change type of onChange prop on (checked: boolean) => void
+* **accordion:** remove parameter 'title' in onClickAccordion prop
+* **tooltip:** change onOpen, onClose types; AccessibilityEventTypeNative from @megafon/ui-helpers
+
+
+
+
+
 # [3.0.0-beta.2](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.0.0-beta.1...@megafon/ui-core@3.0.0-beta.2) (2022-01-21)
 
 **Note:** Version bump only for package @megafon/ui-core

package/dist/es/colors/Colors.js

@@ -128,6 +128,19 @@ var Colors = function Colors() {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       setCurrentTheme = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      setLoad = _React$useState4[1];
+
+  React.useEffect(function () {
+    function load() {
+      setLoad(true);
+      document.removeEventListener('css-var-load', load);
+    }
+
+    document.addEventListener('css-var-load', load);
+  }, []);
+
   var getCurrentColorValue = function getCurrentColorValue(code) {
     return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
   };

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

@@ -20,7 +20,7 @@ export interface IAccordionProps extends IFilterDataAttrs {
         titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string | React.ReactNode | React.ReactNode[]) => void;
+    onClickAccordion?: (isOpened: boolean) => void;
 }
 declare const Accordion: React.FC<IAccordionProps>;
 export default Accordion;

package/dist/es/components/Accordion/Accordion.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs, checkEventIsClickOrEnterPress } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Collapse from "../Collapse/Collapse";
 import Header from "../Header/Header";
@@ -52,9 +52,11 @@ var Accordion = function Accordion(_ref) {
     setIsOpenedState(isOpened);
   }, [isOpened]);
 
-  var handleClickTitle = function handleClickTitle() {
-    onClickAccordion && onClickAccordion(!isOpenedState, title);
-    setIsOpenedState(!isOpenedState);
+  var handleClickTitle = function handleClickTitle(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      onClickAccordion && onClickAccordion(!isOpenedState);
+      setIsOpenedState(!isOpenedState);
+    }
   };
 
   var openedClassName = isOpenedState ? openedClass : undefined;
@@ -65,10 +67,13 @@ var Accordion = function Accordion(_ref) {
     }, [className, rootPropsClasses, openedClassName])
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('title-wrap', [titleWrapPropsClasses]),
-    onClick: handleClickTitle
+    onClick: handleClickTitle,
+    onKeyDown: handleClickTitle
   }, /*#__PURE__*/React.createElement(Header, {
     as: "h5"
   }, title), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "button",
     className: cn('icon-box', {
       open: isOpenedState
     })

package/dist/es/components/Calendar/components/Month/Month.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.array.concat";
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { checkEventIsClickOrEnterPress, cnCreate } from '@megafon/ui-helpers';
 import "./Month.css";
 import PropTypes from 'prop-types';
 
@@ -38,12 +38,22 @@ var Month = function Month(_ref) {
       goToNextMonth = _ref.goToNextMonth,
       children = _ref.children;
 
-  var handleArrowLeftClick = function handleArrowLeftClick() {
-    !isPrevMonthDisabled && goToPreviousMonth();
+  var handleArrowLeftClick = function handleArrowLeftClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isPrevMonthDisabled && goToPreviousMonth();
+    }
   };
 
-  var handleArrowRightClick = function handleArrowRightClick() {
-    !isNextMonthDisabled && goToNextMonth();
+  var handleArrowRightClick = function handleArrowRightClick(e) {
+    if (checkEventIsClickOrEnterPress(e)) {
+      !isNextMonthDisabled && goToNextMonth();
+    }
+  };
+
+  var getTabIndex = function getTabIndex(hasFocus) {
+    var tabIndexWithFocus = 0;
+    var tabIndexWithoutFocus = -1;
+    return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -51,16 +61,22 @@ var Month = function Month(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('header')
   }, /*#__PURE__*/React.createElement(ArrowLeft, {
+    role: "button",
+    tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
       disabled: isPrevMonthDisabled
     }),
+    onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('title')
   }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/React.createElement(ArrowRight, {
+    role: "button",
+    tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
       disabled: isNextMonthDisabled
     }),
+    onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
   })), /*#__PURE__*/React.createElement("div", {
     className: cn('weekday-labels')

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

@@ -1,6 +1,5 @@
-import * as React from 'react';
+import React from 'react';
 import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './Checkbox.less';
 export interface ICheckboxProps extends IFilterDataAttrs {
     /** Цвет чекбокса */
@@ -28,28 +27,7 @@ export interface ICheckboxProps extends IFilterDataAttrs {
     extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string;
     children: JSX.Element[] | Element[] | JSX.Element | Element | string;
     /** Обработчик изменения значения */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare class Checkbox extends React.Component<ICheckboxProps, {}> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        fontSize: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        name: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        checked: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        extraContent: PropTypes.Requireable<string | PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[]>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: Partial<ICheckboxProps>;
-    isTouch: boolean;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    onChange?: (checked: boolean) => void;
 }
+declare const Checkbox: React.FC<ICheckboxProps>;
 export default Checkbox;

package/dist/es/components/Checkbox/Checkbox.js

@@ -1,21 +1,8 @@
-import "core-js/modules/es.date.to-string";
 import "core-js/modules/es.function.name";
-import "core-js/modules/es.object.to-string";
-import "core-js/modules/es.reflect.construct";
-import "core-js/modules/es.regexp.to-string";
-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";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-
-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, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import React, { useState, useEffect } from 'react';
+import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Checkbox.css";
 
@@ -27,79 +14,79 @@ var CheckedIcon = function CheckedIcon(props) {
   }));
 };
 
+var CHANGE_KEY = 'change';
 var cn = cnCreate('mfui-checkbox');
 
-var Checkbox = /*#__PURE__*/function (_React$Component) {
-  _inherits(Checkbox, _React$Component);
-
-  var _super = _createSuper(Checkbox);
-
-  function Checkbox() {
-    var _this;
+var Checkbox = function Checkbox(_ref) {
+  var className = _ref.className,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+      name = _ref.name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      value = _ref.value,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      children = _ref.children,
+      extraContent = _ref.extraContent,
+      dataAttrs = _ref.dataAttrs,
+      classes = _ref.classes,
+      onChange = _ref.onChange;
+  var isTouch = detectTouch();
 
-    _classCallCheck(this, Checkbox);
+  var _useState = useState(checked),
+      _useState2 = _slicedToArray(_useState, 2),
+      isChecked = _useState2[0],
+      setIsChecked = _useState2[1];
 
-    _this = _super.apply(this, arguments);
-    _this.isTouch = detectTouch();
+  useEffect(function () {
+    setIsChecked(checked);
+  }, [checked]);
 
-    _this.handleChange = function (e) {
-      var onChange = _this.props.onChange;
-      onChange && onChange(e);
-    };
-
-    return _this;
-  }
-
-  _createClass(Checkbox, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          fontSize = _this$props.fontSize,
-          name = _this$props.name,
-          color = _this$props.color,
-          value = _this$props.value,
-          checked = _this$props.checked,
-          disabled = _this$props.disabled,
-          error = _this$props.error,
-          children = _this$props.children,
-          extraContent = _this$props.extraContent,
-          dataAttrs = _this$props.dataAttrs,
-          classes = _this$props.classes;
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: cn('', {
-          'font-size': fontSize,
-          color: color,
-          checked: checked,
-          disabled: disabled,
-          error: error
-        }, className)
-      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
-        className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-      }, /*#__PURE__*/React.createElement("label", {
-        className: cn('label', {
-          'no-touch': !this.isTouch
-        })
-      }, /*#__PURE__*/React.createElement("input", {
-        className: cn('input'),
-        type: "checkbox",
-        name: name,
-        value: value,
-        checked: checked,
-        onChange: this.handleChange,
-        disabled: disabled
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon])
-      }, /*#__PURE__*/React.createElement(CheckedIcon, {
-        className: cn('icon')
-      })), children), extraContent && /*#__PURE__*/React.createElement("span", {
-        className: cn('extra-content')
-      }, extraContent)));
+  var handleChange = function handleChange(e) {
+    if (checkEventIsClickOrEnterPress(e) || e.type === CHANGE_KEY) {
+      setIsChecked(!isChecked);
+      onChange && onChange(!isChecked);
     }
-  }]);
+  };
 
-  return Checkbox;
-}(React.Component);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('', {
+      'font-size': fontSize,
+      color: color,
+      checked: isChecked,
+      disabled: disabled,
+      error: error
+    }, className)
+  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
+  }, /*#__PURE__*/React.createElement("label", {
+    className: cn('label', {
+      'no-touch': !isTouch
+    })
+  }, /*#__PURE__*/React.createElement("input", {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": isChecked,
+    className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
+    onKeyDown: handleChange
+  }, /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children), extraContent && /*#__PURE__*/React.createElement("span", {
+    className: cn('extra-content')
+  }, extraContent)));
+};
 
 Checkbox.propTypes = {
   className: PropTypes.string,
@@ -110,14 +97,9 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
-  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
+  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
   dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onChange: PropTypes.func
 };
-Checkbox.defaultProps = {
-  color: 'dark',
-  fontSize: 'regular',
-  checked: false
-};
 export default Checkbox;

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,