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

package/dist/es/components/Snackbar/Snackbar.js

@@ -4,8 +4,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/web.timers.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import useResolution from "../../hooks/useResolution";
 import useSwipe, { TransitionSteps } from "../../hooks/useSwipe";
-import Button from "../Button/Button";
+import Button from "../Buttons/Button/Button";
+import ButtonClose from "../Buttons/ButtonClose/ButtonClose";
 import Caption from "../Caption/Caption";
 import Header from "../Header/Header";
 import Tile from "../Tile/Tile";
@@ -15,49 +17,46 @@ var HeartIcon16 = function HeartIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M13.25 3A3.78 3.78 0 0010 4.82 3.78 3.78 0 006.75 3C4.6 3 3 5.18 3 7.13a3.42 3.42 0 00.49 1.77c1.2 2 5 7.64 5.15 7.88l.15.22h2.51l.15-.22c.16-.24 4-5.83 5.1-7.92A4.14 4.14 0 0017 7.13C17 5.18 15.4 3 13.25 3zm2.41 5.4c-.94 1.81-4.16 6.53-4.89 7.59H9.32c-.73-1.09-3.92-5.87-5-7.62A2.42 2.42 0 014 7.13C4 5.71 5.23 4 6.75 4a2.73 2.73 0 012.67 2h1.15a2.73 2.73 0 012.67-2C14.77 4 16 5.71 16 7.13a3.14 3.14 0 01-.34 1.27z"
+    d: "M13.463 2.75c.603 0 1.2.122 1.752.359a4.363 4.363 0 011.456 1.017A4.841 4.841 0 0118 7.45c0 1.433-.65 2.621-1.586 3.59l.003.004-5.694 5.9a1.004 1.004 0 01-1.443 0l-5.95-6.166A4.84 4.84 0 012 7.454 4.84 4.84 0 013.33 4.13c.408-.434.903-.78 1.455-1.017a4.445 4.445 0 013.503 0A4.364 4.364 0 019.745 4.13l.253.263.257-.267a4.37 4.37 0 011.457-1.017 4.443 4.443 0 011.75-.359z"
   }));
 };
 var HeartIcon24 = function HeartIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20.5 6A5.55 5.55 0 0016 8.27 5.55 5.55 0 0011.5 6C8.35 6 6 9.18 6 12a5 5 0 00.73 2.61c1.67 2.77 6.92 10.59 7.14 10.93l.3.44H18l.3-.43c.23-.33 5.58-8.09 7.09-11A6 6 0 0026 12c0-2.82-2.35-6-5.5-6zm3.07 7.65c-1.25 2.42-5.5 8.65-6.66 10.35h-1.68c-1.16-1.73-5.37-8-6.79-10.4A3 3 0 018 12c0-1.82 1.56-4 3.5-4a3.47 3.47 0 013.38 2.51h2.24A3.47 3.47 0 0120.5 8c1.94 0 3.5 2.2 3.5 4a4 4 0 01-.43 1.65z"
+    d: "M21.195 7c.904 0 1.798.18 2.626.526a6.55 6.55 0 012.186 1.487C27.288 10.336 28 12.071 28 13.873c0 2.094-.975 3.831-2.379 5.249l.005.005-8.197 8.28a2.01 2.01 0 01-2.853 0l-8.583-8.67A6.978 6.978 0 014 13.879c0-1.801.712-3.536 1.993-4.859A6.55 6.55 0 018.18 7.531a6.814 6.814 0 015.253 0 6.55 6.55 0 012.185 1.488l.38.383.386-.389a6.55 6.55 0 012.185-1.487A6.813 6.813 0 0121.195 7z"
   }));
 };
 var AttentionIcon16 = function AttentionIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M9 5h2v6H9V5zm1 8c-.2 0-.5.1-.7.3s-.3.4-.3.7.1.5.3.7.5.3.7.3.5-.1.7-.3.3-.4.3-.7-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm0 4c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm-8-7c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.249 3.014a1.96 1.96 0 013.45-.006l6.045 10.973c.739 1.342-.213 2.999-1.724 2.999H3.979c-1.508 0-2.46-1.651-1.727-2.993L8.25 3.014zM9.999 13a1 1 0 100 2 1 1 0 000-2zm0-7a1 1 0 00-1 1v4a1 1 0 002 0V7a1 1 0 00-1-1z"
   }));
 };
 var CheckedIcon16 = function CheckedIcon16(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"
+    d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
   }));
 };
 var AttentionIcon24 = function AttentionIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.373 6.516c1.128-2.018 4.041-2.023 5.176-.008l9.067 16.094C28.725 24.571 27.296 27 25.03 27H6.97c-2.263 0-3.691-2.42-2.591-4.389l8.994-16.095zM16 21.163c-.829 0-1.5.657-1.5 1.467s.671 1.466 1.5 1.466c.828 0 1.5-.656 1.5-1.466 0-.81-.672-1.467-1.5-1.467zm0-10.3a1.5 1.5 0 00-1.5 1.5v5.867a1.5 1.5 0 003 0v-5.867a1.5 1.5 0 00-1.5-1.5z"
   }));
 };
 var CheckedIcon24 = function CheckedIcon24(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 32 32"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
-  }));
-};
-var CancelIcon = function CancelIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 40 40"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+    d: "M11.033 15.1l3.39 3.39 6.817-6.742c.578-.572 1.483-.595 2.02-.051.538.544.504 1.449-.075 2.021l-7.858 7.773c-.576.57-1.476.595-2.015.056L8.95 17.185c-.54-.541-.512-1.446.063-2.021.576-.576 1.48-.604 2.021-.063z"
   }));
 };
 var DEFAULT_MAX_TIMER_SECONDS = 4;
