@megafon/ui-shared 6.0.0-beta.5 → 6.1.0

package/dist/lib/components/BlogBox/BlogBox.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
+
+var _BlogBoxTile = _interopRequireDefault(require("./components/BlogBoxTile"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var maxItemsCount = 4;
+var cn = (0, _uiHelpers.cnCreate)('mfui-blog-box');
+
+var BlogBox = function BlogBox(_ref) {
+  var items = _ref.items,
+      button = _ref.button,
+      _ref$hasAlignLeft = _ref.hasAlignLeft,
+      hasAlignLeft = _ref$hasAlignLeft === void 0 ? false : _ref$hasAlignLeft,
+      className = _ref.className,
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useResolutions = (0, _useResolutions2["default"])(),
+      isDesktop = _useResolutions.isDesktop;
+
+  var visibleItems = items.slice(0, maxItemsCount);
+  var itemsCount = visibleItems.length;
+  var isRow = isDesktop && itemsCount < maxItemsCount;
+  var isAlignLeft = isRow && hasAlignLeft;
+
+  var getView = function getView(isCompact, i) {
+    if (isCompact) {
+      return 'compact';
+    }
+
+    if (i === 0) {
+      return 'full';
+    }
+
+    return 'thumbnail';
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'align-left': isAlignLeft
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list', {
+      row: isRow,
+      'row-size': isRow && "".concat(itemsCount)
+    })
+  }), visibleItems.map(function (item, i) {
+    var view = getView(isRow, i);
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        view: view
+      }, [classes === null || classes === void 0 ? void 0 : classes.item]),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/_react["default"].createElement(_BlogBoxTile["default"], (0, _extends2["default"])({}, item, {
+      view: view
+    })));
+  })), (button === null || button === void 0 ? void 0 : button.title) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('button-wrapper')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
+    href: button.href,
+    target: button.target,
+    rel: button.rel
+  }, button.title)));
+};
+
+BlogBox.propTypes = {
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].objectOf(_propTypes["default"].string),
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].object),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    date: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    image: _propTypes["default"].shape({
+      srcMobile: _propTypes["default"].string.isRequired,
+      srcDesktop: _propTypes["default"].string.isRequired,
+      srcThumbnail: _propTypes["default"].string.isRequired,
+      alt: _propTypes["default"].string
+    }).isRequired,
+    href: _propTypes["default"].string.isRequired,
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: _propTypes["default"].string
+  }).isRequired).isRequired,
+  button: _propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string.isRequired,
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: _propTypes["default"].string
+  }),
+  hasAlignLeft: _propTypes["default"].bool
+};
+var _default = BlogBox;
+exports["default"] = _default;

package/dist/lib/components/BlogBox/components/BlogBoxTile.css

@@ -0,0 +1,197 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-blog-box-tile {
+  position: relative;
+  display: block;
+  color: var(--content);
+  text-decoration: none;
+}
+.mfui-blog-box-tile:hover {
+  text-decoration: none;
+}
+.mfui-blog-box-tile:hover .mfui-blog-box-tile__title {
+  color: var(--brandGreen);
+}
+.mfui-blog-box-tile__image {
+  width: 100%;
+  height: 100%;
+  border-radius: 24px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  vertical-align: top;
+}
+.mfui-blog-box-tile__picture {
+  display: block;
+}
+.mfui-blog-box-tile__date {
+  margin-bottom: 4px;
+  color: var(--spbSky3);
+}
+.mfui-blog-box-tile__title {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+.mfui-blog-box-tile_view_thumbnail {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: 133px;
+  height: 102px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+    width: 170px;
+    height: 130px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture {
+    width: 233px;
+    height: 170px;
+  }
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content {
+  -ms-flex-item-align: center;
+      align-self: center;
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+  font-size: 12px;
+  line-height: 18px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+  height: 358px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+    height: 438px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture {
+    height: 558px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  left: 8px;
+  padding: 16px;
+  border-radius: 24px;
+  background-color: var(--base);
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 24px;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__content {
+    padding: 24px;
+  }
+}
+.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_full .mfui-blog-box-tile__title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+  height: 233px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+    height: 288px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture {
+    height: 367px;
+  }
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  padding: 16px;
+  border-radius: 24px;
+  background-color: var(--base);
+}
+.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}

package/dist/lib/components/BlogBox/components/BlogBoxTile.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TileDataType, TileViewType } from '../types';
+import './BlogBoxTile.less';
+declare type TileSettingsType = {
+    view: TileViewType;
+};
+export declare type BlogBoxTileType = TileDataType & TileSettingsType;
+declare const BlogBoxTile: React.FC<BlogBoxTileType>;
+export default BlogBoxTile;

