@megafon/ui-shared 2.3.0 → 3.0.0-beta.11

package/dist/es/components/PageTitle/PageTitle.css

@@ -41,9 +41,9 @@ h5 {
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-weight: 500;
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 @media screen and (min-width: 1280px) {
   .mfui-page-title__badge_under-breadcrumbs {

package/dist/es/components/Property/Property.css

@@ -14,7 +14,7 @@ h5 {
       -ms-flex-direction: column;
           flex-direction: column;
   padding: 24px 0;
-  border-top: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
 }
 @media screen and (min-width: 1280px) {
   .mfui-property__wrapper {
@@ -22,7 +22,7 @@ h5 {
   }
 }
 .mfui-property_border-bottom .mfui-property__wrapper {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--spbSky2);
 }
 .mfui-property__content {
   display: -webkit-box;
@@ -46,9 +46,9 @@ h5 {
 .mfui-property__badge {
   padding: 2px 8px;
   border-radius: 2px;
-  color: #FFFFFF;
+  color: var(--stcWhite);
   font-size: 12px;
-  background: #FFA717;
+  background: var(--137C);
 }
 .mfui-property__inner {
   -webkit-box-flex: 1;
@@ -93,7 +93,7 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-left: 1px solid #D8D8D8;
+  border-left: 1px solid var(--spbSky2);
 }
 .mfui-property__desc {
   margin-top: 8px;

package/dist/es/components/Property/PropertyDescription.css

@@ -6,10 +6,10 @@ h5 {
   margin: 0;
 }
 .mfui-property-description__collapse {
-  color: #34AAF2;
+  color: var(--systemBlue);
   font-size: 12px;
-  -webkit-text-decoration: underline dashed #34AAF2;
-          text-decoration: underline dashed #34AAF2;
+  -webkit-text-decoration: underline dashed var(--systemBlue);
+          text-decoration: underline dashed var(--systemBlue);
   cursor: pointer;
 }
 .mfui-property-description__content-inner {

package/dist/es/components/Steps/StepsItem.css

@@ -28,8 +28,8 @@ h5 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: #FFFFFF;
-  background-color: #00B956;
+  color: var(--stcWhite);
+  background-color: var(--brandGreen);
 }
 .mfui-steps-item__text-wrapper {
   padding-top: 8px;

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -5,25 +5,23 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-store-banner_theme_base .mfui-store-banner__grid,
-.mfui-store-banner_theme_clearWhite .mfui-store-banner__grid {
-  background-color: #FFFFFF;
+.mfui-store-banner_theme_default .mfui-store-banner__grid {
+  background-color: var(--base);
 }
-.mfui-store-banner_theme_base .mfui-store-banner__content,
-.mfui-store-banner_theme_clearWhite .mfui-store-banner__content {
-  color: #333333;
+.mfui-store-banner_theme_default .mfui-store-banner__content {
+  color: var(--content);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__grid {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-store-banner_theme_green .mfui-store-banner__content {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__grid {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-store-banner_theme_spbSky1 .mfui-store-banner__content {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-store-banner_mask_new-iphone .mfui-store-banner__device-mask {
   position: relative;
@@ -93,7 +91,7 @@ h5 {
 .mfui-store-banner__grid {
   padding-top: 32px;
   padding-bottom: 32px;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   border-radius: 8px;
 }
 @media screen and (max-width: 767px) {
@@ -161,16 +159,7 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
-  -ms-flex-item-align: center;
-      align-self: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  width: 90px;
-  height: 90px;
   margin-right: 16px;
-  border: 1px solid #EDEDED;
-  border-radius: 8px;
-  background-color: #FFFFFF;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -191,9 +180,6 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
-  margin-right: 8px;
-  margin-bottom: 10px;
-  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -201,8 +187,9 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:last-child {
-  margin-bottom: 0;
+.mfui-store-banner__store-link:not(:last-child) {
+  margin-right: 16px;
+  margin-bottom: 10px;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -221,11 +208,6 @@ h5 {
             justify-content: center;
   }
 }
-@media screen and (min-width: 768px) {
-  .mfui-store-banner__stores {
-    margin-left: -8px;
-  }
-}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -247,10 +229,16 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
+    width: 120px;
+    height: 120px;
+  }
+}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 90px;
-    max-height: 90px;
+    max-width: 88px;
+    max-height: 88px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -272,6 +260,12 @@ h5 {
     margin: 0 auto;
   }
 }
+.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
+  margin-right: 16px;
+}
+.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
+  margin-right: 0;
+}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -290,3 +284,8 @@ h5 {
     margin-bottom: 16px;
   }
 }
+@media screen and (max-width: 1023px) {
+  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
+    margin-right: 0;
+  }
+}

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

@@ -2,11 +2,9 @@ import * as React from 'react';
 import { Props as StoreButtonPropsType } from '../StoreButton/StoreButton';
 import './StoreBanner.less';
 export declare const Theme: {
-    readonly BASE: "base";
+    readonly DEFAULT: "default";
     readonly GREEN: "green";
     readonly SPB_SKY_1: "spbSky1";
-    /** @deprecated */
-    readonly CLEAR_WHITE: "clearWhite";
 };
 declare type ThemeType = typeof Theme[keyof typeof Theme];
 export declare const DeviceMask: {
@@ -58,9 +56,9 @@ export interface IStoreBannerProps {
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -1,7 +1,4 @@
-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 _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { Button, Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
@@ -10,12 +7,9 @@ import PropTypes from 'prop-types';
 import StoreButton, { Theme as StoreButtonTheme } from "../StoreButton/StoreButton";
 import "./StoreBanner.css";
 export var Theme = {
-  BASE: 'base',
+  DEFAULT: 'default',
   GREEN: 'green',
-  SPB_SKY_1: 'spbSky1',
-
-  /** @deprecated */
-  CLEAR_WHITE: 'clearWhite'
+  SPB_SKY_1: 'spbSky1'
 };
 export var DeviceMask = {
   ANDROID: 'android',
@@ -45,7 +39,7 @@ var StoreBanner = function StoreBanner(_ref) {
       qrCode = _ref.qrCode,
       imageSrc = _ref.imageSrc,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? Theme.CLEAR_WHITE : _ref$theme,
+      theme = _ref$theme === void 0 ? Theme.DEFAULT : _ref$theme,
       deviceMask = _ref.deviceMask,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
@@ -58,7 +52,7 @@ var StoreBanner = function StoreBanner(_ref) {
       mask: deviceMask
     }, [className, rootClassName]),
     ref: rootRef
-  }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
     className: cn('container')
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('grid')
@@ -145,20 +139,9 @@ StoreBanner.propTypes = {
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
-  theme: function theme(props, propName, componentName) {
-    var deprecatedValue = Theme.CLEAR_WHITE;
-    var propValue = props[propName];
-
-    if (propValue && !Object.values(Theme).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(Theme), "]"));
-    }
-
-    if (propValue && propValue === deprecatedValue) {
-      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(Theme.BASE, "'"));
-    }
-
-    return null;
-  }
+  theme: PropTypes.oneOf(Object.values(Theme)),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default StoreBanner;

package/dist/es/components/Table/Table.css

@@ -18,17 +18,17 @@ h5 {
   height: 8px;
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-track {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-thumb {
   border-radius: 4px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-table:not(.mfui-table_touch) ::-webkit-scrollbar-corner {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-table:not(.mfui-table_touch) .mfui-table__scroll {
-  scrollbar-color: #D8D8D8 #EDEDED;
+  scrollbar-color: var(--spbSky2) var(--spbSky1);
   scrollbar-width: thin;
 }
 .mfui-table__scroll {
@@ -36,7 +36,7 @@ h5 {
   display: grid;
   grid-template-columns: auto auto auto;
   max-width: 100%;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   overflow: auto;
 }
 @media screen and (min-width: 1024px) {
@@ -80,8 +80,8 @@ h5 {
   width: 100%;
   height: 48px;
   margin-top: -48px;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to top, #FFFFFF 25%, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to top, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__right-gradient {
   position: -webkit-sticky;
@@ -92,20 +92,20 @@ h5 {
   width: 48px;
   height: 100%;
   margin-left: -48px;
-  background: -webkit-gradient(linear, right top, left top, color-stop(25%, #FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF 25%, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, color-stop(25%, var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base) 25%, rgba(255, 255, 255, 0));
 }
 .mfui-table__table {
   border-width: 0;
   border-collapse: separate;
   border-spacing: 0;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-table__cell {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   padding: 24px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 @media screen and (max-width: 767px) {
   .mfui-table__cell {
@@ -118,7 +118,7 @@ h5 {
   left: 0;
   width: 144px;
   min-width: 144px;
-  border-right: 1px solid #D8D8D8;
+  border-right: 1px solid var(--spbSky2);
 }
 .mfui-table__cell:not(:first-child) {
   max-width: 288px;
@@ -128,12 +128,12 @@ h5 {
   line-height: 16px;
   height: 72px;
   padding-bottom: 12px;
-  color: #33333380;
+  color: var(--stcBlack5);
   vertical-align: bottom;
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-table__row:not(:last-child) .mfui-table__cell {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--spbSky2);
 }
 .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;

package/dist/es/components/TextBox/TextBox.css

@@ -14,12 +14,3 @@ h5 {
 .mfui-text-box_text-center {
   text-align: center;
 }
-.mfui-text-box .mfui-text-with-icon {
-  margin: 24px 0;
-}
-.mfui-text-box .mfui-text-with-icon + .mfui-header {
-  margin-top: 32px;
-}
-.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
-  margin: 32px 0 24px;
-}

package/dist/es/components/TextBox/TextBoxPicture.css

@@ -20,5 +20,5 @@ h5 {
 .mfui-text-box-picture__img {
   display: block;
   max-width: 100%;
-  border: 1px solid #EDEDED;
+  border: 1px solid var(--spbSky1);
 }

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -7,7 +7,7 @@ h5 {
 }
 .mfui-title-description-box {
   font-family: inherit;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-title-description-box__item_header {
   white-space: pre-wrap;
@@ -16,7 +16,7 @@ h5 {
   margin-bottom: 16px;
 }
 .mfui-title-description-box_text-color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-title-description-box_h-align_center {
   text-align: center;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -29,7 +29,7 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
       className: cn('description')
     }, description);
   }, [description]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': hAlign,
       'text-color': textColor
@@ -50,7 +50,9 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
 };
 
 TitleDescriptionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -119,19 +119,19 @@ h5 {
   }
 }
 .mfui-video-banner__content_text-color_black {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-video-banner__content_text-color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 @media screen and (max-width: 767px) {
   .mfui-video-banner__content_text-color-mobile_black {
-    color: #333333;
+    color: var(--stcBlack);
   }
 }
 @media screen and (max-width: 767px) {
   .mfui-video-banner__content_text-color-mobile_white {
-    color: #FFFFFF;
+    color: var(--stcWhite);
   }
 }
 .mfui-video-banner__description {

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

@@ -6,7 +6,7 @@ export interface IContent {
     /** Текст-описание */
     description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
-    buttonTitle?: string;
+    buttonTitle: string;
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Ссылка на кнопке */

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -81,7 +81,7 @@ var VideoBlock = function VideoBlock(_ref) {
       className: cn('header')
     }, title), /*#__PURE__*/React.createElement("div", {
       className: cn('description', [classes.description])
-    }, description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
+    }, description), /*#__PURE__*/React.createElement(Button, {
       className: cn('button', [classes.button]),
       href: href,
       onClick: onButtonClick,
@@ -100,7 +100,7 @@ var VideoBlock = function VideoBlock(_ref) {
         orderTablet: "2",
         orderMobile: "2",
         key: "column-content"
-      }, renderContent(content)));
+      }, renderContent && renderContent(content)));
     }
 
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
@@ -139,7 +139,7 @@ VideoBlock.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     href: PropTypes.string,
-    buttonTitle: PropTypes.string,
+    buttonTitle: PropTypes.string.isRequired,
     buttonDownload: PropTypes.bool,
     onButtonClick: PropTypes.func
   }),

package/dist/es/index.d.ts

@@ -29,7 +29,6 @@ export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
-export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -29,7 +29,6 @@ export { default as TableRow } from "./components/Table/TableRow";
 export { default as TabsBox } from "./components/TabsBox/TabsBox";
 export { default as TextBox } from "./components/TextBox/TextBox";
 export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
-export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import './AccordionBox.less';
 export interface IAccordionBox {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -15,9 +15,6 @@ export interface IAccordionBox {
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */
     hCenterAlignWide?: boolean;
-    /** Вертикальные отступы */
-    /** @deprecated */
-    hasVerticalPaddings?: boolean;
     /** Дополнительный класс для корнеовго элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
@@ -28,7 +25,7 @@ export interface IAccordionBox {
         titleWrap?: string;
     };
     /** Обработчик клика */
-    onClickAccordion?: (isOpened: boolean, title: string) => void;
+    onClickAccordion?: (isOpened: boolean) => void;
 }
 declare const AccordionBox: React.FC<IAccordionBox>;
 export default AccordionBox;

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -58,7 +58,9 @@ var AccordionBox = function AccordionBox(_a) {
 };
 
 AccordionBox.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
@@ -66,9 +68,6 @@ AccordionBox.propTypes = {
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
-  hasVerticalPaddings: function hasVerticalPaddings(props, propName) {
-    return props[propName] && new Error('Failed prop type: Prop "hasVerticalPaddings" is deprecated');
-  },
   className: PropTypes.string,
   classes: PropTypes.shape({
     openedClass: PropTypes.string,

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -12,11 +12,14 @@ h5 {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
+.mfui-breadcrumbs_color_default .mfui-breadcrumbs__item:before {
+  color: var(--content);
+}
 .mfui-breadcrumbs_color_black .mfui-breadcrumbs__item:before {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-breadcrumbs__icon {
   position: relative;

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import './Breadcrumbs.less';
 declare type ItemType = {
-    title: string;
+    component?: React.ReactElement;
+    title?: string;
     href?: string;
 };
 export declare const TextColor: {
+    readonly DEFAULT: "default";
     readonly BLACK: "black";
     readonly WHITE: "white";
 };

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -20,6 +20,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var TextColor = {
+  DEFAULT: 'default',
   BLACK: 'black',
   WHITE: 'white'
 };
@@ -38,15 +39,16 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       color: color
     }, className)
   }, items.map(function (_ref2) {
-    var title = _ref2.title,
+    var component = _ref2.component,
+        title = _ref2.title,
         href = _ref2.href;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('item', classes.item),
       key: title
-    }, /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+    }, component, !component && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
       href: href,
       color: color
-    }, title));
+    }, component || title));
   }));
 };