@megafon/ui-shared 6.0.0-beta.4 → 6.0.0

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -1 +1,106 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-video-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-video-block__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-block__content {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-video-block__content {
+    margin-top: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-video-block__content {
+    height: 100%;
+    margin-right: 20px;
+    padding-right: 20px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-video-block__content_position-right {
+    margin: 0 0 0 20px;
+    padding: 0 0 0 20px;
+  }
+}
+.mfui-video-block__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-video-block__header {
+    margin-bottom: 16px;
+  }
+}
+.mfui-video-block__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-video-block__button {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  max-width: 100%;
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-block__button {
+    -ms-flex-item-align: center;
+        align-self: center;
+  }
+}
+.mfui-video-block__video {
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.mfui-video-block__video_fix-background {
+  -webkit-filter: brightness(108.5%);
+          filter: brightness(108.5%);
+}
+.mfui-video-block__youtube {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+.mfui-video-block__iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.mfui-video-block__grid {
+  width: 100%;
+}
+.mfui-video-block__content-column_position-right {
+  -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+          order: 2;
+}
+.mfui-video-block__video-column_position-left {
+  -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+          order: 1;
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './VideoBlock.scss';
+import React, { Ref } from 'react';
+import './VideoBlock.less';
 export interface IContent {
     /** Заголовок */
     title: string;
@@ -20,7 +20,7 @@ export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
     readonly VIDEO: "video";
 };
-type VideoType = (typeof VideoTypes)[keyof typeof VideoTypes];
+declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
 export interface IVideoBlockProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -36,7 +36,7 @@ export interface IVideoBlockProps {
         description?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Тип видео */

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.array.concat.js";
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { Header, Button, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
 import "./VideoBlock.css";
 export var VideoTypes = {
   YOUTUBE: 'youtube',
@@ -12,27 +14,28 @@ export var VideoTypes = {
 };
 export var testIdPrefix = 'VideoBlock';
 var cn = cnCreate('mfui-video-block');
+
 var VideoBlock = function VideoBlock(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    rootRef = _ref.rootRef,
-    content = _ref.content,
-    _ref$videoType = _ref.videoType,
-    videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
-    videoSrc = _ref.videoSrc,
-    _ref$isMuted = _ref.isMuted,
-    isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
-    _ref$isAutoplay = _ref.isAutoplay,
-    isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
-    _ref$contentPositionR = _ref.contentPositionRight,
-    contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
-    poster = _ref.poster,
-    _ref$playsinline = _ref.playsinline,
-    playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
-    _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
-    fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      content = _ref.content,
+      _ref$videoType = _ref.videoType,
+      videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
+      videoSrc = _ref.videoSrc,
+      _ref$isMuted = _ref.isMuted,
+      isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
+      _ref$isAutoplay = _ref.isAutoplay,
+      isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
+      _ref$contentPositionR = _ref.contentPositionRight,
+      contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
+      poster = _ref.poster,
+      _ref$playsinline = _ref.playsinline,
+      playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
+      _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
+      fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -62,6 +65,7 @@ var VideoBlock = function VideoBlock(_ref) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
+
       case VideoTypes.VIDEO:
         {
           return (
@@ -84,6 +88,7 @@ var VideoBlock = function VideoBlock(_ref) {
             }))
           );
         }
+
       default:
         {
           return null;
@@ -92,12 +97,12 @@ var VideoBlock = function VideoBlock(_ref) {
   }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline, fixWhiteVideoBackground]);
   var renderContent = React.useCallback(function (_ref2) {
     var title = _ref2.title,
-      description = _ref2.description,
-      href = _ref2.href,
-      buttonDownload = _ref2.buttonDownload,
-      buttonTitle = _ref2.buttonTitle,
-      buttonRel = _ref2.buttonRel,
-      onButtonClick = _ref2.onButtonClick;
+        description = _ref2.description,
+        href = _ref2.href,
+        buttonDownload = _ref2.buttonDownload,
+        buttonTitle = _ref2.buttonTitle,
+        buttonRel = _ref2.buttonRel,
+        onButtonClick = _ref2.onButtonClick;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content', {
         'position-right': contentPositionRight
@@ -122,27 +127,29 @@ var VideoBlock = function VideoBlock(_ref) {
   var renderGridColumns = React.useCallback(function () {
     var columns = [];
     var columnWidth = content ? '7' : '10';
+
     if (content) {
       columns.push( /*#__PURE__*/React.createElement(GridColumn, {
         all: "5",
         tablet: "12",
         mobile: "12",
-        orderTablet: "1",
-        orderMobile: "1",
-        orderWide: contentPositionRight ? '1' : '0',
-        orderDesktop: contentPositionRight ? '1' : '0',
+        orderTablet: "2",
+        orderMobile: "2",
         key: "column-content",
-        className: cn('content-column')
+        className: cn('content-column', {
+          'position-right': contentPositionRight
+        })
       }, renderContent(content)));
     }
+
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
       all: columnWidth,
       tablet: "12",
       mobile: "12",
       key: "column-video",
-      orderDesktop: contentPositionRight ? '0' : '1',
-      orderWide: contentPositionRight ? '0' : '1',
-      className: cn('video-column')
+      className: cn('video-column', {
+        'position-left': contentPositionRight
+      })
     }, renderVideo()));
     return columns;
   }, [renderContent, renderVideo, content, contentPositionRight]);
@@ -154,4 +161,37 @@ var VideoBlock = function VideoBlock(_ref) {
     className: cn('grid')
   }, renderGridColumns()));
 };
+
+VideoBlock.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    description: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  content: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    href: PropTypes.string,
+    buttonTitle: PropTypes.string,
+    buttonDownload: PropTypes.bool,
+    buttonRel: PropTypes.string,
+    onButtonClick: PropTypes.func
+  }),
+  videoType: PropTypes.oneOf(Object.values(VideoTypes)),
+  videoSrc: PropTypes.string.isRequired,
+  isMuted: PropTypes.bool,
+  isAutoplay: PropTypes.bool,
+  poster: PropTypes.string,
+  playsinline: PropTypes.bool,
+  contentPositionRight: PropTypes.bool,
+  fixWhiteVideoBackground: PropTypes.bool
+};
 export default VideoBlock;

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,6 +1,2 @@
 import React from 'react';