@@ -110,6 +109,8 @@ var Snackbar = function Snackbar(_ref) {
     dataAttrs = _ref.dataAttrs,
     onClose = _ref.onClose,
     onButtonClick = _ref.onButtonClick;
+  var _useResolution = useResolution(),
+    isMobile = _useResolution.isMobile;
   var _React$useState = React.useState(true),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpened = _React$useState2[0],
@@ -221,13 +222,11 @@ var Snackbar = function Snackbar(_ref) {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.textButton
     },
     onClick: handleTextButtonClick
-  }, currentButtonText), /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    className: cn('close-button')
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+  }, currentButtonText), !isMobile && /*#__PURE__*/React.createElement(ButtonClose, _extends({
+    className: cn('close-button'),
+    size: "medium",
+    theme: "black",
     onClick: handleClose
-  }), /*#__PURE__*/React.createElement(CancelIcon, {
-    className: cn('close-button-icon')
-  }))));
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton)))));
 };
 export default Snackbar;

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

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

@@ -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: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
+  }));
+};
+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

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

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

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

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Button from "../Buttons/Button/Button";
+import Header from "../Header/Header";
+import Paragraph from "../Paragraph/Paragraph";
+import "./StepperItem.css";
+export var STEPPER_ITEM_THEME_ENUM;
+(function (STEPPER_ITEM_THEME_ENUM) {
+  STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
+  STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
+  STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
+})(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
+export 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 || (STEPPER_ITEM_VIEW_ENUM = {}));
+var cn = cnCreate('mfui-9-stepper-item');
+var StepperItem = function StepperItem(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    iconButtonClassName = _ref$classes2.iconButton,
+    titleClassName = _ref$classes2.title,
+    textClassName = _ref$classes2.text,
+    linkClassName = _ref$classes2.link,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
+    title = _ref.title,
+    text = _ref.text,
+    linkText = _ref.linkText,
+    linkUrl = _ref.linkUrl,
+    icon = _ref.icon,
+    hasSeparator = _ref.hasSeparator,
+    _ref$isHorizontal = _ref.isHorizontal,
+    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
+    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,
+    iconButtonAttrs = _ref$dataAttrs2.iconButton,
+    titleAttrs = _ref$dataAttrs2.title,
+    textAttrs = _ref$dataAttrs2.text,
+    linkAttrs = _ref$dataAttrs2.link,
+    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(Header, {
+    className: cn([titleClassName]),
+    dataAttrs: {
+      root: titleAttrs
+    },
+    as: "h5",
+    align: align
+  }, title), text && /*#__PURE__*/React.createElement(Paragraph, {
+    className: cn([textClassName]),
+    dataAttrs: {
+      root: textAttrs
+    },
+    hasMargin: false,
+    align: align
+  }, text), hasLink && /*#__PURE__*/React.createElement(Button, {
+    className: cn('link', [linkClassName]),
+    dataAttrs: {
+      root: linkAttrs
+    },
+    href: linkUrl,
+    type: "text",
+    sizeAll: "extra-small"
+  }, linkText));
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
+    className: cn([className], {
+      theme: theme,
+      align: align,
+      'is-horizontal': isHorizontal
+    })
+  }), showIcon && /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-button-area')
+  }, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
+    className: cn('icon-button', [iconButtonClassName]),
+    type: "button",
+    disabled: isDisabled,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('icon')
+  }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
+    className: cn('separator')
+  })), showContent && renderContent);
+};
+export default StepperItem;

