@megafon/ui-core 6.2.1 → 7.0.0

package/dist/es/colors/ColorItem/ColorItem.css

@@ -1,45 +1 @@
-.color-item {
-  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-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 120px;
-  text-align: center;
-}
-.color-item__container {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  margin-bottom: 8px;
-}
-.color-item__color {
-  position: relative;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-}
-.color-item__parent-color {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-}
-.color-item__name {
-  font-size: 14px;
-  line-height: 20px;
-}
-.color-item__code {
-  color: var(--spbSky3);
-  font-size: 12px;
-  line-height: 18px;
-}
+h1,h2,h3,h4,h5{margin:0}.color-item{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-align:center;-ms-flex-align:center;align-items:center;text-align:center;width:120px}.color-item__container{height:48px;margin-bottom:8px;position:relative;width:48px}.color-item__color{border-radius:50%;height:100%;position:relative;width:100%;z-index:0}.color-item__parent-color{border-radius:50%;height:16px;position:absolute;right:0;top:0;width:16px;z-index:1}.color-item__name{font-size:14px;line-height:20px}.color-item__code{color:var(--spbSky3);font-size:12px;line-height:18px}

package/dist/es/colors/ColorItem/ColorItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './ColorItem.less';
-declare type Props = {
+import './ColorItem.scss';
+type Props = {
     colorCode: string;
     colorName: string;
     parentColorCode?: string;

package/dist/es/colors/ColorItem/ColorItem.js

@@ -2,14 +2,13 @@ import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
 import "./ColorItem.css";
 var cn = cnCreate('color-item');
-
 var ColorItem = function ColorItem(_ref) {
   var colorCode = _ref.colorCode,
-      colorName = _ref.colorName,
-      parentColorCode = _ref.parentColorCode,
-      gradient = _ref.gradient,
-      border = _ref.border,
-      className = _ref.className;
+    colorName = _ref.colorName,
+    parentColorCode = _ref.parentColorCode,
+    gradient = _ref.gradient,
+    border = _ref.border,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: cn([className])
   }, /*#__PURE__*/React.createElement("div", {
@@ -31,5 +30,4 @@ var ColorItem = function ColorItem(_ref) {
     className: cn('code')
   }, colorCode));
 };
-
 export default ColorItem;

package/dist/es/colors/Colors.css

@@ -1,233 +1 @@
-.colors__inner {
-  margin: 0 -80px;
-  padding: 56px 80px 40px;
-  background-color: var(--spbSky0);
-  -webkit-transition: background-color 0.3s;
-  transition: background-color 0.3s;
-}
-@media screen and (max-width: 1120px) {
-  .colors__inner {
-    margin: 0 -24px;
-    padding: 24px;
-  }
-}
-@media screen and (max-width: 350px) {
-  .colors__inner {
-    margin: 0 -15px;
-    padding: 15px;
-  }
-}
-.colors__title {
-  margin-bottom: 8px;
-}
-.colors__title-note {
-  margin-bottom: 60px;
-}
-.colors__group-title {
-  margin-bottom: 24px;
-}
-@media screen and (min-width: 768px) {
-  .colors__group-title {
-    margin-bottom: 36px;
-  }
-}
-@media screen and (max-width: 1023px) {
-  .colors__basic-group {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    margin-bottom: 24px;
-  }
-}
-.colors__basic-group:last-child {
-  margin-bottom: 0;
-}
-@media screen and (min-width: 768px) {
-  .colors__basic-group:last-child {
-    padding-left: 24px;
-  }
-}
-.colors__list,
-.colors__group {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-@media screen and (max-width: 1023px) {
-  .colors__list,
-  .colors__group {
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-  }
-}
-.colors__list {
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
-  padding-bottom: 12px;
-}
-@media screen and (max-width: 1023px) {
-  .colors__list {
-    -webkit-box-ordinal-group: 3;
-        -ms-flex-order: 2;
-            order: 2;
-    padding-bottom: 0;
-  }
-}
-.colors__list_soft {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-.colors__description {
-  position: relative;
-  padding-top: 11px;
-  color: var(--spbSky3);
-  font-size: 12px;
-  line-height: 18px;
-  text-align: center;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
-}
-@media screen and (max-width: 1023px) {
-  .colors__description {
-    -webkit-box-ordinal-group: 1;
-        -ms-flex-order: 0;
-            order: 0;
-    margin-bottom: 18px;
-    padding-top: 0;
-  }
-}
-.colors__container {
-  max-width: 978px;
-}
-.colors__line {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  margin-bottom: 18px;
-}
-@media screen and (min-width: 768px) {
-  .colors__line {
-    margin-bottom: 48px;
-  }
-}
-.colors__item {
-  margin-bottom: 18px;
-}
-@media screen and (min-width: 1024px) {
-  .colors__item {
-    margin-right: 24px;
-    margin-bottom: 0;
-  }
-}
-.colors__item:last-child {
-  margin-right: 0;
-}
-.colors__item_soft {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  margin-right: 0;
-}
-@media screen and (min-width: 1024px) {
-  .colors__item_soft {
-    width: 14.28571429%;
-    min-width: 120px;
-    margin-bottom: 36px;
-  }
-}
-.colors__diagram {
-  max-width: 259px;
-  margin: 0 auto 24px;
-}
-@media screen and (min-width: 1024px) {
-  .colors__diagram {
-    width: 259px;
-    min-width: 259px;
-    height: 259px;
-    margin: 0 40px 0 0;
-  }
-}
-.colors__soft {
-  padding: 24px 16px;
-}
-@media screen and (min-width: 1024px) {
-  .colors__soft {
-    padding: 36px 32px 30px;
-  }
-}
-.colors__soft-list {
-  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-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-.colors__underline {
-  position: relative;
-  width: 100%;
-  height: 8px;
-}
-@media screen and (max-width: 1023px) {
-  .colors__underline {
-    display: none;
-  }
-}
-.colors__pointer {
-  position: absolute;
-  top: 50%;
-  display: block;
-  width: 100%;
-  height: 1px;
-  background-color: var(--spbSky2);
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-.colors__underline:after,
-.colors__underline:before,
-.colors__pointer:after {
-  content: '';
-  position: absolute;
-  width: 1px;
-  height: 4px;
-  background-color: var(--spbSky2);
-}
-.colors__underline:after,
-.colors__underline:before {
-  top: 0;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-.colors__underline:before {
-  left: 0;
-}
-.colors__underline:after {
-  right: 0;
-}
-.colors__pointer:after {
-  top: 100%;
-  left: 50%;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-}
+h1,h2,h3,h4,h5{margin:0}.colors__inner{background-color:var(--spbSky0);margin:0 -80px;padding:56px 80px 40px;-webkit-transition:background-color .3s;transition:background-color .3s}@media screen and (max-width:1120px){.colors__inner{margin:0 -24px;padding:24px}}@media screen and (max-width:350px){.colors__inner{margin:0 -15px;padding:15px}}.colors__title{margin-bottom:8px}.colors__title-note{margin-bottom:60px}.colors__group-title{margin-bottom:24px}@media screen and (min-width:768px){.colors__group-title{margin-bottom:36px}}@media screen and (max-width:1023px){.colors__basic-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:24px}}.colors__basic-group:last-child{margin-bottom:0}@media screen and (min-width:768px){.colors__basic-group:last-child{padding-left:24px}}.colors__group,.colors__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:1023px){.colors__group,.colors__list{-ms-flex-wrap:wrap;flex-wrap:wrap}}.colors__list{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;padding-bottom:12px}@media screen and (max-width:1023px){.colors__list{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding-bottom:0}}.colors__list_soft{-ms-flex-wrap:wrap;flex-wrap:wrap}.colors__description{color:var(--spbSky3);font-size:12px;line-height:18px;padding-top:11px;position:relative;text-align:center;-webkit-transition:color .3s;transition:color .3s}@media screen and (max-width:1023px){.colors__description{-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-bottom:18px;order:0;padding-top:0}}.colors__container{max-width:978px}.colors__line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:18px}@media screen and (min-width:768px){.colors__line{margin-bottom:48px}}.colors__item{margin-bottom:18px}@media screen and (min-width:1024px){.colors__item{margin-bottom:0;margin-right:24px}}.colors__item:last-child{margin-right:0}.colors__item_soft{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:0}@media screen and (min-width:1024px){.colors__item_soft{margin-bottom:36px;min-width:120px;width:100%/7}}.colors__diagram{margin:0 auto 24px;max-width:259px}@media screen and (min-width:1024px){.colors__diagram{height:259px;margin:0 40px 0 0;min-width:259px;width:259px}}.colors__soft{padding:24px 16px}@media screen and (min-width:1024px){.colors__soft{padding:36px 32px 30px}}.colors__soft-list{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-flex:1;-ms-flex-positive:1;flex-grow:1}.colors__underline{height:8px;position:relative;width:100%}@media screen and (max-width:1023px){.colors__underline{display:none}}.colors__pointer{background-color:var(--spbSky2);display:block;height:1px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%}.colors__pointer:after,.colors__underline:after,.colors__underline:before{background-color:var(--spbSky2);content:"";height:4px;position:absolute;width:1px}.colors__underline:after,.colors__underline:before{border-top-left-radius:8px;border-top-right-radius:8px;top:0}.colors__underline:before{left:0}.colors__underline:after{right:0}.colors__pointer:after{border-bottom-left-radius:8px;border-bottom-right-radius:8px;left:50%;top:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}

package/dist/es/colors/Colors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import './Colors.less';
+import './Colors.scss';
 declare const Colors: React.FC;
 export default Colors;

package/dist/es/colors/Colors.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.function.name.js";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
@@ -15,7 +15,6 @@ import Tile from "../components/Tile/Tile";
 import ColorItem from "./ColorItem/ColorItem";
 import colorsData from "./colorsData";
 import "./Colors.css";
-
 var DiagramDark = function DiagramDark(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 260 261",
@@ -111,7 +110,6 @@ var DiagramDark = function DiagramDark(props) {
     fill: "#fff"
   }));
 };
-
 var DiagramLight = function DiagramLight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 259 259",
@@ -194,58 +192,46 @@ var DiagramLight = function DiagramLight(props) {
     fill: "#fff"
   }));
 };
