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

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

@@ -0,0 +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;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/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemePlayground/helpers.js",
+  "module": "helpers",
+  "types": "../helpers.d.ts",
+  "sideEffects": false
+}

package/internal/ThemePlayground/helpers.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+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

@@ -0,0 +1,366 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { isColor } from "../../../lib/styles/ColorHelpers";
+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 { EmotionConsumer, useEmotion } from "../../../lib/theming/Emotion";
+import { ThemeContext } 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 { getStyles } from "../ThemeShowcase.styles";
+var EMPTY_ARRAY = [];
+var ALL_VARIABLES = Object.keys(defaultVariables);
+export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ThemeShowcase, _React$Component);
+
+  function ThemeShowcase(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.state = {};
+    _this.isUnmounting = false;
+    _this.variablesDiff = [];
+
+    _this.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 = 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 (!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 ? "(" + 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(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, 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
+        }));
+      });
+    });
+  };
+
+  _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 ThemeShowcase;
+}(React.Component);
+
+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
+    }
+  }, "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,
+        dependencyName: dependency,
+        onDependencySelect: onVariableSelect
+      });
+    }));
+  }
+
+  function handleVariableSelect() {
+    if (onVariableSelect) {
+      onVariableSelect({
+        value: variableName,
+        label: variableName
+      });
+    }
+  }
+}
+
+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
+    })));
+  }
+
+  function handleDependencySelect() {
+    if (onDependencySelect) {
+      onDependencySelect({
+        value: dependencyName,
+        label: dependencyName
+      });
+    }
+  }
+}
+
+var VariableValue = function VariableValue(props) {
+  var _emotion$cx4;
+
+  var emotion = useEmotion();
+  var value = props.value;
+  var valueIsColor = isColor(value);
+  var valueIsGradient = isGradient(value);
+  var hasExample = valueIsColor || valueIsGradient;
+  var borderColor = 'transparent';
+
+  if (hasExample) {
+    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
+  }
+
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement("span", {
+    className: emotion.cx((_emotion$cx4 = {}, _emotion$cx4[styles.undefined()] = !value, _emotion$cx4))
+  }, hasExample && /*#__PURE__*/React.createElement("span", {
+    className: styles.colorExample(),
+    style: {
+      background: value,
+      borderColor: borderColor
+    }
+  }), value || 'undefined');
+};
+
+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) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: v
+    }, v);
+  })));
+};
+
+function isGradient(input) {
+  return !!input && input.startsWith('linear-gradient');
+}

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ThemeShowcase.tsx"],"names":["React","isColor","DEFAULT_THEME","defaultVariables","DARK_THEME","darkVariables","ComboBox","Gapped","Link","Sticky","ColorFunctions","Tooltip","IS_PROXY_SUPPORTED","EmotionConsumer","useEmotion","ThemeContext","useTheme","ALL_USED_VARIABLES","CALLS_COUNT","COMPONENT_DESCRIPTIONS","COMPONENT_DESCRIPTIONS_BY_VARIABLE","EXECUTION_TIME","getStyles","EMPTY_ARRAY","ALL_VARIABLES","Object","keys","ThemeShowcase","props","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","isDebugMode","forEach","variable","found","includes","push","render","descriptionsToRender","value","callsCount","executionTime","toFixed","emotion","theme","styles","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","cx","heading","headingSticky","table","headerCell","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","invisibleDarkRow","cell","majorCell","elementName","invisibleCell","varName","dependencies","variableDefault","variableDark","hasNoVariables","suspiciousRow","darkRow","VariableName","variableName","handleVariableSelect","renderDependencies","dependency","DependencyName","dependencyName","onDependencySelect","handleDependencySelect","dependencyDefault","dependencyDark","VariableValue","valueIsColor","valueIsGradient","isGradient","hasExample","borderColor","contrast","colorExample","background","ShowUnusedVariables","diff","unusedVariablesWarning","v","input"],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { DEFAULT_THEME as defaultVariables } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME as darkVariables } from '../../lib/theming/themes/DarkTheme';\nimport { ComboBox, ComboBoxItem } from '../../components/ComboBox';\nimport { Gapped } from '../../components/Gapped';\nimport { Link } from '../../components/Link';\nimport { Sticky } from '../../components/Sticky';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Tooltip } from '../../components/Tooltip';\nimport { IS_PROXY_SUPPORTED } from '../../lib/Supports';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer, useEmotion } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport {\n  ALL_USED_VARIABLES,\n  CALLS_COUNT,\n  COMPONENT_DESCRIPTIONS,\n  COMPONENT_DESCRIPTIONS_BY_VARIABLE,\n  ComponentDescriptionType,\n  ComponentRowDescriptionType,\n  EXECUTION_TIME,\n} from './VariablesCollector';\nimport { getStyles } from './ThemeShowcase.styles';\n\nconst EMPTY_ARRAY: string[] = [];\n\nconst ALL_VARIABLES = Object.keys(defaultVariables) as Array<keyof Theme>;\n\ninterface ShowcaseProps {\n  isDebugMode?: boolean;\n}\ninterface ShowcaseState {\n  selectedVariable?: ComboBoxItem;\n}\n\nexport class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {\n  public state: ShowcaseState = {};\n  private emotion!: Emotion;\n\n  private isUnmounting = false;\n  private variablesDiff: string[] = [];\n\n  constructor(props: ShowcaseProps) {\n    super(props);\n    if (props.isDebugMode) {\n      ALL_VARIABLES.forEach((variable) => {\n        const found = ALL_USED_VARIABLES.includes(variable);\n        if (!found) {\n          this.variablesDiff.push(variable);\n        }\n      });\n    }\n  }\n\n  public render() {\n    if (!IS_PROXY_SUPPORTED) {\n      return (\n        <div>\n          Таблица использования переменных доступна только в{' '}\n          <Link href={'https://caniuse.com/#feat=proxy'} target={'_blank'}>\n            браузерах с поддержкой Proxy\n          </Link>\n          .\n        </div>\n      );\n    }\n\n    const selectedVariable = this.state.selectedVariable;\n    const descriptionsToRender = selectedVariable\n      ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {}\n      : COMPONENT_DESCRIPTIONS;\n\n    const isDebugMode = this.props.isDebugMode;\n    const callsCount = isDebugMode ? `(${CALLS_COUNT} вызовов)` : '';\n    const executionTime = isDebugMode ? `Сгенерировано за ${EXECUTION_TIME.toFixed(3)}ms` : '';\n\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                const styles = getStyles(this.emotion);\n                return (\n                  <Gapped wrap gap={30} verticalAlign={'top'}>\n                    <div>\n                      <Sticky side={'top'}>\n                        <div className={styles.searchBar(theme)} data-perf-info={`${executionTime} ${callsCount}`}>\n                          <Gapped gap={15}>\n                            <ComboBox\n                              getItems={this.getItems}\n                              value={selectedVariable}\n                              onValueChange={this.handleVariableChange}\n                              onUnexpectedInput={this.handleUnexpectedVariableInput}\n                              placeholder={'поиск по названию переменной'}\n                            />\n                            {!!selectedVariable && <Link onClick={this.resetVariable}>сбросить</Link>}\n                          </Gapped>\n                        </div>\n                      </Sticky>\n                      {Object.keys(descriptionsToRender)\n                        .sort()\n                        .map((componentName) => (\n                          <ComponentShowcase\n                            key={componentName}\n                            name={componentName}\n                            description={descriptionsToRender[componentName]}\n                            isDebugMode={isDebugMode}\n                            onVariableSelect={this.handleVariableChange}\n                          />\n                        ))}\n                    </div>\n                    <ShowUnusedVariables diff={this.variablesDiff} />\n                  </Gapped>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n  public componentWillUnmount(): void {\n    this.isUnmounting = true;\n  }\n\n  private getValues(query: string) {\n    const lowerCaseQuery = query && query.toLowerCase().trim();\n    let allItems = ALL_USED_VARIABLES;\n    if (lowerCaseQuery) {\n      allItems = ALL_USED_VARIABLES.filter((usedVariable) => usedVariable.toLowerCase().startsWith(lowerCaseQuery));\n    }\n    return allItems.map((usedVariableName) => ({\n      value: usedVariableName,\n      label: usedVariableName,\n    }));\n  }\n  private getItems = (query: string) => {\n    return Promise.resolve(this.getValues(query));\n  };\n  private handleVariableChange = (item: ComboBoxItem) => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: item });\n    }\n  };\n  private handleUnexpectedVariableInput = (query: string) => {\n    const values = this.getValues(query);\n    if (values.length > 0) {\n      return values[0];\n    }\n\n    return this.resetVariable();\n  };\n  private resetVariable = () => {\n    if (!this.isUnmounting) {\n      this.setState({ selectedVariable: undefined });\n    }\n  };\n}\n\ninterface ComponentShowcaseProps {\n  name: string;\n  description: ComponentDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nfunction ComponentShowcase(props: ComponentShowcaseProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const { name, description, onVariableSelect, isDebugMode } = props;\n  const elements = Object.keys(description);\n  const styles = getStyles(emotion);\n  return elements.length ? (\n    <React.Fragment>\n      <Sticky side={'top'} offset={40}>\n        {(isSticky) => (\n          <h2\n            className={emotion.cx({\n              [styles.heading(theme)]: true,\n              [styles.headingSticky()]: isSticky,\n            })}\n          >\n            {props.name}\n          </h2>\n        )}\n      </Sticky>\n      <table className={styles.table()}>\n        <thead>\n          <tr>\n            <th className={styles.headerCell()} style={{ width: 170 }}>\n              ClassName\n            </th>\n            <th className={styles.headerCell()} style={{ width: 210 }}>\n              Variable Name\n            </th>\n            <th className={styles.headerCell()} style={{ width: 250 }}>\n              Default Value\n            </th>\n            <th className={styles.headerCell()} style={{ width: 250 }}>\n              Dark Value\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {elements.map((el) => (\n            <ComponentShowcaseRow\n              key={`${name}_${el}`}\n              element={el}\n              row={description[el]}\n              onVariableSelect={onVariableSelect}\n              isDebugMode={isDebugMode}\n            />\n          ))}\n        </tbody>\n      </table>\n    </React.Fragment>\n  ) : null;\n}\n\ninterface ComponentShowcaseRowProps {\n  element: string;\n  row: ComponentRowDescriptionType;\n  isDebugMode?: boolean;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nfunction ComponentShowcaseRow(props: ComponentShowcaseRowProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n\n  const { element: el, row, isDebugMode } = props;\n  const rowSpan = row.variables.length + 1;\n  const styles = getStyles(emotion);\n  return (\n    <React.Fragment>\n      <tr className={emotion.cx(styles.invisibleRow(), { [styles.invisibleDarkRow()]: theme === darkVariables })}>\n        <td className={emotion.cx(styles.cell(), styles.majorCell())} rowSpan={rowSpan}>\n          <span className={styles.elementName()}>.{el}</span>\n        </td>\n        <td className={styles.invisibleCell()} />\n        <td className={styles.invisibleCell()} />\n        <td className={styles.invisibleCell()} />\n      </tr>\n      {row.variables.map((varName) => {\n        const dependencies = row.dependencies[varName] || EMPTY_ARRAY;\n        const variableDefault = defaultVariables[varName] as string;\n        const variableDark = darkVariables[varName] as string;\n        const hasNoVariables = isDebugMode && !variableDefault;\n        return (\n          <tr\n            key={`${el}_${varName}`}\n            className={emotion.cx(styles.row(), {\n              [styles.suspiciousRow()]: hasNoVariables,\n              [styles.darkRow()]: theme === darkVariables,\n            })}\n          >\n            <td className={styles.cell()}>\n              <VariableName\n                variableName={varName as string}\n                dependencies={dependencies}\n                onVariableSelect={props.onVariableSelect}\n              />\n            </td>\n            <td className={styles.cell()}>\n              <VariableValue value={variableDefault} />\n            </td>\n            <td className={styles.cell()}>\n              <VariableValue value={variableDark} />\n            </td>\n          </tr>\n        );\n      })}\n    </React.Fragment>\n  );\n}\n\ninterface VariableNameProps {\n  variableName: string;\n  dependencies: Array<keyof Theme>;\n  onVariableSelect: (item: ComboBoxItem) => void;\n}\n\nfunction VariableName({ variableName, dependencies, onVariableSelect }: VariableNameProps) {\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <span>\n      <span className={styles.variableName()} onClick={handleVariableSelect}>\n        {variableName}\n      </span>\n      {dependencies.length > 0 && renderDependencies()}\n    </span>\n  );\n\n  function renderDependencies() {\n    return (\n      <React.Fragment>\n        <br />\n        <br />\n        зависит от:\n        {dependencies.map((dependency) => (\n          <DependencyName\n            key={`dependency_${dependency}`}\n            dependencyName={dependency}\n            onDependencySelect={onVariableSelect}\n          />\n        ))}\n      </React.Fragment>\n    );\n  }\n\n  function handleVariableSelect() {\n    if (onVariableSelect) {\n      onVariableSelect({ value: variableName, label: variableName });\n    }\n  }\n}\n\ninterface DependencyNameProps {\n  dependencyName: keyof Theme;\n  onDependencySelect: (item: ComboBoxItem) => void;\n}\n\nfunction DependencyName({ dependencyName, onDependencySelect }: DependencyNameProps) {\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <React.Fragment>\n      <br />\n      &ndash;{' '}\n      <Tooltip trigger={'hover'} render={getValues} pos={'right middle'}>\n        <span className={styles.variableName()} onClick={handleDependencySelect}>\n          {dependencyName}\n        </span>\n      </Tooltip>\n    </React.Fragment>\n  );\n\n  function getValues() {\n    const dependencyDefault = defaultVariables[dependencyName] as string;\n    const dependencyDark = darkVariables[dependencyName] as string;\n    return (\n      <React.Fragment>\n        <span>Default value: {<VariableValue value={dependencyDefault} />}</span>\n        <span>Dark value: {<VariableValue value={dependencyDark} />}</span>\n      </React.Fragment>\n    );\n  }\n\n  function handleDependencySelect() {\n    if (onDependencySelect) {\n      onDependencySelect({ value: dependencyName, label: dependencyName });\n    }\n  }\n}\n\nconst VariableValue = (props: { value: string }) => {\n  const emotion = useEmotion();\n\n  const value = props.value;\n  const valueIsColor = isColor(value);\n  const valueIsGradient = isGradient(value);\n  const hasExample = valueIsColor || valueIsGradient;\n  let borderColor = 'transparent';\n  if (hasExample) {\n    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';\n  }\n\n  const styles = getStyles(emotion);\n  return (\n    <span className={emotion.cx({ [styles.undefined()]: !value })}>\n      {hasExample && <span className={styles.colorExample()} style={{ background: value, borderColor }} />}\n      {value || 'undefined'}\n    </span>\n  );\n};\n\nconst ShowUnusedVariables = (props: { diff: string[] }) => {\n  const emotion = useEmotion();\n  if (props.diff.length === 0) {\n    return null;\n  }\n  const styles = getStyles(emotion);\n\n  return (\n    <div className={styles.unusedVariablesWarning()}>\n      Неиспользованные переменные ({props.diff.length}\n      ):\n      <ul>\n        {props.diff.sort().map((v) => (\n          <li key={v}>{v}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n\nfunction isGradient(input: string) {\n  return !!input && input.startsWith('linear-gradient');\n}\n"]}

