@megafon/ui-core 8.17.1 → 8.17.3

package/dist/es/components/Badges/PromoBadge/PromoBadge.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import './PromoBadge.scss';
+export declare const PromoBadgeColors: {
+    readonly BERRY: "berry";
+    readonly BRAND_PURPLE_20: "brand-purple-20";
+    readonly BRAND_PURPLE: "brand-purple";
+    readonly NIGHT: "night";
+    readonly SKY: "sky";
+    readonly FLAMINGO: "flamingo";
+    readonly GRADIENT_PURPLE: "gradient-purple";
+};
+type PromoBadgeColorsType = (typeof PromoBadgeColors)[keyof typeof PromoBadgeColors];
+export declare const PromoBadgeSize: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+type PromoBadgeSizeType = (typeof PromoBadgeSize)[keyof typeof PromoBadgeSize];
+export declare const PromoBadgeTypes: {
+    readonly HIT: "hit";
+    readonly NEW: "new";
+    readonly VIP: "vip";
+    readonly POPULAR: "popular";
+    readonly USER_CHOICE: "user-choice";
+    readonly INTERESTS: "interests";
+};
+type PromoBadgeTypesType = (typeof PromoBadgeTypes)[keyof typeof PromoBadgeTypes];
+export interface IPromoBadgeProps {
+    /** Цвет промо-бэйджа */
+    color?: PromoBadgeColorsType;
+    /** Размер промо-бэйджа */
+    size?: PromoBadgeSizeType;
+    /** DEPRECATED Тип промо-бэйджа (Используйте проп `color`) */
+    type?: PromoBadgeTypesType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+}
+declare const PromoBadge: React.FC<IPromoBadgeProps>;
+export default PromoBadge;

