@megafon/ui-core 6.0.0-beta.4 → 6.0.1

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

@@ -1 +1,45 @@
-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}
+.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;
+}

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

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

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

@@ -2,13 +2,14 @@ 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", {
@@ -30,4 +31,5 @@ var ColorItem = function ColorItem(_ref) {
     className: cn('code')
   }, colorCode));
 };
+
 export default ColorItem;

package/dist/es/colors/Colors.css

@@ -1 +1,233 @@
-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%)}
+.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%);
+}

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import './Colors.scss';
+import './Colors.less';
 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.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.symbol.js";
+import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.function.name.js";
 import * as React from 'react';
 import { cnCreate } from '@megafon/ui-helpers';
@@ -15,6 +15,7 @@ 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",
@@ -110,6 +111,7 @@ var DiagramDark = function DiagramDark(props) {
     fill: "#fff"
   }));
 };
+
 var DiagramLight = function DiagramLight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 259 259",
@@ -192,46 +194,58 @@ 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];
@@ -246,8 +260,10 @@ var Colors = function Colors() {
         return themeSwitcherObserver.disconnect();
       };
     }
+
     return undefined;
   }, []);
+
   var renderUnderline = function renderUnderline() {
     return /*#__PURE__*/React.createElement("div", {
       className: cn('underline')
@@ -255,10 +271,11 @@ 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, {
@@ -266,7 +283,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'),
@@ -276,9 +293,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,
@@ -291,8 +308,10 @@ 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, {
@@ -302,11 +321,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,
@@ -319,12 +338,13 @@ 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$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;
+    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;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('soft-list')
     }, /*#__PURE__*/React.createElement("div", {
@@ -333,9 +353,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
@@ -349,6 +369,7 @@ var Colors = function Colors() {
       className: cn('description')
     }, description));
   };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, /*#__PURE__*/React.createElement(Header, {
@@ -393,4 +414,5 @@ 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 @@
-type ColorType = {
+declare type ColorType = {
     name: string;
     code: string;
     border?: string;
     parentColor?: string;
     gradient?: string;
 };
-type ColorsListType = {
+declare type ColorsListType = {
     description: string;
     colors: ColorType[];
 };
-export type ColorsItemType = {
+export declare type ColorsItemType = {
     title: string;
     colorsList?: ColorsListType;
     colorsGroup?: ColorsListType[];
 };
-export type ColorsType = {
+export declare type ColorsType = {
     [key: string]: ColorsItemType;
 };
 declare const colors: ColorsType;

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

@@ -1 +1,89 @@
-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)}
+.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);
+}

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

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