@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/internal/ThemePlayground/helpers/helpers.js

@@ -4,7 +4,6 @@ import { Checkbox } from "../../../components/Checkbox";
 export var getComponentsFromPropsList = function getComponentsFromPropsList(component, propsList) {
   return propsList.reduce(function (result, props, index) {
     // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен
-    // @ts-ignore
     var isCheckbox = component.type === Checkbox;
 
     if (isCheckbox) {

package/internal/ThemePlayground/helpers/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["helpers.tsx"],"names":["React","Checkbox","getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","cloneElement","key"],"mappings":"0DAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;;AAEA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAAeC,SAAf,EAAiDC,SAAjD,EAAoE;AAC5G,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA;AACA,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBT,QAAtC;AACA,QAAIQ,UAAJ,EAAgB;AACd,UAAME,aAAa,GAAGJ,KAAtB;AACA,UAAII,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGjB,KAAK,CAACkB,YAAN,CAAmBf,SAAnB,eAAmCI,KAAnC,IAA0CY,GAAG,EAAEX,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBW,gBAAnB;AACD,GAnBM,EAmBJ,EAnBI,CAAP;AAoBD,CArBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends {}>(component: React.ReactElement<P>, propsList: P[]) => {\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n    // @ts-ignore\n    const isCheckbox = component.type === Checkbox;\n    if (isCheckbox) {\n      const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n      if (checkboxProps.focused) {\n        checkboxProps.ref = (el) => {\n          if (el) {\n            el.setState({ focusedByTab: true });\n          }\n        };\n        delete checkboxProps.focused;\n      }\n    }\n\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n    return [...result, elementWithProps];\n  }, []);\n};\n"]}
+{"version":3,"sources":["helpers.tsx"],"names":["React","Checkbox","getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","cloneElement","key"],"mappings":"0DAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;;AAEA,OAAO,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B;AACxCC,SADwC;AAExCC,SAFwC;AAGrC;AACH,SAAOA,SAAS,CAACC,MAAV,CAAiB,UAACC,MAAD,EAAuCC,KAAvC,EAA8CC,KAA9C,EAAwD;AAC9E;AACA,QAAMC,UAAU,GAAGN,SAAS,CAACO,IAAV,KAAmBT,QAAtC;AACA,QAAIQ,UAAJ,EAAgB;AACd,UAAME,aAAa,GAAGJ,KAAtB;AACA,UAAII,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAACC,EAAD,EAAQ;AAC1B,cAAIA,EAAJ,EAAQ;AACNA,YAAAA,EAAE,CAACC,QAAH,CAAY,EAAEC,YAAY,EAAE,IAAhB,EAAZ;AACD;AACF,SAJD;AAKA,eAAOL,aAAa,CAACC,OAArB;AACD;AACF;;AAED,QAAMK,gBAAgB,gBAAGjB,KAAK,CAACkB,YAAN,CAAmBf,SAAnB,eAAmCI,KAAnC,IAA0CY,GAAG,EAAEX,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBW,gBAAnB;AACD,GAlBM,EAkBJ,EAlBI,CAAP;AAmBD,CAvBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\n\nexport const getComponentsFromPropsList = <P extends Record<string, string>>(\n  component: React.ReactElement<P>,\n  propsList: P[],\n) => {\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n    const isCheckbox = component.type === Checkbox;\n    if (isCheckbox) {\n      const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n      if (checkboxProps.focused) {\n        checkboxProps.ref = (el) => {\n          if (el) {\n            el.setState({ focusedByTab: true });\n          }\n        };\n        delete checkboxProps.focused;\n      }\n    }\n\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n    return [...result, elementWithProps];\n  }, []);\n};\n"]}

package/internal/ThemePlayground/helpers.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const getComponentsFromPropsList: <P extends {}>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];
+export declare const getComponentsFromPropsList: <P extends Record<string, string>>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -10,10 +10,11 @@ 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 { EmotionConsumer, useEmotion } from "../../../lib/theming/Emotion";
+import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
+import { useTheme } from "../../../lib/theming/useTheme";
 import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "../VariablesCollector";
-import { styles } from "../ThemeShowcase.styles";
+import { getStyles } from "../ThemeShowcase.styles";
 var EMPTY_ARRAY = [];
 var ALL_VARIABLES = Object.keys(defaultVariables);
 export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
@@ -87,37 +88,41 @@ export var ThemeShowcase = /*#__PURE__*/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 /*#__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
-      }));
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+        var styles = getStyles(_this2.emotion);
+        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
+        }));
+      });
     });
   };
 
@@ -146,177 +151,120 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   return ThemeShowcase;
 }(React.Component);
 
-var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
-  _inheritsLoose(ComponentShowcase, _React$Component2);
-
-  function ComponentShowcase() {
-    return _React$Component2.apply(this, arguments) || this;
-  }
-
-  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) {
-  _inheritsLoose(ComponentShowcaseRow, _React$Component3);
-
-  function ComponentShowcaseRow() {
-    return _React$Component3.apply(this, arguments) || this;
-  }
-
-  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__*/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()
-      }), /*#__PURE__*/React.createElement("td", {
-        className: styles.invisibleCell()
-      })), row.variables.map(function (varName) {
-        var _cx3;
-
-        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(), (_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
-        })));
-      }));
-    });
-  };
-
-  return ComponentShowcaseRow;
-}(React.Component);
-
-var VariableName = /*#__PURE__*/function (_React$Component4) {
-  _inheritsLoose(VariableName, _React$Component4);
-
-  function VariableName() {
-    var _this5;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function ComponentShowcase(props) {
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var name = props.name,
+      description = props.description,
+      onVariableSelect = props.onVariableSelect,
+      isDebugMode = props.isDebugMode;
+  var elements = Object.keys(description);
+  var styles = getStyles(emotion);
+  return elements.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
+    side: 'top',
+    offset: 40
+  }, function (isSticky) {
+    var _emotion$cx;
+
+    return /*#__PURE__*/React.createElement("h2", {
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.heading(theme)] = true, _emotion$cx[styles.headingSticky()] = isSticky, _emotion$cx))
+    }, 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
     }
