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

package/dist/es/components/ContentArea/ContentArea.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./ContentArea.css";
 var BACKGROUND_COLORS = {
   TRANSPARENT: 'transparent',
@@ -22,17 +24,18 @@ var Indents = {
   SMALL_MOBILE: 'small-mobile'
 };
 var cn = cnCreate('mfui-content-area');
+
 var ContentArea = function ContentArea(_ref) {
   var _ref$outerBackgroundC = _ref.outerBackgroundColor,
-    outerBackgroundColor = _ref$outerBackgroundC === void 0 ? 'transparent' : _ref$outerBackgroundC,
-    _ref$innerBackgroundC = _ref.innerBackgroundColor,
-    innerBackgroundColor = _ref$innerBackgroundC === void 0 ? 'transparent' : _ref$innerBackgroundC,
-    disableIndents = _ref.disableIndents,
-    indents = _ref.indents,
-    children = _ref.children,
-    className = _ref.className,
-    classes = _ref.classes,
-    dataAttrs = _ref.dataAttrs;
+      outerBackgroundColor = _ref$outerBackgroundC === void 0 ? 'transparent' : _ref$outerBackgroundC,
+      _ref$innerBackgroundC = _ref.innerBackgroundColor,
+      innerBackgroundColor = _ref$innerBackgroundC === void 0 ? 'transparent' : _ref$innerBackgroundC,
+      disableIndents = _ref.disableIndents,
+      indents = _ref.indents,
+      children = _ref.children,
+      className = _ref.className,
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'background-color': outerBackgroundColor
@@ -45,4 +48,20 @@ var ContentArea = function ContentArea(_ref) {
     }, classes === null || classes === void 0 ? void 0 : classes.inner)
   }), children));
 };
+
+ContentArea.propTypes = {
+  disableIndents: PropTypes.oneOf(Object.values(DisableIndents)),
+  indents: PropTypes.oneOf(Object.values(Indents)),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    inner: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
+  innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS))
+};
 export default ContentArea;

package/dist/es/components/ContentView/ContentView.css

