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

package/dist/lib/components/Carousel/useGradient.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import SwiperCore from 'swiper';
 import { SlidesSettingsType } from './Carousel';
-type SwiperConfig = {
+declare type SwiperConfig = {
     instance: SwiperCore | undefined;
     slidesSettings: SlidesSettingsType;
     isLocked: boolean;

package/dist/lib/components/Carousel/useGradient.js

@@ -4,34 +4,45 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = require("react");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = function _default(gradient, swiper) {
+
+var _default = function _default(gradient, swiper) {
   var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    slidesGap = _useState2[0],
-    setSlidesGap = _useState2[1];
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      slidesGap = _useState2[0],
+      setSlidesGap = _useState2[1];
+
   var swiperInstance = swiper.instance,
-    slidesSettings = swiper.slidesSettings,
-    isLocked = swiper.isLocked;
+      slidesSettings = swiper.slidesSettings,
+      isLocked = swiper.isLocked;
   var isGradientEnable = gradient && !isLocked;
   (0, _react.useEffect)(function () {
     var isTouch = window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START;
     var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
+
     if (!isPossibleToSetGap) {
       return undefined;
     }
-    var setCurrentSlidesGap = function setCurrentSlidesGap() {
-      var currentBreakpoint = swiperInstance.currentBreakpoint;
+
+    var setCurrenSlidesGap = function setCurrenSlidesGap() {
+      var currentBreakpoint = swiperInstance.getBreakpoint(slidesSettings);
       var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
       setSlidesGap(currentSpaceBetweenValue);
     };
-    setCurrentSlidesGap();
-    var throttledHandler = (0, _lodash["default"])(setCurrentSlidesGap, _throttleTime["default"].resize);
+
+    setCurrenSlidesGap();
+    var throttledHandler = (0, _lodash["default"])(setCurrenSlidesGap, _throttleTime["default"].resize);
     window.addEventListener('resize', throttledHandler);
     return function () {
       window.removeEventListener('resize', throttledHandler);
@@ -41,4 +52,6 @@ var _default = exports["default"] = function _default(gradient, swiper) {
     '--gap': "".concat(slidesGap, "px")
   };
   return isGradientEnable ? gradientStyles : {};
-};
+};
+
+exports["default"] = _default;

package/dist/lib/components/Checkbox/Checkbox.css

@@ -1 +1,150 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-checkbox{margin:0 5px 12px}.mfui-checkbox__inner{display:inline-block;position:relative}.mfui-checkbox__label{cursor:pointer;display:inline}.mfui-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-checkbox__custom-input:focus{outline:none}.mfui-checkbox__icon{display:block;height:32px;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px}.mfui-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-checkbox_checked .mfui-checkbox__custom-input{border:none}.mfui-checkbox_checked .mfui-checkbox__icon{opacity:1}.mfui-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-checkbox_font-size_regular .mfui-checkbox__inner{padding:4px 15px 4px 33px}.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input{top:6px}.mfui-checkbox_font-size_small{font-size:12px;line-height:16px}.mfui-checkbox_font-size_small .mfui-checkbox__inner{padding:1px 15px 4px 33px}.mfui-checkbox_font-size_small .mfui-checkbox__custom-input{top:0}.mfui-checkbox_color_dark .mfui-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-checkbox_color_dark .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-checkbox_color_light{color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-checkbox_disabled .mfui-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-checkbox_disabled .mfui-checkbox__icon{fill:var(--stcWhite)}.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label{color:var(--stcWhite50)}.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-checkbox_error .mfui-checkbox__custom-input{border-color:var(--fury)}.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
+.mfui-checkbox {
+  margin: 0 5px 12px 5px;
+}
+.mfui-checkbox__inner {
+  position: relative;
+  display: inline-block;
+}
+.mfui-checkbox__label {
+  display: inline;
+  cursor: pointer;
+}
+.mfui-checkbox__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-checkbox__custom-input {
+  position: absolute;
+  left: 0;
+  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: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-radius: 4px;
+  -webkit-transition: border-color, background-color;
+  transition: border-color, background-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-checkbox__custom-input:focus {
+  outline: none;
+}
+.mfui-checkbox__icon {
+  display: block;
+  width: 32px;
+  height: 32px;
+  opacity: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mfui-checkbox__extra-content {
+  position: relative;
+  left: 8px;
+  display: inline-block;
+  margin-top: -2px;
+  margin-right: -20px;
+  vertical-align: middle;
+}
+.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border: none;
+}
+.mfui-checkbox_checked .mfui-checkbox__icon {
+  opacity: 1;
+}
+.mfui-checkbox_font-size_regular {
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-checkbox_font-size_regular .mfui-checkbox__inner {
+  padding: 4px 15px 4px 33px;
+}
+.mfui-checkbox_font-size_regular .mfui-checkbox__custom-input {
+  top: 6px;
+}
+.mfui-checkbox_font-size_small {
+  font-size: 12px;
+  line-height: 16px;
+}
+.mfui-checkbox_font-size_small .mfui-checkbox__inner {
+  padding: 1px 15px 4px 33px;
+}
+.mfui-checkbox_font-size_small .mfui-checkbox__custom-input {
+  top: 0;
+}
+.mfui-checkbox_color_dark .mfui-checkbox__custom-input {
+  border-color: var(--spbSky2);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__icon {
+  fill: var(--stcWhite);
+}
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-checkbox_color_light {
+  color: var(--stcWhite);
+}
+.mfui-checkbox_color_light .mfui-checkbox__custom-input {
+  border-color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-checkbox_color_light .mfui-checkbox__label_no-touch:hover .mfui-checkbox__custom-input {
+  border-color: var(--buttonHoverGrey);
+  background-color: var(--buttonHoverGrey);
+}
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__custom-input {
+  border-color: var(--brandGreen);
+  color: var(--stcWhite);
+  background-color: var(--stcWhite);
+}
+.mfui-checkbox_disabled .mfui-checkbox__label {
+  color: var(--spbSky3);
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-checkbox_disabled .mfui-checkbox__icon {
+  fill: var(--stcWhite);
+}
+.mfui-checkbox_disabled.mfui-checkbox_color_light .mfui-checkbox__label {
+  color: var(--stcWhite50);
+}
+.mfui-checkbox_checked.mfui-checkbox_disabled .mfui-checkbox__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-checkbox_error .mfui-checkbox__custom-input {
+  border-color: var(--fury);
+}
+.mfui-checkbox_color_dark .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_dark.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light .mfui-checkbox__label:active .mfui-checkbox__custom-input,
+.mfui-checkbox_color_light.mfui-checkbox_checked .mfui-checkbox__label:active .mfui-checkbox__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Checkbox.scss';
+import React from 'react';
+import './Checkbox.less';
 export interface ICheckboxProps {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
@@ -31,8 +31,8 @@ export interface ICheckboxProps {
     /** Отобразить компонент в состоянии ошибки */
     error?: boolean;
     /** Дополнительный контент справа */
-    extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string;
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/lib/components/Checkbox/Checkbox.js

@@ -1,59 +1,77 @@
 "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"] = void 0;
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.function.name.js");
-var React = _interopRequireWildcard(require("react"));
+
+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 CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
   }));
 };
+
 var CHANGE_KEY = 'change';
 var cn = (0, _uiHelpers.cnCreate)('mfui-checkbox');
+
 var Checkbox = function Checkbox(_ref) {
   var className = _ref.className,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
-    name = _ref.name,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'dark' : _ref$color,
-    value = _ref.value,
-    _ref$checked = _ref.checked,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    disabled = _ref.disabled,
-    error = _ref.error,
-    children = _ref.children,
-    extraContent = _ref.extraContent,
-    dataAttrs = _ref.dataAttrs,
-    classes = _ref.classes,
-    onChange = _ref.onChange;
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+      name = _ref.name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      value = _ref.value,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      children = _ref.children,
+      extraContent = _ref.extraContent,
+      dataAttrs = _ref.dataAttrs,
+      classes = _ref.classes,
+      onChange = _ref.onChange;
   var isTouch = (0, _uiHelpers.detectTouch)();
-  var _React$useState = React.useState(checked),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isChecked = _React$useState2[0],
-    setIsChecked = _React$useState2[1];
-  React.useEffect(function () {
+
+  var _useState = (0, _react.useState)(checked),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isChecked = _useState2[0],
+      setIsChecked = _useState2[1];
+
+  (0, _react.useEffect)(function () {
     setIsChecked(checked);
   }, [checked]);
+
   var handleChange = function handleChange(e) {
     if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e) || e.type === CHANGE_KEY) {
       setIsChecked(!isChecked);
       onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked);
     }
   };
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn('', {
       'font-size': fontSize,
       color: color,
@@ -61,13 +79,13 @@ var Checkbox = function Checkbox(_ref) {
       disabled: disabled,
       error: error
     }, className)
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), /*#__PURE__*/React.createElement("label", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), /*#__PURE__*/_react["default"].createElement("label", {
     className: cn('label', {
       'no-touch': !isTouch
     })
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input'),
     type: "checkbox",
     tabIndex: -1,
@@ -76,16 +94,38 @@ var Checkbox = function Checkbox(_ref) {
     checked: isChecked,
     onChange: handleChange,
     disabled: disabled
-  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
+  })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
     tabIndex: 0,
     role: "checkbox",
     "aria-checked": isChecked,
     className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
     onKeyDown: handleChange
-  }), /*#__PURE__*/React.createElement(CheckedIcon, {
+  }), /*#__PURE__*/_react["default"].createElement(CheckedIcon, {
     className: cn('icon')
-  })), children), extraContent && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
+  })), children), extraContent && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
     className: cn('extra-content')
   }), extraContent)));
 };
