@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -1,32 +1,27 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import cn from 'classnames';
-import { DEFAULT_THEME as defaultVariables } from "..\\..\\..\\lib\\theming\\themes\\DefaultTheme";
-import { FLAT_THEME as flatVariables } from "..\\..\\..\\lib\\theming\\themes\\FlatTheme";
-import { ComboBox } from "..\\..\\..\\components\\ComboBox";
-import { Gapped } from "..\\..\\..\\components\\Gapped";
-import { Link } from "..\\..\\..\\components\\Link";
-import { Sticky } from "..\\..\\..\\components\\Sticky";
-import * as ColorFunctions from "..\\..\\..\\lib\\styles\\ColorFunctions";
-import { Tooltip } from "..\\..\\..\\components\\Tooltip";
-import { IS_PROXY_SUPPORTED } from "..\\..\\..\\lib\\Supports";
-import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "..\\VariablesCollector";
-import { jsStyles } from "..\\ThemeShowcase.styles";
+import { DEFAULT_THEME as defaultVariables } from "../../../lib/theming/themes/DefaultTheme";
+import { DARK_THEME as darkVariables } from "../../../lib/theming/themes/DarkTheme";
+import { ComboBox } from "../../../components/ComboBox";
+import { Gapped } from "../../../components/Gapped";
+import { Link } from "../../../components/Link";
+import { Sticky } from "../../../components/Sticky";
+import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
+import { Tooltip } from "../../../components/Tooltip";
+import { IS_PROXY_SUPPORTED } from "../../../lib/Supports";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "../VariablesCollector";
+import { styles } from "../ThemeShowcase.styles";
 var EMPTY_ARRAY = [];
 var ALL_VARIABLES = Object.keys(defaultVariables);
-export var ThemeShowcase =
-/*#__PURE__*/
-function (_React$Component) {
+export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ThemeShowcase, _React$Component);
 
-  function ThemeShowcase() {
+  function ThemeShowcase(props) {
     var _this;
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$Component.call(this, props) || this;
     _this.state = {};
     _this.isUnmounting = false;
     _this.variablesDiff = [];
@@ -61,30 +56,26 @@ function (_React$Component) {
       }
     };
 
-    return _this;
-  }
-
-  var _proto = ThemeShowcase.prototype;
-
-  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
-    var _this2 = this;
-
-    if (this.props.isDebugMode) {
+    if (props.isDebugMode) {
       ALL_VARIABLES.forEach(function (variable) {
         var found = ALL_USED_VARIABLES.includes(variable);
 
         if (!found) {
-          _this2.variablesDiff.push(variable);
+          _this.variablesDiff.push(variable);
         }
       });
     }
-  };
+
+    return _this;
+  }
+
+  var _proto = ThemeShowcase.prototype;
 
   _proto.render = function render() {
-    var _this3 = this;
+    var _this2 = this;
 
     if (!IS_PROXY_SUPPORTED) {
-      return React.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', React.createElement(Link, {
+      return /*#__PURE__*/React.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', /*#__PURE__*/React.createElement(Link, {
         href: 'https://caniuse.com/#feat=proxy',
         target: '_blank'
       }, "\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 Proxy"), ".");