package/dist/es/components/Badges/PromoBadge/PromoBadge.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import "./PromoBadge.css";
+export var PromoBadgeColors = {
+  BERRY: 'berry',
+  BRAND_PURPLE_20: 'brand-purple-20',
+  BRAND_PURPLE: 'brand-purple',
+  NIGHT: 'night',
+  SKY: 'sky',
+  FLAMINGO: 'flamingo',
+  GRADIENT_PURPLE: 'gradient-purple'
+};
+export var PromoBadgeSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+// DEPRECATED
+export var PromoBadgeTypes = {
+  HIT: 'hit',
+  NEW: 'new',
+  VIP: 'vip',
+  POPULAR: 'popular',
+  USER_CHOICE: 'user-choice',
+  INTERESTS: 'interests'
+};
+var cn = cnCreate('mfui-promo-badge');
+var PromoBadge = function PromoBadge(_ref) {
+  var color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? PromoBadgeTypes.HIT : _ref$type,
+    className = _ref.className,
+    children = _ref.children,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      size: size,
+      type: color ? undefined : type
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+export default PromoBadge;

package/dist/es/components/Badges/StatusBadge/StatusBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-status-badge__container{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--content);font-weight:400;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-status-badge__text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-status-badge__arrow,.mfui-status-badge__icon{height:20px;width:20px}.mfui-status-badge__icon{margin-right:2px}@media screen and (min-width:1024px){.mfui-status-badge_adaptive .mfui-status-badge__container{font-size:15px;line-height:24px}}.mfui-status-badge_tooltip .mfui-status-badge__container{cursor:pointer}.mfui-status-badge__tooltip{width:288px}.mfui-status-badge_view_dot .mfui-status-badge__container{gap:8px}.mfui-status-badge_view_dot .mfui-status-badge__container:before{border-radius:50%;content:"";height:8px;width:8px}.mfui-status-badge_view_dot.mfui-status-badge_tooltip .mfui-status-badge__text{-webkit-text-decoration:underline dashed var(--spbSky3);text-decoration:underline dashed var(--spbSky3);text-decoration-thickness:1px;text-underline-offset:3px;-webkit-transition:-webkit-text-decoration .3s ease-out;transition:-webkit-text-decoration .3s ease-out;transition:text-decoration .3s ease-out;transition:text-decoration .3s ease-out,-webkit-text-decoration .3s ease-out}@media (pointer:fine){.mfui-status-badge_view_dot.mfui-status-badge_tooltip .mfui-status-badge__container:hover .mfui-status-badge__text{-webkit-text-decoration:underline dashed var(--content);text-decoration:underline dashed var(--content);text-decoration-thickness:1px}.mfui-status-badge_view_dot.mfui-status-badge_tooltip .mfui-status-badge__container:hover:before{-webkit-animation:pulse .8s ease-out;animation:pulse .8s ease-out}}@media screen and (min-width:1024px){.mfui-status-badge_view_dot.mfui-status-badge_adaptive.mfui-status-badge_tooltip .mfui-status-badge__text{text-underline-offset:5px}}.mfui-status-badge_view_dot.mfui-status-badge_theme_green .mfui-status-badge__container:before{background-color:var(--brandGreen)}.mfui-status-badge_view_dot.mfui-status-badge_theme_blue .mfui-status-badge__container:before{background-color:var(--sky)}.mfui-status-badge_view_dot.mfui-status-badge_theme_gray .mfui-status-badge__container:before{background-color:var(--spbSky3)}.mfui-status-badge_view_dot.mfui-status-badge_theme_orange .mfui-status-badge__container:before{background-color:var(--137C)}.mfui-status-badge_view_dot.mfui-status-badge_theme_red .mfui-status-badge__container:before{background-color:var(--fury)}.mfui-status-badge_view_icon .mfui-status-badge__container{border:1px solid var(--spbSky1);border-radius:8px;padding:1px 7px 1px 1px}.mfui-status-badge_view_icon .mfui-status-badge__arrow{rotate:180deg;-webkit-transition:rotate .3s ease-out,fill .3s ease-out;transition:rotate .3s ease-out,fill .3s ease-out;fill:var(--spbSky3)}.mfui-status-badge_view_icon.mfui-status-badge_opened .mfui-status-badge__arrow{rotate:1turn}@media (pointer:fine){.mfui-status-badge_view_icon .mfui-status-badge__container:hover .mfui-status-badge__arrow{fill:var(--content)}}.mfui-status-badge_view_icon.mfui-status-badge_tooltip .mfui-status-badge__container{padding-right:1px}@media screen and (min-width:1024px){.mfui-status-badge_view_icon.mfui-status-badge_adaptive .mfui-status-badge__container{padding:3px 10px 3px 5px}.mfui-status-badge_view_icon.mfui-status-badge_adaptive .mfui-status-badge__icon{margin-right:4px}.mfui-status-badge_view_icon.mfui-status-badge_adaptive .mfui-status-badge__text{margin-top:-1px}.mfui-status-badge_view_icon.mfui-status-badge_adaptive.mfui-status-badge_tooltip .mfui-status-badge__container{padding-right:5px}}.mfui-status-badge_view_icon.mfui-status-badge_theme_green .mfui-status-badge__icon{fill:var(--brandGreen)}.mfui-status-badge_view_icon.mfui-status-badge_theme_blue .mfui-status-badge__icon{fill:var(--sky)}.mfui-status-badge_view_icon.mfui-status-badge_theme_gray .mfui-status-badge__icon{fill:var(--spbSky3)}.mfui-status-badge_view_icon.mfui-status-badge_theme_orange .mfui-status-badge__icon{fill:var(--137C)}.mfui-status-badge_view_icon.mfui-status-badge_theme_red .mfui-status-badge__icon{fill:var(--fury)}@-webkit-keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}@keyframes pulse{0%{opacity:1;scale:1}30%{opacity:.7}50%{opacity:1;scale:1.3}70%{opacity:.7}to{opacity:1;scale:1}}

package/dist/es/components/Badges/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Tooltip from '../../Tooltip/Tooltip';
+import './StatusBadge.scss';
+type TooltipPropsType = Pick<React.ComponentProps<typeof Tooltip>, 'title' | 'text' | 'buttonText' | 'placement' | 'isPortal' | 'portalSelector' | 'isHiddenResize' | 'onClick' | 'onOpen' | 'onClose' | 'onCloseButtonClick'>;
+export interface IStatusBadgeProps {
+    /** Вид компонента */
+    view?: 'icon' | 'dot';
+    /** Тема компонента */
+    theme?: 'green' | 'blue' | 'gray' | 'orange' | 'red';
+    /** Тип иконки (для view = icon) */
+    iconType?: 'timer' | 'price' | 'checkInvert' | 'attention' | 'info' | 'profileFull';
+    /** Адаптивный режим */
+    isAdaptive?: boolean;
+    /** Тултип */
+    tooltip?: TooltipPropsType;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        tooltip?: string;
+        tooltipButton?: string;
+        tooltipCloseButton?: string;
+    };
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        container?: Record<string, string>;
+        icon?: Record<string, string>;
+        arrow?: Record<string, string>;
+        tooltip?: Record<string, string>;
+        tooltipButton?: Record<string, string>;
+        tooltipCloseButton?: Record<string, string>;
+    };
+    children: React.ReactNode;
+}
+declare const StatusBadge: React.FC<IStatusBadgeProps>;
+export default StatusBadge;