-var _default = exports["default"] = Checkbox;
+
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  fontSize: PropTypes.oneOf(['regular', 'small']),
+  color: PropTypes.oneOf(['dark', 'light']),
+  name: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    inner: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired),
+    customInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    extraContent: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
+  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
+  onChange: PropTypes.func
+};
+var _default = Checkbox;
+exports["default"] = _default;

package/dist/lib/components/Chips/Chip.css

@@ -1 +1,132 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-chip__icon{margin-right:4px}}.mfui-chip_disabled,.mfui-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.mfui-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-chip_disabled .mfui-chip__counter,.mfui-chip_disabled:hover .mfui-chip__counter{color:var(--spbSky2)}.mfui-chip_checked,.mfui-chip_checked:hover{background-color:var(--reflexBlue);color:var(--stcWhite)}.mfui-chip_checked svg,.mfui-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-chip_checked .mfui-chip__counter,.mfui-chip_checked:hover .mfui-chip__counter{color:var(--stcWhite)}.mfui-chip_checked.mfui-chip_color_black,.mfui-chip_checked.mfui-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.mfui-chip_checked.mfui-chip_color_black:hover svg{fill:var(--base)}.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter{color:var(--base)}.mfui-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}
+.mfui-chip {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 8px 20px;
+  border: none;
+  border-radius: 20px;
+  overflow: hidden;
+  color: var(--content);
+  text-align: center;
+  text-decoration: none;
+  background-color: var(--spbSky0);
+  outline: none;
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s, color 0.3s;
+  transition: background-color 0.3s, color 0.3s;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-chip svg {
+  -webkit-transition: fill 0.3s;
+  transition: fill 0.3s;
+  fill: var(--content);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip {
+    padding: 4px 12px;
+  }
+}
+.mfui-chip:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-chip__inner {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-chip__counter {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 6px;
+  color: var(--spbSky3);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__counter {
+    margin-left: 4px;
+  }
+}
+.mfui-chip__icon,
+.mfui-chip__icon-arrow {
+  display: block;
+  width: 20px;
+  min-width: 20px;
+  max-height: 20px;
+}
+.mfui-chip__icon svg,
+.mfui-chip__icon-arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.mfui-chip__icon {
+  margin-right: 6px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__icon {
+    margin-right: 4px;
+  }
+}
+.mfui-chip_disabled,
+.mfui-chip_disabled:hover {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+  cursor: default;
+  pointer-events: none;
+}
+.mfui-chip_disabled svg,
+.mfui-chip_disabled:hover svg {
+  fill: var(--spbSky3);
+}
+.mfui-chip_disabled .mfui-chip__counter,
+.mfui-chip_disabled:hover .mfui-chip__counter {
+  color: var(--spbSky2);
+}
+.mfui-chip_checked,
+.mfui-chip_checked:hover {
+  color: var(--stcWhite);
+  background-color: var(--reflexBlue);
+}
+.mfui-chip_checked svg,
+.mfui-chip_checked:hover svg {
+  fill: var(--stcWhite);
+}
+.mfui-chip_checked .mfui-chip__counter,
+.mfui-chip_checked:hover .mfui-chip__counter {
+  color: var(--stcWhite);
+}
+.mfui-chip_checked.mfui-chip_color_black,
+.mfui-chip_checked.mfui-chip_color_black:hover {
+  color: var(--base);
+  background-color: var(--content);
+}
+.mfui-chip_checked.mfui-chip_color_black svg,
+.mfui-chip_checked.mfui-chip_color_black:hover svg {
+  fill: var(--base);
+}
+.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,
+.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter {
+  color: var(--base);
+}
+.mfui-chip_with-icon {
+  padding-left: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip_with-icon {
+    padding-left: 8px;
+  }
+}

package/dist/lib/components/Chips/Chip.d.ts

@@ -1,16 +1,17 @@
-import * as React from 'react';
-import './Chip.scss';
-export type ChipIdType = number | string;
+import React, { Ref } from 'react';
+import * as PropTypes from 'prop-types';
+import './Chip.less';
+export declare type ChipIdType = number | string;
 export declare const ChipColors: {
     readonly DEFAULT: "default";
     readonly BLACK: "black";
 };
-export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
+export declare type ChipColorsType = typeof ChipColors[keyof typeof ChipColors];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
 };
-export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
+export declare type ChipArrowType = typeof ChipArrow[keyof typeof ChipArrow];
 export interface IChipProps {
     /** Идентификатор */
     id: ChipIdType;
@@ -48,7 +49,26 @@ export interface IChipProps {
         arrow?: Record<string, string>;
     };
     /** Ссылка на элемент */
-    rootRef?: React.Ref<HTMLButtonElement>;
+    rootRef?: Ref<HTMLButtonElement>;
 }
 declare const Chip: React.FC<IChipProps>;
+export declare const ChipPropType: {
+    id: PropTypes.Validator<string | number>;
+    color: PropTypes.Requireable<"default" | "black">;
+    checked: PropTypes.Requireable<boolean>;
+    disabled: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    counterValue: PropTypes.Requireable<number>;
+    arrow: PropTypes.Requireable<"down" | "up">;
+    onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    classes: PropTypes.Requireable<{
+        [x: string]: string | null | undefined;
+    }>;
+    dataAttrs: PropTypes.Requireable<{
+        [x: string]: object | null | undefined;
+    }>;
+    rootRef: PropTypes.Requireable<any>;
+};
 export default Chip;