package/internal/ThemeShowcase/ThemeShowcase/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemeShowcase/ThemeShowcase.js",
+  "module": "ThemeShowcase",
+  "types": "../ThemeShowcase.d.ts",
+  "sideEffects": false
+}

package/internal/ThemeShowcase/ThemeShowcase.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComboBoxItem } from '../../components/ComboBox';
+interface ShowcaseProps {
+    isDebugMode?: boolean;
+}
+interface ShowcaseState {
+    selectedVariable?: ComboBoxItem;
+}
+export declare class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {
+    state: ShowcaseState;
+    private emotion;
+    private isUnmounting;
+    private variablesDiff;
+    constructor(props: ShowcaseProps);
+    render(): JSX.Element;
+    componentWillUnmount(): void;
+    private getValues;
+    private getItems;
+    private handleVariableChange;
+    private handleUnexpectedVariableInput;
+    private resetVariable;
+}
+export {};

package/internal/ThemeShowcase/ThemeShowcase.md

@@ -0,0 +1,13 @@
+### Таблица переменных
+
+Список использующихся переменных для каждого кастомизируемого компонента.
+<br/>
+Таблица фильтруется по названию переменной.
+<br/>
+Значения в колонке `Variable name` кликабельны.
+
+```jsx harmony
+import { ThemeShowcase } from '@skbkontur/react-ui/internal/ThemeShowcase/ThemeShowcase';
+
+<ThemeShowcase />;
+```

package/internal/ThemeShowcase/ThemeShowcase.styles/ThemeShowcase.styles.js

@@ -0,0 +1,82 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    searchBar: function searchBar(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        position: relative;\n        box-sizing: border-box;\n        height: 40px;\n        padding: 5px;\n        background-color: ", ";\n\n        &::after {\n          content: attr(data-perf-info);\n          position: absolute;\n          top: 11px;\n          right: 20px;\n          color: #808080;\n          height: 20px;\n          line-height: 20px;\n        }\n      "])), t.bgDefault);
+    },
+    heading: function heading(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        padding: 24px 0 16px 5px;\n        margin: 0;\n        background-color: ", ";\n      "])), t.bgDefault);
+    },
+    headingSticky: function headingSticky() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        border-bottom: 1px solid #e8e8e8;\n      "])));
+    },
+    table: function table() {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        width: 880px;\n        border-collapse: collapse;\n      "])));
+    },
+    headerCell: function headerCell() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        text-align: left;\n        padding-left: 5px;\n      "])));
+    },
+    row: function row() {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          background-color: #f8f8f8;\n        }\n      "])));
+    },
+    darkRow: function darkRow() {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        &:hover {\n          background-color: rgba(255, 255, 255, 0.04);\n        }\n      "])));
+    },
+    cell: function cell() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        border-top: 0 none;\n        border-bottom: 1px solid #e8e8e8;\n        vertical-align: top;\n        padding: 10px 5px;\n      "])));
+    },
+    invisibleRow: function invisibleRow() {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n        height: 0;\n\n        &:hover,\n        &:hover ~ tr {\n          background-color: #f8f8f8;\n        }\n\n        &:hover ~ &,\n        &:hover ~ & ~ tr {\n          background-color: transparent;\n        }\n      "])));
+    },
+    invisibleDarkRow: function invisibleDarkRow() {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        &:hover,\n        &:hover ~ tr {\n          background-color: rgba(255, 255, 255, 0.04);\n        }\n      "])));
+    },
+    suspiciousRow: function suspiciousRow() {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        background-color: red;\n      "])));
+    },
+    //noinspection CssReplaceWithShorthandSafely
+    majorCell: function majorCell() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        border-top: 1px solid #e8e8e8;\n      "])));
+    },
+    invisibleCell: function invisibleCell() {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        padding: 0;\n        height: 0;\n        font-size: 0;\n        line-height: 0;\n        border: 0 none;\n        border-top: 1px solid #e8e8e8;\n      "])));
+    },
+    suspiciousCell: function suspiciousCell() {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        background-color: #fff0bc;\n      "])));
+    },
+    elementName: function elementName() {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        color: #7f9a44;\n        font-weight: 400;\n      "])));
+    },
+    relativeCss: function relativeCss() {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        white-space: pre;\n        color: #333;\n      "])));
+    },
+    variableName: function variableName() {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        color: #b77daa;\n        font-weight: 400;\n        cursor: pointer;\n      "])));
+    },
+    colorExample: function colorExample() {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        box-sizing: border-box;\n        width: 16px;\n        height: 16px;\n        border: 1px solid transparent;\n        margin-right: 4px;\n        vertical-align: -3px;\n      "])));
+    },
+    undefined: function undefined() {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        text-decoration: line-through;\n      "])));
+    },
+    unusedVariablesWarning: function unusedVariablesWarning() {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        padding: 16px;\n        margin: 20px 0;\n        background-color: #fff0bc;\n        border-radius: 3px;\n      "])));
+    },
+    cssClassObject: function cssClassObject() {
+      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        color: #d28445;\n      "])));
+    },
+    cssClassName: function cssClassName() {
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        color: #7f9a44;\n      "])));
+    },
+    cssThemeObject: function cssThemeObject() {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        color: #ac4142;\n      "])));
+    },
+    cssThemeProp: function cssThemeProp() {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        color: #b77daa;\n      "])));
+    }
+  });
+};