@@ -1 +1,103 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-content-view__image{max-width:144px}.mfui-content-view__bg-image,.mfui-content-view__image{display:inline-block;margin-bottom:24px;vertical-align:top}.mfui-content-view__bg-image{background-repeat:no-repeat;background-size:100%;height:144px;width:144px}.mfui-content-view__bg-image_type_waiting{background-image:url(i/waiting.png)}.mfui-content-view__bg-image_type_error{background-image:url(i/error.png)}.mfui-content-view__bg-image_type_submit{background-image:url(i/submit.png)}.mfui-content-view__bg-image_type_success{background-image:url(i/success.png)}.mfui-content-view__bg-image_type_fail{background-image:url(i/fail.png)}.mfui-content-view__bg-image_type_update{background-image:url(i/update.png)}.mfui-content-view__bg-image_type_alarm{background-image:url(i/alarm.png)}.mfui-content-view__bg-image_type_empty{background-image:url(i/empty.png)}.mfui-content-view__bg-image_type_searchNoResult{background-image:url(i/searchNoResult.png)}.mfui-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-content-view__buttons{gap:12px;padding-top:32px}.mfui-content-view__buttons,.mfui-content-view_fullscreen{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}.mfui-content-view_fullscreen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-content-view_fullscreen .mfui-content-view__content{margin-top:auto}.mfui-content-view_fullscreen .mfui-content-view__buttons{margin-top:auto;padding-bottom:24px}
+.mfui-content-view {
+  min-width: 240px;
+  padding: 0 16px;
+  color: var(--content);
+  text-align: center;
+}
+.mfui-content-view__image {
+  display: inline-block;
+  max-width: 144px;
+  margin-bottom: 24px;
+  vertical-align: top;
+}
+.mfui-content-view__bg-image {
+  display: inline-block;
+  width: 144px;
+  height: 144px;
+  margin-bottom: 24px;
+  vertical-align: top;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+.mfui-content-view__bg-image_type_waiting {
+  background-image: url('./i/waiting.png');
+}
+.mfui-content-view__bg-image_type_error {
+  background-image: url('./i/error.png');
+}
+.mfui-content-view__bg-image_type_submit {
+  background-image: url('./i/submit.png');
+}
+.mfui-content-view__bg-image_type_success {
+  background-image: url('./i/success.png');
+}
+.mfui-content-view__bg-image_type_fail {
+  background-image: url('./i/fail.png');
+}
+.mfui-content-view__bg-image_type_update {
+  background-image: url('./i/update.png');
+}
+.mfui-content-view__bg-image_type_alarm {
+  background-image: url('./i/alarm.png');
+}
+.mfui-content-view__bg-image_type_empty {
+  background-image: url('./i/empty.png');
+}
+.mfui-content-view__bg-image_type_searchNoResult {
+  background-image: url('./i/searchNoResult.png');
+}
+.mfui-content-view__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-content-view__title {
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: 0.5px;
+  }
+}
+.mfui-content-view__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 4px;
+}
+.mfui-content-view__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-top: 32px;
+}
+.mfui-content-view_fullscreen {
+  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;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-height: 100%;
+}
+.mfui-content-view_fullscreen .mfui-content-view__content {
+  margin-top: auto;
+}
+.mfui-content-view_fullscreen .mfui-content-view__buttons {
+  margin-top: auto;
+  padding-bottom: 24px;
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import './ContentView.scss';
-type ElementType = {
+import './ContentView.less';
+declare type ElementType = {
     /** Текст */
     text?: string;
     /** Атрибут href */
@@ -45,7 +45,6 @@ export interface IContentViewProps {
         link?: Record<string, string>;
         bgImage?: Record<string, string>;
     };
-    children?: React.ReactNode;
 }
 declare const ContentView: React.FC<IContentViewProps>;
 export default ContentView;

package/dist/es/components/ContentView/ContentView.js

@@ -2,23 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.string.link.js";
 import * as React from 'react';
 import { cnCreate, convert, filterDataAttrs, titleConvertConfig } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
 import "./ContentView.css";
 var cn = cnCreate('mfui-content-view');
+
 var ContentView = function ContentView(_ref) {
   var className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    title = _ref.title,
-    type = _ref.type,
-    _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? '' : _ref$alt,
-    src = _ref.src,
-    buttonParams = _ref.buttonParams,
-    linkParams = _ref.linkParams,
-    isFullscreen = _ref.isFullscreen,
-    dataAttrs = _ref.dataAttrs,
-    children = _ref.children;
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
+      type = _ref.type,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? '' : _ref$alt,
+      src = _ref.src,
+      buttonParams = _ref.buttonParams,
+      linkParams = _ref.linkParams,
+      isFullscreen = _ref.isFullscreen,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
   var showButtons = !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) || !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
@@ -63,4 +65,36 @@ var ContentView = function ContentView(_ref) {
     }
   }, linkParams.text)));
 };
+
+ContentView.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    title: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    bgImage: PropTypes.string
+  }),
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['waiting', 'error', 'submit', 'success', 'fail', 'update', 'alarm', 'empty', 'searchNoResult']),
+  alt: PropTypes.string,
+  src: PropTypes.string,
+  buttonParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  linkParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  isFullscreen: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
 export default ContentView;

package/dist/es/components/Counter/Counter.css

