@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/cjs/internal/ThemePlayground/helpers.js

@@ -1,11 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getComponentsFromPropsList = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getComponentsFromPropsList = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
 
 var _Checkbox = require("../../components/Checkbox");
 
-var getComponentsFromPropsList = function getComponentsFromPropsList(component, propsList) {
+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.Checkbox;
     if (isCheckbox) {
       var checkboxProps = props;
@@ -19,7 +21,7 @@ var getComponentsFromPropsList = function getComponentsFromPropsList(component,
       }
     }
 
-    var elementWithProps = _react.default.cloneElement(component, (0, _extends2.default)({}, props, { key: index }));
+    var elementWithProps = /*#__PURE__*/_react.default.cloneElement(component, (0, _extends2.default)({}, props, { key: index }));
 
     return [].concat(result, [elementWithProps]);
   }, []);

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

@@ -1 +1 @@
-{"version":3,"sources":["helpers.tsx"],"names":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"0PAAA;;AAEA;;AAEO,IAAMA,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,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAIL,KAAvB;AACA,UAAIK,aAAa,CAACC,OAAlB,EAA2B;AACzBD,QAAAA,aAAa,CAACE,GAAd,GAAoB,UAAAC,EAAE,EAAI;AACxB,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,GAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,GAnBM,EAmBJ,EAnBI,CAAP;AAoBD,CArBM,C","sourcesContent":["import React from 'react';\r\n\r\nimport { Checkbox } from '../../components/Checkbox';\r\n\r\nexport const getComponentsFromPropsList = <P extends {}>(component: React.ReactElement<P>, propsList: P[]) => {\r\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\r\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\r\n    // @ts-ignore\r\n    const isCheckbox = component.type === Checkbox;\r\n    if (isCheckbox) {\r\n      const checkboxProps = (props as unknown) as { ref: (el: Checkbox) => void; focused: boolean };\r\n      if (checkboxProps.focused) {\r\n        checkboxProps.ref = el => {\r\n          if (el) {\r\n            el.setState({ focusedByTab: true });\r\n          }\r\n        };\r\n        delete checkboxProps.focused;\r\n      }\r\n    }\r\n\r\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\r\n\r\n    return [...result, elementWithProps];\r\n  }, []);\r\n};\r\n"]}
+{"version":3,"sources":["helpers.tsx"],"names":["getComponentsFromPropsList","component","propsList","reduce","result","props","index","isCheckbox","type","Checkbox","checkboxProps","focused","ref","el","setState","focusedByTab","elementWithProps","React","cloneElement","key"],"mappings":"kQAAA;;AAEA;;AAEO,IAAMA,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,KAAmBC,kBAAtC;AACA,QAAIF,UAAJ,EAAgB;AACd,UAAMG,aAAa,GAAGL,KAAtB;AACA,UAAIK,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,gBAAGC,eAAMC,YAAN,CAAmBjB,SAAnB,6BAAmCI,KAAnC,IAA0Cc,GAAG,EAAEb,KAA/C,IAAzB;;AAEA,qBAAWF,MAAX,GAAmBY,gBAAnB;AACD,GAlBM,EAkBJ,EAlBI,CAAP;AAmBD,CAvBM,C","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/cjs/internal/ThemeShowcase/ThemeShowcase.d.ts

@@ -8,9 +8,10 @@ interface ShowcaseState {
 }
 export declare class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {
     state: ShowcaseState;
+    private emotion;
     private isUnmounting;
     private variablesDiff;
-    UNSAFE_componentWillMount(): void;
+    constructor(props: ShowcaseProps);
     render(): JSX.Element;
     componentWillUnmount(): void;
     private getValues;

package/cjs/internal/ThemeShowcase/ThemeShowcase.js

@@ -1,9 +1,9 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 
+var _ColorHelpers = require("../../lib/styles/ColorHelpers");
 var _DefaultTheme = require("../../lib/theming/themes/DefaultTheme");
-var _FlatTheme = require("../../lib/theming/themes/FlatTheme");
+var _DarkTheme = require("../../lib/theming/themes/DarkTheme");
 var _ComboBox = require("../../components/ComboBox");
 var _Gapped = require("../../components/Gapped");
 var _Link = require("../../components/Link");
@@ -12,6 +12,10 @@ var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunc
 var _Tooltip = require("../../components/Tooltip");
 var _Supports = require("../../lib/Supports");
 
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _useTheme = require("../../lib/theming/useTheme");
+
 var _VariablesCollector = require("./VariablesCollector");
 
 
@@ -34,16 +38,15 @@ var ALL_VARIABLES = Object.keys(_DefaultTheme.DEFAULT_THEME);var
 
 
 
-ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ThemeShowcase, _React$Component);function ThemeShowcase() {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.
-    state = {};_this.
+ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ThemeShowcase, _React$Component);
 
-    isUnmounting = false;_this.
-    variablesDiff = [];_this.
 
 
 
 
 
+  function ThemeShowcase(props) {var _this;
+    _this = _React$Component.call(this, props) || this;_this.state = {};_this.isUnmounting = false;_this.variablesDiff = [];_this.
 
 
 
@@ -121,27 +124,6 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
-    getItems = function (query) {
-      return Promise.resolve(_this.getValues(query));
-    };_this.
-    handleVariableChange = function (item) {
-      if (!_this.isUnmounting) {
-        _this.setState({ selectedVariable: item });
-      }
-    };_this.
-    handleUnexpectedVariableInput = function (query) {
-      var values = _this.getValues(query);
-      if (values.length > 0) {
-        return values[0];
-      } else {
-        return _this.resetVariable();
-      }
-    };_this.
-    resetVariable = function () {
-      if (!_this.isUnmounting) {
-        _this.setState({ selectedVariable: undefined });
-      }
-    };return _this;}var _proto = ThemeShowcase.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {var _this2 = this;if (this.props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this2.variablesDiff.push(variable);}});}};_proto.render = function render() {var _this3 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return _react.default.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.default.createElement(_Link.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 ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.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 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return _react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, _react.default.createElement("div", null, _react.default.createElement(_Sticky.Sticky, { side: 'top' }, _react.default.createElement("div", { className: _ThemeShowcase.jsStyles.searchBar(), "data-perf-info": executionTime + " " + callsCount }, _react.default.createElement(_Gapped.Gapped, { gap: 15 }, _react.default.createElement(_ComboBox.ComboBox, { getItems: this.getItems, value: selectedVariable, onValueChange: this.handleVariableChange, onUnexpectedInput: this.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && _react.default.createElement(_Link.Link, { onClick: this.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return _react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this3.handleVariableChange });})), _react.default.createElement(ShowUnusedVariables, { diff: this.variablesDiff }));};_proto.componentWillUnmount = function componentWillUnmount() {this.isUnmounting = true;};_proto.getValues = function getValues(query) {var lowerCaseQuery = query && query.toLowerCase().trim();var allItems = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);exports.ThemeShowcase = ThemeShowcase;var
 
 
 
@@ -150,128 +132,155 @@ ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.de
 
 
 
-ComponentShowcase = /*#__PURE__*/function (_React$Component2) {(0, _inheritsLoose2.default)(ComponentShowcase, _React$Component2);function ComponentShowcase() {return _React$Component2.apply(this, arguments) || this;}var _proto2 = ComponentShowcase.prototype;_proto2.
-  render = function render() {var _this4 = 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 (
-      _react.default.createElement(_react.default.Fragment, null,
-      _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
-      function (isSticky) {var _cn;return (
-          _react.default.createElement("h2", {
-            className: (0, _classnames.default)((_cn = {}, _cn[
-            _ThemeShowcase.jsStyles.heading()] = true, _cn[
-            _ThemeShowcase.jsStyles.headingSticky()] = isSticky, _cn)) },
 
 
-          _this4.props.name));}),
 
 
 
-      _react.default.createElement("table", { className: _ThemeShowcase.jsStyles.table() },
-      _react.default.createElement("thead", null,
-      _react.default.createElement("tr", null,
-      _react.default.createElement("th", { style: { width: 170 } }, "ClassName"),
-      _react.default.createElement("th", { style: { width: 210 } }, "Variable Name"),
-      _react.default.createElement("th", { style: { width: 250 } }, "Default Value"),
-      _react.default.createElement("th", { style: { width: 250 } }, "Flat Value"))),
 
 
-      _react.default.createElement("tbody", null,
-      elements.map(function (el) {return (
-          _react.default.createElement(ComponentShowcaseRow, {
-            key: name + "_" + el,
-            element: el,
-            row: description[el],
-            onVariableSelect: onVariableSelect,
-            isDebugMode: isDebugMode }));})))));
-
 
+    getItems = function (query) {
+      return Promise.resolve(_this.getValues(query));
+    };_this.
+    handleVariableChange = function (item) {
+      if (!_this.isUnmounting) {
+        _this.setState({ selectedVariable: item });
+      }
+    };_this.
+    handleUnexpectedVariableInput = function (query) {
+      var values = _this.getValues(query);
+      if (values.length > 0) {
+        return values[0];
+      }
 
+      return _this.resetVariable();
+    };_this.
+    resetVariable = function () {
+      if (!_this.isUnmounting) {
+        _this.setState({ selectedVariable: undefined });
+      }
+    };if (props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this.variablesDiff.push(variable);}});}return _this;}var _proto = ThemeShowcase.prototype;_proto.render = function render() {var _this2 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return /*#__PURE__*/_react.default.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.default.createElement(_Link.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 ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.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 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {var styles = (0, _ThemeShowcase.getStyles)(_this2.emotion);return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: 'top' }, /*#__PURE__*/_react.default.createElement("div", { className: styles.searchBar(theme), "data-perf-info": executionTime + " " + callsCount }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 15 }, /*#__PURE__*/_react.default.createElement(_ComboBox.ComboBox, { getItems: _this2.getItems, value: selectedVariable, onValueChange: _this2.handleVariableChange, onUnexpectedInput: _this2.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: _this2.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return /*#__PURE__*/_react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this2.handleVariableChange });})), /*#__PURE__*/_react.default.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 = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);exports.ThemeShowcase = ThemeShowcase;
 
 
 
