@megafon/ui-core 2.5.0 → 3.0.0-beta.11

package/dist/es/components/Carousel/Carousel.js

@@ -122,8 +122,7 @@ var Carousel = function Carousel(_ref) {
       return;
     }
 
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -133,7 +132,7 @@ var Carousel = function Carousel(_ref) {
     }
 
     swiperInstance.slidePrev();
-    onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
+    onPrevClick && onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onPrevClick, increaseAutoplayDelay]);
   var handleNextClick = React.useCallback(function () {
@@ -142,14 +141,14 @@ var Carousel = function Carousel(_ref) {
     }
 
     swiperInstance.slideNext();
-    onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
+    onNextClick && onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, onNextClick, increaseAutoplayDelay]);
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
     setLocked(swiper.isBeginning && swiper.isEnd);
-    getSwiper === null || getSwiper === void 0 ? void 0 : getSwiper(swiper);
-  }, [getSwiper]);
+    getSwiper && getSwiper(swiper);
+  }, []);
   var handleReachBeginnig = React.useCallback(function () {
     setBeginning(true);
   }, []);
@@ -170,7 +169,7 @@ var Carousel = function Carousel(_ref) {
     var realIndex = _ref4.realIndex,
         previousIndex = _ref4.previousIndex,
         params = _ref4.params;
-    onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
+    onChange && onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
 
   var handleRootClick = function handleRootClick(e) {
@@ -183,17 +182,15 @@ var Carousel = function Carousel(_ref) {
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
-  var handleSwiperResize = React.useCallback(function () {
-    throttle(function (swiper) {
-      setBeginning(swiper.isBeginning);
-      setEnd(swiper.isEnd);
-      setLocked(swiper.isBeginning && swiper.isEnd);
+  var handleSwiperResize = React.useCallback(throttle(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
 
-      if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
-        swiper.slides.css('width', '');
-      }
-    }, throttleTime.resize);
-  }, []);
+    if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
+      swiper.slides.css('width', '');
+    }
+  }, throttleTime.resize), []);
 
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
@@ -218,7 +215,7 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
       'nav-theme': navTheme
@@ -226,7 +223,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleRootClick
   }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
     containerModifierClass: containerModifier
-  } : {}, {
+  } : {}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slider), {
     className: cn('swiper', {
       'default-inner-indents': !innerIndentsClass
     }, [innerIndentsClass, containerClass]),
@@ -256,13 +253,13 @@ var Carousel = function Carousel(_ref) {
     onTouchEnd: increaseAutoplayDelay,
     onResize: handleSwiperResize
   }), React.Children.map(children, function (child, i) {
-    return /*#__PURE__*/React.createElement(SwiperSlide, {
+    return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       key: i,
       className: cn('slide', slideClass),
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
-    }, child);
-  })), /*#__PURE__*/React.createElement(NavArrow, {
+    }), child);
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -270,7 +267,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: ArrowTheme.PURPLE
-  }), /*#__PURE__*/React.createElement(NavArrow, {
+  })), /*#__PURE__*/React.createElement(NavArrow, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -279,7 +276,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: ArrowTheme.PURPLE
-  }));
+  })));
 };
 
 Carousel.propTypes = {
@@ -296,7 +293,13 @@ Carousel.propTypes = {
     next: PropTypes.string,
     slide: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    slider: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired),
+    slide: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   slidesSettings: PropTypes.objectOf(checkBreakpointsPropTypes({
     slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
     spaceBetween: PropTypes.number.isRequired,

package/dist/es/components/Checkbox/Checkbox.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-checkbox {
   margin: 0 5px 12px 5px;
 }
@@ -89,32 +82,32 @@ h5 {
   top: 0;
 }
 .mfui-checkbox_color_dark .mfui-checkbox__custom-input {
-  border-color: #D8D8D8;
+  border-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #404D46 !important;
-  background-color: #404D46;
+  border-color: var(--buttonDown) !important;
+  background-color: var(--buttonDown);
 }
 .mfui-checkbox_color_dark .mfui-checkbox__icon {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
-  border-color: #00B956;
-  color: #FFFFFF;
-  background-color: #00B956;
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #404D46 !important;
+  background-color: var(--buttonDown) !important;
 }
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
   cursor: default;
@@ -122,17 +115,17 @@ h5 {
 }
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__custom-input,
 .mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label:active .mfui-checkbox__custom-input {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1);
 }
 .mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-checkbox_color_light {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-checkbox_color_light .mfui-checkbox__custom-input {
-  border-color: #FFFFFF;
-  color: #00B956;
-  background-color: #FFFFFF;
+  border-color: var(--stcWhite);
+  color: var(--brandGreen);
+  background-color: var(--stcWhite);
 }

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

@@ -1,8 +1,6 @@
-import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
+import React from 'react';
 import './Checkbox.less';
-export interface ICheckboxProps extends IFilterDataAttrs {
+export interface ICheckboxProps {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
     /** Дополнительный класс корневого элемента */
@@ -12,6 +10,13 @@ export interface ICheckboxProps extends IFilterDataAttrs {
         inner?: string;
         icon?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+        extraContent?: Record<string, string>;
+    };
     /** Размер текста */
     fontSize?: 'regular' | 'small';
     /** Имя компонента в DOM */
@@ -28,28 +33,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 === null || onChange === void 0 ? void 0 : 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 === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
+    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", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
+    className: cn('extra-content')
+  }), extraContent)));
+};
 
 Checkbox.propTypes = {
   className: PropTypes.string,
@@ -110,14 +97,14 @@ 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]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    customInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    extraContent: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  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]),
   onChange: PropTypes.func
 };
-Checkbox.defaultProps = {
-  color: 'dark',
-  fontSize: 'regular',
-  checked: false
-};
 export default Checkbox;

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

@@ -1,23 +1,35 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-declare type DefaultProps = {
+declare type CollapseDefaultProps = {
     animation?: boolean;
     animationDuration?: number;
 };
-declare type Props = DefaultProps & {
+declare type CollapseProps = CollapseDefaultProps & {
     className: string;
     classNameContainer: string;
     isOpened: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
     children: React.ReactNode;
 };
 declare const Collapse: {
-    (props: Props): React.FunctionComponentElement<Props>;
+    (props: CollapseProps): React.FunctionComponentElement<CollapseProps>;
     propTypes: {
         className: PropTypes.Requireable<string>;
         classNameContainer: PropTypes.Requireable<string>;
         isOpened: PropTypes.Validator<boolean>;
         animationDuration: PropTypes.Requireable<number>;
         animation: PropTypes.Requireable<boolean>;
+        dataAttrs: PropTypes.Requireable<PropTypes.InferProps<{
+            root: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+            inner: PropTypes.Requireable<{
+                [x: string]: string;
+            }>;
+        }>>;
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
 };

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

@@ -5,34 +5,29 @@ 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: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-content-area_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area_color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-content-area_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .mfui-content-area_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area_color_spbSky2 {
-  background-color: #D8D8D8;
-}
-.mfui-content-area_color_content,
-.mfui-content-area_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--spbSky2);
 }
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
@@ -82,32 +77,27 @@ 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: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-content-area__inner_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area__inner_color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-content-area__inner_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .mfui-content-area__inner_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area__inner_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area__inner_color_spbSky2 {
-  background-color: #D8D8D8;
-}
-.mfui-content-area__inner_color_content,
-.mfui-content-area__inner_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area__inner_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--spbSky2);
 }

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

@@ -1,19 +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";
-    readonly FULL_BLACK: "fullBlack";
-    /** @deprecated */
-    readonly WHITE: "white";
-    /** @deprecated */
-    readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {