@megafon/ui-core 2.0.0-beta.99 → 2.1.2

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

@@ -5,31 +5,29 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-checkbox {
+.mfui-checkbox {
   margin: 0 5px 12px 5px;
 }
-.mfui-beta-checkbox__inner {
+.mfui-checkbox__inner {
   position: relative;
   display: inline-block;
 }
-.mfui-beta-checkbox__label {
+.mfui-checkbox__label {
   display: inline;
   cursor: pointer;
 }
-.mfui-beta-checkbox__input {
-  opacity: 0;
+.mfui-checkbox__input {
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
   z-index: -1;
   width: 0;
   height: 0;
+  opacity: 0;
 }
-.mfui-beta-checkbox__custom-input {
+.mfui-checkbox__custom-input {
   position: absolute;
   left: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -39,100 +37,102 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 20px;
   height: 20px;
   border: 2px solid;
   border-radius: 2px;
 }
-.mfui-beta-checkbox__icon {
+.mfui-checkbox__icon {
+  display: block;
   width: 32px;
   height: 32px;
-  display: block;
+  opacity: 0;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  opacity: 0;
 }
-.mfui-beta-checkbox__extra-content {
+.mfui-checkbox__extra-content {
   position: relative;
   left: 8px;
-  margin-right: -20px;
   display: inline-block;
-  vertical-align: middle;
   margin-top: -2px;
+  margin-right: -20px;
+  vertical-align: middle;
 }
-.mfui-beta-checkbox_checked .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border: none;
 }
-.mfui-beta-checkbox_checked .mfui-beta-checkbox__icon {
+.mfui-checkbox_checked .mfui-checkbox__icon {
   opacity: 1;
 }
-.mfui-beta-checkbox_font-size_regular {
+.mfui-checkbox_font-size_regular {
   font-size: 15px;
   line-height: 24px;
 }
-.mfui-beta-checkbox_font-size_regular .mfui-beta-checkbox__inner {
+.mfui-checkbox_font-size_regular .mfui-checkbox__inner {
   padding: 4px 15px 4px 35px;
 }
-.mfui-beta-checkbox_font-size_regular .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
   top: 6px;
 }
-.mfui-beta-checkbox_font-size_small {
+.mfui-checkbox_font-size_small {
   font-size: 12px;
   line-height: 16px;
 }
-.mfui-beta-checkbox_font-size_small .mfui-beta-checkbox__inner {
+.mfui-checkbox_font-size_small .mfui-checkbox__inner {
   padding: 1px 15px 4px 35px;
 }
-.mfui-beta-checkbox_font-size_small .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
   top: 0;
 }
-.mfui-beta-checkbox_color_dark .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark .mfui-checkbox__custom-input {
   border-color: #D8D8D8;
 }
-.mfui-beta-checkbox_color_dark .mfui-beta-checkbox__label_no-touch:hover .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   border-color: #10E272;
 }
-.mfui-beta-checkbox_color_dark .mfui-beta-checkbox__label:active .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input {
   border-color: #404D46 !important;
   background-color: #404D46;
 }
-.mfui-beta-checkbox_color_dark .mfui-beta-checkbox__icon {
+.mfui-checkbox_color_dark .mfui-checkbox__icon {
   fill: #FFFFFF;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_checked .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
   border-color: #00B956;
-  background-color: #00B956;
   color: #FFFFFF;
+  background-color: #00B956;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_checked .mfui-beta-checkbox__label_no-touch:hover .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
   background-color: #10E272;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_checked .mfui-beta-checkbox__label:active .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
   background-color: #404D46 !important;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_checked.mfui-beta-checkbox_disabled .mfui-beta-checkbox__custom-input,
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_checked.mfui-beta-checkbox_disabled .mfui-beta-checkbox__label:active .mfui-beta-checkbox__custom-input {
+.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;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_disabled .mfui-beta-checkbox__label {
+.mfui-checkbox_color_dark.mfui-checkbox_disabled .mfui-checkbox__label {
   cursor: default;
   pointer-events: none;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_disabled .mfui-beta-checkbox__custom-input,
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_disabled .mfui-beta-checkbox__label:active .mfui-beta-checkbox__custom-input {
+.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;
 }
-.mfui-beta-checkbox_color_dark.mfui-beta-checkbox_error .mfui-beta-checkbox__custom-input {
+.mfui-checkbox_color_dark.mfui-checkbox_error .mfui-checkbox__custom-input {
   border-color: #F62434;
 }
-.mfui-beta-checkbox_color_light {
+.mfui-checkbox_color_light {
   color: #FFFFFF;
 }
-.mfui-beta-checkbox_color_light .mfui-beta-checkbox__custom-input {
-  color: #00B956;
+.mfui-checkbox_color_light .mfui-checkbox__custom-input {
   border-color: #FFFFFF;
+  color: #00B956;
   background-color: #FFFFFF;
 }

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

@@ -1,12 +1,17 @@
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import './Checkbox.less';
-import { IDataAttributes } from '../../utils/dataAttrs';
-export interface ICheckboxProps extends IDataAttributes {
+export interface ICheckboxProps extends IFilterDataAttrs {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        inner?: string;
+        icon?: string;
+    };
     /** Размер текста */
     fontSize?: 'regular' | 'small';
     /** Имя компонента в DOM */

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

@@ -14,12 +14,10 @@ function _createSuper(Derived) { return function () { var Super = _getPrototypeO
 
 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 PropTypes from 'prop-types';
 import * as React from 'react';
-import cnCreate from "../../utils/cnCreate";
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./Checkbox.css";
-import detectTouch from "../../utils/detectTouch";
-import filterDataAttrs from "../../utils/dataAttrs";
 
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -29,7 +27,7 @@ var CheckedIcon = function CheckedIcon(props) {
   }));
 };
 
-var cn = cnCreate('mfui-beta-checkbox');
+var cn = cnCreate('mfui-checkbox');
 
 var Checkbox = /*#__PURE__*/function (_React$Component) {
   _inherits(Checkbox, _React$Component);
@@ -66,7 +64,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           error = _this$props.error,
           children = _this$props.children,
           extraContent = _this$props.extraContent,
-          dataAttrs = _this$props.dataAttrs;
+          dataAttrs = _this$props.dataAttrs,
+          classes = _this$props.classes;
       return /*#__PURE__*/React.createElement("div", _extends({
         className: cn('', {
           'font-size': fontSize,
@@ -76,7 +75,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           error: error
         }, className)
       }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
-        className: cn('inner')
+        className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
       }, /*#__PURE__*/React.createElement("label", {
         className: cn('label', {
           'no-touch': !this.isTouch
@@ -90,7 +89,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         disabled: disabled
       }), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input')
+        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", {

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

@@ -5,105 +5,107 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-content-area_color_white {
+.mfui-content-area_color_white {
   background-color: #FFFFFF;
 }
-.mfui-beta-content-area_color_transparent {
+.mfui-content-area_color_transparent {
   background-color: transparent;
 }
-.mfui-beta-content-area_color_green {
+.mfui-content-area_color_green {
   background-color: #00B956;
 }
-.mfui-beta-content-area_color_purple {
+.mfui-content-area_color_purple {
   background-color: #731982;
 }
-.mfui-beta-content-area_color_spbSky0 {
+.mfui-content-area_color_spbSky0 {
   background-color: #F6F6F6;
 }
-.mfui-beta-content-area_color_spbSky1 {
+.mfui-content-area_color_spbSky1 {
   background-color: #EDEDED;
 }
-.mfui-beta-content-area_color_spbSky2 {
+.mfui-content-area_color_spbSky2 {
   background-color: #D8D8D8;
 }
-.mfui-beta-content-area_color_freshAsphalt {
+.mfui-content-area_color_content,
+.mfui-content-area_color_freshAsphalt {
   background-color: #333333;
 }
-.mfui-beta-content-area_color_fullBlack {
+.mfui-content-area_color_fullBlack {
   background-color: #000000;
 }
-.mfui-beta-content-area__inner {
-  margin: 0 auto;
-  max-width: 1440px;
+.mfui-content-area__inner {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
-  padding-left: 80px;
+  max-width: 1440px;
+  margin: 0 auto;
   padding-right: 80px;
+  padding-left: 80px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-content-area__inner {
-    padding-left: 16px;
+  .mfui-content-area__inner {
     padding-right: 16px;
+    padding-left: 16px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-content-area__inner {
-    padding-left: 48px;
+  .mfui-content-area__inner {
     padding-right: 48px;
+    padding-left: 48px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-content-area__inner {
-    padding-left: 64px;
+  .mfui-content-area__inner {
     padding-right: 64px;
+    padding-left: 64px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-content-area__inner_disable-indents_mobile {
-    padding-left: 0;
+  .mfui-content-area__inner_disable-indents_mobile {
     padding-right: 0;
+    padding-left: 0;
   }
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-content-area__inner_disable-indents_mobile-tablet {
-    padding-left: 0;
+  .mfui-content-area__inner_disable-indents_mobile-tablet {
     padding-right: 0;
+    padding-left: 0;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-beta-content-area__inner_disable-indents_tablet-desktop {
-    padding-left: 0;
+  .mfui-content-area__inner_disable-indents_tablet-desktop {
     padding-right: 0;
+    padding-left: 0;
   }
 }
-.mfui-beta-content-area__inner_disable-indents_all {
-  padding-left: 0;
+.mfui-content-area__inner_disable-indents_all {
   padding-right: 0;
+  padding-left: 0;
 }
-.mfui-beta-content-area__inner_color_white {
+.mfui-content-area__inner_color_white {
   background-color: #FFFFFF;
 }
-.mfui-beta-content-area__inner_color_transparent {
+.mfui-content-area__inner_color_transparent {
   background-color: transparent;
 }
-.mfui-beta-content-area__inner_color_green {
+.mfui-content-area__inner_color_green {
   background-color: #00B956;
 }
-.mfui-beta-content-area__inner_color_purple {
+.mfui-content-area__inner_color_purple {
   background-color: #731982;
 }
-.mfui-beta-content-area__inner_color_spbSky0 {
+.mfui-content-area__inner_color_spbSky0 {
   background-color: #F6F6F6;
 }
-.mfui-beta-content-area__inner_color_spbSky1 {
+.mfui-content-area__inner_color_spbSky1 {
   background-color: #EDEDED;
 }
-.mfui-beta-content-area__inner_color_spbSky2 {
+.mfui-content-area__inner_color_spbSky2 {
   background-color: #D8D8D8;
 }
-.mfui-beta-content-area__inner_color_freshAsphalt {
+.mfui-content-area__inner_color_content,
+.mfui-content-area__inner_color_freshAsphalt {
   background-color: #333333;
 }
-.mfui-beta-content-area__inner_color_fullBlack {
+.mfui-content-area__inner_color_fullBlack {
   background-color: #000000;
 }

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

@@ -1,7 +1,19 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import './ContentArea.less';
-export declare type BackgroundColorType = 'white' | 'transparent' | 'green' | 'purple' | 'spbSky0' | 'spbSky1' | 'spbSky2' | 'freshAsphalt' | 'fullBlack';
+declare const BACKGROUND_COLORS: {
+    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 FRESH_ASPHALT: "freshAsphalt";
+};
+export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {
     readonly MOBILE: "mobile";
     readonly MOBILE_TABLET: "mobile-tablet";
@@ -24,22 +36,5 @@ export interface IConrentAreaProps {
         inner?: string;
     };
 }
-declare class ContentArea extends React.Component<IConrentAreaProps> {
-    static propTypes: {
-        outerBackgroundColor: PropTypes.Requireable<string>;
-        innerBackgroundColor: PropTypes.Requireable<string>;
-        disableIndents: PropTypes.Requireable<"all" | "mobile" | "mobile-tablet" | "tablet-desktop">;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-            inner: PropTypes.Requireable<string>;
-        }>>;
-    };
-    static defaultProps: {
-        outerBackgroundColor: string;
-        innerBackgroundColor: string;
-    };
-    render(): JSX.Element;
-}
+declare const ContentArea: React.FC<IConrentAreaProps>;
 export default ContentArea;

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

@@ -1,79 +1,80 @@
-import "core-js/modules/es.date.to-string";
-import "core-js/modules/es.object.to-string";
+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.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";
-
-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 "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";
-import cnCreate from "../../utils/cnCreate";
+var BACKGROUND_COLORS = {
+  WHITE: 'white',
+  TRANSPARENT: 'transparent',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2',
+  CONTENT: 'content',
+  FULL_BLACK: 'fullBlack',
+
+  /** @deprecated */
+  FRESH_ASPHALT: 'freshAsphalt'
+};
 var DisableIndents = {
   MOBILE: 'mobile',
   MOBILE_TABLET: 'mobile-tablet',
   TABLET_DESKTOP: 'tablet-desktop',
   ALL: 'all'
 };
-var BACKGROUND_COLORS = ['white', 'transparent', 'green', 'purple', 'spbSky0', 'spbSky1', 'spbSky2', 'freshAsphalt', 'fullBlack'];
-var cn = cnCreate('mfui-beta-content-area');
+var cn = cnCreate('mfui-content-area');
 
-var ContentArea = /*#__PURE__*/function (_React$Component) {
-  _inherits(ContentArea, _React$Component);
-
-  var _super = _createSuper(ContentArea);
+var ContentArea = function ContentArea(_ref) {
+  var outerBackgroundColor = _ref.outerBackgroundColor,
+      innerBackgroundColor = _ref.innerBackgroundColor,
+      disableIndents = _ref.disableIndents,
+      children = _ref.children,
+      className = _ref.className,
+      classes = _ref.classes;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn({
+      color: outerBackgroundColor
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner', {
+      'disable-indents': disableIndents,
+      color: innerBackgroundColor
+    }, classes === null || classes === void 0 ? void 0 : classes.inner)
+  }, children));
+};
 
-  function ContentArea() {
-    _classCallCheck(this, ContentArea);
+var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
+  var deprecatedValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var propValue = props[propName];
 
-    return _super.apply(this, arguments);
+  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), "]"));
   }
 
-  _createClass(ContentArea, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          outerBackgroundColor = _this$props.outerBackgroundColor,
-          innerBackgroundColor = _this$props.innerBackgroundColor,
-          disableIndents = _this$props.disableIndents,
-          children = _this$props.children,
-          className = _this$props.className,
-          _this$props$classes = _this$props.classes,
-          classes = _this$props$classes === void 0 ? {} : _this$props$classes;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn({
-          color: outerBackgroundColor
-        }, [className, classes.root])
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('inner', {
-          'disable-indents': disableIndents,
-          color: innerBackgroundColor
-        }, classes.inner)
-      }, children));
-    }
-  }]);
+  if (propValue && propValue === BACKGROUND_COLORS.FRESH_ASPHALT) {
+    return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n        value '").concat(deprecatedValue, "' is deprecated, please use value '").concat(BACKGROUND_COLORS.CONTENT, "'"));
+  }
 
-  return ContentArea;
-}(React.Component);
+  return null;
+};
 
 ContentArea.propTypes = {
-  outerBackgroundColor: PropTypes.oneOf(BACKGROUND_COLORS),
-  innerBackgroundColor: PropTypes.oneOf(BACKGROUND_COLORS),
   disableIndents: PropTypes.oneOf(Object.values(DisableIndents)),
-  children: PropTypes.node,
   className: PropTypes.string,
   classes: PropTypes.shape({
     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);
+  }
 };
 ContentArea.defaultProps = {
   outerBackgroundColor: 'transparent',