package/dist/es/components/Switcher/Switcher.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-9-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-9-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-9-switcher__content_left{margin-left:0;margin-right:12px}.mfui-9-switcher__content_left+.mfui-9-switcher__input{margin-left:auto}.mfui-9-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-9-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-9-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-9-switcher__timer{background:var(--base);border-radius:50%}.mfui-9-switcher__timer,.mfui-9-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-switcher__timer-icon{fill:var(--spbSky2)}.mfui-9-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-9-switcher__input,.mfui-9-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-9-switcher__input_disabled,.mfui-9-switcher__input_loaded,.mfui-9-switcher__input_waiting{cursor:default}.mfui-9-switcher__input:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-9-switcher__input_checked:not(.mfui-9-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-switcher__input_checked:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky2)}.mfui-9-switcher__input_checked .mfui-9-switcher__pointer{left:22px}.mfui-9-switcher__input_checked .mfui-9-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-9-switcher_disabled .mfui-9-switcher__content{color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked),.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked):not(.mfui-9-switcher__input_disabled):hover,.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__timer-icon{fill:var(--spbSky3)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-switcher{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-tap-highlight-color:transparent}.mfui-9-switcher__content{font-size:15px;font-weight:400;line-height:24px;-ms-flex-item-align:center;align-self:center;margin-left:12px}.mfui-9-switcher__content_size_small{font-size:12px;line-height:18px}.mfui-9-switcher__content_left{margin-left:0;margin-right:12px}.mfui-9-switcher__content_left+.mfui-9-switcher__input{margin-left:auto}.mfui-9-switcher__pointer{background-color:var(--stcWhite);border-radius:50%;height:24px;left:2px;position:relative;top:2px;-webkit-transition:all .3s;transition:all .3s;width:24px}.mfui-9-switcher__loader{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.mfui-9-switcher__loader:before{-webkit-animation:shining .8s linear infinite;animation:shining .8s linear infinite;background:-webkit-gradient(linear,left top,right top,from(var(--spbSky1)),color-stop(16%,var(--spbSky2)),color-stop(33%,var(--spbSky1)),color-stop(50%,var(--spbSky2)),color-stop(66%,var(--spbSky1)),color-stop(82%,var(--spbSky2)),to(var(--spbSky1)));background:linear-gradient(90deg,var(--spbSky1) 0,var(--spbSky2) 16%,var(--spbSky1) 33%,var(--spbSky2) 50%,var(--spbSky1) 66%,var(--spbSky2) 82%,var(--spbSky1) 100%);bottom:0;content:"";height:100%;left:0;position:absolute;top:0;width:300%}@-webkit-keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes shining{0%{-webkit-transform:translateX(-33%);transform:translateX(-33%)}to{-webkit-transform:translateX(0);transform:translateX(0)}}.mfui-9-switcher__timer{background:var(--base);border-radius:50%}.mfui-9-switcher__timer,.mfui-9-switcher__timer-icon{height:20px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:20px}.mfui-9-switcher__timer-icon{fill:var(--spbSky2)}.mfui-9-switcher__input{position:relative;-ms-flex-item-align:start;align-self:flex-start;border-radius:15.5px;cursor:pointer;height:28px;min-width:48px;outline:none;overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:background-color .3s;transition:background-color .3s;width:48px}.mfui-9-switcher__input,.mfui-9-switcher__input_disabled{background-color:var(--spbSky1)}.mfui-9-switcher__input_disabled,.mfui-9-switcher__input_loaded,.mfui-9-switcher__input_waiting{cursor:default}.mfui-9-switcher__input:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--spbSky2)}.mfui-9-switcher__input_checked:not(.mfui-9-switcher__input_disabled){background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-switcher__input_checked:hover:not(.mfui-9-switcher__input_disabled){background-color:var(--buttonHoverGreen);border-color:var(--buttonHoverGreen)}.mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky2)}.mfui-9-switcher__input_checked .mfui-9-switcher__pointer{left:22px}.mfui-9-switcher__input_checked .mfui-9-switcher__loader:before{background:-webkit-gradient(linear,left top,right top,from(var(--brandGreen)),color-stop(16%,var(--buttonHoverGreen)),color-stop(33%,var(--brandGreen)),color-stop(50%,var(--buttonHoverGreen)),color-stop(66%,var(--brandGreen)),color-stop(82%,var(--buttonHoverGreen)),to(var(--brandGreen)));background:linear-gradient(90deg,var(--brandGreen) 0,var(--buttonHoverGreen) 16%,var(--brandGreen) 33%,var(--buttonHoverGreen) 50%,var(--brandGreen) 66%,var(--buttonHoverGreen) 82%,var(--brandGreen) 100%)}.mfui-9-switcher__label{position:relative}.mfui-9-switcher__hidden-input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-switcher__hidden-input:focus-visible+.mfui-9-switcher__input{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-switcher_disabled .mfui-9-switcher__content{color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked),.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled{background-color:var(--spbSky2)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input:not(.mfui-9-switcher__input_checked):not(.mfui-9-switcher__input_disabled):hover,.mfui-9-switcher_theme_on-gray .mfui-9-switcher__input_disabled .mfui-9-switcher__pointer{background-color:var(--spbSky3)}.mfui-9-switcher_theme_on-gray .mfui-9-switcher__timer-icon{fill:var(--spbSky3)}

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

@@ -9,6 +9,7 @@ export interface ISwitcherProps {
         loader?: Record<string, string>;
         pointer?: Record<string, string>;
         timer?: Record<string, string>;
+        hiddenInput?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -26,6 +27,10 @@ export interface ISwitcherProps {
     textSize?: 'small' | 'medium';
     /** Позиция лейбла относительно свитчера */
     textPosition?: 'left' | 'right';
+    /** Имя компонента в DOM */
+    name?: string;
+    /** Значение свитчера */
+    value?: string;
     /** Обработчик изменения элемента */
     onChange?: (e: AccessibilityEventType) => void;
     children?: React.ReactNode;

package/dist/es/components/Switcher/Switcher.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.function.name.js";
 import * as React from 'react';
-import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import "./Switcher.css";
 var WaitingIcon = function WaitingIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -8,7 +9,9 @@ var WaitingIcon = function WaitingIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+    d: "M10.006 3.998c3.857 0 7 3.127 7 6.985 0 3.857-3.143 6.984-7 6.984s-7-3.127-7.001-6.984c0-3.858 3.143-6.985 7-6.985zM10 7.004a.5.5 0 00-.5.5v3.501H7a.5.5 0 000 1h3a.5.5 0 00.5-.5v-4a.5.5 0 00-.5-.5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.594 3.124a.514.514 0 01.715 0l2.15 2.105a.487.487 0 010 .7.515.515 0 01-.714 0l-2.15-2.105a.487.487 0 010-.7zM4.92 3.109a.515.515 0 01.716.005.487.487 0 01-.005.698l-2.165 2.09a.514.514 0 01-.715-.004.487.487 0 01.005-.7l2.164-2.09z"
   }));
 };
 var cn = cnCreate('mfui-9-switcher');
