@megafon/ui-shared 8.4.0 → 8.6.0

package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js

@@ -85,7 +85,7 @@ var InfoCard = function InfoCard(_ref) {
     className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
   }), (0, _uiHelpers.convert)(title, {})), !!description && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
     className: cn('description')
-  }), (0, _uiHelpers.convert)(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
+  }), (0, _uiHelpers.convert)(description, _uiHelpers.textConvertConfig)), !!moreInfo && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
     className: cn('more-info')
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('more-info-text')

package/dist/lib/components/PictureBox/PictureBox.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-2x.png)}}
+h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(img/mac-book-2x.png)}}

package/dist/lib/components/Stepper/Stepper.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper{gap:16px}.mfui-stepper,.mfui-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-stepper::-webkit-scrollbar{height:8px}.mfui-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-stepper_is-horizontal .mfui-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}

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

@@ -8,6 +8,7 @@ export interface IStepperProps {
     /** Дополнительные классы элементов */
     classes?: {
         root?: string;
+        itemsWrap?: string;
         item?: string;
         itemIconButton?: string;
         itemTitle?: string;
@@ -30,11 +31,14 @@ export interface IStepperProps {
     isDisabled?: boolean;
     /** Все шаги пройдены */
     isAllChecked?: boolean;
+    /** Отображение контента только активного шага */
+    showActiveStepContent?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        itemsWrap?: Record<string, string>;
         item?: Record<string, string>;
         itemIconButton?: Record<string, string>;
         itemTitle?: Record<string, string>;

package/dist/lib/components/Stepper/Stepper.js

@@ -29,6 +29,7 @@ var Stepper = function Stepper(_ref) {
     _ref$classes = _ref.classes,
     _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
     rootClassName = _ref$classes2.root,
+    itemsWrapClassName = _ref$classes2.itemsWrap,
     itemClassName = _ref$classes2.item,
     itemIconButtonClassName = _ref$classes2.itemIconButton,
     itemTitleClassName = _ref$classes2.itemTitle,
@@ -46,11 +47,14 @@ var Stepper = function Stepper(_ref) {
     isNumeric = _ref.isNumeric,
     isDisabled = _ref.isDisabled,
     isAllChecked = _ref.isAllChecked,
+    _ref$showActiveStepCo = _ref.showActiveStepContent,
+    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
+    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
     itemAttrs = _ref$dataAttrs2.item,
     itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
     itemTitleAttrs = _ref$dataAttrs2.itemTitle,
@@ -65,6 +69,7 @@ var Stepper = function Stepper(_ref) {
     currentIndex = _React$useState2[0],
     setCurrentIndex = _React$useState2[1];
   var hasCustomItems = !!items.length;
+  var isHorizontalContent = isHorizontal || showActiveStepContent;
   var currentItems = hasCustomItems ? items : Array.from({
     length: stepCount
   });
@@ -107,43 +112,53 @@ var Stepper = function Stepper(_ref) {
     }
     return /*#__PURE__*/React.createElement(CheckedIcon, null);
   }, [isNumeric]);
+  var renderItem = React.useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, props, {
+      className: itemClassName,
+      classes: {
+        iconButton: itemIconButtonClassName,
+        title: itemTitleClassName,
+        text: itemTextClassname,
+        link: itemLinkClassName
+      },
+      dataAttrs: {
+        root: itemAttrs,
+        iconButton: itemIconButtonAttrs,
+        title: itemTitleAttrs,
+        text: itemTextAttrs,
+        link: itemLinkAttrs
+      }
+    }));
+  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
   var renderItems = React.useMemo(function () {
     return currentItems.map(function (elem, i) {
       var item = elem || {};
       var itemTheme = defineItemTheme(i);
       var itemIcon = item.icon || renderIcon(i, itemTheme);
-      var hasSeparator = i < currentItems.length - 1;
-      return /*#__PURE__*/React.createElement(_StepperItem["default"], (0, _extends2["default"])({}, item, {
-        className: itemClassName,
-        classes: {
-          iconButton: itemIconButtonClassName,
-          title: itemTitleClassName,
-          text: itemTextClassname,
-          link: itemLinkClassName
-        },
-        dataAttrs: {
-          root: itemAttrs,
-          iconButton: itemIconButtonAttrs,
-          title: itemTitleAttrs,
-          text: itemTextAttrs,
-          link: itemLinkAttrs
-        },
-        key: i,
+      return renderItem((0, _extends2["default"])((0, _extends2["default"])({}, item), {
         icon: itemIcon,
-        hasSeparator: hasSeparator,
-        isHorizontal: isHorizontal,
+        hasSeparator: i < currentItems.length - 1,
+        isHorizontal: isHorizontalContent,
         isDisabled: isDisabled,
         align: align,
         theme: itemTheme,
+        view: showActiveStepContent ? _StepperItem.STEPPER_ITEM_VIEW_ENUM.ICON : _StepperItem.STEPPER_ITEM_VIEW_ENUM.DEFAULT,
         onClick: handleClickItem(i)
       }));
     });
-  }, [align, currentItems, isDisabled, isHorizontal, itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName, defineItemTheme, handleClickItem, renderIcon]);
+  }, [align, currentItems, isDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
+  var renderSingleItem = renderItem((0, _extends2["default"])((0, _extends2["default"])({}, currentItems[currentIndex]), {
+    isDisabled: isDisabled,
+    align: align,
+    view: _StepperItem.STEPPER_ITEM_VIEW_ENUM.CONTENT
+  }));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
     className: cn([className, rootClassName], {
-      'is-horizontal': isHorizontal
+      'is-horizontal': isHorizontalContent
     }),
     ref: rootRef
-  }), renderItems);
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(itemsWrapAttrs), {
+    className: cn('items-wrap', [itemsWrapClassName])
+  }), renderItems), showActiveStepContent && renderSingleItem);
 };
 var _default = exports["default"] = Stepper;