-  };return ComponentShowcase;}(_react.default.Component);var
 
 
 
 
 
 
+function ComponentShowcase(props) {
+  var theme = (0, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
 
+  var name = props.name,description = props.description,onVariableSelect = props.onVariableSelect,isDebugMode = props.isDebugMode;
+  var elements = Object.keys(description);
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
+  return elements.length ? /*#__PURE__*/
+  _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+  _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
+  function (isSticky) {var _emotion$cx;return /*#__PURE__*/(
+      _react.default.createElement("h2", {
+        className: emotion.cx((_emotion$cx = {}, _emotion$cx[
+        styles.heading(theme)] = true, _emotion$cx[
+        styles.headingSticky()] = isSticky, _emotion$cx)) },
 
 
-ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsLoose2.default)(ComponentShowcaseRow, _React$Component3);function ComponentShowcaseRow() {return _React$Component3.apply(this, arguments) || this;}var _proto3 = ComponentShowcaseRow.prototype;_proto3.
-  render = function render() {var _this5 = this;var _this$props2 =
-    this.props,el = _this$props2.element,row = _this$props2.row,isDebugMode = _this$props2.isDebugMode;
-    var rowSpan = row.variables.length + 1;
+      props.name));}), /*#__PURE__*/
 
-    return (
-      _react.default.createElement(_react.default.Fragment, null,
-      _react.default.createElement("tr", { className: _ThemeShowcase.jsStyles.invisibleRow() },
-      _react.default.createElement("td", { rowSpan: rowSpan },
-      _react.default.createElement("span", { className: _ThemeShowcase.jsStyles.elementName() }, ".", el)),
 
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() }),
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() }),
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() })),
 