@@ -1 +1,123 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-counter{-webkit-box-pack:justify;-ms-flex-pack:justify;height:32px;justify-content:space-between;width:120px}.mfui-counter,.mfui-counter__btn{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-counter__btn{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-counter__btn:hover{background-color:var(--spbSky0)}.mfui-counter__btn:disabled{background-color:var(--spbSky1);cursor:default}.mfui-counter__btn:disabled .mfui-counter__icon{fill:var(--spbSky2)}.mfui-counter__btn_left{border-bottom-left-radius:50px;border-top-left-radius:50px}.mfui-counter__btn_right{border-bottom-right-radius:50px;border-top-right-radius:50px}.mfui-counter__icon{display:block;height:20px;width:20px}.mfui-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--spbSky2);border-top:1px solid var(--spbSky2);overflow:hidden}.mfui-counter__input,.mfui-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--base);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-counter_disabled .mfui-counter__btn,.mfui-counter_disabled .mfui-counter__input{background-color:var(--spbSky1);cursor:default}.mfui-counter_disabled .mfui-counter__input{color:var(--spbSky3)}.mfui-counter_disabled .mfui-counter__icon{fill:var(--spbSky2)}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-counter {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 120px;
+  height: 32px;
+}
+.mfui-counter__btn {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  max-width: 32px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--spbSky2);
+  font-size: 20px;
+  text-decoration: none;
+  background-color: var(--base);
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  fill: var(--content);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.mfui-counter__btn:hover {
+  background-color: var(--spbSky0);
+}
+.mfui-counter__btn:disabled {
+  background-color: var(--spbSky1);
+  cursor: default;
+}
+.mfui-counter__btn:disabled .mfui-counter__icon {
+  fill: var(--spbSky2);
+}
+.mfui-counter__btn_left {
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+}
+.mfui-counter__btn_right {
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+}
+.mfui-counter__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+.mfui-counter__input-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 100%;
+  border-top: 1px solid var(--spbSky2);
+  border-bottom: 1px solid var(--spbSky2);
+  overflow: hidden;
+}
+.mfui-counter__input {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  overflow: auto;
+  color: var(--content);
+  text-align: center;
+  background: var(--base);
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: text;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-counter_disabled .mfui-counter__btn {
+  background-color: var(--spbSky1);
+  cursor: default;
+}
+.mfui-counter_disabled .mfui-counter__input {
+  background-color: var(--spbSky1);
+  cursor: default;
+  color: var(--spbSky3);
+}
+.mfui-counter_disabled .mfui-counter__icon {
+  fill: var(--spbSky2);
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './Counter.scss';
+import './Counter.less';
 export interface ICounterProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Counter/Counter.js

@@ -1,11 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.number.constructor.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.test.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./Counter.css";
+
 var IconMinus = function IconMinus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -13,6 +13,7 @@ var IconMinus = function IconMinus(props) {
     d: "M5 9h10v2H5z"
   }));
 };
+
 var IconPlus = function IconPlus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -20,29 +21,33 @@ var IconPlus = function IconPlus(props) {
     d: "M11 5H9v4H5v2h4v4h2v-4h4V9h-4V5z"
   }));
 };
+
 var cn = cnCreate('mfui-counter');
+
 var Counter = function Counter(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    _ref$isControlled = _ref.isControlled,
-    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
-    _ref$value = _ref.value,
-    outerValue = _ref$value === void 0 ? 0 : _ref$value,
-    initialValue = _ref.initialValue,
-    _ref$max = _ref.max,
-    max = _ref$max === void 0 ? 999999 : _ref$max,
-    _ref$min = _ref.min,
-    min = _ref$min === void 0 ? 0 : _ref$min,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onChange = _ref.onChange,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes;
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$value = _ref.value,
+      outerValue = _ref$value === void 0 ? 0 : _ref$value,
+      initialValue = _ref.initialValue,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 999999 : _ref$max,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? 0 : _ref$min,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var currentInitialValue = initialValue || min;
+
   var _React$useState = React.useState(currentInitialValue),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    innerValue = _React$useState2[0],
-    setInnerValue = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      innerValue = _React$useState2[0],
+      setInnerValue = _React$useState2[1];
+
   var currentValue = isControlled ? outerValue : innerValue;
   React.useEffect(function () {
     setInnerValue(currentInitialValue);
@@ -51,12 +56,15 @@ var Counter = function Counter(_ref) {
     if (!isControlled) {
       setInnerValue(inputValue);
     }
+
     if (inputValue < min) {
       onChange === null || onChange === void 0 ? void 0 : onChange(min);
     }
+
     if (inputValue > max) {
       onChange === null || onChange === void 0 ? void 0 : onChange(max);
     }
+
     if (inputValue >= min && inputValue <= max) {
       onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
     }
@@ -70,18 +78,22 @@ var Counter = function Counter(_ref) {
   var handleInputChange = React.useCallback(function (e) {
     var pattern = /^[0-9\b]+$/;
     var inputValue = e.target.value;
+
     if (inputValue !== '' && !pattern.test(inputValue)) {
       return;
     }
+
     handleValueChange(Number(inputValue));
   }, [handleValueChange]);
   var handleInputBlur = React.useCallback(function (e) {
     var inputValue = e.target.value;
     var numberValue = Number(inputValue);
+
     if (numberValue < min) {
       handleValueChange(min);
       return;
     }
+
     if (numberValue > max) {
       handleValueChange(max);
     }
@@ -118,4 +130,27 @@ var Counter = function Counter(_ref) {
     className: cn('icon')
   })));
 };
+
+Counter.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    minus: PropTypes.objectOf(PropTypes.string.isRequired),
+    plus: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  isControlled: PropTypes.bool,
+  value: PropTypes.number,
+  initialValue: PropTypes.number,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    buttonMinus: PropTypes.string,
+    buttonPlus: PropTypes.string,
+    input: PropTypes.string
+  })
+};
 export default Counter;