package/dist/es/components/Badges/StatusBadge/StatusBadge.js

@@ -0,0 +1,156 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Tooltip from "../../Tooltip/Tooltip";
+import "./StatusBadge.css";
+var ProfileFullIcon = function ProfileFullIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M13 12l-3-3-3 3-1-1 4-4 4 4z"
+  }));
+};
+var AttentionIcon = function AttentionIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
+  }));
+};
+var CheckInvertIcon = function CheckInvertIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.295 9.467l1.77 1.77 3.66-5.22 1.31.918-4.745 6.79-3.126-3.127 1.131-1.13z"
+  }));
+};
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
+  }));
+};
+var PriceIcon = function PriceIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM7.75 5.75H11a2.75 2.75 0 010 5.5H9.25V12h3v1.5h-3v1.75h-1.5V13.5h-1V12h1v-.75h-1v-1.5h1v-4zM11 7.25H9.25v2.5H11a1.25 1.25 0 000-2.5z"
+  }));
+};
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, 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"
+  }));
+};
+var statusIconsMap = {
+  attention: AttentionIcon,
+  checkInvert: CheckInvertIcon,
+  info: InfoIcon,
+  price: PriceIcon,
+  profileFull: ProfileFullIcon,
+  timer: TimerIcon
+};
+var cn = cnCreate('mfui-status-badge');
+var StatusBadge = function StatusBadge(_ref) {
+  var _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'dot' : _ref$view,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+    _ref$isAdaptive = _ref.isAdaptive,
+    isAdaptive = _ref$isAdaptive === void 0 ? false : _ref$isAdaptive,
+    _ref$iconType = _ref.iconType,
+    iconType = _ref$iconType === void 0 ? 'timer' : _ref$iconType,
+    tooltip = _ref.tooltip,
+    children = _ref.children,
+    className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs;
+  var triggerRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpened = _React$useState2[0],
+    setIsOpened = _React$useState2[1];
+  var showIcon = view === 'icon';
+  var showArrow = showIcon && !!tooltip;
+  var StatusIconElement = statusIconsMap[iconType];
+  var handleOpen = React.useCallback(function (e) {
+    var _a;
+    setIsOpened(true);
+    (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.onOpen) === null || _a === void 0 ? void 0 : _a.call(tooltip, e);
+  }, [tooltip]);
+  var handleClose = React.useCallback(function (e) {
+    var _a;
+    setIsOpened(false);
+    (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.onClose) === null || _a === void 0 ? void 0 : _a.call(tooltip, e);
+  }, [tooltip]);
+  var handleCloseButtonClick = React.useCallback(function (e) {
+    var _a;
+    setIsOpened(false);
+    (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.onCloseButtonClick) === null || _a === void 0 ? void 0 : _a.call(tooltip, e);
+  }, [tooltip]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      view: view,
+      theme: theme,
+      adaptive: isAdaptive,
+      tooltip: !!tooltip,
+      opened: isOpened
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.container), {
+    className: cn('container', [classes === null || classes === void 0 ? void 0 : classes.container]),
+    ref: triggerRef
+  }), showIcon && /*#__PURE__*/React.createElement(StatusIconElement, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon), {
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, children), showArrow && /*#__PURE__*/React.createElement(ArrowIcon, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow), {
+    className: cn('arrow')
+  }))), !!tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    className: cn('tooltip'),
+    title: tooltip.title,
+    text: tooltip.text,
+    buttonText: tooltip.buttonText,
+    isHiddenResize: tooltip.isHiddenResize,
+    isPortal: tooltip.isPortal,
+    portalSelector: tooltip.portalSelector,
+    triggerElement: triggerRef,
+    hasCloseButton: true,
+    placement: tooltip.placement || 'bottom',
+    fallbackPlacements: ['top', 'left', 'right'],
+    offset: "small",
+    triggerEvent: "click",
+    colorTheme: "blue",
+    onClick: tooltip.onClick,
+    onCloseButtonClick: handleCloseButtonClick,
+    onClose: handleClose,
+    onOpen: handleOpen,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tooltip,
+      button: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tooltipButton,
+      close: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tooltipCloseButton
+    },
+    classes: {
+      root: classes === null || classes === void 0 ? void 0 : classes.tooltip,
+      button: classes === null || classes === void 0 ? void 0 : classes.tooltipButton,
+      close: classes === null || classes === void 0 ? void 0 : classes.tooltipCloseButton
+    }
+  }));
+};
+export default StatusBadge;