-      row.variables.map(function (varName) {var _cn2;
-        var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-        var variableDefault = _DefaultTheme.DEFAULT_THEME[varName];
-        var variableFlat = _FlatTheme.FLAT_THEME[varName];
-        var hasNoVariables = isDebugMode && !variableDefault && !variableFlat;
+  _react.default.createElement("table", { className: styles.table() }, /*#__PURE__*/
+  _react.default.createElement("thead", null, /*#__PURE__*/
+  _react.default.createElement("tr", null, /*#__PURE__*/
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 170 } }, "ClassName"), /*#__PURE__*/
 
-        return (
-          _react.default.createElement("tr", { key: el + "_" + varName, className: (0, _classnames.default)((_cn2 = {}, _cn2[_ThemeShowcase.jsStyles.suspiciousRow()] = hasNoVariables, _cn2)) },
-          _react.default.createElement("td", null,
-          _react.default.createElement(VariableName, {
-            variableName: varName,
-            dependencies: dependencies,
-            onVariableSelect: _this5.props.onVariableSelect })),
 
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 210 } }, "Variable Name"), /*#__PURE__*/
 
-          _react.default.createElement("td", null,
-          _react.default.createElement(VariableValue, { value: variableDefault })),
 
-          _react.default.createElement("td", null,
-          _react.default.createElement(VariableValue, { value: variableFlat }))));
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 250 } }, "Default Value"), /*#__PURE__*/
 
 
+  _react.default.createElement("th", { className: styles.headerCell(), style: { width: 250 } }, "Dark Value"))), /*#__PURE__*/
 
-      })));
 
 
-  };return ComponentShowcaseRow;}(_react.default.Component);var
 
+  _react.default.createElement("tbody", null,
+  elements.map(function (el) {return /*#__PURE__*/(
+      _react.default.createElement(ComponentShowcaseRow, {
+        key: name + "_" + el,
+        element: el,
+        row: description[el],
+        onVariableSelect: onVariableSelect,
+        isDebugMode: isDebugMode }));})))) :
 
 
 
 
 