@@ -30,7 +33,9 @@ var Switcher = function Switcher(_ref) {
     textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
     _ref$textPosition = _ref.textPosition,
     textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
-    onChange = _ref.onChange;
+    onChange = _ref.onChange,
+    name = _ref.name,
+    value = _ref.value;
   var isTouch = detectTouch();
   var isLeftContent = !!children && textPosition === 'left';
   var isRightContent = !!children && textPosition === 'right';
@@ -38,7 +43,7 @@ var Switcher = function Switcher(_ref) {
   var isInteractiveDisabled = showLoader || isNoProcesses;
   var isLoaderDisplayed = showLoader && !isNoProcesses;
   var handleChange = React.useCallback(function (e) {
-    if (isInteractiveDisabled || !checkEventIsClickOrEnterPress(e)) {
+    if (isInteractiveDisabled) {
       return;
     }
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -53,16 +58,23 @@ var Switcher = function Switcher(_ref) {
       size: textSize,
       left: true
     })
-  }, children), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+  }, children), /*#__PURE__*/React.createElement("label", {
+    className: cn('label')
+  }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.hiddenInput), {
+    className: cn('hidden-input'),
+    type: "checkbox",
+    checked: checked,
+    onChange: handleChange,
+    disabled: disabled,
+    name: name,
+    value: value
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', {
       checked: checked && !waiting,
       disabled: isNoProcesses,
       loaded: showLoader && !waiting,
       'no-touch': !isTouch
-    }),
-    onClick: handleChange,
-    onKeyDown: handleChange,
-    tabIndex: isInteractiveDisabled ? undefined : 0
+    })
   }), isLoaderDisplayed && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('loader')
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), waiting ? /*#__PURE__*/React.createElement("div", _extends({
@@ -71,7 +83,7 @@ var Switcher = function Switcher(_ref) {
     className: cn('timer-icon')
   })) : /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pointer), {
     className: cn('pointer')
-  }))), isRightContent && /*#__PURE__*/React.createElement("div", {
+  })))), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
       size: textSize
     })