package/dist/lib/components/Stepper/StepperItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto}}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}

package/dist/lib/components/Stepper/StepperItem.d.ts

@@ -5,6 +5,11 @@ export declare enum STEPPER_ITEM_THEME_ENUM {
     ACTIVE = "active",
     DEFAULT = "default"
 }
+export declare enum STEPPER_ITEM_VIEW_ENUM {
+    ICON = "icon",
+    CONTENT = "content",
+    DEFAULT = "default"
+}
 export interface IStepperItemProps {
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -35,6 +40,8 @@ export interface IStepperItemProps {
     isDisabled?: boolean;
     /** Выравнивание */
     align?: 'center' | 'left';
+    /** Варианты отображения */
+    view?: STEPPER_ITEM_VIEW_ENUM;
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;

package/dist/lib/components/Stepper/StepperItem.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.STEPPER_ITEM_THEME_ENUM = void 0;
+exports["default"] = exports.STEPPER_ITEM_VIEW_ENUM = exports.STEPPER_ITEM_THEME_ENUM = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 require("core-js/modules/es.string.link.js");
 var React = _interopRequireWildcard(require("react"));
@@ -19,6 +19,12 @@ var STEPPER_ITEM_THEME_ENUM;
   STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
   STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
 })(STEPPER_ITEM_THEME_ENUM || (exports.STEPPER_ITEM_THEME_ENUM = STEPPER_ITEM_THEME_ENUM = {}));
