@skbkontur/react-ui 5.6.8 → 5.6.9-5e213.0

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -1,4 +1,13 @@
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
 import React from 'react';
 import { isColor } from "../../../lib/styles/ColorHelpers";
 import { LIGHT_THEME as lightVariables } from "../../../lib/theming/themes/LightTheme";
@@ -19,7 +28,8 @@ var ALL_VARIABLES = Object.keys(lightVariables);
 export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   function ThemeShowcase(props) {
     var _this;
-    _this = _React$Component.call(this, props) || this;
+    _classCallCheck(this, ThemeShowcase);
+    _this = _callSuper(this, ThemeShowcase, [props]);
     _this.state = {};
     _this.isUnmounting = false;
     _this.variablesDiff = [];
@@ -57,231 +67,238 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
     }
     return _this;
   }
-  _inheritsLoose(ThemeShowcase, _React$Component);
-  var _proto = ThemeShowcase.prototype;
-  _proto.render = function render() {
-    var _this2 = this;
-    if (!IS_PROXY_SUPPORTED) {
-      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"), ".");
+  _inherits(ThemeShowcase, _React$Component);
+  return _createClass(ThemeShowcase, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!IS_PROXY_SUPPORTED) {
+        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"), ".");
+      }
+      var selectedVariable = this.state.selectedVariable;
+      var descriptionsToRender = selectedVariable ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : COMPONENT_DESCRIPTIONS;
+      var isDebugMode = this.props.isDebugMode;
+      var callsCount = isDebugMode ? "(".concat(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 ".concat(EXECUTION_TIME.toFixed(3), "ms") : '';
+      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": "".concat(executionTime, " ").concat(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
+        }));
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isUnmounting = true;
     }