package/dist/es/components/Badges/TimerBadge/TimerBadge.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-timer-badge{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--base);border:1px solid var(--spbSky1);border-radius:12px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:hidden;padding:1px 8px 1px 2px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-timer-badge_theme_grey .mfui-timer-badge__text{color:var(--spbSky3)}.mfui-timer-badge_theme_grey .mfui-timer-badge__icon{fill:var(--spbSky3)}.mfui-timer-badge_theme_red .mfui-timer-badge__text{color:var(--fury)}.mfui-timer-badge_theme_red .mfui-timer-badge__icon{fill:var(--fury)}.mfui-timer-badge__text{font-family:inherit;font-size:12px;font-weight:500;line-height:18px;margin-left:2px}.mfui-timer-badge__icon{height:20px;width:20px}.mfui-timer-badge__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-timer-badge__icon-container_shadow:before{border-radius:50%;-webkit-box-shadow:0 0 6px var(--fury);box-shadow:0 0 6px var(--fury);content:"";height:16px;left:2px;position:absolute;top:2px;width:16px}

package/dist/es/components/Badges/TimerBadge/TimerBadge.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import './TimerBadge.scss';
+export declare const TIMEOUT = 1000;
+export interface ITimerBadgeProps {
+    /** Дата окончания таймера */
+    expirationDate: Date;
+    /** Граница переключения в режим обратного отсчёта, в секундах */
+    countdownStart?: number;
+    /** Отображение дополнительного текста */
+    hasPrefix?: boolean;
+    /** Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true. */
+    countdownText?: string;
+    /** Текст перед таймером в режиме даты. Появляется при hasPrefix=true. */
+    expirationDateText?: string;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        timer?: Record<string, string>;
+        iconContainer?: Record<string, string>;
+    };
+}
+declare const TimerBadge: React.FC<ITimerBadgeProps>;
+export default TimerBadge;

package/dist/es/components/Badges/TimerBadge/TimerBadge.js

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.date.now.js";
+import "core-js/modules/web.timers.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Timer from "./components/Timer/Timer";
+import "./TimerBadge.css";
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, 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"
+  }));
+};
+var SECONDS_IN_HOUR = 3600;
+var MS_IN_SECOND = 1000;
+export var TIMEOUT = 1000;
+var TimerBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey'
+};
+var cn = cnCreate('mfui-timer-badge');
+var TimerBadge = function TimerBadge(_ref) {
+  var expirationDate = _ref.expirationDate,
+    _ref$countdownStart = _ref.countdownStart,
+    countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+    _ref$hasPrefix = _ref.hasPrefix,
+    hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+    _ref$countdownText = _ref.countdownText,
+    countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+    _ref$expirationDateTe = _ref.expirationDateText,
+    expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs;
+  var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
+  var _React$useState = React.useState(remainingTime),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actualRemainingTime = _React$useState2[0],
+    setActualRemainingTime = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    showCountdown = _React$useState4[0],
+    setShowCountdown = _React$useState4[1];
+  var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
+  var isTimeExpired = actualRemainingTime < 1;
+  var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
+  var additionalText = showCountdown ? countdownText : expirationDateText;
+  React.useEffect(function () {
+    setShowCountdown(actualRemainingTime < countdownStart);
+  }, [actualRemainingTime, countdownStart]);
+  React.useEffect(function () {
+    if (isTimeExpired) {
+      return undefined;
+    }
+    var timeoutId = window.setTimeout(function () {
+      return setActualRemainingTime(actualRemainingTime - 1);
+    }, TIMEOUT);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [isTimeExpired, showCountdown, actualRemainingTime]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme
+    }, className)
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
+    className: cn('icon-container', {
+      shadow: isLastHour && showCountdown
+    })
+  }), /*#__PURE__*/React.createElement(TimerIcon, {
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text')
+  }), isTimeExpired ? 'Время действия истекло' : /*#__PURE__*/React.createElement(Timer, {
+    additionalText: hasPrefix ? additionalText : undefined,
+    showCountdown: showCountdown,
+    expirationDate: expirationDate,
+    actualRemainingTime: actualRemainingTime,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer
+    }
+  })));
+};
+export default TimerBadge;

