@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../../helpers/setRelAttribute";
+import "./ServiceCard.css";
+var ArrowRight = function ArrowRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+var cn = cnCreate('mfui-service-card');
+var ServiceCard = function ServiceCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    value = _ref.value,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'big' : _ref$size,
+    imageSrc = _ref.imageSrc,
+    imageSrc2x = _ref.imageSrc2x,
+    _ref$imageAlt = _ref.imageAlt,
+    imageAlt = _ref$imageAlt === void 0 ? 'image' : _ref$imageAlt,
+    href = _ref.href,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_self' : _ref$target,
+    rel = _ref.rel,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    onClick = _ref.onClick;
+  var isSizeSmall = size === 'small';
+  var currentRel = setRelAttribute(rel, target);
+  var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+  var footerElement = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('image-wrapper')
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    srcSet: imageSrcSet,
+    alt: imageAlt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('price')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('circle')
+  }, /*#__PURE__*/React.createElement(ArrowRight, {
+    className: cn('arrow')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('value')
+  }, value)));
+  var renderFooter = function renderFooter() {
+    if (isSizeSmall) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: cn('footer')
+      }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.footer)), footerElement);
+    }
+    return footerElement;
+  };
+  return /*#__PURE__*/React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      background: background,
+      size: size
+    }, [classes === null || classes === void 0 ? void 0 : classes.root]),
+    href: href,
+    target: target,
+    rel: currentRel,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('header')
+  }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }), typeof title === 'string' ? convert(title, titleConvertConfig) : title), subtitle && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle), {
+    className: cn('subtitle'),
+    style: {
+      WebkitBoxOrient: 'vertical'
+    }
+  }), typeof subtitle === 'string' ? convert(subtitle, textConvertConfig) : subtitle)), renderFooter());
+};
+export default ServiceCard;