package/dist/lib/components/BlogBox/components/BlogBoxTile.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _setRelAttribute = require("../../../helpers/setRelAttribute");
+
+var _useResolutions2 = _interopRequireDefault(require("../../../hooks/useResolutions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-blog-box-tile');
+
+var BlogBoxTile = function BlogBoxTile(_ref) {
+  var date = _ref.date,
+      title = _ref.title,
+      href = _ref.href,
+      target = _ref.target,
+      rel = _ref.rel,
+      _ref$image = _ref.image,
+      srcMobile = _ref$image.srcMobile,
+      srcDesktop = _ref$image.srcDesktop,
+      srcThumbnail = _ref$image.srcThumbnail,
+      _ref$image$alt = _ref$image.alt,
+      alt = _ref$image$alt === void 0 ? 'image' : _ref$image$alt,
+      view = _ref.view;
+
+  var _useResolutions = (0, _useResolutions2["default"])(),
+      isMobile = _useResolutions.isMobile;
+
+  var isViewThumbnail = view === 'thumbnail';
+  var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
+
+  var renderImage = function renderImage() {
+    if (isViewThumbnail) {
+      return isMobile ? null : /*#__PURE__*/_react["default"].createElement("picture", {
+        className: cn('picture')
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: cn('image'),
+        src: srcThumbnail,
+        alt: alt
+      }));
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("picture", {
+      className: cn('picture')
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: srcDesktop
+    }), /*#__PURE__*/_react["default"].createElement("img", {
+      className: cn('image'),
+      src: srcMobile,
+      alt: alt
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("a", {
+    className: cn({
+      view: view
+    }),
+    href: href,
+    target: target,
+    rel: currentRel
+  }, renderImage(), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('date')
+  }, date), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('title')
+  }, title)));
+};
+
+var _default = BlogBoxTile;
+exports["default"] = _default;

package/dist/lib/components/BlogBox/types.d.ts

@@ -0,0 +1,37 @@
+declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export declare type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare type ImageType = {
+    /** Изображение на разрешении экрана 0-1023 */
+    srcMobile: string;
+    /** Изображение на разрешении экрана 1024+ */
+    srcDesktop: string;
+    /** Миниатюра */
+    srcThumbnail: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export declare type TileDataType = {
+    /** Дата */
+    date: string;
+    /** Заголовок */
+    title: string;
+    /** Изображение */
+    image: ImageType;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export declare type TileViewType = 'full' | 'thumbnail' | 'compact';
+export {};

package/dist/lib/components/BlogBox/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -1 +1,43 @@
-@charset "UTF-8";h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-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:var(--stcBlack)}.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before{color:var(--stcWhite)}.mfui-breadcrumbs__item{margin-right:10px;padding-left:26px;position:relative}.mfui-breadcrumbs__item:before{content:"→";left:0;position:absolute;top:-1px}.mfui-breadcrumbs__item:first-child{padding-left:0}.mfui-breadcrumbs__item:first-child:before{display:none}.mfui-breadcrumbs__item:last-child{pointer-events:none}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-breadcrumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -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: var(--stcBlack);
+}
+.mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before {
+  color: var(--stcWhite);
+}
+.mfui-breadcrumbs__item {
+  position: relative;
+  margin-right: 10px;
+  padding-left: 26px;
+}
+.mfui-breadcrumbs__item:before {
+  content: '→';
+  position: absolute;
+  top: -1px;
+  left: 0;
+}
+.mfui-breadcrumbs__item:first-child {
+  padding-left: 0;
+}
+.mfui-breadcrumbs__item:first-child:before {
+  display: none;
+}
+.mfui-breadcrumbs__item:last-child {
+  pointer-events: none;
+}

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

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import React from 'react';
 import { TextColor } from './components/BreadcrumbsItem';