package/internal/ThemeShowcase/ThemeShowcase.styles/ThemeShowcase.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ThemeShowcase.styles.ts"],"names":["memoizeStyle","getStyles","emotion","searchBar","t","css","bgDefault","heading","headingSticky","table","headerCell","row","darkRow","cell","invisibleRow","invisibleDarkRow","suspiciousRow","majorCell","invisibleCell","suspiciousCell","elementName","relativeCss","variableName","colorExample","undefined","unusedVariablesWarning","cssClassObject","cssClassName","cssThemeObject","cssThemeProp"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,SADW,qBACDC,CADC,EACS;AAClB,eAAOF,OAAO,CAACG,GAAf;;;;;AAKsBD,QAAAA,CAAC,CAACE,SALxB;;;;;;;;;;;;AAiBD,OAnBU;;AAqBXC,MAAAA,OArBW,mBAqBHH,CArBG,EAqBO;AAChB,eAAOF,OAAO,CAACG,GAAf;;;AAGsBD,QAAAA,CAAC,CAACE,SAHxB;;AAKD,OA3BU;;AA6BXE,MAAAA,aA7BW,2BA6BK;AACd,eAAON,OAAO,CAACG,GAAf;;;AAGD,OAjCU;;AAmCXI,MAAAA,KAnCW,mBAmCH;AACN,eAAOP,OAAO,CAACG,GAAf;;;;AAID,OAxCU;;AA0CXK,MAAAA,UA1CW,wBA0CE;AACX,eAAOR,OAAO,CAACG,GAAf;;;;AAID,OA/CU;;AAiDXM,MAAAA,GAjDW,iBAiDL;AACJ,eAAOT,OAAO,CAACG,GAAf;;;;;AAKD,OAvDU;AAwDXO,MAAAA,OAxDW,qBAwDD;AACR,eAAOV,OAAO,CAACG,GAAf;;;;;AAKD,OA9DU;;AAgEXQ,MAAAA,IAhEW,kBAgEJ;AACL,eAAOX,OAAO,CAACG,GAAf;;;;;;AAMD,OAvEU;;AAyEXS,MAAAA,YAzEW,0BAyEI;AACb,eAAOZ,OAAO,CAACG,GAAf;;;;;;;;;;;;;;AAcD,OAxFU;AAyFXU,MAAAA,gBAzFW,8BAyFQ;AACjB,eAAOb,OAAO,CAACG,GAAf;;;;;;AAMD,OAhGU;;AAkGXW,MAAAA,aAlGW,2BAkGK;AACd,eAAOd,OAAO,CAACG,GAAf;;;AAGD,OAtGU;;AAwGX;AACAY,MAAAA,SAzGW,uBAyGC;AACV,eAAOf,OAAO,CAACG,GAAf;;;AAGD,OA7GU;;AA+GXa,MAAAA,aA/GW,2BA+GK;AACd,eAAOhB,OAAO,CAACG,GAAf;;;;;;;;AAQD,OAxHU;;AA0HXc,MAAAA,cA1HW,4BA0HM;AACf,eAAOjB,OAAO,CAACG,GAAf;;;AAGD,OA9HU;;AAgIXe,MAAAA,WAhIW,yBAgIG;AACZ,eAAOlB,OAAO,CAACG,GAAf;;;;AAID,OArIU;;AAuIXgB,MAAAA,WAvIW,yBAuIG;AACZ,eAAOnB,OAAO,CAACG,GAAf;;;;AAID,OA5IU;;AA8IXiB,MAAAA,YA9IW,0BA8II;AACb,eAAOpB,OAAO,CAACG,GAAf;;;;;AAKD,OApJU;;AAsJXkB,MAAAA,YAtJW,0BAsJI;AACb,eAAOrB,OAAO,CAACG,GAAf;;;;;;;;;AASD,OAhKU;;AAkKXmB,MAAAA,SAlKW,uBAkKC;AACV,eAAOtB,OAAO,CAACG,GAAf;;;AAGD,OAtKU;;AAwKXoB,MAAAA,sBAxKW,oCAwKc;AACvB,eAAOvB,OAAO,CAACG,GAAf;;;;;;AAMD,OA/KU;;AAiLXqB,MAAAA,cAjLW,4BAiLM;AACf,eAAOxB,OAAO,CAACG,GAAf;;;AAGD,OArLU;;AAuLXsB,MAAAA,YAvLW,0BAuLI;AACb,eAAOzB,OAAO,CAACG,GAAf;;;AAGD,OA3LU;;AA6LXuB,MAAAA,cA7LW,4BA6LM;AACf,eAAO1B,OAAO,CAACG,GAAf;;;AAGD,OAjMU;;AAmMXwB,MAAAA,YAnMW,0BAmMI;AACb,eAAO3B,OAAO,CAACG,GAAf;;;AAGD,OAvMU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    searchBar(t: Theme) {\n      return emotion.css`\n        position: relative;\n        box-sizing: border-box;\n        height: 40px;\n        padding: 5px;\n        background-color: ${t.bgDefault};\n\n        &::after {\n          content: attr(data-perf-info);\n          position: absolute;\n          top: 11px;\n          right: 20px;\n          color: #808080;\n          height: 20px;\n          line-height: 20px;\n        }\n      `;\n    },\n\n    heading(t: Theme) {\n      return emotion.css`\n        padding: 24px 0 16px 5px;\n        margin: 0;\n        background-color: ${t.bgDefault};\n      `;\n    },\n\n    headingSticky() {\n      return emotion.css`\n        border-bottom: 1px solid #e8e8e8;\n      `;\n    },\n\n    table() {\n      return emotion.css`\n        width: 880px;\n        border-collapse: collapse;\n      `;\n    },\n\n    headerCell() {\n      return emotion.css`\n        text-align: left;\n        padding-left: 5px;\n      `;\n    },\n\n    row() {\n      return emotion.css`\n        &:hover {\n          background-color: #f8f8f8;\n        }\n      `;\n    },\n    darkRow() {\n      return emotion.css`\n        &:hover {\n          background-color: rgba(255, 255, 255, 0.04);\n        }\n      `;\n    },\n\n    cell() {\n      return emotion.css`\n        border-top: 0 none;\n        border-bottom: 1px solid #e8e8e8;\n        vertical-align: top;\n        padding: 10px 5px;\n      `;\n    },\n\n    invisibleRow() {\n      return emotion.css`\n        padding: 0;\n        height: 0;\n\n        &:hover,\n        &:hover ~ tr {\n          background-color: #f8f8f8;\n        }\n\n        &:hover ~ &,\n        &:hover ~ & ~ tr {\n          background-color: transparent;\n        }\n      `;\n    },\n    invisibleDarkRow() {\n      return emotion.css`\n        &:hover,\n        &:hover ~ tr {\n          background-color: rgba(255, 255, 255, 0.04);\n        }\n      `;\n    },\n\n    suspiciousRow() {\n      return emotion.css`\n        background-color: red;\n      `;\n    },\n\n    //noinspection CssReplaceWithShorthandSafely\n    majorCell() {\n      return emotion.css`\n        border-top: 1px solid #e8e8e8;\n      `;\n    },\n\n    invisibleCell() {\n      return emotion.css`\n        padding: 0;\n        height: 0;\n        font-size: 0;\n        line-height: 0;\n        border: 0 none;\n        border-top: 1px solid #e8e8e8;\n      `;\n    },\n\n    suspiciousCell() {\n      return emotion.css`\n        background-color: #fff0bc;\n      `;\n    },\n\n    elementName() {\n      return emotion.css`\n        color: #7f9a44;\n        font-weight: 400;\n      `;\n    },\n\n    relativeCss() {\n      return emotion.css`\n        white-space: pre;\n        color: #333;\n      `;\n    },\n\n    variableName() {\n      return emotion.css`\n        color: #b77daa;\n        font-weight: 400;\n        cursor: pointer;\n      `;\n    },\n\n    colorExample() {\n      return emotion.css`\n        display: inline-block;\n        box-sizing: border-box;\n        width: 16px;\n        height: 16px;\n        border: 1px solid transparent;\n        margin-right: 4px;\n        vertical-align: -3px;\n      `;\n    },\n\n    undefined() {\n      return emotion.css`\n        text-decoration: line-through;\n      `;\n    },\n\n    unusedVariablesWarning() {\n      return emotion.css`\n        padding: 16px;\n        margin: 20px 0;\n        background-color: #fff0bc;\n        border-radius: 3px;\n      `;\n    },\n\n    cssClassObject() {\n      return emotion.css`\n        color: #d28445;\n      `;\n    },\n\n    cssClassName() {\n      return emotion.css`\n        color: #7f9a44;\n      `;\n    },\n\n    cssThemeObject() {\n      return emotion.css`\n        color: #ac4142;\n      `;\n    },\n\n    cssThemeProp() {\n      return emotion.css`\n        color: #b77daa;\n      `;\n    },\n  });\n"]}

package/internal/ThemeShowcase/ThemeShowcase.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemeShowcase/ThemeShowcase.styles.js",
+  "module": "ThemeShowcase.styles",
+  "types": "../ThemeShowcase.styles.d.ts",
+  "sideEffects": false
+}

package/internal/ThemeShowcase/ThemeShowcase.styles.d.ts

@@ -0,0 +1,28 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    searchBar(t: Theme): string;
+    heading(t: Theme): string;
+    headingSticky(): string;
+    table(): string;
+    headerCell(): string;
+    row(): string;
+    darkRow(): string;
+    cell(): string;
+    invisibleRow(): string;
+    invisibleDarkRow(): string;
+    suspiciousRow(): string;
+    majorCell(): string;
+    invisibleCell(): string;
+    suspiciousCell(): string;
+    elementName(): string;
+    relativeCss(): string;
+    variableName(): string;
+    colorExample(): string;
+    undefined(): string;
+    unusedVariablesWarning(): string;
+    cssClassObject(): string;
+    cssClassName(): string;
+    cssThemeObject(): string;
+    cssThemeProp(): string;
+};