-
 var basic = colorsData.basic,
-    secondary = colorsData.secondary,
-    system = colorsData.system,
-    gradientColors = colorsData.gradientColors,
-    staticColors = colorsData.staticColors,
-    staticOpacity = colorsData.staticOpacity,
-    soft = colorsData.soft; // TODO: refactor this
-
+  secondary = colorsData.secondary,
+  system = colorsData.system,
+  gradientColors = colorsData.gradientColors,
+  staticColors = colorsData.staticColors,
+  staticOpacity = colorsData.staticOpacity,
+  soft = colorsData.soft;
+// TODO: refactor this
 var getThemeFromLocalStorage = function getThemeFromLocalStorage() {
   var theme = 'light';
-
   if (typeof window !== 'undefined') {
     var localStorageTheme = String(window.localStorage.getItem('theme'));
-
     if (['light', 'dark'].includes(localStorageTheme)) {
       theme = localStorageTheme;
     }
   }
-
   return theme;
 };
-
 var cn = cnCreate('colors');
-
 var Colors = function Colors() {
   var _React$useState = React.useState(getThemeFromLocalStorage()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      currentTheme = _React$useState2[0],
-      setCurrentTheme = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    currentTheme = _React$useState2[0],
+    setCurrentTheme = _React$useState2[1];
   var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      setLoad = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    setLoad = _React$useState4[1];
   React.useEffect(function () {
     function load() {
       setLoad(true);
       document.removeEventListener('css-var-load', load);
     }
-
     document.addEventListener('css-var-load', load);
   }, []);
-
   var getCurrentColorValue = function getCurrentColorValue(code) {
     return typeof document !== 'undefined' ? document.documentElement.style.getPropertyValue("--".concat(code)) : '';
   };
-
   React.useEffect(function () {
     // theme switcher from src/gatsby-theme-docz/components/SideBar/index.tsx
     var themeSwitcher = document.querySelector('[data-current-theme]');
-
     if (themeSwitcher) {
       var themeSwitcherObserver = new MutationObserver(function (mutationsList) {
         var data = mutationsList[0];
@@ -260,10 +246,8 @@ var Colors = function Colors() {
         return themeSwitcherObserver.disconnect();
       };
     }
-
     return undefined;
   }, []);
-
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -271,11 +255,10 @@ var Colors = function Colors() {
       className: cn('pointer')
     }));
   };
-
   var renderBasicColors = function renderBasicColors() {
     var title = basic.title,
-        _basic$colorsGroup = basic.colorsGroup,
-        colorsGroup = _basic$colorsGroup === void 0 ? [] : _basic$colorsGroup;
+      _basic$colorsGroup = basic.colorsGroup,
+      colorsGroup = _basic$colorsGroup === void 0 ? [] : _basic$colorsGroup;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('line')
     }, /*#__PURE__*/React.createElement(Header, {
@@ -283,7 +266,7 @@ var Colors = function Colors() {
       className: cn('group-title')
     }, title), /*#__PURE__*/React.createElement(Grid, null, colorsGroup.map(function (_ref, index) {
       var description = _ref.description,
-          colors = _ref.colors;
+        colors = _ref.colors;
       return /*#__PURE__*/React.createElement(GridColumn, {
         key: description,
         className: cn('basic-group'),
@@ -293,9 +276,9 @@ var Colors = function Colors() {
         className: cn('list')
       }, colors.map(function (_ref2) {
         var name = _ref2.name,
-            code = _ref2.code,
-            _ref2$border = _ref2.border,
-            border = _ref2$border === void 0 ? '' : _ref2$border;
+          code = _ref2.code,
+          _ref2$border = _ref2.border,
+          border = _ref2$border === void 0 ? '' : _ref2$border;
         return /*#__PURE__*/React.createElement(ColorItem, {
           className: cn('item'),
           colorName: name,
@@ -308,10 +291,8 @@ var Colors = function Colors() {
       }, description));
     })));
   };
-
   var renderColorBlock = function renderColorBlock(items) {
     var _a, _b;
-
     return /*#__PURE__*/React.createElement("div", {
       className: cn('line')
     }, /*#__PURE__*/React.createElement(Header, {
@@ -321,11 +302,11 @@ var Colors = function Colors() {
       className: cn('list')
     }, (_a = items.colorsList) === null || _a === void 0 ? void 0 : _a.colors.map(function (_ref3) {
       var name = _ref3.name,
-          code = _ref3.code,
-          _ref3$gradient = _ref3.gradient,
-          gradient = _ref3$gradient === void 0 ? '' : _ref3$gradient,
-          _ref3$border = _ref3.border,
-          border = _ref3$border === void 0 ? '' : _ref3$border;
+        code = _ref3.code,
+        _ref3$gradient = _ref3.gradient,
+        gradient = _ref3$gradient === void 0 ? '' : _ref3$gradient,
+        _ref3$border = _ref3.border,
+        border = _ref3$border === void 0 ? '' : _ref3$border;
       return /*#__PURE__*/React.createElement(ColorItem, {
         className: cn('item'),
         colorName: name,
@@ -338,13 +319,12 @@ var Colors = function Colors() {
       className: cn('description')
     }, (_b = items.colorsList) === null || _b === void 0 ? void 0 : _b.description));
   };
-
   var renderSoftColors = function renderSoftColors() {
-    var _soft$colorsList = soft.colorsList;
-    _soft$colorsList = _soft$colorsList === void 0 ? {} : _soft$colorsList;
-    var _soft$colorsList$colo = _soft$colorsList.colors,
-        colors = _soft$colorsList$colo === void 0 ? [] : _soft$colorsList$colo,
-        description = _soft$colorsList.description;
+    var _soft$colorsList = soft.colorsList,
+      _soft$colorsList2 = _soft$colorsList === void 0 ? {} : _soft$colorsList,
+      _soft$colorsList2$col = _soft$colorsList2.colors,
+      colors = _soft$colorsList2$col === void 0 ? [] : _soft$colorsList2$col,
+      description = _soft$colorsList2.description;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('soft-list')
     }, /*#__PURE__*/React.createElement("div", {
@@ -353,9 +333,9 @@ var Colors = function Colors() {
       })
     }, colors.map(function (_ref4) {
       var name = _ref4.name,
-          code = _ref4.code,
-          _ref4$parentColor = _ref4.parentColor,
-          parentColor = _ref4$parentColor === void 0 ? '' : _ref4$parentColor;
+        code = _ref4.code,
+        _ref4$parentColor = _ref4.parentColor,
+        parentColor = _ref4$parentColor === void 0 ? '' : _ref4$parentColor;
       return /*#__PURE__*/React.createElement(ColorItem, {
         className: cn('item', {
           soft: true
@@ -369,7 +349,6 @@ var Colors = function Colors() {
       className: cn('description')
     }, description));
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(Header, {
@@ -414,5 +393,4 @@ var Colors = function Colors() {
     className: cn('diagram')
   }, currentTheme === 'light' && /*#__PURE__*/React.createElement(DiagramLight, null), currentTheme === 'dark' && /*#__PURE__*/React.createElement(DiagramDark, null)), renderSoftColors()))));
 };
-
 export default Colors;

package/dist/es/colors/colorsData.d.ts

@@ -1,20 +1,20 @@
-declare type ColorType = {
+type ColorType = {
     name: string;
     code: string;
     border?: string;
     parentColor?: string;
     gradient?: string;
 };
-declare type ColorsListType = {
+type ColorsListType = {
     description: string;
     colors: ColorType[];
 };
-export declare type ColorsItemType = {
+export type ColorsItemType = {
     title: string;
     colorsList?: ColorsListType;
     colorsGroup?: ColorsListType[];
 };
-export declare type ColorsType = {
+export type ColorsType = {
     [key: string]: ColorsItemType;
 };
 declare const colors: ColorsType;

package/dist/es/components/Accordion/Accordion.css

@@ -1,89 +1 @@
-.mfui-accordion {
-  border-radius: 12px;
-  background: var(--spbSky0);
-}
-.mfui-accordion + .mfui-accordion {
-  margin-top: 8px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-accordion + .mfui-accordion {
-    margin-top: 12px;
-  }
-}
-.mfui-accordion__title-wrap {
-  position: relative;
-  padding: 16px 44px 16px 16px;
-  border-radius: 12px;
-  outline: none;
-  cursor: pointer;
-  -webkit-transition: background-color 0.3s;
-  transition: background-color 0.3s;
-}
-@media screen and (min-width: 768px) {
-  .mfui-accordion__title-wrap {
-    padding: 24px 56px 24px 24px;
-  }
-}
-.mfui-accordion__title-wrap:hover {
-  background-color: var(--spbSky1);
-}
-@media screen and (max-width: 1023px) {
-  .mfui-accordion__title-wrap:focus {
-    background-color: inherit;
-  }
-}
-.mfui-accordion__icon-box {
-  position: absolute;
-  top: 50%;
-  right: 20px;
-  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;
-          justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: var(--stcWhite);
-  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-@media screen and (min-width: 768px) {
-  .mfui-accordion__icon-box {
-    right: 24px;
-    width: 32px;
-    height: 32px;
-  }
-}
-.mfui-accordion__icon {
-  width: 20px;
-  height: 20px;
-  -webkit-transition: -webkit-transform 0.6s;
-  transition: -webkit-transform 0.6s;
-  transition: transform 0.6s;
-  transition: transform 0.6s, -webkit-transform 0.6s;
-}
-@media screen and (min-width: 768px) {
-  .mfui-accordion__icon {
-    width: 32px;
-    height: 32px;
-  }
-}
-.mfui-accordion__content-inner {
-  padding: 4px 20px 20px 16px;
-}
-@media screen and (min-width: 768px) {
-  .mfui-accordion__content-inner {
-    padding: 4px 24px 20px;
-  }
-}
-.mfui-accordion_opened .mfui-accordion__icon {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-accordion{background:var(--spbSky0);border-radius:12px}.mfui-accordion+.mfui-accordion{margin-top:8px}@media screen and (min-width:768px){.mfui-accordion+.mfui-accordion{margin-top:12px}}.mfui-accordion__title-wrap{border-radius:12px;cursor:pointer;outline:none;padding:16px 44px 16px 16px;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s}@media screen and (min-width:768px){.mfui-accordion__title-wrap{padding:24px 56px 24px 24px}}.mfui-accordion__title-wrap:hover{background-color:var(--spbSky1)}@media screen and (max-width:1023px){.mfui-accordion__title-wrap:focus{background-color:inherit}}.mfui-accordion__icon-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:20px;top:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--stcWhite);border-radius:50%;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);height:24px;justify-content:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:24px}@media screen and (min-width:768px){.mfui-accordion__icon-box{height:32px;right:24px;width:32px}}.mfui-accordion__icon{height:20px;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;width:20px}@media screen and (min-width:768px){.mfui-accordion__icon{height:32px;width:32px}}.mfui-accordion__content-inner{padding:4px 20px 20px 16px}@media screen and (min-width:768px){.mfui-accordion__content-inner{padding:4px 24px 20px}}.mfui-accordion_opened .mfui-accordion__icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IHeaderProps } from '../Header/Header';
-import './Accordion.less';
+import './Accordion.scss';
 export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -36,6 +36,7 @@ export interface IAccordionProps {
         arrowUp?: Record<string, string>;
         arrowDown?: Record<string, string>;
     };
+    children?: React.ReactNode;
     /** Обработчик клика */
     onClickAccordion?: (isOpened: boolean) => void;
 }