+var STEPPER_ITEM_VIEW_ENUM;
+(function (STEPPER_ITEM_VIEW_ENUM) {
+  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
+  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
+  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_VIEW_ENUM || (exports.STEPPER_ITEM_VIEW_ENUM = STEPPER_ITEM_VIEW_ENUM = {}));
 var cn = (0, _uiHelpers.cnCreate)('mfui-stepper-item');
 var StepperItem = function StepperItem(_ref) {
   var className = _ref.className,
@@ -29,7 +35,7 @@ var StepperItem = function StepperItem(_ref) {
     textClassName = _ref$classes2.text,
     linkClassName = _ref$classes2.link,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'default' : _ref$theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
     title = _ref.title,
     text = _ref.text,
     linkText = _ref.linkText,
@@ -41,6 +47,8 @@ var StepperItem = function StepperItem(_ref) {
     isDisabled = _ref.isDisabled,
     _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
     _ref$dataAttrs = _ref.dataAttrs,
     _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
     rootAttrs = _ref$dataAttrs2.root,
@@ -51,6 +59,8 @@ var StepperItem = function StepperItem(_ref) {
     onClick = _ref.onClick;
   var hasLink = !!linkText && !!linkUrl;
   var hasContent = !!title || !!text || hasLink;
+  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
+  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
   var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
@@ -78,11 +88,11 @@ var StepperItem = function StepperItem(_ref) {
   }, linkText));
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(rootAttrs), {
     className: cn([className], {
-      'is-horizontal': isHorizontal,
       theme: theme,
-      align: align
+      align: align,
+      'is-horizontal': isHorizontal
     })
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showIcon && /*#__PURE__*/React.createElement("div", {
     className: cn('icon-button-area')
   }, /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(iconButtonAttrs), {
     className: cn('icon-button', [iconButtonClassName]),
@@ -93,6 +103,6 @@ var StepperItem = function StepperItem(_ref) {
     className: cn('icon')
   }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
     className: cn('separator')
-  })), hasContent && renderContent);
+  })), showContent && renderContent);
 };
 var _default = exports["default"] = StepperItem;

package/dist/lib/index.d.ts

@@ -17,6 +17,8 @@ export { default as ButtonsBox } from './components/ButtonsBox/ButtonsBox';
 export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
+export { default as ChipBox } from './components/ChipsBox/ChipBox';
+export { default as ChipsBox } from './components/ChipsBox/ChipsBox';
 export { default as Container } from './components/Container/Container';
 export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
 export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';

package/dist/lib/index.js

@@ -117,6 +117,18 @@ Object.defineProperty(exports, "CarouselBox", {
     return _CarouselBox["default"];
   }
 });
+Object.defineProperty(exports, "ChipBox", {
+  enumerable: true,
+  get: function get() {
+    return _ChipBox["default"];
+  }
+});
+Object.defineProperty(exports, "ChipsBox", {
+  enumerable: true,
+  get: function get() {
+    return _ChipsBox["default"];
+  }
+});
 Object.defineProperty(exports, "Container", {
   enumerable: true,
   get: function get() {
@@ -412,6 +424,8 @@ var _ButtonsBox = _interopRequireDefault(require("./components/ButtonsBox/Button
 var _Card = _interopRequireDefault(require("./components/Card/Card"));
 var _CardsBox = _interopRequireDefault(require("./components/CardsBox/CardsBox"));
 var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/CarouselBox"));
+var _ChipBox = _interopRequireDefault(require("./components/ChipsBox/ChipBox"));
+var _ChipsBox = _interopRequireDefault(require("./components/ChipsBox/ChipsBox"));
 var _Container = _interopRequireDefault(require("./components/Container/Container"));
 var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCards/components/DarkGradientCard"));
 var _DarkGradientCards = _interopRequireDefault(require("./components/DarkGradientCards/DarkGradientCards"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.4.0",
+    "version": "8.6.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.4.0",
+        "@megafon/ui-core": "^8.5.0",
         "@megafon/ui-helpers": "^4.0.1",
-        "@megafon/ui-icons": "^3.9.2",
+        "@megafon/ui-icons": "^3.9.3",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "af0cdb99cd17efe392e36532a219bafaf5c986d6"
+    "gitHead": "af9a564fdf22e9eb215fb59d36d45bb0c44570c4"
 }