-import { GridColumn } from '@megafon/ui-core';
-type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
-type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
-export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
-export {};
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

package/dist/lib/components/AccordionBox/AccordionBox.css

@@ -1 +1,15 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-accordion-box+.mfui-accordion-box{margin-top:8px}@media screen and (min-width:768px){.mfui-accordion-box+.mfui-accordion-box{margin-top:12px}}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-accordion-box + .mfui-accordion-box {
+  margin-top: 8px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-accordion-box + .mfui-accordion-box {
+    margin-top: 12px;
+  }
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IHeaderProps } from '@megafon/ui-core/dist/lib/components/Header/Header';
-import './AccordionBox.scss';
+import './AccordionBox.less';
 export interface IAccordionBox {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -43,5 +43,5 @@ export interface IAccordionBox {
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }
-declare const AccordionBox: React.FC<React.PropsWithChildren<IAccordionBox>>;
+declare const AccordionBox: React.FC<IAccordionBox>;
 export default AccordionBox;

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -1,36 +1,57 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.symbol.js");
+
 require("core-js/modules/es.array.index-of.js");
+
+require("core-js/modules/es.symbol.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 var _getColumnConfig = require("../../helpers/getColumnConfig");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
+
 var testIdPrefix = 'AccordionBox';
 var cn = (0, _uiHelpers.cnCreate)('mfui-accordion-box');
+
 var AccordionBox = function AccordionBox(_a) {
   var _a$hCenterAlignWide = _a.hCenterAlignWide,
-    hCenterAlignWide = _a$hCenterAlignWide === void 0 ? false : _a$hCenterAlignWide,
-    _a$isFullWidth = _a.isFullWidth,
-    isFullWidth = _a$isFullWidth === void 0 ? false : _a$isFullWidth,
-    restProps = __rest(_a, ["hCenterAlignWide", "isFullWidth"]);
+      hCenterAlignWide = _a$hCenterAlignWide === void 0 ? false : _a$hCenterAlignWide,
+      _a$isFullWidth = _a.isFullWidth,
+      isFullWidth = _a$isFullWidth === void 0 ? false : _a$isFullWidth,
+      restProps = __rest(_a, ["hCenterAlignWide", "isFullWidth"]);
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
@@ -48,4 +69,39 @@ var AccordionBox = function AccordionBox(_a) {
     }
   }), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
 };