@@ -95,36 +86,38 @@ function (_React$Component) {
     var isDebugMode = this.props.isDebugMode;
     var callsCount = isDebugMode ? "(" + CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';
     var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + EXECUTION_TIME.toFixed(3) + "ms" : '';
-    return React.createElement(Gapped, {
-      wrap: true,
-      gap: 30,
-      verticalAlign: 'top'
-    }, React.createElement("div", null, React.createElement(Sticky, {
-      side: 'top'
-    }, React.createElement("div", {
-      className: jsStyles.searchBar(),
-      "data-perf-info": executionTime + " " + callsCount
-    }, React.createElement(Gapped, {
-      gap: 15
-    }, React.createElement(ComboBox, {
-      getItems: this.getItems,
-      value: selectedVariable,
-      onValueChange: this.handleVariableChange,
-      onUnexpectedInput: this.handleUnexpectedVariableInput,
-      placeholder: 'поиск по названию переменной'
-    }), !!selectedVariable && React.createElement(Link, {
-      onClick: this.resetVariable
-    }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
-      return React.createElement(ComponentShowcase, {
-        key: componentName,
-        name: componentName,
-        description: descriptionsToRender[componentName],
-        isDebugMode: isDebugMode,
-        onVariableSelect: _this3.handleVariableChange
-      });
-    })), React.createElement(ShowUnusedVariables, {
-      diff: this.variablesDiff
-    }));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(Gapped, {
+        wrap: true,
+        gap: 30,
+        verticalAlign: 'top'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Sticky, {
+        side: 'top'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.searchBar(theme),
+        "data-perf-info": executionTime + " " + callsCount
+      }, /*#__PURE__*/React.createElement(Gapped, {
+        gap: 15
+      }, /*#__PURE__*/React.createElement(ComboBox, {
+        getItems: _this2.getItems,
+        value: selectedVariable,
+        onValueChange: _this2.handleVariableChange,
+        onUnexpectedInput: _this2.handleUnexpectedVariableInput,
+        placeholder: 'поиск по названию переменной'
+      }), !!selectedVariable && /*#__PURE__*/React.createElement(Link, {
+        onClick: _this2.resetVariable
+      }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
+        return /*#__PURE__*/React.createElement(ComponentShowcase, {
+          key: componentName,
+          name: componentName,
+          description: descriptionsToRender[componentName],
+          isDebugMode: isDebugMode,
+          onVariableSelect: _this2.handleVariableChange
+        });
+      })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
+        diff: _this2.variablesDiff
+      }));
+    });
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -152,9 +145,7 @@ function (_React$Component) {
   return ThemeShowcase;
 }(React.Component);
 
-var ComponentShowcase =
-/*#__PURE__*/
-function (_React$Component2) {
+var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
   _inheritsLoose(ComponentShowcase, _React$Component2);
 
   function ComponentShowcase() {
@@ -164,7 +155,7 @@ function (_React$Component2) {
   var _proto2 = ComponentShowcase.prototype;
 
   _proto2.render = function render() {
-    var _this4 = this;
+    var _this3 = this;
 
     var _this$props = this.props,
         name = _this$props.name,
@@ -172,50 +163,54 @@ function (_React$Component2) {
         onVariableSelect = _this$props.onVariableSelect,
         isDebugMode = _this$props.isDebugMode;
     var elements = Object.keys(description);
-    return React.createElement(React.Fragment, null, React.createElement(Sticky, {
-      side: 'top',
-      offset: 40
-    }, function (isSticky) {
-      var _cn;
-
-      return React.createElement("h2", {
-        className: cn((_cn = {}, _cn[jsStyles.heading()] = true, _cn[jsStyles.headingSticky()] = isSticky, _cn))
-      }, _this4.props.name);
-    }), React.createElement("table", {
-      className: jsStyles.table()
-    }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
-      style: {
-        width: 170
-      }
-    }, "ClassName"), React.createElement("th", {
-      style: {
-        width: 210
-      }
-    }, "Variable Name"), React.createElement("th", {
-      style: {
-        width: 250
-      }
-    }, "Default Value"), React.createElement("th", {
-      style: {
-        width: 250
-      }
-    }, "Flat Value"))), React.createElement("tbody", null, elements.map(function (el) {
-      return React.createElement(ComponentShowcaseRow, {
-        key: name + "_" + el,
-        element: el,
-        row: description[el],
-        onVariableSelect: onVariableSelect,
-        isDebugMode: isDebugMode
-      });
-    }))));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
+        side: 'top',
+        offset: 40
+      }, function (isSticky) {
+        var _cx;
+
+        return /*#__PURE__*/React.createElement("h2", {
+          className: cx((_cx = {}, _cx[styles.heading(theme)] = true, _cx[styles.headingSticky()] = isSticky, _cx))
+        }, _this3.props.name);
+      }), /*#__PURE__*/React.createElement("table", {
+        className: styles.table()
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 170
+        }
+      }, "ClassName"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 210
+        }
+      }, "Variable Name"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 250
+        }
+      }, "Default Value"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 250
+        }
+      }, "Dark Value"))), /*#__PURE__*/React.createElement("tbody", null, elements.map(function (el) {
+        return /*#__PURE__*/React.createElement(ComponentShowcaseRow, {
+          key: name + "_" + el,
+          element: el,
+          row: description[el],
+          onVariableSelect: onVariableSelect,
+          isDebugMode: isDebugMode
+        });
+      }))));
+    });
   };
 
   return ComponentShowcase;
 }(React.Component);
 