package/dist/es/components/ServiceCards/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export type ServiceCardDataType = {
+    /** Заголовок */
+    title: string | React.ReactNode | ReactNode[];
+    /** Подзаголовок */
+    subtitle?: string | React.ReactNode | ReactNode[];
+    /** Значение */
+    value: string;
+    /** Изображение */
+    imageSrc: string;
+    /** Изображение 2x */
+    imageSrc2x?: string;
+    /** Значение тега alt для изображения */
+    imageAlt?: string;
+    /** Ссылка */
+    href: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export type SizeType = 'big' | 'small';
+export type BackgroundType = 'white' | 'gray' | 'shadow';

package/dist/es/components/ServiceCards/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { BackgroundType, CardDataType } from './types';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface ISidePictureCards {
+    /** Карточки. Минимальное количество 2 карточки */
+    items: CardDataType[];
+    /** Цвет фона карточек */
+    background?: BackgroundType;
+    /** Выстраивать карточки в карусель */
+    hasCarousel?: boolean;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        itemTitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const SidePictureCards: React.FC<ISidePictureCards>;
+export default SidePictureCards;

package/dist/es/components/SidePictureCards/SidePictureCards.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel, Grid, GridColumn } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import SidePictureCard from "./components/SidePictureCard";
+var slidesSettings = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+});
+var MIN_ITEMS_COUNT = 2;
+var cn = cnCreate('mfui-side-picture-cards');
+var SidePictureCards = function SidePictureCards(_ref) {
+  var items = _ref.items,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'gray' : _ref$background,
+    _ref$hasCarousel = _ref.hasCarousel,
+    hasCarousel = _ref$hasCarousel === void 0 ? false : _ref$hasCarousel,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    onCarouselChange = _ref.onCarouselChange,
+    rootRef = _ref.rootRef;
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  var renderItem = function renderItem(item, index) {
+    return /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
+      background: background,
+      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
+      classes: {
+        root: classes.item,
+        title: classes.itemTitle
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
+      }
+    }));
+  };
+  var renderContent = function renderContent() {
+    if (hasCarousel) {
+      return /*#__PURE__*/React.createElement(Carousel, {
+        slidesSettings: slidesSettings,
+        onChange: onCarouselChange
+      }, items.map(renderItem));
+    }
+    return /*#__PURE__*/React.createElement(Grid, {
+      guttersLeft: "medium",
+      guttersBottom: "medium"
+    }, items.map(function (item, i) {
+      return /*#__PURE__*/React.createElement(GridColumn, {
+        all: "6",
+        mobile: "12",
+        key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
+      }, renderItem(item, i));
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), renderContent());
+};
+export default SidePictureCards;

package/dist/es/components/SidePictureCards/components/SidePictureCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-side-picture-card{background-color:var(--base);border-radius:24px;color:var(--content);display:grid;gap:20px;grid-template-columns:auto;grid-template-rows:1fr auto;min-height:100%;padding:12px;text-decoration:none;-webkit-transition:background-color,-webkit-box-shadow;transition:background-color,-webkit-box-shadow;transition:background-color,box-shadow;transition:background-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s}@media screen and (min-width:1280px){.mfui-side-picture-card{grid-template-columns:1fr 1fr;grid-template-rows:none}}.mfui-side-picture-card:hover{text-decoration:none}.mfui-side-picture-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:12px}@media screen and (min-width:1280px){.mfui-side-picture-card__content{padding:12px 0 12px 12px}}.mfui-side-picture-card__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:16px}@media screen and (min-width:1280px){.mfui-side-picture-card__title{margin-bottom:24px}}.mfui-side-picture-card__items{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;margin-bottom:auto}@media screen and (min-width:1280px){.mfui-side-picture-card__items{gap:16px}}.mfui-side-picture-card__item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.mfui-side-picture-card__item-icon{display:block;max-height:32px;min-width:32px;width:32px}.mfui-side-picture-card__item-icon svg{display:block;height:100%;width:100%;fill:var(--brandGreen)}.mfui-side-picture-card__item-description{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-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-side-picture-card__item-text{-webkit-line-clamp:3;font-size:15px;font-weight:400}.mfui-side-picture-card__item-info,.mfui-side-picture-card__item-text{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;line-height:24px}.mfui-side-picture-card__item-info{-webkit-line-clamp:2;font-size:18px;font-weight:500;letter-spacing:.5px}@media screen and (min-width:1280px){.mfui-side-picture-card__item-info{font-size:20px;line-height:28px}}.mfui-side-picture-card__button{margin-top:32px}.mfui-side-picture-card__picture{height:172px;position:relative}@media screen and (min-width:768px) and (max-width:1023px){.mfui-side-picture-card__picture{height:197px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-side-picture-card__picture{height:270px}}@media screen and (min-width:1280px){.mfui-side-picture-card__picture{height:100%}}.mfui-side-picture-card__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.mfui-side-picture-card_active:hover:not(.mfui-side-picture-card_background_gray){-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-side-picture-card_background_gray{background-color:var(--spbSky0)}.mfui-side-picture-card_background_gray.mfui-side-picture-card_active:hover{background-color:var(--spbSky1)}

package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BackgroundType, CardDataType } from '../types';
+import './SidePictureCard.scss';
+export type SidePictureCardType = CardDataType & {
+    background: BackgroundType;
+    classes?: {
+        root?: string;
+        title?: string;
+        button?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+};
+declare const SidePictureCard: React.FC<SidePictureCardType>;
+export default SidePictureCard;

package/dist/es/components/SidePictureCards/components/SidePictureCard.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import React from 'react';
+import { Button, Header } from '@megafon/ui-core';
+import { breakpoints, cnCreate, convert } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../helpers/setRelAttribute";
+import "./SidePictureCard.css";
+var MAX_ICON_ITEMS_COUNT = 4;
+var cn = cnCreate('mfui-side-picture-card');
+var SidePictureCard = function SidePictureCard(_ref) {
+  var background = _ref.background,
+    title = _ref.title,
+    image = _ref.image,
+    _ref$iconItems = _ref.iconItems,
+    iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
+    button = _ref.button,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
+  var _ref2 = button || {},
+    buttonTitle = _ref2.title,
+    buttonHref = _ref2.href,
+    buttonTarget = _ref2.target,
+    buttonRel = _ref2.rel,
+    onButtonClick = _ref2.onClick;
+  var isLink = !!href && !buttonHref;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = setRelAttribute(rel, target);
+  var currentButtonRel = setRelAttribute(buttonRel, buttonTarget);
+  var visibleIconItems = iconItems.slice(0, MAX_ICON_ITEMS_COUNT);
+  var items = visibleIconItems.map(function (item, i) {
+    var icon = item.icon,
+      _item$text = item.text,
+      text = _item$text === void 0 ? '' : _item$text,
+      _item$info = item.info,
+      info = _item$info === void 0 ? '' : _item$info;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      key: "".concat(text || info, "_").concat(i)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('item-icon')
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: cn('item-description')
+    }, !!text && /*#__PURE__*/React.createElement("div", {
+      className: cn('item-text')
+    }, convert(text, {})), !!info && /*#__PURE__*/React.createElement("div", {
+      className: cn('item-info')
+    }, convert(info, {}))));
+  });
+  return /*#__PURE__*/React.createElement(ElementType, _extends({
+    className: cn({
+      background: background,
+      active: isLink
+    }, [classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, !!title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
+    as: "h3"
+  }, convert(title, {})), /*#__PURE__*/React.createElement("div", {
+    className: cn('items')
+  }, items), !!buttonTitle && /*#__PURE__*/React.createElement(Button, {
+    className: cn('button', [classes.button]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
+    href: buttonHref,
+    target: buttonTarget,
+    rel: currentButtonRel,
+    onClick: onButtonClick
+  }, buttonTitle)), /*#__PURE__*/React.createElement("picture", {
+    className: cn('picture')
+  }, /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(breakpoints.DESKTOP_MIDDLE_START, "px)"),
+    srcSet: image.srcWide
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: image.src,
+    alt: image.alt || 'image'
+  })));
+};
+export default SidePictureCard;

package/dist/es/components/SidePictureCards/types.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+type ButtonType = {
+    /** Название */
+    title: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+type ImageType = {
+    /** Изображение на разрешении экрана 0-1279 */
+    src: string;
+    /** Изображение на разрешении экрана 1280+ */
+    srcWide: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+type IconContentType = {
+    /** Иконка */
+    icon: React.ReactNode;
+    /** Текст-описание */
+    text?: string;
+    /** Дополнительная информация, значение */
+    info?: string;
+};
+export type CardDataType = {
+    /** Заголовок */
+    title?: string;
+    /** Изображение */
+    image: ImageType;
+    /** Список пунктов с иконками */
+    iconItems: IconContentType[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export type BackgroundType = 'white' | 'gray';
+export {};

package/dist/es/components/SidePictureCards/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+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/es/components/Stepper/Stepper.d.ts

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,159 @@
+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-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

@@ -0,0 +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-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: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-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{height:20px;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}