-var _default = exports["default"] = AccordionBox;
+
+AccordionBox.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    collapse: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired),
+      inner: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.string.isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
+  isFullWidth: PropTypes.bool,
+  isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
+  hCenterAlignWide: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    openedClass: PropTypes.string,
+    root: PropTypes.string,
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
+  }),
+  onClickAccordion: PropTypes.func
+};
+var _default = AccordionBox;
+exports["default"] = _default;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './style/AudioPlayer.scss';
+import React from 'react';
+import './style/AudioPlayer.less';
 export interface IAudioPlayerProps {
     audioSrc: string;
     audioTitle: string;

package/dist/lib/components/AudioPlayer/AudioPlayer.js

@@ -1,98 +1,120 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
 var _AudioProgress = _interopRequireDefault(require("./AudioProgress"));
+
 var _AudioVolume = _interopRequireDefault(require("./AudioVolume"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var IconPause = function IconPause(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M11 10.5v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5zm7 0v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5z"
   }));
 };
+
 var IconPlay = function IconPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M11.5 22.13V9.87a.5.5 0 01.752-.431l10.508 6.13a.5.5 0 010 .863l-10.508 6.13a.5.5 0 01-.752-.433z"
   }));
 };
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-audio-player');
+
 var AudioPlayer = function AudioPlayer(_ref) {
   var audioSrc = _ref.audioSrc,
-    audioTitle = _ref.audioTitle,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'center' : _ref$position,
-    isFullWidth = _ref.isFullWidth;
-  var audioRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isPlaying = _React$useState2[0],
-    setIsPlaying = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    isPause = _React$useState4[0],
-    setIsPause = _React$useState4[1];
+      audioTitle = _ref.audioTitle,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'center' : _ref$position,
+      isFullWidth = _ref.isFullWidth;
+
+  var audioRef = _react["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isPlaying = _React$useState2[0],
+      setIsPlaying = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      isPause = _React$useState4[0],
+      setIsPause = _React$useState4[1];
+
   var handlePLay = function handlePLay() {
     var _a;
+
     setIsPlaying(true);
     setIsPause(false);
     (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
   };
+
   var handlePause = function handlePause() {
     var _a;
+
     setIsPlaying(false);
     setIsPause(true);
     (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
   };
+
   var handleChangeAudioCurrentTime = function handleChangeAudioCurrentTime(currentTime) {
     if (!audioRef || !audioRef.current) {
       return;
     }
+
     audioRef.current.currentTime = currentTime;
   };
+
   var handleChangeAudioVolume = function handleChangeAudioVolume(volume) {
     if (!audioRef || !audioRef.current) {
       return;
     }
+
     audioRef.current.volume = volume;
     audioRef.current.muted = !volume;
   };
-  var playingIconHandleClick = React.useMemo(function () {
+
+  var playingIconHandleClick = _react["default"].useMemo(function () {
     return isPlaying ? handlePause : handlePLay;
   }, [isPlaying]);
-  return /*#__PURE__*/React.createElement("div", {
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: cn({
       'full-width': isFullWidth,
       position: position
     }),
     "data-testid": "AudioPlayer"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('player')
-  }, /*#__PURE__*/React.createElement("audio", {
+  }, /*#__PURE__*/_react["default"].createElement("audio", {
     className: cn('audio'),
     ref: audioRef,
     controls: false,
     "data-testid": "AudioPlayer-audio"
-  }, /*#__PURE__*/React.createElement("source", {
+  }, /*#__PURE__*/_react["default"].createElement("source", {
     src: audioSrc,
     type: "audio/mpeg"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('playing-controls')
-  }, /*#__PURE__*/React.createElement(_uiCore.Button, {
-    icon: isPlaying ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null),
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
     onClick: playingIconHandleClick,
     sizeAll: "small",
     className: cn('button'),
@@ -101,7 +123,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
         'data-testid': 'AudioPlayer-btn'
       }
     }
-  })), /*#__PURE__*/React.createElement(_AudioProgress["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
     audioRef: audioRef,
     audioTitle: audioTitle,
     isPlaying: isPlaying,
@@ -109,8 +131,10 @@ var AudioPlayer = function AudioPlayer(_ref) {
     onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
     onPlay: handlePLay,
     onSetIsPlaying: setIsPlaying
-  }), /*#__PURE__*/React.createElement(_AudioVolume["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
     onChangeAudioVolume: handleChangeAudioVolume
   })));
 };
-var _default = exports["default"] = AudioPlayer;
+
+var _default = AudioPlayer;
+exports["default"] = _default;

package/dist/lib/components/AudioPlayer/AudioProgress.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style/AudioProgress.scss';
+import './style/AudioProgress.less';
 export declare const INTERVAL_DELAY = 1000;
 export interface IAudioProgressProps {
     audioRef: React.MutableRefObject<HTMLAudioElement | null>;