-
-    _this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
-
-    _this5.handleVariableSelect = function () {
-      var _this5$props = _this5.props,
-          variableName = _this5$props.variableName,
-          onVariableSelect = _this5$props.onVariableSelect;
-
-      if (onVariableSelect) {
-        onVariableSelect({
-          value: variableName,
-          label: variableName
-        });
-      }
-    };
-
-    return _this5;
-  }
-
-  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;
+  }, "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;
+}
+
+function ComponentShowcaseRow(props) {
+  var _emotion$cx2;
+
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var el = props.element,
+      row = props.row,
+      isDebugMode = props.isDebugMode;
+  var rowSpan = row.variables.length + 1;
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+    className: emotion.cx(styles.invisibleRow(), (_emotion$cx2 = {}, _emotion$cx2[styles.invisibleDarkRow()] = theme === darkVariables, _emotion$cx2))
+  }, /*#__PURE__*/React.createElement("td", {
+    className: emotion.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 _emotion$cx3;
+
+    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: emotion.cx(styles.row(), (_emotion$cx3 = {}, _emotion$cx3[styles.suspiciousRow()] = hasNoVariables, _emotion$cx3[styles.darkRow()] = theme === darkVariables, _emotion$cx3))
+    }, /*#__PURE__*/React.createElement("td", {
+      className: styles.cell()
+    }, /*#__PURE__*/React.createElement(VariableName, {
+      variableName: varName,
+      dependencies: dependencies,
+      onVariableSelect: 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
+    })));
+  }));
+}
+
+function VariableName(_ref) {
+  var variableName = _ref.variableName,
+      dependencies = _ref.dependencies,
+      onVariableSelect = _ref.onVariableSelect;
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: styles.variableName(),
+    onClick: handleVariableSelect
+  }, variableName), dependencies.length > 0 && renderDependencies());
+
+  function renderDependencies() {
     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,
@@ -324,69 +272,56 @@ var VariableName = /*#__PURE__*/function (_React$Component4) {
         onDependencySelect: onVariableSelect
       });
     }));
-  };
-
-  return VariableName;
-}(React.Component);
-
-var DependencyName = /*#__PURE__*/function (_React$Component5) {
-  _inheritsLoose(DependencyName, _React$Component5);
-
-  function DependencyName() {
-    var _this6;
+  }
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+  function handleVariableSelect() {
+    if (onVariableSelect) {
+      onVariableSelect({
+        value: variableName,
+        label: variableName
+      });
     }
-
-    _this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
-
-    _this6.getValues = function () {
-      var dependencyName = _this6.props.dependencyName;
-      var dependencyDefault = defaultVariables[dependencyName];
-      var dependencyDark = darkVariables[dependencyName];
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
-        value: dependencyDefault
-      })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
-        value: dependencyDark
-      })));
-    };
-
-    _this6.handleDependencySelect = function () {
-      var _this6$props = _this6.props,
-          dependencyName = _this6$props.dependencyName,
-          onDependencySelect = _this6$props.onDependencySelect;
-
-      if (onDependencySelect) {
-        onDependencySelect({
-          value: dependencyName,
-          label: dependencyName
-        });
-      }
-    };
-
-    return _this6;
+  }
+}
+
+function DependencyName(_ref2) {
+  var dependencyName = _ref2.dependencyName,
+      onDependencySelect = _ref2.onDependencySelect;
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), "\u2013", ' ', /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: 'hover',
+    render: getValues,
+    pos: 'right middle'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.variableName(),
+    onClick: handleDependencySelect
+  }, dependencyName)));
+
+  function getValues() {
+    var dependencyDefault = defaultVariables[dependencyName];
+    var dependencyDark = darkVariables[dependencyName];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
+      value: dependencyDefault
+    })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
+      value: dependencyDark
+    })));
   }
 
-  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;
-}(React.Component);
+  function handleDependencySelect() {
+    if (onDependencySelect) {
+      onDependencySelect({
+        value: dependencyName,
+        label: dependencyName
+      });
+    }
+  }
+}
 
 var VariableValue = function VariableValue(props) {
-  var _cx4;
+  var _emotion$cx4;
 
+  var emotion = useEmotion();
   var value = props.value;
   var valueIsColor = isColor(value);
   var valueIsGradient = isGradient(value);
@@ -397,8 +332,9 @@ var VariableValue = function VariableValue(props) {
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", {
-    className: cx((_cx4 = {}, _cx4[styles.undefined()] = !value, _cx4))
+    className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4))
   }, hasExample && /*#__PURE__*/React.createElement("span", {
     className: styles.colorExample(),
     style: {
@@ -409,10 +345,13 @@ var VariableValue = function VariableValue(props) {
 };
 
 var ShowUnusedVariables = function ShowUnusedVariables(props) {
+  var emotion = useEmotion();
+
   if (props.diff.length === 0) {
     return null;
   }
 
+  var styles = getStyles(emotion);
   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) {