+  null;
+}
 
 
-VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.default)(VariableName, _React$Component4);function VariableName() {var _this6;for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}_this6 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;_this6.
 
 
 
 
 
 
+function ComponentShowcaseRow(props) {var _emotion$cx2;
+  var theme = (0, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
 
+  var el = props.element,row = props.row,isDebugMode = props.isDebugMode;
+  var rowSpan = row.variables.length + 1;
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement("tr", { className: emotion.cx(styles.invisibleRow(), (_emotion$cx2 = {}, _emotion$cx2[styles.invisibleDarkRow()] = theme === _DarkTheme.DARK_THEME, _emotion$cx2)) }, /*#__PURE__*/
+    _react.default.createElement("td", { className: emotion.cx(styles.cell(), styles.majorCell()), rowSpan: rowSpan }, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.elementName() }, ".", el)), /*#__PURE__*/
 
+    _react.default.createElement("td", { className: styles.invisibleCell() }), /*#__PURE__*/
+    _react.default.createElement("td", { className: styles.invisibleCell() }), /*#__PURE__*/
+    _react.default.createElement("td", { className: styles.invisibleCell() })),
 
+    row.variables.map(function (varName) {var _emotion$cx3;
+      var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+      var variableDefault = _DefaultTheme.DEFAULT_THEME[varName];
+      var variableDark = _DarkTheme.DARK_THEME[varName];
+      var hasNoVariables = isDebugMode && !variableDefault;
+      return /*#__PURE__*/(
+        _react.default.createElement("tr", {
+          key: el + "_" + varName,
+          className: emotion.cx(styles.row(), (_emotion$cx3 = {}, _emotion$cx3[
+          styles.suspiciousRow()] = hasNoVariables, _emotion$cx3[
+          styles.darkRow()] = theme === _DarkTheme.DARK_THEME, _emotion$cx3)) }, /*#__PURE__*/
 
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableName, {
+          variableName: varName,
+          dependencies: dependencies,
+          onVariableSelect: props.onVariableSelect })), /*#__PURE__*/
 
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableValue, { value: variableDefault })), /*#__PURE__*/
 
+        _react.default.createElement("td", { className: styles.cell() }, /*#__PURE__*/
+        _react.default.createElement(VariableValue, { value: variableDark }))));
 
 
 
+    })));
 
 
+}
 
 
 
@@ -279,60 +288,87 @@ VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.de
 
 
 
+function VariableName(_ref) {var variableName = _ref.variableName,dependencies = _ref.dependencies,onVariableSelect = _ref.onVariableSelect;
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
+  return /*#__PURE__*/(
+    _react.default.createElement("span", null, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.variableName(), onClick: handleVariableSelect },
+    variableName),
 
+    dependencies.length > 0 && renderDependencies()));
 
-    handleVariableSelect = function () {var _this6$props =
-      _this6.props,variableName = _this6$props.variableName,onVariableSelect = _this6$props.onVariableSelect;
-      if (onVariableSelect) {
-        onVariableSelect({ value: variableName, label: variableName });
-      }
-    };return _this6;}var _proto4 = VariableName.prototype;_proto4.render = function render() {return _react.default.createElement("span", null, _react.default.createElement("span", { className: _ThemeShowcase.jsStyles.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 _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("br", null), _react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {return _react.default.createElement(DependencyName, { key: "dependency_" + dependency, dependencyName: dependency, onDependencySelect: onVariableSelect });}));};return VariableName;}(_react.default.Component);var
 
 
+  function renderDependencies() {
+    return /*#__PURE__*/(
+      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+      _react.default.createElement("br", null), /*#__PURE__*/
+      _react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:",
 
+      dependencies.map(function (dependency) {return /*#__PURE__*/(
+          _react.default.createElement(DependencyName, {
+            key: "dependency_" + dependency,
+            dependencyName: dependency,
+            onDependencySelect: onVariableSelect }));})));
 
 
 
-DependencyName = /*#__PURE__*/function (_React$Component5) {(0, _inheritsLoose2.default)(DependencyName, _React$Component5);function DependencyName() {var _this7;for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}_this7 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;_this7.
 
+  }
 
