@megafon/ui-core 3.0.2 → 3.3.0

package/dist/lib/components/Banner/Banner.js

@@ -187,6 +187,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper'),
     loop: loop,
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
+    watchSlidesVisibility: true,
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginning,
     onReachEnd: handleReachEnd,
@@ -199,14 +200,20 @@ var Banner = function Banner(_ref) {
       key: i,
       className: cn('slide', classes === null || classes === void 0 ? void 0 : classes.slide)
     }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev), {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+    },
     className: cn('arrow', {
       prev: true
     }, [classes.arrow]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext), {
+  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+    },
     className: cn('arrow', {
       next: true
     }, [classes.arrow]),
@@ -214,7 +221,7 @@ var Banner = function Banner(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: navArrowTheme
-  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pagination), {
     className: cn('pagination', {
       theme: navTheme,
       'bottom-offset': withPaginationBottomOffset

package/dist/lib/components/Button/Button.css

@@ -302,14 +302,14 @@
   fill: var(--stcWhite);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white {
-  --base7: rgba(255, 255, 255, 0.07);
-  --base14: rgba(255, 255, 255, 0.14);
+  --stcWhite7: rgba(255, 255, 255, 0.07);
+  --stcWhite14: rgba(255, 255, 255, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):hover {
-  background-color: var(--base7);
+  background-color: var(--stcWhite7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white:not(.mfui-button_loading):active {
-  background-color: var(--base14);
+  background-color: var(--stcWhite14);
 }
 .mfui-button_type_outline.mfui-button_theme_black {
   color: var(--stcBlack);
@@ -321,14 +321,14 @@
   fill: var(--stcBlack);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black {
-  --content7: rgba(51, 51, 51, 0.07);
-  --content14: rgba(51, 51, 51, 0.14);
+  --stcBlack7: rgba(51, 51, 51, 0.07);
+  --stcBlack14: rgba(51, 51, 51, 0.14);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):hover {
-  background-color: var(--content7);
+  background-color: var(--stcBlack7);
 }
 .mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_black:not(.mfui-button_loading):active {
-  background-color: var(--content14);
+  background-color: var(--stcBlack14);
 }
 .mfui-button_full-width {
   display: block;

package/dist/lib/components/Calendar/Calendar.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
 import './Calendar.less';
 export interface ICalendarProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        day?: Record<string, string>;
+        month?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     /** Переключение календаря в режим выбора одной даты вместо периода */
     isSingleDate?: boolean;
     /** Классы для модификации компонента */

package/dist/lib/components/Calendar/Calendar.js

@@ -90,7 +90,8 @@ var monthLabelFormat = function monthLabelFormat(date) {
 var cn = (0, _uiHelpers.cnCreate)('mfui-calendar');
 
 var Calendar = function Calendar(_ref) {
-  var _ref$isSingleDate = _ref.isSingleDate,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$isSingleDate = _ref.isSingleDate,
       isSingleDate = _ref$isSingleDate === void 0 ? false : _ref$isSingleDate,
       _ref$startDate = _ref.startDate,
       startDate = _ref$startDate === void 0 ? null : _ref$startDate,
@@ -235,6 +236,9 @@ var Calendar = function Calendar(_ref) {
         }
 
         return /*#__PURE__*/_react["default"].createElement(_Day["default"], (0, _extends2["default"])({
+          dataAttrs: {
+            root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.day, index + 1))
+          },
           date: date,
           key: formatDate(date, 'dd-MM-yyyy'),
           dayLabel: dayLabel
@@ -272,6 +276,11 @@ var Calendar = function Calendar(_ref) {
       var isPrevMonthDisabled = !!minBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), minBookingDate);
       var isNextMonthDisabled = !!maxBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), maxBookingDate);
       return /*#__PURE__*/_react["default"].createElement(_Month["default"], {
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.month,
+          arrowLeft: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft,
+          arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
+        },
         key: "".concat(year, "-").concat(month),
         year: year,
         weekdayLabels: weekdayLabels,
@@ -284,12 +293,19 @@ var Calendar = function Calendar(_ref) {
     });
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className])
-  }, renderMonths());
+  }), renderMonths());
 };
 
 Calendar.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    day: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    month: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowLeft: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowRight: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   isSingleDate: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   startDate: _propTypes["default"].instanceOf(Date),

