@megafon/ui-shared 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -11,10 +11,10 @@ require("core-js/modules/es.symbol.description.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
+var _setRelAttribute = require("../../helpers/setRelAttribute");
 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 && {}.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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var testIdPrefix = 'TitleDescriptionBox';
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-title-description-box');
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
   var dataAttrs = _ref.dataAttrs,
@@ -22,48 +22,55 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
     description = _ref.description,
     textColor = _ref.textColor,
     align = _ref.align,
+    button = _ref.button,
     rootRef = _ref.rootRef,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var hasButton = !!(button === null || button === void 0 ? void 0 : button.title);
   var renderDescription = React.useCallback(function () {
     if (typeof description === 'string') {
       return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
         className: cn('item'),
         hasMargin: false,
-        color: "inherit",
-        dataAttrs: {
-          root: {
-            'data-testid': "".concat(testIdPrefix, "-description-text")
-          }
-        }
+        color: "inherit"
       }, description);
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('description'),
-      "data-testid": "".concat(testIdPrefix, "-description-node")
+      className: cn('description')
     }, description);
   }, [description]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'h-align': align,
-      'text-color': textColor
-    }, className),
+      'text-color': textColor,
+      'with-button': hasButton
+    }, [className, classes.root]),
     ref: rootRef
-  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
-    hAlign: align,
-    dataAttrs: {
-      container: {
-        'data-testid': "".concat(testIdPrefix, "-grid")
-      }
-    }
-  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-    wide: "8",
-    desktop: "10"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('text-content')
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('item', {
       header: true
     }),
     as: "h2",
     color: "inherit"
-  }, title), description && renderDescription())));
+  }, title), description && renderDescription()), hasButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+    className: cn('button', [classes.button]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    type: "primary",
+    theme: "green",
+    sizeAll: "large",
+    fullWidthMobile: true,
+    icon: button.icon,
+    href: button.href,
+    target: button.target,
+    download: button.download,
+    showArrow: button.showArrow,
+    rel: (0, _setRelAttribute.setRelAttribute)(button.rel, button.target),
+    onClick: button.onClick
+  }, button.title));
 };
 var _default = exports["default"] = TitleDescriptionBox;

package/dist/lib/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+export default useIsomorphicLayoutEffect;

package/dist/lib/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// A safe version of `useLayoutEffect` that works with SSR.
+// On the server, it falls back to `useEffect` to avoid hydration warnings.
+// https://reactjs.org/link/uselayouteffect-ssr
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react["default"].useLayoutEffect : _react["default"].useEffect;
+var _default = exports["default"] = useIsomorphicLayoutEffect;

package/dist/lib/index.d.ts

@@ -4,6 +4,8 @@ export { default as AudioProgress } from './components/AudioPlayer/AudioProgress
 export { default as AudioRange } from './components/AudioPlayer/AudioRange';
 export { default as AudioVolume } from './components/AudioPlayer/AudioVolume';
 export { default as BannerBox } from './components/BannerBox/BannerBox';
+export { default as BenefitCard } from './components/BenefitCards/BenefitCard/BenefitCard';
+export { default as BenefitCards } from './components/BenefitCards/BenefitCards';
 export { default as BenefitsIcons } from './components/BenefitsIcons/BenefitsIcons';
 export { default as BenefitsIconsTile } from './components/BenefitsIcons/BenefitsIconsTile';
 export { default as BenefitsPictures } from './components/BenefitsPictures/BenefitsPictures';
@@ -15,7 +17,9 @@ export { default as ButtonBanner } from './components/ButtonBanner/ButtonBanner'
 export { default as ButtonLinkBox } from './components/ButtonLinkBox/ButtonLinkBox';
 export { default as ButtonsBox } from './components/ButtonsBox/ButtonsBox';
 export { default as Card } from './components/Card/Card';
+export { default as CardOnBackground } from './components/CardsOnBackground/components/CardOnBackground';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
+export { default as CardsOnBackground } from './components/CardsOnBackground/CardsOnBackground';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
 export { default as ChipBox } from './components/ChipsBox/ChipBox';
 export { default as ChipsBox } from './components/ChipsBox/ChipsBox';