-    var selectedVariable = this.state.selectedVariable;
-    var descriptionsToRender = selectedVariable ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : COMPONENT_DESCRIPTIONS;
-    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 /*#__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
+  }, {
+    key: "getValues",
+    value: function getValues(query) {
+      var lowerCaseQuery = query && query.toLowerCase().trim();
+      var allItems = ALL_USED_VARIABLES;
+      if (lowerCaseQuery) {
+        allItems = ALL_USED_VARIABLES.filter(function (usedVariable) {
+          return usedVariable.toLowerCase().startsWith(lowerCaseQuery);
         });
-      })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
-        diff: _this2.variablesDiff
-      }));
-    });
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.isUnmounting = true;
-  };
-  _proto.getValues = function getValues(query) {
-    var lowerCaseQuery = query && query.toLowerCase().trim();
-    var allItems = ALL_USED_VARIABLES;
-    if (lowerCaseQuery) {
-      allItems = ALL_USED_VARIABLES.filter(function (usedVariable) {
-        return usedVariable.toLowerCase().startsWith(lowerCaseQuery);
+      }
+      return allItems.map(function (usedVariableName) {
+        return {
+          value: usedVariableName,
+          label: usedVariableName
+        };
       });
     }
-    return allItems.map(function (usedVariableName) {
-      return {
-        value: usedVariableName,
-        label: usedVariableName
-      };
-    });
-  };
-  return ThemeShowcase;
+  }]);
 }(React.Component);
 var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
   function ComponentShowcase() {
-    return _React$Component2.apply(this, arguments) || this;
-  }
-  _inheritsLoose(ComponentShowcase, _React$Component2);
-  var _proto2 = ComponentShowcase.prototype;
-  _proto2.render = function render() {
-    var _this3 = this;
-    var _this$props = this.props,
-      name = _this$props.name,
-      description = _this$props.description,
-      onVariableSelect = _this$props.onVariableSelect,
-      isDebugMode = _this$props.isDebugMode;
-    var elements = Object.keys(description);
-    return elements.length ? /*#__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
-            })
-          );
-        }))))
-      );
-    }) : null;
-  };
-  return ComponentShowcase;
-}(React.Component);
-var ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {
-  function ComponentShowcaseRow() {
-    return _React$Component3.apply(this, arguments) || this;
+    _classCallCheck(this, ComponentShowcase);
+    return _callSuper(this, ComponentShowcase, arguments);
   }
-  _inheritsLoose(ComponentShowcaseRow, _React$Component3);
-  var _proto3 = ComponentShowcaseRow.prototype;
-  _proto3.render = function render() {
-    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 /*#__PURE__*/(
+  _inherits(ComponentShowcase, _React$Component2);
+  return _createClass(ComponentShowcase, [{
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props = this.props,
+        name = _this$props.name,
+        description = _this$props.description,
+        onVariableSelect = _this$props.onVariableSelect,
+        isDebugMode = _this$props.isDebugMode;
+      var elements = Object.keys(description);
+      return elements.length ? /*#__PURE__*/
       React.createElement(ThemeContext.Consumer, null, function (theme) {
-        var _cx2;
         return /*#__PURE__*/(
           React.createElement(React.Fragment, null, /*#__PURE__*/
-          React.createElement("tr", {
-            className: cx(styles.invisibleRow(), (_cx2 = {}, _cx2[styles.invisibleDarkRow()] = theme === darkVariables, _cx2))
-          }, /*#__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()
+          React.createElement(Sticky, {
+            side: 'top',
+            offset: 40
+          }, function (isSticky) {
+            return /*#__PURE__*/(
+              React.createElement("h2", {
+                className: cx(_defineProperty(_defineProperty({}, styles.heading(theme), true), styles.headingSticky(), isSticky))
+              }, _this3.props.name)
+            );
           }), /*#__PURE__*/
-          React.createElement("td", {
-            className: styles.invisibleCell()
-          })), row.variables.map(function (varName) {
-            var _cx3;
-            var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-            var variableDefault = lightVariables[varName];
-            var variableDark = darkVariables[varName];
-            var hasNoVariables = isDebugMode && !variableDefault;
+          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("tr", {
-                key: el + "_" + varName,
-                className: cx(styles.row(), (_cx3 = {}, _cx3[styles.suspiciousRow()] = hasNoVariables, _cx3[styles.darkRow()] = theme === darkVariables, _cx3))
-              }, /*#__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
-              })))
+              React.createElement(ComponentShowcaseRow, {
+                key: "".concat(name, "_").concat(el),
+                element: el,
+                row: description[el],
+                onVariableSelect: onVariableSelect,
+                isDebugMode: isDebugMode
+              })
             );
-          }))
+          }))))
         );
-      })
-    );
-  };
-  return ComponentShowcaseRow;
+      }) : null;
+    }
+  }]);
+}(React.Component);
+var ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {
+  function ComponentShowcaseRow() {
+    _classCallCheck(this, ComponentShowcaseRow);
+    return _callSuper(this, ComponentShowcaseRow, arguments);
+  }
+  _inherits(ComponentShowcaseRow, _React$Component3);
+  return _createClass(ComponentShowcaseRow, [{
+    key: "render",
+    value: function render() {
+      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 /*#__PURE__*/(
+        React.createElement(ThemeContext.Consumer, null, function (theme) {
+          return /*#__PURE__*/(
+            React.createElement(React.Fragment, null, /*#__PURE__*/
+            React.createElement("tr", {
+              className: cx(styles.invisibleRow(), _defineProperty({}, styles.invisibleDarkRow(), theme === darkVariables))
+            }, /*#__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 dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+              var variableDefault = lightVariables[varName];
+              var variableDark = darkVariables[varName];
+              var hasNoVariables = isDebugMode && !variableDefault;
+              return /*#__PURE__*/(
+                React.createElement("tr", {
+                  key: "".concat(el, "_").concat(varName),
+                  className: cx(styles.row(), _defineProperty(_defineProperty({}, styles.suspiciousRow(), hasNoVariables), styles.darkRow(), theme === darkVariables))
+                }, /*#__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
+                })))
+              );
+            }))
+          );
+        })
+      );
+    }
+  }]);
 }(React.Component);
 var VariableName = /*#__PURE__*/function (_React$Component4) {
   function VariableName() {
     var _this5;
+    _classCallCheck(this, VariableName);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
+    _this5 = _callSuper(this, VariableName, [].concat(args));
     _this5.handleVariableSelect = function () {
       var _this5$props = _this5.props,
         variableName = _this5$props.variableName,
@@ -295,35 +312,39 @@ var VariableName = /*#__PURE__*/function (_React$Component4) {
     };
     return _this5;
   }
-  _inheritsLoose(VariableName, _React$Component4);
-  var _proto4 = VariableName.prototype;
-  _proto4.render = function render() {
-    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());
-  };
-  _proto4.renderDependencies = function renderDependencies() {
-    var _this$props3 = this.props,
-      dependencies = _this$props3.dependencies,
-      onVariableSelect = _this$props3.onVariableSelect;
-    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
-      });
-    }));
-  };
-  return VariableName;
+  _inherits(VariableName, _React$Component4);
+  return _createClass(VariableName, [{
+    key: "render",
+    value: function render() {
+      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());
+    }
+  }, {
+    key: "renderDependencies",
+    value: function renderDependencies() {
+      var _this$props3 = this.props,
+        dependencies = _this$props3.dependencies,
+        onVariableSelect = _this$props3.onVariableSelect;
+      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_".concat(dependency),
+          dependencyName: dependency,
+          onDependencySelect: onVariableSelect
+        });
+      }));
+    }
+  }]);
 }(React.Component);
 var DependencyName = /*#__PURE__*/function (_React$Component5) {
   function DependencyName() {
     var _this6;
+    _classCallCheck(this, DependencyName);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
+    _this6 = _callSuper(this, DependencyName, [].concat(args));
     _this6.getValues = function () {
       var dependencyName = _this6.props.dependencyName;
       var dependencyDefault = lightVariables[dependencyName];
@@ -351,22 +372,22 @@ var DependencyName = /*#__PURE__*/function (_React$Component5) {
     };
     return _this6;
   }
-  _inheritsLoose(DependencyName, _React$Component5);
-  var _proto5 = DependencyName.prototype;
-  _proto5.render = function render() {
-    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'
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.variableName(),
-      onClick: this.handleDependencySelect
-    }, this.props.dependencyName)));
-  };
-  return DependencyName;
+  _inherits(DependencyName, _React$Component5);
+  return _createClass(DependencyName, [{
+    key: "render",
+    value: function render() {
+      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'
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.variableName(),
+        onClick: this.handleDependencySelect
+      }, this.props.dependencyName)));
+    }
+  }]);
 }(React.Component);
 var VariableValue = function VariableValue(props) {
-  var _cx4;
   var value = props.value;
   var valueIsColor = isColor(value);
   var valueIsGradient = isGradient(value);
@@ -377,7 +398,7 @@ var VariableValue = function VariableValue(props) {
   }
   return /*#__PURE__*/(
     React.createElement("span", {
-      className: cx((_cx4 = {}, _cx4[styles.undefined()] = !value, _cx4))
+      className: cx(_defineProperty({}, styles.undefined(), !value))
     }, hasExample && /*#__PURE__*/React.createElement("span", {
       className: styles.colorExample(),
       style: {