package/dist/es/components/Grid/Grid.css

@@ -1 +1,102 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-grid__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-grid__container_multi-row{-ms-flex-wrap:wrap;flex-wrap:wrap}.mfui-grid__container_h-align_right{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.mfui-grid__container_h-align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-grid__container_h-align_between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-grid__container_h-align_around{-ms-flex-pack:distribute;justify-content:space-around}.mfui-grid__container_v-align_top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-grid__container_v-align_bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.mfui-grid__container_v-align_center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-grid__container_v-align_baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.mfui-grid__container_gutters-left_large{margin-left:-32px}.mfui-grid__container_gutters-left_medium{margin-left:-20px}@media screen and (max-width:767px){.mfui-grid__container_gutters-left_medium{margin-left:-16px}}.mfui-grid__container_gutters-bottom_large{margin-bottom:-32px}.mfui-grid__container_gutters-bottom_medium{margin-bottom:-20px}@media screen and (max-width:767px){.mfui-grid__container_gutters-bottom_medium{margin-bottom:-16px}}.mfui-grid__column_gutter-left_large{padding-left:32px}.mfui-grid__column_gutter-left_medium{padding-left:20px}@media screen and (max-width:767px){.mfui-grid__column_gutter-left_medium{padding-left:16px}}.mfui-grid__column_gutter-bottom_large{padding-bottom:32px}.mfui-grid__column_gutter-bottom_medium{padding-bottom:20px}@media screen and (max-width:767px){.mfui-grid__column_gutter-bottom_medium{padding-bottom:16px}}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-grid__container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.mfui-grid__container_multi-row {
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mfui-grid__container_h-align_right {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+.mfui-grid__container_h-align_center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.mfui-grid__container_h-align_between {
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.mfui-grid__container_h-align_around {
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.mfui-grid__container_v-align_top {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-grid__container_v-align_bottom {
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+}
+.mfui-grid__container_v-align_center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-grid__container_v-align_baseline {
+  -webkit-box-align: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+}
+.mfui-grid__container_gutters-left_large {
+  margin-left: -32px;
+}
+.mfui-grid__container_gutters-left_medium {
+  margin-left: -20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-grid__container_gutters-left_medium {
+    margin-left: -16px;
+  }
+}
+.mfui-grid__container_gutters-bottom_large {
+  margin-bottom: -32px;
+}
+.mfui-grid__container_gutters-bottom_medium {
+  margin-bottom: -20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-grid__container_gutters-bottom_medium {
+    margin-bottom: -16px;
+  }
+}
+.mfui-grid__column_gutter-left_large {
+  padding-left: 32px;
+}
+.mfui-grid__column_gutter-left_medium {
+  padding-left: 20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-grid__column_gutter-left_medium {
+    padding-left: 16px;
+  }
+}
+.mfui-grid__column_gutter-bottom_large {
+  padding-bottom: 32px;
+}
+.mfui-grid__column_gutter-bottom_medium {
+  padding-bottom: 20px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-grid__column_gutter-bottom_medium {
+    padding-bottom: 16px;
+  }
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IGridColumn } from './GridColumn';
-import './Grid.scss';
+import './Grid.less';
 export interface IGridProps {
     /** Выравнивание всех колонок по горизонтали */
     hAlign?: 'left' | 'right' | 'center' | 'between' | 'around';