@@ -34,6 +38,7 @@ export { default as NumbersBox } from './components/NumbersBox/NumbersBox';
 export { default as NumbersCard } from './components/NumbersBox/components/NumbersCard/NumbersCard';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
+export { default as PartnersItem } from './components/Partners/components/PartnersItem/PartnersItem';
 export { default as PictureBox } from './components/PictureBox/PictureBox';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
 export { default as PromoBanner } from './components/PromoBanner/PromoBanner';
@@ -45,8 +50,7 @@ export { default as ServiceCard } from './components/ServiceCards/components/Ser
 export { default as ServiceCards } from './components/ServiceCards/ServiceCards';
 export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
 export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
-export { default as Stepper } from './components/Stepper/Stepper';
-export { default as StepperItem } from './components/Stepper/StepperItem';
+export { default as StepperBox } from './components/StepperBox/StepperBox';
 export { default as Steps } from './components/Steps/Steps';
 export { default as StepsItem } from './components/Steps/StepsItem';
 export { default as StoreBanner } from './components/StoreBanner/StoreBanner';
@@ -63,5 +67,6 @@ export { default as TextWithIconItem } from './components/TextWithIcon/TextWithI
 export { default as timerFormatUtil } from './components/AudioPlayer/timerFormatUtil';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as useTrackDuration } from './components/AudioPlayer/hooks/useTrackDuration';
+export { default as useUniformHeights } from './components/CardsOnBackground/useUniformHeights';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/lib/index.js

@@ -39,6 +39,18 @@ Object.defineProperty(exports, "BannerBox", {
     return _BannerBox["default"];
   }
 });