package/dist/es/components/Badges/TimerBadge/components/Timer/Timer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare const getCountdownText: (remainingTime?: number) => string;
+interface ITimerProps {
+    actualRemainingTime: number;
+    expirationDate: Date;
+    showCountdown: boolean;
+    additionalText?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Timer: React.FC<ITimerProps>;
+export default Timer;

package/dist/es/components/Badges/TimerBadge/components/Timer/Timer.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.math.trunc.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import format from 'date-fns/format';
+import ruLocale from 'date-fns/locale/ru';
+var SECONDS_IN_DAY = 86400;
+var SECONDS_IN_HOUR = 3600;
+var SECONDS_IN_MINUTE = 60;
+var formatDate = function formatDate(date, pattern) {
+  return format(date, pattern, {
+    locale: ruLocale
+  });
+};
+export var getCountdownText = function getCountdownText() {
+  var remainingTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var isMoreHourAndLessDay = remainingTime >= SECONDS_IN_HOUR && remainingTime < SECONDS_IN_DAY;
+  var truncTime = function truncTime() {
+    var divider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    return Math.trunc(remainingTime / divider);
+  };
+  switch (true) {
+    case remainingTime <= 0:
+      {
+        return '';
+      }
+    case remainingTime < SECONDS_IN_MINUTE:
+      {
+        var seconds = truncTime();
+        return "".concat(seconds, " \u0441\u0435\u043A");
+      }
+    case remainingTime < SECONDS_IN_HOUR:
+      {
+        var minutes = truncTime(SECONDS_IN_MINUTE);
+        return "".concat(minutes, " \u043C\u0438\u043D");
+      }
+    case isMoreHourAndLessDay:
+      {
+        var hours = truncTime(SECONDS_IN_HOUR);
+        var secondsLeft = remainingTime - hours * SECONDS_IN_HOUR;
+        var _minutes = Math.trunc(secondsLeft / SECONDS_IN_MINUTE);
+        return _minutes ? "".concat(hours, " \u0447 ").concat(_minutes, " \u043C\u0438\u043D") : "".concat(hours, " \u0447");
+      }
+    case remainingTime >= SECONDS_IN_DAY:
+      {
+        var days = truncTime(SECONDS_IN_DAY);
+        var _secondsLeft = remainingTime - days * SECONDS_IN_DAY;
+        var _hours = Math.trunc(_secondsLeft / SECONDS_IN_HOUR);
+        return _hours ? "".concat(days, " \u0434\u043D ").concat(_hours, " \u0447") : "".concat(days, " \u0434\u043D");
+      }
+    default:
+      {
+        return '';
+      }
+  }
+};
+var cn = cnCreate('mfui-timer');
+var Timer = function Timer(_ref) {
+  var actualRemainingTime = _ref.actualRemainingTime,
+    expirationDate = _ref.expirationDate,
+    showCountdown = _ref.showCountdown,
+    additionalText = _ref.additionalText,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), additionalText && /*#__PURE__*/React.createElement("span", null, additionalText, " "), /*#__PURE__*/React.createElement("span", null, showCountdown ? getCountdownText(actualRemainingTime) : formatDate(expirationDate, 'dd MMMM yyyy')));
+};
+export default Timer;

