@megafon/ui-shared 6.4.0 → 7.0.0

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

@@ -1,12 +1,10 @@
 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.object.values.js";
-import React from 'react';
+import "core-js/modules/es.array.concat.js";
+import * as 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',
@@ -14,28 +12,27 @@ 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:
@@ -65,7 +62,6 @@ var VideoBlock = function VideoBlock(_ref) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
-
       case VideoTypes.VIDEO:
         {
           return (
@@ -88,7 +84,6 @@ var VideoBlock = function VideoBlock(_ref) {
             }))
           );
         }
-
       default:
         {
           return null;
@@ -97,12 +92,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
@@ -127,29 +122,27 @@ 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, {
+      columns.push(/*#__PURE__*/React.createElement(GridColumn, {
         all: "5",
         tablet: "12",
         mobile: "12",
-        orderTablet: "2",
-        orderMobile: "2",
+        orderTablet: "1",
+        orderMobile: "1",
+        orderWide: contentPositionRight ? '1' : '0',
+        orderDesktop: contentPositionRight ? '1' : '0',
         key: "column-content",
-        className: cn('content-column', {
-          'position-right': contentPositionRight
-        })
+        className: cn('content-column')
       }, renderContent(content)));
     }
-
-    columns.push( /*#__PURE__*/React.createElement(GridColumn, {
+    columns.push(/*#__PURE__*/React.createElement(GridColumn, {
       all: columnWidth,
       tablet: "12",
       mobile: "12",
       key: "column-video",
-      className: cn('video-column', {
-        'position-left': contentPositionRight
-      })
+      orderDesktop: contentPositionRight ? '0' : '1',
+      orderWide: contentPositionRight ? '0' : '1',
+      className: cn('video-column')
     }, renderVideo()));
     return columns;
   }, [renderContent, renderVideo, content, contentPositionRight]);
@@ -161,37 +154,4 @@ 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,2 +1,6 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+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 {};

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

@@ -1 +1,3 @@
-export declare const setRelAttribute: (rel?: string | undefined, target?: "_self" | "_blank" | "_parent" | "_top" | undefined) => string | undefined;
+type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export declare const setRelAttribute: (rel?: string, target?: TargetType) => string | undefined;
+export {};

package/dist/es/helpers/setRelAttribute.js

@@ -2,10 +2,8 @@ export var setRelAttribute = function setRelAttribute(rel, target) {
   if (rel) {
     return rel;
   }
-
   if (target !== '_self') {
     return 'noreferrer noopener';
   }
-
   return undefined;
 };

package/dist/es/hooks/useResolutions.d.ts

@@ -1,4 +1,4 @@
-export declare type useResolutionsReturnType = {
+export type useResolutionsReturnType = {
     isDesktop: boolean;
     isMobile: boolean;
     isTablet: boolean;

package/dist/es/hooks/useResolutions.js

@@ -3,43 +3,36 @@ import "core-js/modules/es.array.concat.js";
 import React from 'react';
 import { breakpoints } from '@megafon/ui-helpers';
 var MOBILE_MIDDLE_END = breakpoints.MOBILE_MIDDLE_END,
-    MOBILE_BIG_START = breakpoints.MOBILE_BIG_START,
-    MOBILE_BIG_END = breakpoints.MOBILE_BIG_END,
-    DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START;
-
+  MOBILE_BIG_START = breakpoints.MOBILE_BIG_START,
+  MOBILE_BIG_END = breakpoints.MOBILE_BIG_END,
+  DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START;
 var useResolutions = function useResolutions() {
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isMobile = _React$useState2[0],
+    setIsMobile = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isTablet = _React$useState4[0],
-      setIsTablet = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isTablet = _React$useState4[0],
+    setIsTablet = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isDesktop = _React$useState6[0],
-      setIsDesktop = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isDesktop = _React$useState6[0],
+    setIsDesktop = _React$useState6[1];
   React.useEffect(function () {
     if (typeof window === 'undefined') {
       return undefined;
     }
-
     var _window = window,
-        matchMedia = _window.matchMedia;
+      matchMedia = _window.matchMedia;
     var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
     var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
     var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
-
     var handleResize = function handleResize() {
       setIsMobile(mobileQuery.matches);
       setIsTablet(tabletQuery.matches);
       setIsDesktop(desktopQuery.matches);
     };
-
     handleResize();
     mobileQuery.addEventListener('change', handleResize);
     tabletQuery.addEventListener('change', handleResize);
@@ -56,5 +49,4 @@ var useResolutions = function useResolutions() {
     isTablet: isTablet
   };
 };
-
 export default useResolutions;

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

@@ -1,15 +1 @@
-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.less';
+import './AccordionBox.scss';
 export interface IAccordionBox {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -43,5 +43,5 @@ export interface IAccordionBox {
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }
-declare const AccordionBox: React.FC<IAccordionBox>;
+declare const AccordionBox: React.FC<React.PropsWithChildren<IAccordionBox>>;
 export default AccordionBox;

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

@@ -1,57 +1,36 @@
 "use strict";
 
-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); }
-
+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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-require("core-js/modules/es.array.index-of.js");
-
 require("core-js/modules/es.symbol.js");
-
+require("core-js/modules/es.array.index-of.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(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 }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var __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, {
@@ -69,39 +48,4 @@ var AccordionBox = function AccordionBox(_a) {
     }
   }), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
 };
-
-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;
+var _default = exports["default"] = AccordionBox;

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

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

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

@@ -1,120 +1,98 @@
 "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 = _interopRequireDefault(require("react"));
-
+var React = _interopRequireWildcard(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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var IconPause = function IconPause(props) {
-  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+  }, props), /*#__PURE__*/React.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["default"].createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+  }, props), /*#__PURE__*/React.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["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];
-
+    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];
   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["default"].useMemo(function () {
+  var playingIconHandleClick = React.useMemo(function () {
     return isPlaying ? handlePause : handlePLay;
   }, [isPlaying]);
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'full-width': isFullWidth,
       position: position
     }),
     "data-testid": "AudioPlayer"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: cn('player')
-  }, /*#__PURE__*/_react["default"].createElement("audio", {
+  }, /*#__PURE__*/React.createElement("audio", {
     className: cn('audio'),
     ref: audioRef,
     controls: false,
     "data-testid": "AudioPlayer-audio"
-  }, /*#__PURE__*/_react["default"].createElement("source", {
+  }, /*#__PURE__*/React.createElement("source", {
     src: audioSrc,
     type: "audio/mpeg"
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: cn('playing-controls')
-  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
-    icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
+  }, /*#__PURE__*/React.createElement(_uiCore.Button, {
+    icon: isPlaying ? /*#__PURE__*/React.createElement(IconPause, null) : /*#__PURE__*/React.createElement(IconPlay, null),
     onClick: playingIconHandleClick,
     sizeAll: "small",
     className: cn('button'),
@@ -123,7 +101,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
         'data-testid': 'AudioPlayer-btn'
       }
     }
-  })), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
+  })), /*#__PURE__*/React.createElement(_AudioProgress["default"], {
     audioRef: audioRef,
     audioTitle: audioTitle,
     isPlaying: isPlaying,
@@ -131,10 +109,8 @@ var AudioPlayer = function AudioPlayer(_ref) {
     onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
     onPlay: handlePLay,
     onSetIsPlaying: setIsPlaying
-  }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
+  }), /*#__PURE__*/React.createElement(_AudioVolume["default"], {
     onChangeAudioVolume: handleChangeAudioVolume
   })));
 };
-
-var _default = AudioPlayer;
-exports["default"] = _default;
+var _default = exports["default"] = AudioPlayer;

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

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