+Object.defineProperty(exports, "BenefitCard", {
+  enumerable: true,
+  get: function get() {
+    return _BenefitCard["default"];
+  }
+});
+Object.defineProperty(exports, "BenefitCards", {
+  enumerable: true,
+  get: function get() {
+    return _BenefitCards["default"];
+  }
+});
 Object.defineProperty(exports, "BenefitsIcons", {
   enumerable: true,
   get: function get() {
@@ -105,12 +117,24 @@ Object.defineProperty(exports, "Card", {
     return _Card["default"];
   }
 });
+Object.defineProperty(exports, "CardOnBackground", {
+  enumerable: true,
+  get: function get() {
+    return _CardOnBackground["default"];
+  }
+});
 Object.defineProperty(exports, "CardsBox", {
   enumerable: true,
   get: function get() {
     return _CardsBox["default"];
   }
 });
+Object.defineProperty(exports, "CardsOnBackground", {
+  enumerable: true,
+  get: function get() {
+    return _CardsOnBackground["default"];
+  }
+});
 Object.defineProperty(exports, "CarouselBox", {
   enumerable: true,
   get: function get() {
@@ -219,6 +243,12 @@ Object.defineProperty(exports, "Partners", {
     return _Partners["default"];
   }
 });
+Object.defineProperty(exports, "PartnersItem", {
+  enumerable: true,
+  get: function get() {
+    return _PartnersItem["default"];
+  }
+});
 Object.defineProperty(exports, "PictureBox", {
   enumerable: true,
   get: function get() {
@@ -285,16 +315,10 @@ Object.defineProperty(exports, "SidePictureCards", {
     return _SidePictureCards["default"];
   }
 });
-Object.defineProperty(exports, "Stepper", {
-  enumerable: true,
-  get: function get() {
-    return _Stepper["default"];
-  }
-});
-Object.defineProperty(exports, "StepperItem", {
+Object.defineProperty(exports, "StepperBox", {
   enumerable: true,
   get: function get() {
-    return _StepperItem["default"];
+    return _StepperBox["default"];
   }
 });
 Object.defineProperty(exports, "Steps", {
@@ -405,12 +429,20 @@ Object.defineProperty(exports, "useTrackDuration", {
     return _useTrackDuration["default"];
   }
 });
+Object.defineProperty(exports, "useUniformHeights", {
+  enumerable: true,
+  get: function get() {
+    return _useUniformHeights["default"];
+  }
+});
 var _AccordionBox = _interopRequireDefault(require("./components/AccordionBox/AccordionBox"));
 var _AudioPlayer = _interopRequireDefault(require("./components/AudioPlayer/AudioPlayer"));
 var _AudioProgress = _interopRequireDefault(require("./components/AudioPlayer/AudioProgress"));
 var _AudioRange = _interopRequireDefault(require("./components/AudioPlayer/AudioRange"));
 var _AudioVolume = _interopRequireDefault(require("./components/AudioPlayer/AudioVolume"));
 var _BannerBox = _interopRequireDefault(require("./components/BannerBox/BannerBox"));
+var _BenefitCard = _interopRequireDefault(require("./components/BenefitCards/BenefitCard/BenefitCard"));
+var _BenefitCards = _interopRequireDefault(require("./components/BenefitCards/BenefitCards"));
 var _BenefitsIcons = _interopRequireDefault(require("./components/BenefitsIcons/BenefitsIcons"));
 var _BenefitsIconsTile = _interopRequireDefault(require("./components/BenefitsIcons/BenefitsIconsTile"));
 var _BenefitsPictures = _interopRequireDefault(require("./components/BenefitsPictures/BenefitsPictures"));
@@ -422,7 +454,9 @@ var _ButtonBanner = _interopRequireDefault(require("./components/ButtonBanner/Bu
 var _ButtonLinkBox = _interopRequireDefault(require("./components/ButtonLinkBox/ButtonLinkBox"));
 var _ButtonsBox = _interopRequireDefault(require("./components/ButtonsBox/ButtonsBox"));
 var _Card = _interopRequireDefault(require("./components/Card/Card"));
+var _CardOnBackground = _interopRequireDefault(require("./components/CardsOnBackground/components/CardOnBackground"));
 var _CardsBox = _interopRequireDefault(require("./components/CardsBox/CardsBox"));
+var _CardsOnBackground = _interopRequireDefault(require("./components/CardsOnBackground/CardsOnBackground"));
 var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/CarouselBox"));
 var _ChipBox = _interopRequireDefault(require("./components/ChipsBox/ChipBox"));
 var _ChipsBox = _interopRequireDefault(require("./components/ChipsBox/ChipsBox"));
@@ -441,6 +475,7 @@ var _NumbersBox = _interopRequireDefault(require("./components/NumbersBox/Number
 var _NumbersCard = _interopRequireDefault(require("./components/NumbersBox/components/NumbersCard/NumbersCard"));
 var _PageTitle = _interopRequireDefault(require("./components/PageTitle/PageTitle"));
 var _Partners = _interopRequireDefault(require("./components/Partners/Partners"));
+var _PartnersItem = _interopRequireDefault(require("./components/Partners/components/PartnersItem/PartnersItem"));
 var _PictureBox = _interopRequireDefault(require("./components/PictureBox/PictureBox"));
 var _PictureWithDescription = _interopRequireDefault(require("./components/PictureWithDescription/PictureWithDescription"));
 var _PromoBanner = _interopRequireDefault(require("./components/PromoBanner/PromoBanner"));
@@ -452,8 +487,7 @@ var _ServiceCard = _interopRequireDefault(require("./components/ServiceCards/com
 var _ServiceCards = _interopRequireDefault(require("./components/ServiceCards/ServiceCards"));
 var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
 var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
-var _Stepper = _interopRequireDefault(require("./components/Stepper/Stepper"));
-var _StepperItem = _interopRequireDefault(require("./components/Stepper/StepperItem"));
+var _StepperBox = _interopRequireDefault(require("./components/StepperBox/StepperBox"));
 var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));
 var _StepsItem = _interopRequireDefault(require("./components/Steps/StepsItem"));
 var _StoreBanner = _interopRequireDefault(require("./components/StoreBanner/StoreBanner"));
@@ -470,6 +504,7 @@ var _TextWithIconItem = _interopRequireDefault(require("./components/TextWithIco
 var _timerFormatUtil = _interopRequireDefault(require("./components/AudioPlayer/timerFormatUtil"));
 var _TitleDescriptionBox = _interopRequireDefault(require("./components/TitleDescriptionBox/TitleDescriptionBox"));
 var _useTrackDuration = _interopRequireDefault(require("./components/AudioPlayer/hooks/useTrackDuration"));
+var _useUniformHeights = _interopRequireDefault(require("./components/CardsOnBackground/useUniformHeights"));
 var _VideoBanner = _interopRequireDefault(require("./components/VideoBanner/VideoBanner"));
 var _VideoBlock = _interopRequireDefault(require("./components/VideoBlock/VideoBlock"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "9.0.0-alpha.2",
+    "version": "9.0.0-alpha.21",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^9.0.0-alpha.2",
-        "@megafon/ui-helpers": "^5.0.0-alpha.1",
-        "@megafon/ui-icons": "^4.0.0-alpha.1",
+        "@megafon/ui-core": "^9.0.0-alpha.21",
+        "@megafon/ui-helpers": "^5.0.0-alpha.3",
+        "@megafon/ui-icons": "^4.0.0-alpha.12",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
-        "swiper": "^11.1.1"
+        "swiper": "^12.1.2"
     },
-    "gitHead": "c05af40112195b392b04f65fdb227bf6f20b9f65"
+    "gitHead": "7d9db674447f8aa7ac10690806d154e53d899ebe"
 }

package/dist/es/components/Stepper/Stepper.css

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

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

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import type { IStepperItemProps } from './StepperItem';
-import './Stepper.scss';
-export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
-export interface IStepperProps {
-    /** Дополнительный класс корневого элемента */
-    className?: string;
-    /** Дополнительные классы элементов */
-    classes?: {
-        root?: string;
-        itemsWrap?: string;
-        item?: string;
-        itemIconButton?: string;
-        itemTitle?: string;
-        itemText?: string;
-        itemLink?: string;
-    };
-    /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
-    /** Индекс активного шага */
-    activeStep?: number;
-    /** Количество шагов */
-    stepCount?: number;
-    /** Шаги */
-    items?: StepperItemType[];
-    /** Направление */
-    isHorizontal?: boolean;
-    /** Цифры вместо галочек */
-    isNumeric?: boolean;
-    /** Отключение кнопок */
-    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>;
-        itemText?: Record<string, string>;
-        itemLink?: Record<string, string>;
-    };
-    /** Обработчик события смены шага */
-    onChange?: (index: number) => void;
-}
-declare const Stepper: React.FC<IStepperProps>;
-export default Stepper;

package/dist/es/components/Stepper/Stepper.js

@@ -1,159 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.from.js";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.string.iterator.js";
-import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
-import "./Stepper.css";
-var CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
-  }));
-};
-var cn = cnCreate('mfui-9-stepper');
-var Stepper = function Stepper(_ref) {
-  var className = _ref.className,
-    _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,
-    itemTextClassname = _ref$classes2.itemText,
-    itemLinkClassName = _ref$classes2.itemLink,
-    rootRef = _ref.rootRef,
-    _ref$activeStep = _ref.activeStep,
-    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
-    _ref$stepCount = _ref.stepCount,
-    stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$isHorizontal = _ref.isHorizontal,
-    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
-    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,
-    itemTextAttrs = _ref$dataAttrs2.itemText,
-    itemLinkAttrs = _ref$dataAttrs2.itemLink,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return null;
-    } : _ref$onChange;
-  var _React$useState = React.useState(activeStep),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    currentIndex = _React$useState2[0],
-    setCurrentIndex = _React$useState2[1];
-  var hasCustomItems = !!items.length;
-  var isHorizontalContent = isHorizontal || showActiveStepContent;
-  var currentItems = hasCustomItems ? items : Array.from({
-    length: stepCount
-  });
-  var isCorrectDisabled = React.useMemo(function () {
-    return !!isAllChecked || !!isDisabled;
-  }, [isAllChecked, isDisabled]);
-  var defineItemTheme = React.useCallback(function (index) {
-    switch (true) {
-      case isAllChecked:
-      case index < currentIndex:
-        {
-          return STEPPER_ITEM_THEME_ENUM.CHECKED;
-        }
-      case index === currentIndex:
-        {
-          return STEPPER_ITEM_THEME_ENUM.ACTIVE;
-        }
-      default:
-        {
-          return STEPPER_ITEM_THEME_ENUM.DEFAULT;
-        }
-    }
-  }, [currentIndex, isAllChecked]);
-  var handleClickItem = React.useCallback(function (index) {
-    return function () {
-      if (isCorrectDisabled) {
-        return;
-      }
-      setCurrentIndex(index);
-      onChange(index);
-    };
-  }, [isCorrectDisabled, onChange]);
-  React.useEffect(function () {
-    if (activeStep === undefined) {
-      return;
-    }
-    setCurrentIndex(activeStep);
-  }, [activeStep]);
-  var renderIcon = React.useCallback(function (index, theme) {
-    var isChecked = theme === STEPPER_ITEM_THEME_ENUM.CHECKED;
-    if (isNumeric || !isChecked) {
-      return index + 1;
-    }
-    return /*#__PURE__*/React.createElement(CheckedIcon, null);
-  }, [isNumeric]);
-  var renderItem = React.useCallback(function (props, index) {
-    return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
-      key: index,
-      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);
-      return renderItem(_extends(_extends({}, item), {
-        icon: itemIcon,
-        hasSeparator: i < currentItems.length - 1,
-        isHorizontal: isHorizontalContent,
-        isDisabled: isCorrectDisabled,
-        align: align,
-        theme: itemTheme,
-        view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
-        onClick: handleClickItem(i)
-      }), i);
-    });
-  }, [align, currentItems, isCorrectDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
-  var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
-    isDisabled: isCorrectDisabled,
-    align: align,
-    view: STEPPER_ITEM_VIEW_ENUM.CONTENT
-  }));
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
-    className: cn([className, rootClassName], {
-      'is-horizontal': isHorizontalContent
-    }),
-    ref: rootRef
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
-    className: cn('items-wrap', [itemsWrapClassName])
-  }), renderItems), showActiveStepContent && renderSingleItem);
-};
-export default Stepper;

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

@@ -1 +0,0 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-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-9-stepper-item_is-horizontal .mfui-9-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-9-stepper-item_is-horizontal .mfui-9-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-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon-button{background-color:var(--night20)}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon{background-color:var(--night)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon{background-color:var(--brandGreen)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-9-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:auto}}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__content,.mfui-9-stepper-item_align_left .mfui-9-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-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-9-stepper-item__icon-button,.mfui-9-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-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:none;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:40px;justify-content:center;outline:none;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-9-stepper-item__icon-button:disabled{cursor:default}.mfui-9-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-9-stepper-item__icon svg{height:20px;width:20px;fill:var(--stcWhite)}.mfui-9-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-9-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-9-stepper-item__link{margin-top:13px}

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

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import './StepperItem.scss';
-export declare enum STEPPER_ITEM_THEME_ENUM {
-    CHECKED = "checked",
-    ACTIVE = "active",
-    DEFAULT = "default"
-}
-export declare enum STEPPER_ITEM_VIEW_ENUM {
-    ICON = "icon",
-    CONTENT = "content",
-    DEFAULT = "default"
-}
-export interface IStepperItemProps {
-    /** Дополнительный класс корневого элемента */
-    className?: string;
-    /** Дополнительные классы элементов */
-    classes?: {
-        iconButton?: string;
-        title?: string;
-        text?: string;
-        link?: string;
-    };
-    /** Тема */
-    theme?: STEPPER_ITEM_THEME_ENUM;
-    /** Заголовок */
-    title?: string;
-    /** Текст */
-    text?: string;
-    /** Текст ссылки */
-    linkText?: string;
-    /** Адрес ссылки */
-    linkUrl?: string;
-    /** Иконка */
-    icon?: string | number | JSX.Element;
-    /** Наличие разделителя */
-    hasSeparator?: boolean;
-    /** Направление */
-    isHorizontal?: boolean;
-    /** Отключение */
-    isDisabled?: boolean;
-    /** Выравнивание */
-    align?: 'center' | 'left';
-    /** Варианты отображения */
-    view?: STEPPER_ITEM_VIEW_ENUM;
-    /** Дополнительные data атрибуты к внутренним элементам */
-    dataAttrs?: {
-        root?: Record<string, string>;
-        iconButton?: Record<string, string>;
-        title?: Record<string, string>;
-        text?: Record<string, string>;
-        link?: Record<string, string>;
-    };
-    /** Обработчик события клика */
-    onClick?: () => void;
-}
-declare const StepperItem: React.FC<IStepperItemProps>;
-export default StepperItem;