package/dist/lib/components/Calendar/components/Day/Day.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import './Day.less';
 export interface IDayPickerProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     isDateSelected: (date: Date) => boolean;
     isDateHovered: (date: Date) => boolean;
     isFirstOrLastSelectedDate: (date: Date) => boolean;

package/dist/lib/components/Calendar/components/Day/Day.js

@@ -47,12 +47,13 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var cn = (0, _uiHelpers.cnCreate)('mfui-day');
 
 var Day = function Day(_a) {
-  var _a$isBetween = _a.isBetween,
+  var dataAttrs = _a.dataAttrs,
+      _a$isBetween = _a.isBetween,
       isBetween = _a$isBetween === void 0 ? false : _a$isBetween,
       dayLabel = _a.dayLabel,
       date = _a.date,
       onMouseLeave = _a.onMouseLeave,
-      pickerProps = __rest(_a, ["isBetween", "dayLabel", "date", "onMouseLeave"]);
+      pickerProps = __rest(_a, ["dataAttrs", "isBetween", "dayLabel", "date", "onMouseLeave"]);
 
   var dayRef = _react["default"].useRef(null);
 
@@ -82,7 +83,7 @@ var Day = function Day(_a) {
     onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
   };
 
-  return /*#__PURE__*/_react["default"].createElement("button", {
+  return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     onClick: onClick,
     onKeyDown: onKeyDown,
     onMouseEnter: onMouseEnter,
@@ -91,12 +92,15 @@ var Day = function Day(_a) {
     type: "button",
     ref: dayRef,
     className: cn(modClasses)
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }), /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('label')
   }, dayLabel));
 };
 
 Day.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   dayLabel: _propTypes["default"].string,
   date: _propTypes["default"].instanceOf(Date).isRequired,
   focusedDate: _propTypes["default"].instanceOf(Date),

package/dist/lib/components/Calendar/components/Month/Month.d.ts

@@ -8,6 +8,11 @@ export interface IMonthPickerProps {
     goToNextMonths: () => void;
 }
 export interface IMonthProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        arrowLeft?: Record<string, string>;
+        arrowRight?: Record<string, string>;
+    };
     isPrevMonthDisabled: boolean;
     isNextMonthDisabled: boolean;
     year: number;

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

