@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js

@@ -1,59 +1,84 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.DisplayValue = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.object.values.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var DisplayValue = exports.DisplayValue = {
+
+var DisplayValue = {
   LINE: 'line',
   INPUT: 'input'
 };
+exports.DisplayValue = DisplayValue;
 var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
 var cn = (0, _uiHelpers.cnCreate)('mfui-slider-display-value');
+
 var SliderDisplayValue = function SliderDisplayValue(_ref) {
   var className = _ref.className,
-    value = _ref.value,
-    displayValueType = _ref.displayValueType,
-    displayValuePrefix = _ref.displayValuePrefix,
-    displayValueUnit = _ref.displayValueUnit,
-    disabled = _ref.disabled,
-    dataAttrs = _ref.dataAttrs,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur;
+      value = _ref.value,
+      displayValueType = _ref.displayValueType,
+      displayValuePrefix = _ref.displayValuePrefix,
+      displayValueUnit = _ref.displayValueUnit,
+      disabled = _ref.disabled,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur;
   var inputRef = React.useRef(null);
+
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setIsFocused = _React$useState2[1];
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isFocused = _React$useState2[0],
+      setIsFocused = _React$useState2[1];
+
   var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
+
   var handleInputBlur = function handleInputBlur() {
     setIsFocused(false);
     onBlur();
   };
+
   var handleInputFocus = function handleInputFocus() {
     setIsFocused(true);
   };
+
   var handleKeyDown = function handleKeyDown(e) {
     var _a;
+
     if (e.key === 'Enter') {
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
       onBlur();
       return;
     }
+
     if (charsAllowedByNumberInput.includes(e.key)) {
       e.preventDefault();
     }
   };
-  return /*#__PURE__*/(
+
+  return (
+    /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     React.createElement("label", (0, _extends2["default"])({
       className: cn({
@@ -83,4 +108,18 @@ var SliderDisplayValue = function SliderDisplayValue(_ref) {
     }, displayValueUnit))
   );
 };
-var _default = exports["default"] = SliderDisplayValue;
+
+SliderDisplayValue.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayValueUnit: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = SliderDisplayValue;
+exports["default"] = _default;

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.css

@@ -1 +1,15 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-scale{font-size:12px;height:18px;line-height:18px;margin:8px 12px 0;position:relative}.mfui-slider-scale_disabled{color:var(--spbSky3)}.mfui-slider-scale__item{position:absolute;translate:-50% 0;white-space:nowrap}
+.mfui-slider-scale {
+  font-size: 12px;
+  line-height: 18px;
+  position: relative;
+  height: 18px;
+  margin: 8px 12px 0 12px;
+}
+.mfui-slider-scale_disabled {
+  color: var(--spbSky3);
+}
+.mfui-slider-scale__item {
+  position: absolute;
+  translate: -50% 0;
+  white-space: nowrap;
+}

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import './SliderScale.scss';
+import './SliderScale.less';
 export declare const Scale: {
     readonly BASE: "base";
     readonly INTERVAL: "interval";
 };
-export type ScaleType = (typeof Scale)[keyof typeof Scale];
+export declare type ScaleType = typeof Scale[keyof typeof Scale];
 export interface ISliderScale {
     minValue: number;
     maxValue: number;

package/dist/lib/components/Sliders/components/SliderScale/SliderScale.js

@@ -1,31 +1,47 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Scale = void 0;
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.values.js");
+
 var React = _interopRequireWildcard(require("react"));
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 var _helpers = require("./helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Scale = exports.Scale = {
+
+var Scale = {
   BASE: 'base',
   INTERVAL: 'interval'
 };
+exports.Scale = Scale;
 var cn = (0, _uiHelpers.cnCreate)('mfui-slider-scale');
+
 var SliderScale = function SliderScale(_ref) {
   var minValue = _ref.minValue,
-    maxValue = _ref.maxValue,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? 'base' : _ref$scale,
-    customScale = _ref.customScale,
-    disabled = _ref.disabled,
-    dataAttrs = _ref.dataAttrs;
+      maxValue = _ref.maxValue,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? 'base' : _ref$scale,
+      customScale = _ref.customScale,
+      disabled = _ref.disabled,
+      dataAttrs = _ref.dataAttrs;
   var builtInScale = scale === Scale.BASE ? [minValue, maxValue] : (0, _helpers.getIntervalScale)(minValue, maxValue);
   var currentScale = customScale || builtInScale;
   var leftOffset = 100 / (currentScale.length - 1);
@@ -43,4 +59,16 @@ var SliderScale = function SliderScale(_ref) {
     }, item);
   }));
 };
-var _default = exports["default"] = SliderScale;
+
+SliderScale.propTypes = {
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  scale: PropTypes.oneOf(Object.values(Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = SliderScale;
+exports["default"] = _default;

package/dist/lib/components/Sliders/components/SliderScale/helpers.js

@@ -3,21 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIntervalScale = exports["default"] = void 0;
+exports["default"] = exports.getIntervalScale = void 0;
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-require("core-js/modules/es.array.concat.js");
+
 require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
 require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.reduce.js");
+
 require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
+
 require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.array.concat.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var SCALE_MAX_LENGTH = 10;
 var SCALE_SEGMENT_COUNT = 9;
 var SCALE_WITHOUT_EDGE_LENGTH = SCALE_MAX_LENGTH - 2;
-var getIntervalScale = exports.getIntervalScale = function getIntervalScale(minValue, maxValue) {
+
+var getIntervalScale = function getIntervalScale(minValue, maxValue) {
   var valueDifference = maxValue - minValue;
+
   if (valueDifference < SCALE_MAX_LENGTH) {
     return Array.from({
       length: valueDifference + 1
@@ -25,18 +37,24 @@ var getIntervalScale = exports.getIntervalScale = function getIntervalScale(minV
       return minValue + i;
     });
   }
+
   var interval = valueDifference / SCALE_SEGMENT_COUNT;
   var midItems = Array.from(Array(SCALE_WITHOUT_EDGE_LENGTH).keys());
+
   var _midItems$reduce = midItems.reduce(function (acc) {
-      return {
-        current: acc.current + interval,
-        items: [].concat((0, _toConsumableArray2["default"])(acc.items), [Math.round(acc.current + interval)])
-      };
-    }, {
-      current: minValue,
-      items: []
-    }),
-    items = _midItems$reduce.items;
+    return {
+      current: acc.current + interval,
+      items: [].concat((0, _toConsumableArray2["default"])(acc.items), [Math.round(acc.current + interval)])
+    };
+  }, {
+    current: minValue,
+    items: []
+  }),
+      items = _midItems$reduce.items;
+
   return [minValue].concat((0, _toConsumableArray2["default"])(items), [maxValue]);
 };
-var _default = exports["default"] = getIntervalScale;
+
+exports.getIntervalScale = getIntervalScale;
+var _default = getIntervalScale;
+exports["default"] = _default;

package/dist/lib/components/Sliders/helpers.js

@@ -4,19 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.removeFirstZeros = exports.getTrackSize = exports.getRangeValue = void 0;
+
 require("core-js/modules/es.number.constructor.js");
+
 require("core-js/modules/es.number.to-fixed.js");
+
 require("core-js/modules/es.regexp.exec.js");
-require("core-js/modules/es.regexp.test.js");
+
 require("core-js/modules/es.string.replace.js");
-var getRangeValue = exports.getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
+
+var getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
   var sourceValue = Number(value);
+
   if (minValue === maxValue || sourceValue < minValue) {
     return minValue;
   }
+
   if (sourceValue > maxValue) {
     return maxValue;
   }
+
   var valueDifference = maxValue - minValue;
   var expectedStepCount = valueDifference / step;
   var receivedStepCount = valueDifference / sourceValue;
@@ -24,18 +31,28 @@ var getRangeValue = exports.getRangeValue = function getRangeValue(value, minVal
   var valueWithStep = step * stepPosition;
   return valueWithStep < minValue ? minValue : valueWithStep;
 };
-var getTrackSize = exports.getTrackSize = function getTrackSize() {
+
+exports.getRangeValue = getRangeValue;
+
+var getTrackSize = function getTrackSize() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var minValue = arguments.length > 1 ? arguments[1] : undefined;
   var maxValue = arguments.length > 2 ? arguments[2] : undefined;
   var valueDifference = maxValue - minValue;
+
   if (valueDifference <= 0) {
     return 0;
   }
+
   var finalValue = value - minValue;
   var percent = finalValue * 100 / valueDifference;
   return Number(percent.toFixed(3));
 };
-var removeFirstZeros = exports.removeFirstZeros = function removeFirstZeros(targetValue) {
+
+exports.getTrackSize = getTrackSize;
+
+var removeFirstZeros = function removeFirstZeros(targetValue) {
   return /^0.+/.test(targetValue) ? targetValue.replace(/^(0){1,}/, '') : targetValue;
-};
+};
+
+exports.removeFirstZeros = removeFirstZeros;

package/dist/lib/components/Snackbar/Snackbar.css

@@ -1 +1,220 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-snackbar{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:480px;z-index:1}@-webkit-keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes snackbar-show{0%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@keyframes snackbar-hide{0%{opacity:1;-webkit-transform:scale(100%);transform:scale(100%)}99%{opacity:0;-webkit-transform:scale(90%);transform:scale(90%)}to{display:none}}@media screen and (max-width:767px){.mfui-snackbar{width:304px}}.mfui-snackbar_move{-webkit-transition:none;transition:none}.mfui-snackbar .mfui-snackbar__tile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-animation:snackbar-show .2s linear .2s 1 forwards;animation:snackbar-show .2s linear .2s 1 forwards;background-color:var(--content);justify-content:space-between;min-height:64px;opacity:0;padding:12px 16px 12px 12px}@media screen and (max-width:767px){.mfui-snackbar .mfui-snackbar__tile{min-height:48px}}.mfui-snackbar__tile_closed{-webkit-animation:snackbar-hide .1s linear 1;animation:snackbar-hide .1s linear 1}.mfui-snackbar__tile_type_success .mfui-snackbar__icon-container svg{fill:var(--brandGreen)}.mfui-snackbar__tile_type_attention .mfui-snackbar__icon-container svg{fill:var(--fury80)}.mfui-snackbar__icon-container{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;height:32px;justify-content:center;margin-right:8px;min-width:32px;width:32px}.mfui-snackbar__icon-container svg{fill:var(--base)}@media screen and (max-width:767px){.mfui-snackbar__icon-container{height:20px;min-width:20px;width:20px}}.mfui-snackbar__icon-container_desktop{display:none}@media screen and (min-width:768px){.mfui-snackbar__icon-container_desktop{display:block}}.mfui-snackbar__icon-container_mobile{display:none}@media screen and (max-width:767px){.mfui-snackbar__icon-container_mobile{display:block}}.mfui-snackbar__text-wrapper{-webkit-box-flex:1;-ms-flex-positive:1;color:var(--base);flex-grow:1}.mfui-snackbar__text{display:none;overflow:hidden}@media screen and (min-width:768px){.mfui-snackbar__text_desktop{display:block;max-height:48px}}@media screen and (max-width:767px){.mfui-snackbar__text_mobile{display:block;max-height:36px}}.mfui-snackbar__text_short{max-width:272px}.mfui-snackbar__text-button{margin-left:12px;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.mfui-snackbar__close-button{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;background-color:transparent;border:none;border-radius:40px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:32px;justify-content:center;margin-left:24px;padding:0;width:32px}@media screen and (max-width:767px){.mfui-snackbar__close-button{display:none}}.mfui-snackbar__close-button:hover{background-color:hsla(0,0%,60%,.2)}.mfui-snackbar__close-button:active{background-color:hsla(0,0%,60%,.4)}.mfui-snackbar__close-button-icon{height:40px;min-width:40px;width:40px;fill:var(--spbSky3)}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-snackbar {
+  z-index: 1;
+  width: 480px;
+  -webkit-transition: -webkit-transform 300ms;
+  transition: -webkit-transform 300ms;
+  transition: transform 300ms;
+  transition: transform 300ms, -webkit-transform 300ms;
+}
+@-webkit-keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar {
+    width: 304px;
+  }
+}
+.mfui-snackbar_move {
+  -webkit-transition: none;
+  transition: none;
+}
+.mfui-snackbar__tile {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 64px;
+  padding: 12px 16px 12px 12px;
+  background-color: var(--content);
+  opacity: 0;
+  -webkit-animation: 200ms linear 200ms 1 forwards snackbar-show;
+          animation: 200ms linear 200ms 1 forwards snackbar-show;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__tile {
+    min-height: 48px;
+  }
+}
+.mfui-snackbar__tile_closed {
+  -webkit-animation: 100ms linear 1 snackbar-hide;
+          animation: 100ms linear 1 snackbar-hide;
+}
+.mfui-snackbar__tile_type_success .mfui-snackbar__icon-container svg {
+  fill: var(--brandGreen);
+}
+.mfui-snackbar__tile_type_attention .mfui-snackbar__icon-container svg {
+  fill: var(--fury80);
+}
+.mfui-snackbar__icon-container {
+  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: 32px;
+  min-width: 32px;
+  height: 32px;
+  margin-right: 8px;
+}
+.mfui-snackbar__icon-container svg {
+  fill: var(--base);
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+  }
+}
+.mfui-snackbar__icon-container_desktop {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__icon-container_desktop {
+    display: block;
+  }
+}
+.mfui-snackbar__icon-container_mobile {
+  display: none;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container_mobile {
+    display: block;
+  }
+}
+.mfui-snackbar__text-wrapper {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  color: var(--base);
+}
+.mfui-snackbar__text {
+  display: none;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__text_desktop {
+    display: block;
+    max-height: 48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__text_mobile {
+    display: block;
+    max-height: 36px;
+  }
+}
+.mfui-snackbar__text_short {
+  max-width: 272px;
+}
+.mfui-snackbar__text-button {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  margin-left: 12px;
+}
+.mfui-snackbar__close-button {
+  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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 40px;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__close-button {
+    display: none;
+  }
+}
+.mfui-snackbar__close-button:hover {
+  background-color: #99999933;
+}
+.mfui-snackbar__close-button:active {
+  background-color: #99999966;
+}
+.mfui-snackbar__close-button-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  fill: var(--spbSky3);
+}

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import './Snackbar.scss';
+import React from 'react';
+import './Snackbar.less';
 export declare const SnackbarTypes: {
     readonly ATTENTION: "attention";
     readonly SUCCESS: "success";
     readonly TIMER: "timer";
     readonly INFO: "info";
 };
-export type SnackbarType = (typeof SnackbarTypes)[keyof typeof SnackbarTypes];
+export declare type SnackbarType = typeof SnackbarTypes[keyof typeof SnackbarTypes];
 export interface ISnackbarProps {
     /** Текст */
     text: string;