-var ComponentShowcaseRow =
-/*#__PURE__*/
-function (_React$Component3) {
+var ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {
   _inheritsLoose(ComponentShowcaseRow, _React$Component3);
 
   function ComponentShowcaseRow() {
@@ -225,68 +220,75 @@ function (_React$Component3) {
   var _proto3 = ComponentShowcaseRow.prototype;
 
   _proto3.render = function render() {
-    var _this5 = this;
+    var _this4 = this;
 
     var _this$props2 = this.props,
         el = _this$props2.element,
         row = _this$props2.row,
         isDebugMode = _this$props2.isDebugMode;
     var rowSpan = row.variables.length + 1;
-    return React.createElement(React.Fragment, null, React.createElement("tr", {
-      className: jsStyles.invisibleRow()
-    }, React.createElement("td", {
-      rowSpan: rowSpan
-    }, React.createElement("span", {
-      className: jsStyles.elementName()
-    }, ".", el)), React.createElement("td", {
-      className: jsStyles.invisibleCell()
-    }), React.createElement("td", {
-      className: jsStyles.invisibleCell()
-    }), React.createElement("td", {
-      className: jsStyles.invisibleCell()
-    })), row.variables.map(function (varName) {
-      var _cn2;
-
-      var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-      var variableDefault = defaultVariables[varName];
-      var variableFlat = flatVariables[varName];
-      var hasNoVariables = isDebugMode && !variableDefault && !variableFlat;
-      return React.createElement("tr", {
-        key: el + "_" + varName,
-        className: cn((_cn2 = {}, _cn2[jsStyles.suspiciousRow()] = hasNoVariables, _cn2))
-      }, React.createElement("td", null, React.createElement(VariableName, {
-        variableName: varName,
-        dependencies: dependencies,
-        onVariableSelect: _this5.props.onVariableSelect
-      })), React.createElement("td", null, React.createElement(VariableValue, {
-        value: variableDefault
-      })), React.createElement("td", null, React.createElement(VariableValue, {
-        value: variableFlat
-      })));
-    }));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+        className: styles.invisibleRow(theme)
+      }, /*#__PURE__*/React.createElement("td", {
+        className: cx(styles.cell(), styles.majorCell()),
+        rowSpan: rowSpan
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.elementName()
+      }, ".", el)), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      }), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      }), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      })), row.variables.map(function (varName) {
+        var _cx2;
+
+        var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+        var variableDefault = defaultVariables[varName];
+        var variableDark = darkVariables[varName];
+        var hasNoVariables = isDebugMode && !variableDefault;
+        return /*#__PURE__*/React.createElement("tr", {
+          key: el + "_" + varName,
+          className: cx(styles.row(theme), (_cx2 = {}, _cx2[styles.suspiciousRow()] = hasNoVariables, _cx2))
+        }, /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableName, {
+          variableName: varName,
+          dependencies: dependencies,
+          onVariableSelect: _this4.props.onVariableSelect
+        })), /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableValue, {
+          value: variableDefault
+        })), /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableValue, {
+          value: variableDark
+        })));
+      }));
+    });
   };
 
   return ComponentShowcaseRow;
 }(React.Component);
 