package/dist/es/components/Banner/Banner.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;justify-content:center;margin-top:32px}.mfui-banner__pagination_position_top-in{left:0;margin-top:0;padding:0 24px;position:absolute;top:16px;width:100%}@media screen and (min-width:1280px){.mfui-banner__pagination_position_top-in{padding:0 80px}}.mfui-banner__pagination_type_flat{gap:4px}@media screen and (min-width:1280px){.mfui-banner__pagination_type_flat{gap:10px}}.mfui-banner__pagination_align_left{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_margin-top{margin-top:24px}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}

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

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import SwiperCore from 'swiper';
+import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
+import './Banner.scss';
+export declare const BackgroundColor: {
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly GRADIENT: "gradient";
+    readonly LIGHT: "light";
+};
+type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+export declare const Radius: {
+    readonly CORNERS: "corners";
+    readonly ROUNDED: "rounded";
+};
+export type RadiusType = (typeof Radius)[keyof typeof Radius];
+export declare const NavTheme: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+export declare const PaginationAlign: {
+    readonly CENTER: "center";
+    readonly LEFT: "left";
+};
+export type PaginationAlignType = (typeof PaginationAlign)[keyof typeof PaginationAlign];
+export declare const PaginationTheme: {
+    readonly DEFAULT: "default";
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+export type PaginationThemeType = (typeof PaginationTheme)[keyof typeof PaginationTheme];
+export declare const PaginationButtonType: {
+    readonly DOT: "dot";
+    readonly FLAT: "flat";
+};
+export type PaginationType = (typeof PaginationButtonType)[keyof typeof PaginationButtonType];
+export declare const PaginationPositionType: {
+    readonly BOTTOM_OUT: "bottom-out";
+    readonly TOP_IN: "top-in";
+};
+type PaginationPositionType = (typeof PaginationPositionType)[keyof typeof PaginationPositionType];
+export interface IBannerProps {
+    /** Сss класс для внешнего контейнера */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        swiper?: string;
+        slide?: string;
+        arrow?: string;
+        arrowPrev?: string;
+        arrowNext?: string;
+        pagination?: string;
+        dot?: string;
+        noSwiping?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        swiper?: Record<string, string>;
+        slide?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
+        pagination?: Record<string, string>;
+        dot?: Record<string, string>;
+        dotSvg?: Record<string, string>;
+        dotInner?: Record<string, string>;
+    };
+    /** Выравнивание блока пагинации. DEPRECATED: 'left' */
+    paginationAlign?: PaginationAlignType;
+    /** Цветовая тема пагинации */
+    paginationTheme?: PaginationThemeType;
+    /** Тип кнопок пагинации */
+    paginationType?: PaginationType;
+    /** Расположение пагинации */
+    paginationPosition?: PaginationPositionType;
+    /** Предполагается использование с наезжанием на баннер следующего за баннером элемента */
+    withPaginationBottomOffset?: boolean;
+    /** Автоматическая прокрутка */
+    autoPlay?: boolean;
+    /** Задержка автоматической прокрутки */
+    autoPlayDelay?: number;
+    /** Прокрутка с зацикливанием */
+    loop?: boolean;
+    /** Пауза автоматической прокрутки при наведении курсора на компонент */
+    pauseOnHover?: boolean;
+    /** Фоновый цвет */
+    backgroundColor?: BackgroundColorType;
+    /** Радиус границы */
+    radius?: RadiusType;
+    /** Цветовая тема навигации (не используется) */
+    navTheme?: NavThemeType;
+    /** Цветовая тема стрелок */
+    arrowTheme?: ArrowThemeType;
+    /** Автоматическая высота слайдов */
+    autoHeight?: boolean;
+    /** Не увеличивать время прокрутки при взаимодействии с баннером */
+    noIncreaseAutoplayDelay?: boolean;
+    /** Показать часть следующего слайда */
+    showNextSlide?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
+    children?: React.ReactNode;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperCore) => void;
+    /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */
+    onNextClick?: (index: number) => void;
+    /** Обработчик клика по стрелке "назад" (должен быть обернут в useCallback) */
+    onPrevClick?: (index: number) => void;
+    /** Обработчик клика по точке навигации (должен быть обернут в useCallback) */
+    onDotClick?: (index: number) => void;
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (index: number) => void;
+}
+declare const Banner: React.FC<IBannerProps>;
+export default Banner;