@@ -42,7 +42,8 @@ var ArrowRight = function ArrowRight(props) {
 var cn = (0, _uiHelpers.cnCreate)('mfui-month');
 
 var Month = function Month(_ref) {
-  var isPrevMonthDisabled = _ref.isPrevMonthDisabled,
+  var dataAttrs = _ref.dataAttrs,
+      isPrevMonthDisabled = _ref.isPrevMonthDisabled,
       isNextMonthDisabled = _ref.isNextMonthDisabled,
       year = _ref.year,
       monthLabel = _ref.monthLabel,
@@ -69,11 +70,11 @@ var Month = function Month(_ref) {
     return hasFocus ? tabIndexWithFocus : tabIndexWithoutFocus;
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('header')
-  }, /*#__PURE__*/_react["default"].createElement(ArrowLeft, {
+  }, /*#__PURE__*/_react["default"].createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowLeft), {
     role: "button",
     tabIndex: getTabIndex(!isPrevMonthDisabled),
     className: cn('arrow', {
@@ -81,9 +82,9 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowLeftClick,
     onClick: handleArrowLeftClick
-  }), /*#__PURE__*/_react["default"].createElement("span", {
+  })), /*#__PURE__*/_react["default"].createElement("span", {
     className: cn('title')
-  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/_react["default"].createElement(ArrowRight, {
+  }, "".concat(monthLabel, " ").concat(year)), /*#__PURE__*/_react["default"].createElement(ArrowRight, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight), {
     role: "button",
     tabIndex: getTabIndex(!isNextMonthDisabled),
     className: cn('arrow', {
@@ -91,7 +92,7 @@ var Month = function Month(_ref) {
     }),
     onKeyDown: handleArrowRightClick,
     onClick: handleArrowRightClick
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('weekday-labels')
   }, weekdayLabels.map(function (dayLabel, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -104,6 +105,11 @@ var Month = function Month(_ref) {
 };
 
 Month.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowLeft: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowRight: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   isPrevMonthDisabled: _propTypes["default"].bool.isRequired,
   isNextMonthDisabled: _propTypes["default"].bool.isRequired,
   year: _propTypes["default"].number.isRequired,

package/dist/lib/components/Carousel/Carousel.js

@@ -212,14 +212,18 @@ var Carousel = function Carousel(_ref) {
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
+  };
+
+  var handleNavDisplay = function handleNavDisplay(swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+    setLocked(swiper.isBeginning && swiper.isEnd);
   }; // https://github.com/nolimits4web/Swiper/issues/2346
 
 
   var handleSwiperResize = React.useCallback(function () {
     (0, _lodash["default"])(function (swiper) {
-      setBeginning(swiper.isBeginning);
-      setEnd(swiper.isEnd);
-      setLocked(swiper.isBeginning && swiper.isEnd);
+      handleNavDisplay(swiper);
 
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {}
     }, _throttleTime["default"].resize);
@@ -248,6 +252,21 @@ var Carousel = function Carousel(_ref) {
     e.nativeEvent.preventDefault();
   };
 
+  React.useEffect(function () {
+    if (!swiperInstance) {
+      return undefined;
+    }
+
+    var windowResizeHandler = function windowResizeHandler() {
+      return handleNavDisplay(swiperInstance);
+    };
+
+    var windowResizeHandlerThrottled = (0, _lodash["default"])(windowResizeHandler, _throttleTime["default"].resize);
+    window.addEventListener('resize', windowResizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', windowResizeHandlerThrottled);
+    };
+  }, [swiperInstance]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     ref: rootRef,
     className: cn({
@@ -292,7 +311,10 @@ var Carousel = function Carousel(_ref) {
       onFocus: handleSlideFocus(i),
       onMouseDown: disableFocusOnSlideClick
     }), child);
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev), {
+  })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     className: cn('arrow', {
       prev: true,
       locked: isLocked
@@ -300,7 +322,10 @@ var Carousel = function Carousel(_ref) {
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: _NavArrow.Theme.PURPLE
-  })), /*#__PURE__*/React.createElement(_NavArrow["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next), {
+  }), /*#__PURE__*/React.createElement(_NavArrow["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     className: cn('arrow', {
       next: true,
       locked: isLocked
@@ -309,7 +334,7 @@ var Carousel = function Carousel(_ref) {
     onClick: handleNextClick,
     disabled: !loop && isEnd,
     theme: _NavArrow.Theme.PURPLE
-  })));
+  }));
 };
 
 Carousel.propTypes = {

package/dist/lib/components/Checkbox/Checkbox.css

@@ -37,6 +37,9 @@
   border: 2px solid;
   border-radius: 2px;
 }
+.mfui-checkbox__custom-input:focus {
+  outline: none;
+}
 .mfui-checkbox__icon {
   display: block;
   width: 32px;

package/dist/lib/components/Collapse/Collapse.js

@@ -7,12 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-require("core-js/modules/web.timers");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -25,7 +21,18 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var BROWSER_DELAY = 100;
+var sin = Math.sin,
+    cos = Math.cos,
+    min = Math.min,
+    PI = Math.PI;
+
+var easeOutSine = function easeOutSine(progress) {
+  return sin(progress * PI / 2);
+};
+
+var easeInSine = function easeInSine(progress) {
+  return 1 - cos(progress * PI / 2);
+};
 
 var Collapse = function Collapse(props) {
   var className = props.className,
@@ -37,58 +44,75 @@ var Collapse = function Collapse(props) {
       children = props.children,
       isOpened = props.isOpened,
       dataAttrs = props.dataAttrs;
+  var duration = animation ? animationDuration : 0;
+  var animationStart = React.useRef(null);
+  var animationId = React.useRef(null);
   var canUpdate = React.useRef(false);
-  var timer = React.useRef(undefined);
   var rootNode = React.useRef(null);
+  (0, React.useEffect)(function () {
+    animationId.current && window.cancelAnimationFrame(animationId.current);
+  }, [isOpened]);
+  var animateSlide = (0, React.useCallback)(function (contentHeight, animationTime, timePassed) {
+    var isOpenAction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
 
-  var _React$useState = React.useState('0px'),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      height = _React$useState2[0],
-      setHeight = _React$useState2[1];
+    if (!rootNode.current) {
+      return;
+    }
 
-  var transition = animation ? "height ".concat(animationDuration / 1000, "s") : 'none';
-  var duration = animation ? animationDuration : 0;
+    if (!animationStart.current) {
+      animationStart.current = timePassed;
+    }
 
-  var animateSlide = function animateSlide(finalHeight, delay) {
+    var runtime = timePassed - animationStart.current;
+    var progress = animationTime ? min(runtime / animationTime, 1) : 1;
+    var isAnimationInProgress = progress < 1;
+    var nextHeight = isOpenAction ? easeOutSine(progress) * contentHeight : contentHeight - easeInSine(progress) * contentHeight;
+    rootNode.current.style.height = "".concat(nextHeight, "px");
+
+    if (isAnimationInProgress) {
+      animationId.current = window.requestAnimationFrame(function (time) {
+        return animateSlide(contentHeight, animationTime, time, isOpenAction);
+      });
+    } else {
+      animationStart.current = null;
+      animationId.current = null;
+    }
+  }, []);
+  (0, React.useEffect)(function () {
     if (!rootNode.current) {
       return;
     }
 
-    setHeight("".concat(rootNode.current.scrollHeight, "px"));
-    timer.current = window.setTimeout(function () {
-      setHeight(finalHeight);
-    }, delay);
-  };
+    var _rootNode$current$scr = rootNode.current.scrollHeight,
+        scrollHeight = _rootNode$current$scr === void 0 ? 0 : _rootNode$current$scr;
 
-  React.useEffect(function () {
     switch (true) {
       case !canUpdate.current && isOpened:
-        setHeight('auto');
+        rootNode.current.style.height = 'auto';
         break;
 
       case !canUpdate.current && !isOpened:
-        setHeight('0px');
+        rootNode.current.style.height = '0px';
         break;
 
       case isOpened:
-        animateSlide('auto', duration);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed, true);
+        });
         break;
 
       default:
-        animateSlide('0px', BROWSER_DELAY);
+        animationId.current = window.requestAnimationFrame(function (timePassed) {
+          return animateSlide(scrollHeight, duration, timePassed);
+        });
     }
 
     canUpdate.current = true;
-    return function () {
-      return clearTimeout(timer.current);
-    };
-  }, [isOpened, duration]);
+  }, [isOpened, duration, animateSlide]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: className,
     style: {
-      overflow: 'hidden',
-      height: height,
-      transition: transition
+      overflow: 'hidden'
     },
     ref: rootNode
   }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {

package/dist/lib/components/ContentArea/ContentArea.css

@@ -5,30 +5,37 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-content-area_color_default {
-  background-color: var(--content);
-}
-.mfui-content-area_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area {
+  /* deprecated */
+  /* deprecated */
 }
-.mfui-content-area_color_transparent {
+.mfui-content-area_background-color_transparent {
   background-color: transparent;
 }
-.mfui-content-area_color_green {
+.mfui-content-area_background-color_black {
+  background-color: var(--stcBlack);
+}
+.mfui-content-area_background-color_white {
+  background-color: var(--stcWhite);
+}
+.mfui-content-area_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area_color_purple {
+.mfui-content-area_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area_color_spbSky0 {
+.mfui-content-area_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area_color_spbSky1 {
+.mfui-content-area_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area_color_spbSky2 {
+.mfui-content-area_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area_background-color_default {
+  background-color: var(--content);
+}
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
@@ -77,27 +84,30 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
-.mfui-content-area__inner_color_default {
-  background-color: var(--content);
+.mfui-content-area__inner_background-color_transparent {
+  background-color: transparent;
 }
-.mfui-content-area__inner_color_white {
-  background-color: var(--stcWhite);
+.mfui-content-area__inner_background-color_black {
+  background-color: var(--stcBlack);
 }
-.mfui-content-area__inner_color_transparent {
-  background-color: transparent;
+.mfui-content-area__inner_background-color_white {
+  background-color: var(--stcWhite);
 }
-.mfui-content-area__inner_color_green {
+.mfui-content-area__inner_background-color_green {
   background-color: var(--brandGreen);
 }
-.mfui-content-area__inner_color_purple {
+.mfui-content-area__inner_background-color_purple {
   background-color: var(--brandPurple);
 }
-.mfui-content-area__inner_color_spbSky0 {
+.mfui-content-area__inner_background-color_spbSky0 {
   background-color: var(--spbSky0);
 }
-.mfui-content-area__inner_color_spbSky1 {
+.mfui-content-area__inner_background-color_spbSky1 {
   background-color: var(--spbSky1);
 }
-.mfui-content-area__inner_color_spbSky2 {
+.mfui-content-area__inner_background-color_spbSky2 {
   background-color: var(--spbSky2);
 }
+.mfui-content-area__inner_background-color_default {
+  background-color: var(--content);
+}

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

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

package/dist/lib/components/ContentArea/ContentArea.js

@@ -20,14 +20,16 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var BACKGROUND_COLORS = {
-  DEFAULT: 'default',
-  WHITE: 'white',
   TRANSPARENT: 'transparent',
+  BLACK: 'black',
+  WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2'
+  SPB_SKY_2: 'spbSky2',
+  // @deprecated
+  DEFAULT: 'default'
 };
 var DisableIndents = {
   MOBILE: 'mobile',
@@ -38,20 +40,22 @@ var DisableIndents = {
 var cn = (0, _uiHelpers.cnCreate)('mfui-content-area');
 
 var ContentArea = function ContentArea(_ref) {
-  var outerBackgroundColor = _ref.outerBackgroundColor,
-      innerBackgroundColor = _ref.innerBackgroundColor,
+  var _ref$outerBackgroundC = _ref.outerBackgroundColor,
+      outerBackgroundColor = _ref$outerBackgroundC === void 0 ? 'transparent' : _ref$outerBackgroundC,
+      _ref$innerBackgroundC = _ref.innerBackgroundColor,
+      innerBackgroundColor = _ref$innerBackgroundC === void 0 ? 'transparent' : _ref$innerBackgroundC,
       disableIndents = _ref.disableIndents,
       children = _ref.children,
       className = _ref.className,
       classes = _ref.classes;
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
-      color: outerBackgroundColor
+      'background-color': outerBackgroundColor
     }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner', {
       'disable-indents': disableIndents,
-      color: innerBackgroundColor
+      'background-color': innerBackgroundColor
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
   }, children));
 };
@@ -66,9 +70,5 @@ ContentArea.propTypes = {
   outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
 };
-ContentArea.defaultProps = {
-  outerBackgroundColor: 'transparent',
-  innerBackgroundColor: 'transparent'
-};
 var _default = ContentArea;
 exports["default"] = _default;