-var VariableName =
-/*#__PURE__*/
-function (_React$Component4) {
+var VariableName = /*#__PURE__*/function (_React$Component4) {
   _inheritsLoose(VariableName, _React$Component4);
 
   function VariableName() {
-    var _this6;
+    var _this5;
 
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    _this6 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
+    _this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
 
-    _this6.handleVariableSelect = function () {
-      var _this6$props = _this6.props,
-          variableName = _this6$props.variableName,
-          onVariableSelect = _this6$props.onVariableSelect;
+    _this5.handleVariableSelect = function () {
+      var _this5$props = _this5.props,
+          variableName = _this5$props.variableName,
+          onVariableSelect = _this5$props.onVariableSelect;
 
       if (onVariableSelect) {
         onVariableSelect({
@@ -296,14 +298,14 @@ function (_React$Component4) {
       }
     };
 
-    return _this6;
+    return _this5;
   }
 
   var _proto4 = VariableName.prototype;
 
   _proto4.render = function render() {
-    return React.createElement("span", null, React.createElement("span", {
-      className: jsStyles.variableName(),
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: styles.variableName(),
       onClick: this.handleVariableSelect
     }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());
   };
@@ -312,8 +314,8 @@ function (_React$Component4) {
     var _this$props3 = this.props,
         dependencies = _this$props3.dependencies,
         onVariableSelect = _this$props3.onVariableSelect;
-    return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {
-      return React.createElement(DependencyName, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {
+      return /*#__PURE__*/React.createElement(DependencyName, {
         key: "dependency_" + dependency,
         dependencyName: dependency,
         onDependencySelect: onVariableSelect
@@ -324,35 +326,33 @@ function (_React$Component4) {
   return VariableName;
 }(React.Component);
 
-var DependencyName =
-/*#__PURE__*/
-function (_React$Component5) {
+var DependencyName = /*#__PURE__*/function (_React$Component5) {
   _inheritsLoose(DependencyName, _React$Component5);
 
   function DependencyName() {
-    var _this7;
+    var _this6;
 
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
 
-    _this7 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
+    _this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
 
-    _this7.getValues = function () {
-      var dependencyName = _this7.props.dependencyName;
+    _this6.getValues = function () {
+      var dependencyName = _this6.props.dependencyName;
       var dependencyDefault = defaultVariables[dependencyName];
-      var dependencyFlat = flatVariables[dependencyName];
-      return React.createElement(React.Fragment, null, React.createElement("span", null, "Default value: ", React.createElement(VariableValue, {
+      var dependencyDark = darkVariables[dependencyName];
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
         value: dependencyDefault
-      })), React.createElement("br", null), React.createElement("span", null, "Flat value: ", React.createElement(VariableValue, {
-        value: dependencyFlat
+      })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
+        value: dependencyDark
       })));
     };
 
-    _this7.handleDependencySelect = function () {
-      var _this7$props = _this7.props,
-          dependencyName = _this7$props.dependencyName,
-          onDependencySelect = _this7$props.onDependencySelect;
+    _this6.handleDependencySelect = function () {
+      var _this6$props = _this6.props,
+          dependencyName = _this6$props.dependencyName,
+          onDependencySelect = _this6$props.onDependencySelect;
 
       if (onDependencySelect) {
         onDependencySelect({
@@ -362,18 +362,18 @@ function (_React$Component5) {
       }
     };
 
-    return _this7;
+    return _this6;
   }
 
   var _proto5 = DependencyName.prototype;
 
   _proto5.render = function render() {
-    return React.createElement(React.Fragment, null, React.createElement("br", null), "\u2013", ' ', React.createElement(Tooltip, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), "\u2013", ' ', /*#__PURE__*/React.createElement(Tooltip, {
       trigger: 'hover',
       render: this.getValues,
       pos: 'right middle'
-    }, React.createElement("span", {
-      className: jsStyles.variableName(),
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.variableName(),
       onClick: this.handleDependencySelect
     }, this.props.dependencyName)));
   };
@@ -382,7 +382,7 @@ function (_React$Component5) {
 }(React.Component);
 
 var VariableValue = function VariableValue(props) {
-  var _cn3;
+  var _cx3;
 
   var value = props.value;
   var valueIsColor = isColor(value);
@@ -394,10 +394,10 @@ var VariableValue = function VariableValue(props) {
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
-  return React.createElement("span", {
-    className: cn((_cn3 = {}, _cn3[jsStyles.undefined()] = !value, _cn3))
-  }, hasExample && React.createElement("span", {
-    className: jsStyles.colorExample(),
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx((_cx3 = {}, _cx3[styles.undefined()] = !value, _cx3))
+  }, hasExample && /*#__PURE__*/React.createElement("span", {
+    className: styles.colorExample(),
     style: {
       background: value,
       borderColor: borderColor
@@ -410,10 +410,10 @@ var ShowUnusedVariables = function ShowUnusedVariables(props) {
     return null;
   }
 
-  return React.createElement("div", {
-    className: jsStyles.unusedVariablesWarning()
-  }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (", props.diff.length, "):", React.createElement("ul", null, props.diff.sort().map(function (v) {
-    return React.createElement("li", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.unusedVariablesWarning()
+  }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (", props.diff.length, "):", /*#__PURE__*/React.createElement("ul", null, props.diff.sort().map(function (v) {
+    return /*#__PURE__*/React.createElement("li", {
       key: v
     }, v);
   })));