+  function handleVariableSelect() {
+    if (onVariableSelect) {
+      onVariableSelect({ value: variableName, label: variableName });
+    }
+  }
+}
 
 
 
 
 
 
+function DependencyName(_ref2) {var dependencyName = _ref2.dependencyName,onDependencySelect = _ref2.onDependencySelect;
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
+  return /*#__PURE__*/(
+    _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+    _react.default.createElement("br", null), "\u2013",
+    ' ', /*#__PURE__*/
+    _react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: getValues, pos: 'right middle' }, /*#__PURE__*/
+    _react.default.createElement("span", { className: styles.variableName(), onClick: handleDependencySelect },
+    dependencyName))));
 
 
 
 
 
-    getValues = function () {
-      var dependencyName = _this7.props.dependencyName;
-      var dependencyDefault = _DefaultTheme.DEFAULT_THEME[dependencyName];
-      var dependencyFlat = _FlatTheme.FLAT_THEME[dependencyName];
-      return (
-        _react.default.createElement(_react.default.Fragment, null,
-        _react.default.createElement("span", null, "Default value: ", _react.default.createElement(VariableValue, { value: dependencyDefault })),
-        _react.default.createElement("br", null),
-        _react.default.createElement("span", null, "Flat value: ", _react.default.createElement(VariableValue, { value: dependencyFlat }))));
+  function getValues() {
+    var dependencyDefault = _DefaultTheme.DEFAULT_THEME[dependencyName];
+    var dependencyDark = _DarkTheme.DARK_THEME[dependencyName];
+    return /*#__PURE__*/(
+      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+      _react.default.createElement("span", null, "Default value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDefault })), /*#__PURE__*/
+      _react.default.createElement("span", null, "Dark value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDark }))));
 
 
-    };_this7.
+  }
 
-    handleDependencySelect = function () {var _this7$props =
-      _this7.props,dependencyName = _this7$props.dependencyName,onDependencySelect = _this7$props.onDependencySelect;
-      if (onDependencySelect) {
-        onDependencySelect({ value: dependencyName, label: dependencyName });
-      }
-    };return _this7;}var _proto5 = DependencyName.prototype;_proto5.render = function render() {return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("br", null), "\u2013", ' ', _react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: this.getValues, pos: 'right middle' }, _react.default.createElement("span", { className: _ThemeShowcase.jsStyles.variableName(), onClick: this.handleDependencySelect }, this.props.dependencyName)));};return DependencyName;}(_react.default.Component);
+  function handleDependencySelect() {
+    if (onDependencySelect) {
+      onDependencySelect({ value: dependencyName, label: dependencyName });
+    }
+  }
+}
 
+var VariableValue = function VariableValue(props) {var _emotion$cx4;
+  var emotion = (0, _Emotion.useEmotion)();
 
-var VariableValue = function VariableValue(props) {var _cn3;
   var value = props.value;
-  var valueIsColor = isColor(value);
+  var valueIsColor = (0, _ColorHelpers.isColor)(value);
   var valueIsGradient = isGradient(value);
   var hasExample = valueIsColor || valueIsGradient;
   var borderColor = 'transparent';
@@ -340,25 +376,28 @@ var VariableValue = function VariableValue(props) {var _cn3;
     borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
   }
 
-  return (
-    _react.default.createElement("span", { className: (0, _classnames.default)((_cn3 = {}, _cn3[_ThemeShowcase.jsStyles.undefined()] = !value, _cn3)) },
-    hasExample && _react.default.createElement("span", { className: _ThemeShowcase.jsStyles.colorExample(), style: { background: value, borderColor: borderColor } }),
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
+  return /*#__PURE__*/(
+    _react.default.createElement("span", { className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4)) },
+    hasExample && /*#__PURE__*/_react.default.createElement("span", { className: styles.colorExample(), style: { background: value, borderColor: borderColor } }),
     value || 'undefined'));
 
 
 };
 
 var ShowUnusedVariables = function ShowUnusedVariables(props) {
+  var emotion = (0, _Emotion.useEmotion)();
   if (props.diff.length === 0) {
     return null;
   }
+  var styles = (0, _ThemeShowcase.getStyles)(emotion);
 
-  return (
-    _react.default.createElement("div", { className: _ThemeShowcase.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, "):",
+  return /*#__PURE__*/(
+    _react.default.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.default.createElement("ul", null,
-    props.diff.sort().map(function (v) {return (
+    props.diff.sort().map(function (v) {return /*#__PURE__*/(
         _react.default.createElement("li", { key: v }, v));}))));
 
 
@@ -366,10 +405,6 @@ var ShowUnusedVariables = function ShowUnusedVariables(props) {
 
 };
 
-function isColor(input) {
-  return !!input && (input.startsWith('#') || input.startsWith('rgb') || input.startsWith('hsl'));
-}
-
 function isGradient(input) {
   return !!input && input.startsWith('linear-gradient');
 }