-import './Breadcrumbs.scss';
-type ItemObjectType = {
+import './Breadcrumbs.less';
+declare type ItemObjectType = {
     title?: string;
     href?: string;
 };
-type ItemType = JSX.Element | ItemObjectType;
-export type TextColorType = (typeof TextColor)[keyof typeof TextColor];
-export type Props = {
+declare type ItemType = JSX.Element | ItemObjectType;
+export declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type Props = {
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Список элементов */

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

@@ -1,34 +1,51 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.array.map.js");
+
 require("core-js/modules/es.string.link.js");
-var React = _interopRequireWildcard(require("react"));
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-var _BreadcrumbsItem = _interopRequireDefault(require("./components/BreadcrumbsItem"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _BreadcrumbsItem = _interopRequireWildcard(require("./components/BreadcrumbsItem"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var isObjectElement = function isObjectElement(item) {
-  return ! /*#__PURE__*/React.isValidElement(item);
+  return ! /*#__PURE__*/_react["default"].isValidElement(item);
 };
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-breadcrumbs');
+
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var items = _ref.items,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs,
-    _ref$hasMicrodata = _ref.hasMicrodata,
-    hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
       color: color
     }, className)
@@ -36,11 +53,11 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     itemScope: true,
     itemType: 'https://schema.org/BreadcrumbList'
   }), items.map(function (item, i) {
-    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
       className: cn('item', classes.item)
     }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
       key: i
-    }), isObjectElement(item) ? /*#__PURE__*/React.createElement(_BreadcrumbsItem["default"], {
+    }), isObjectElement(item) ? /*#__PURE__*/_react["default"].createElement(_BreadcrumbsItem["default"], {
       title: item.title,
       href: item.href,
       color: color,
@@ -61,4 +78,29 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     }) : item);
   }));
 };
-var _default = exports["default"] = Breadcrumbs;
+
+Breadcrumbs.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    item: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    itemInner: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    itemTitle: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    itemMeta: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    link: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    item: _propTypes["default"].string,
+    itemTitle: _propTypes["default"].string,
+    lastItemTitle: _propTypes["default"].string,
+    link: _propTypes["default"].string
+  }),
+  items: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].element.isRequired), _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    href: _propTypes["default"].string
+  }).isRequired)]).isRequired,
+  color: _propTypes["default"].oneOf(Object.values(_BreadcrumbsItem.TextColor)),
+  hasMicrodata: _propTypes["default"].bool
+};
+var _default = Breadcrumbs;
+exports["default"] = _default;

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

@@ -1 +1,16 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-breadcrumbs-item_color_default{color:var(--content)}.mfui-breadcrumbs-item_color_black{color:var(--stcBlack)}.mfui-breadcrumbs-item_color_white{color:var(--stcWhite)}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-breadcrumbs-item_color_default {
+  color: var(--content);
+}
+.mfui-breadcrumbs-item_color_black {
+  color: var(--stcBlack);
+}
+.mfui-breadcrumbs-item_color_white {
+  color: var(--stcWhite);
+}

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import './BreadcrumbsItem.scss';
+import React from 'react';
+import './BreadcrumbsItem.less';
 export declare const TextColor: {
     readonly DEFAULT: "default";
     readonly BLACK: "black";
     readonly WHITE: "white";
 };
-type TextColorType = (typeof TextColor)[keyof typeof TextColor];
-export type Props = {
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type Props = {
     title?: string;
     href?: string;
     color?: TextColorType;