@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/internal/ThemePlayground/ComponentsGroup/ComponentsGroup.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import { Gapped } from "../../../components/Gapped";
-import { useEmotion } from "../../../lib/theming/Emotion";
-import { getStyles } from "../Playground.styles";
+import { styles } from "../Playground.styles";
 export var ComponentsGroup = function ComponentsGroup(props) {
   var title = props.title,
       children = props.children,
       style = props.style,
       theme = props.theme;
-  var emotion = useEmotion();
-  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement(Gapped, {
     wrap: true,
     verticalAlign: "top",

package/internal/ThemePlayground/ComponentsGroup/ComponentsGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComponentsGroup.tsx"],"names":["React","Gapped","useEmotion","getStyles","ComponentsGroup","props","title","children","style","theme","emotion","styles","componentsGroup"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,SAAT,QAA0B,qBAA1B;;;;;;;;;AASA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA2E;AACxG,MAAQC,KAAR,GAA0CD,KAA1C,CAAQC,KAAR,CAAeC,QAAf,GAA0CF,KAA1C,CAAeE,QAAf,CAAyBC,KAAzB,GAA0CH,KAA1C,CAAyBG,KAAzB,CAAgCC,KAAhC,GAA0CJ,KAA1C,CAAgCI,KAAhC;AACA,MAAMC,OAAO,GAAGR,UAAU,EAA1B;AACA,MAAMS,MAAM,GAAGR,SAAS,CAACO,OAAD,CAAxB;;AAEA;AACE,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,KAA3B,EAAiC,GAAG,EAAE,EAAtC;AACE,iCAAK,SAAS,EAAEC,MAAM,CAACL,KAAP,CAAaG,KAAb,CAAhB,EAAqC,KAAK,EAAED,KAA5C;AACGF,IAAAA,KADH,CADF;;AAIE,iCAAK,SAAS,EAAEK,MAAM,CAACC,eAAP,CAAuBH,KAAvB,CAAhB;AACE,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACGF,IAAAA,QADH,CADF,CAJF,CADF;;;;;AAYD,CAjBM","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"]}
+{"version":3,"sources":["ComponentsGroup.tsx"],"names":["React","Gapped","styles","ComponentsGroup","props","title","children","style","theme","componentsGroup"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;;AAGA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;;;AASA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAA2E;AACxG,MAAQC,KAAR,GAA0CD,KAA1C,CAAQC,KAAR,CAAeC,QAAf,GAA0CF,KAA1C,CAAeE,QAAf,CAAyBC,KAAzB,GAA0CH,KAA1C,CAAyBG,KAAzB,CAAgCC,KAAhC,GAA0CJ,KAA1C,CAAgCI,KAAhC;AACA;AACE,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,KAA3B,EAAiC,GAAG,EAAE,EAAtC;AACE,iCAAK,SAAS,EAAEN,MAAM,CAACG,KAAP,CAAaG,KAAb,CAAhB,EAAqC,KAAK,EAAED,KAA5C;AACGF,IAAAA,KADH,CADF;;AAIE,iCAAK,SAAS,EAAEH,MAAM,CAACO,eAAP,CAAuBD,KAAvB,CAAhB;AACE,wBAAC,MAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACGF,IAAAA,QADH,CADF,CAJF,CADF;;;;;AAYD,CAdM","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { styles } from './Playground.styles';\n\ninterface ComponentsGroupProps {\n  title: string;\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n  theme: Theme;\n}\n\nexport const ComponentsGroup = (props: ComponentsGroupProps): React.ReactElement<ComponentsGroupProps> => {\n  const { title, children, style, theme } = props;\n  return (\n    <Gapped wrap verticalAlign=\"top\" gap={40}>\n      <div className={styles.title(theme)} style={style}>\n        {title}\n      </div>\n      <div className={styles.componentsGroup(theme)}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {children}\n        </Gapped>\n      </div>\n    </Gapped>\n  );\n};\n"]}

package/internal/ThemePlayground/Playground/Playground.js

@@ -11,12 +11,12 @@ import { Tabs } from "../../../components/Tabs";
 import { Gapped } from "../../../components/Gapped";
 import { Link } from "../../../components/Link";
 import { Input } from "../../../components/Input";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { Tooltip } from "../../../components/Tooltip";
 import { Sticky } from "../../../components/Sticky";
 import { isTestEnv } from "../../../lib/currentEnvironment";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { FileUploader } from "../../../components/FileUploader";
-import { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { ThemeType } from "../constants";
 import { TokenInputPlayground } from "../TokenInputPlayground";
 import { DatePickerPlayground } from "../AnotherInputsPlayground";
@@ -30,8 +30,8 @@ import { RadioPlayground } from "../RadioPlayground";
 import { PagingPlayground } from "../PagingPlayground";
 import { HintPlayground } from "../HintPlayground";
 import { ComponentsGroup } from "../ComponentsGroup";
+import { styles } from "../Playground.styles";
 import { SizesGroup } from "../SizesGroup";
-import { getStyles } from "../Playground.styles";
 var useSticky = !isTestEnv;
 export var Playground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Playground, _React$Component);
@@ -229,8 +229,6 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.renderTooltip = function () {
-      var styles = getStyles(_this.emotion);
-
       var tooltipContent = function tooltipContent() {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.tooltipContent()
@@ -287,18 +285,14 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var styles = getStyles(this.emotion);
-    var wrapperClassName = this.emotion.cx(styles.playground(), styles.playgroundWrapper(this.theme));
+    var wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));
     return /*#__PURE__*/React.createElement("div", {
       className: wrapperClassName
     }, /*#__PURE__*/React.createElement(Gapped, {
@@ -311,16 +305,15 @@ export var Playground = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderTabs = function renderTabs() {
-    var _this$emotion$cx;
+    var _cx;
 
-    var styles = getStyles(this.emotion);
     var _this$props = this.props,
         onThemeChange = _this$props.onThemeChange,
         onEditLinkClick = _this$props.onEditLinkClick;
     var tabsOuterWrapperStyle = {
       background: this.theme.bgDefault
     };
-    var tabsOuterWrapperClass = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.tabsWrapper(this.theme)] = true, _this$emotion$cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _this$emotion$cx));
+    var tabsOuterWrapperClass = cx((_cx = {}, _cx[styles.tabsWrapper(this.theme)] = true, _cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));
     return /*#__PURE__*/React.createElement("div", {
       style: tabsOuterWrapperStyle,
       className: tabsOuterWrapperClass

package/internal/ThemePlayground/Playground/Playground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Playground.tsx"],"names":["React","SearchIcon","LinkIcon","OkIcon","ErrorIcon","TrashIcon","HelpDotIcon","Button","Tabs","Gapped","Link","Input","Tooltip","Sticky","isTestEnv","EmotionConsumer","FileUploader","ThemeConsumer","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","SizesGroup","getStyles","useSticky","Playground","stopEl","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","Dark","FlatOld","DefaultOld","Theme2022","Theme2022Dark","Default","renderSizesGroup","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","size","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","styles","emotion","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","cx","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\nimport { ThemeConsumer } from '../../lib/theming/ThemeContext';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { SizesGroup } from './SizesGroup';\nimport { getStyles } from './Playground.styles';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps> {\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeConsumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeConsumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n  private renderMain() {\n    const styles = getStyles(this.emotion);\n    const wrapperClassName = this.emotion.cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const styles = getStyles(this.emotion);\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = this.emotion.cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022}>Новая 2022</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022Dark}>Новая 2022 Тёмная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      case ThemeType.Theme2022:\n        return ThemeType.Theme2022;\n      case ThemeType.Theme2022Dark:\n        return ThemeType.Theme2022Dark;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <SizesGroup size={'small'} />\n        <SizesGroup size={'medium'} />\n        <SizesGroup size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const styles = getStyles(this.emotion);\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}
+{"version":3,"sources":["Playground.tsx"],"names":["React","SearchIcon","LinkIcon","OkIcon","ErrorIcon","TrashIcon","HelpDotIcon","Button","Tabs","Gapped","Link","Input","ThemeContext","Tooltip","Sticky","isTestEnv","cx","FileUploader","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","styles","SizesGroup","useSticky","Playground","stopEl","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","Dark","FlatOld","DefaultOld","Theme2022","Theme2022Dark","Default","renderSizesGroup","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","size","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { cx } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { styles } from './Playground.styles';\nimport { SizesGroup } from './SizesGroup';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps> {\n  private theme!: Theme;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  private renderMain() {\n    const wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022}>Новая 2022</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022Dark}>Новая 2022 Тёмная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      case ThemeType.Theme2022:\n        return ThemeType.Theme2022;\n      case ThemeType.Theme2022Dark:\n        return ThemeType.Theme2022Dark;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <SizesGroup size={'small'} />\n        <SizesGroup size={'medium'} />\n        <SizesGroup size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}

package/internal/ThemePlayground/Playground.d.ts

@@ -7,7 +7,6 @@ export interface PlaygroundProps {
 }
 export declare class Playground extends React.Component<PlaygroundProps> {
     private theme;
-    private emotion;
     private stopEl;
     render(): JSX.Element;
     private renderMain;

package/internal/ThemePlayground/Playground.styles/Playground.styles.js

@@ -2,68 +2,66 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    playground: function playground() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        margin: -16px;\n        padding: 32px;\n      "])));
-    },
-    title: function title(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: 110px;\n        color: ", ";\n      "])), t.textColorDefault);
-    },
-    componentsGroup: function componentsGroup(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        max-width: 700px;\n        color: ", ";\n      "])), t.textColorDefault);
-    },
-    sidePageBody: function sidePageBody() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        padding: 0 30px 30px;\n      "])));
-    },
-    variable: function variable(t) {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        align-items: center;\n        margin-bottom: 16px;\n\n        &:focus {\n          outline: 1px solid ", ";\n          outline-offset: 8px;\n        }\n      "])), t.borderColorFocus);
-    },
-    variableName: function variableName(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 250px;\n        position: relative;\n        z-index: 1;\n        line-height: 34px;\n        color: ", ";\n        flex: 1 1 auto;\n      "])), t.textColorDefault);
-    },
-    deprecated: function deprecated() {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        text-decoration: line-through;\n      "])));
-    },
-    colorIcon: function colorIcon() {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        height: 16px;\n        width: 16px;\n      "])));
-    },
-    baseLinkWrapper: function baseLinkWrapper() {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        margin-left: auto;\n      "])));
-    },
-    linkRoot: function linkRoot() {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        position: relative;\n        z-index: 1;\n      "])));
-    },
-    baseVariableRoot: function baseVariableRoot() {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        position: relative;\n        z-index: 1;\n        padding-left: 10px;\n        width: 240px;\n        display: flex;\n      "])));
-    },
-    loaderWrapper: function loaderWrapper() {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        width: 500px;\n      "])));
-    },
-    loader: function loader() {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        height: 300px;\n        margin: auto;\n      "])));
-    },
-    tabsWrapper: function tabsWrapper(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        margin: 0 -32px;\n        padding: 11px 32px;\n        position: relative;\n        color: ", ";\n\n        &::after {\n          content: '';\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          height: 1px;\n          width: 100%;\n          z-index: -1;\n        }\n      "])), t.textColorDefault);
-    },
-    tooltipContent: function tooltipContent() {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        width: 210px;\n      "])));
-    },
-    stickyTabsWrapper: function stickyTabsWrapper(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        &:after {\n          box-shadow: 0 2px 10px 0px ", ";\n        }\n      "])), t.textColorDefault);
-    },
-    tabsInnerWrapper: function tabsInnerWrapper(t) {
-      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDefault);
-    },
-    playgroundWrapper: function playgroundWrapper(t) {
-      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n      "])), t.bgDefault);
-    },
-    editorHeaderWrapper: function editorHeaderWrapper(t) {
-      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDefault);
-    },
-    editorGroupHeader: function editorGroupHeader(t) {
-      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.textColorDefault);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  playground: function playground() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: -16px;\n      padding: 32px;\n    "])));
+  },
+  title: function title(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: 110px;\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  componentsGroup: function componentsGroup(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: 700px;\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  sidePageBody: function sidePageBody() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding: 0 30px 30px;\n    "])));
+  },
+  variable: function variable(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 8px;\n      }\n    "])), t.borderColorFocus);
+  },
+  variableName: function variableName(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ", ";\n      flex: 1 1 auto;\n    "])), t.textColorDefault);
+  },
+  deprecated: function deprecated() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      text-decoration: line-through;\n    "])));
+  },
+  colorIcon: function colorIcon() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: 16px;\n      width: 16px;\n    "])));
+  },
+  baseLinkWrapper: function baseLinkWrapper() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin-left: auto;\n    "])));
+  },
+  linkRoot: function linkRoot() {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 1;\n    "])));
+  },
+  baseVariableRoot: function baseVariableRoot() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    "])));
+  },
+  loaderWrapper: function loaderWrapper() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 500px;\n    "])));
+  },
+  loader: function loader() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      height: 300px;\n      margin: auto;\n    "])));
+  },
+  tabsWrapper: function tabsWrapper(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      margin: 0 -32px;\n      padding: 11px 32px;\n      position: relative;\n      color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    "])), t.textColorDefault);
+  },
+  tooltipContent: function tooltipContent() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: 210px;\n    "])));
+  },
+  stickyTabsWrapper: function stickyTabsWrapper(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "])), t.textColorDefault);
+  },
+  tabsInnerWrapper: function tabsInnerWrapper(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  playgroundWrapper: function playgroundWrapper(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.bgDefault);
+  },
+  editorHeaderWrapper: function editorHeaderWrapper(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  editorGroupHeader: function editorGroupHeader(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  }
+});

package/internal/ThemePlayground/Playground.styles/Playground.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Playground.styles.ts"],"names":["memoizeStyle","getStyles","emotion","playground","css","title","t","textColorDefault","componentsGroup","sidePageBody","variable","borderColorFocus","variableName","deprecated","colorIcon","baseLinkWrapper","linkRoot","baseVariableRoot","loaderWrapper","loader","tabsWrapper","tooltipContent","stickyTabsWrapper","tabsInnerWrapper","playgroundWrapper","bgDefault","editorHeaderWrapper","editorGroupHeader"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,UADW,wBACE;AACX,eAAOD,OAAO,CAACE,GAAf;;;;AAID,OANU;;AAQXC,MAAAA,KARW,iBAQLC,CARK,EAQK;AACd,eAAOJ,OAAO,CAACE,GAAf;;AAEWE,QAAAA,CAAC,CAACC,gBAFb;;AAID,OAbU;;AAeXC,MAAAA,eAfW,2BAeKF,CAfL,EAee;AACxB,eAAOJ,OAAO,CAACE,GAAf;;AAEWE,QAAAA,CAAC,CAACC,gBAFb;;AAID,OApBU;;AAsBXE,MAAAA,YAtBW,0BAsBI;AACb,eAAOP,OAAO,CAACE,GAAf;;;AAGD,OA1BU;;AA4BXM,MAAAA,QA5BW,oBA4BFJ,CA5BE,EA4BQ;AACjB,eAAOJ,OAAO,CAACE,GAAf;;;;;;AAMyBE,QAAAA,CAAC,CAACK,gBAN3B;;;;AAUD,OAvCU;;AAyCXC,MAAAA,YAzCW,wBAyCEN,CAzCF,EAyCY;AACrB,eAAOJ,OAAO,CAACE,GAAf;;;;;;;;AAQWE,QAAAA,CAAC,CAACC,gBARb;;;AAWD,OArDU;;AAuDXM,MAAAA,UAvDW,wBAuDE;AACX,eAAOX,OAAO,CAACE,GAAf;;;AAGD,OA3DU;;AA6DXU,MAAAA,SA7DW,uBA6DC;AACV,eAAOZ,OAAO,CAACE,GAAf;;;;AAID,OAlEU;;AAoEXW,MAAAA,eApEW,6BAoEO;AAChB,eAAOb,OAAO,CAACE,GAAf;;;AAGD,OAxEU;;AA0EXY,MAAAA,QA1EW,sBA0EA;AACT,eAAOd,OAAO,CAACE,GAAf;;;;AAID,OA/EU;;AAiFXa,MAAAA,gBAjFW,8BAiFQ;AACjB,eAAOf,OAAO,CAACE,GAAf;;;;;;;AAOD,OAzFU;;AA2FXc,MAAAA,aA3FW,2BA2FK;AACd,eAAOhB,OAAO,CAACE,GAAf;;;AAGD,OA/FU;;AAiGXe,MAAAA,MAjGW,oBAiGF;AACP,eAAOjB,OAAO,CAACE,GAAf;;;;AAID,OAtGU;;AAwGXgB,MAAAA,WAxGW,uBAwGCd,CAxGD,EAwGW;AACpB,eAAOJ,OAAO,CAACE,GAAf;;;;AAIWE,QAAAA,CAAC,CAACC,gBAJb;;;;;;;;;;;;AAgBD,OAzHU;;AA2HXc,MAAAA,cA3HW,4BA2HM;AACf,eAAOnB,OAAO,CAACE,GAAf;;;AAGD,OA/HU;;AAiIXkB,MAAAA,iBAjIW,6BAiIOhB,CAjIP,EAiIiB;AAC1B,eAAOJ,OAAO,CAACE,GAAf;;AAEiCE,QAAAA,CAAC,CAACC,gBAFnC;;;AAKD,OAvIU;AAwIXgB,MAAAA,gBAxIW,4BAwIMjB,CAxIN,EAwIgB;AACzB,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gBADb;;AAGD,OA5IU;AA6IXiB,MAAAA,iBA7IW,6BA6IOlB,CA7IP,EA6IiB;AAC1B,eAAOJ,OAAO,CAACE,GAAf;AACgBE,QAAAA,CAAC,CAACmB,SADlB;;AAGD,OAjJU;AAkJXC,MAAAA,mBAlJW,+BAkJSpB,CAlJT,EAkJmB;AAC5B,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gBADb;;AAGD,OAtJU;AAuJXoB,MAAAA,iBAvJW,6BAuJOrB,CAvJP,EAuJiB;AAC1B,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gBADb;;AAGD,OA3JU,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    playground() {\n      return emotion.css`\n        margin: -16px;\n        padding: 32px;\n      `;\n    },\n\n    title(t: Theme) {\n      return emotion.css`\n        width: 110px;\n        color: ${t.textColorDefault};\n      `;\n    },\n\n    componentsGroup(t: Theme) {\n      return emotion.css`\n        max-width: 700px;\n        color: ${t.textColorDefault};\n      `;\n    },\n\n    sidePageBody() {\n      return emotion.css`\n        padding: 0 30px 30px;\n      `;\n    },\n\n    variable(t: Theme) {\n      return emotion.css`\n        display: flex;\n        align-items: center;\n        margin-bottom: 16px;\n\n        &:focus {\n          outline: 1px solid ${t.borderColorFocus};\n          outline-offset: 8px;\n        }\n      `;\n    },\n\n    variableName(t: Theme) {\n      return emotion.css`\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 250px;\n        position: relative;\n        z-index: 1;\n        line-height: 34px;\n        color: ${t.textColorDefault};\n        flex: 1 1 auto;\n      `;\n    },\n\n    deprecated() {\n      return emotion.css`\n        text-decoration: line-through;\n      `;\n    },\n\n    colorIcon() {\n      return emotion.css`\n        height: 16px;\n        width: 16px;\n      `;\n    },\n\n    baseLinkWrapper() {\n      return emotion.css`\n        margin-left: auto;\n      `;\n    },\n\n    linkRoot() {\n      return emotion.css`\n        position: relative;\n        z-index: 1;\n      `;\n    },\n\n    baseVariableRoot() {\n      return emotion.css`\n        position: relative;\n        z-index: 1;\n        padding-left: 10px;\n        width: 240px;\n        display: flex;\n      `;\n    },\n\n    loaderWrapper() {\n      return emotion.css`\n        width: 500px;\n      `;\n    },\n\n    loader() {\n      return emotion.css`\n        height: 300px;\n        margin: auto;\n      `;\n    },\n\n    tabsWrapper(t: Theme) {\n      return emotion.css`\n        margin: 0 -32px;\n        padding: 11px 32px;\n        position: relative;\n        color: ${t.textColorDefault};\n\n        &::after {\n          content: '';\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          height: 1px;\n          width: 100%;\n          z-index: -1;\n        }\n      `;\n    },\n\n    tooltipContent() {\n      return emotion.css`\n        width: 210px;\n      `;\n    },\n\n    stickyTabsWrapper(t: Theme) {\n      return emotion.css`\n        &:after {\n          box-shadow: 0 2px 10px 0px ${t.textColorDefault};\n        }\n      `;\n    },\n    tabsInnerWrapper(t: Theme) {\n      return emotion.css`\n        color: ${t.textColorDefault};\n      `;\n    },\n    playgroundWrapper(t: Theme) {\n      return emotion.css`\n        background: ${t.bgDefault};\n      `;\n    },\n    editorHeaderWrapper(t: Theme) {\n      return emotion.css`\n        color: ${t.textColorDefault};\n      `;\n    },\n    editorGroupHeader(t: Theme) {\n      return emotion.css`\n        color: ${t.textColorDefault};\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["Playground.styles.ts"],"names":["css","memoizeStyle","styles","playground","title","t","textColorDefault","componentsGroup","sidePageBody","variable","borderColorFocus","variableName","deprecated","colorIcon","baseLinkWrapper","linkRoot","baseVariableRoot","loaderWrapper","loader","tabsWrapper","tooltipContent","stickyTabsWrapper","tabsInnerWrapper","playgroundWrapper","bgDefault","editorHeaderWrapper","editorGroupHeader"],"mappings":"qdAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,UADiC,wBACpB;AACX,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,iBAQ3BC,CAR2B,EAQjB;AACd,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACC,gBAFb;;AAID,GAbgC;;AAejCC,EAAAA,eAfiC,2BAejBF,CAfiB,EAeP;AACxB,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACC,gBAFb;;AAID,GApBgC;;AAsBjCE,EAAAA,YAtBiC,0BAsBlB;AACb,WAAOR,GAAP;;;AAGD,GA1BgC;;AA4BjCS,EAAAA,QA5BiC,oBA4BxBJ,CA5BwB,EA4Bd;AACjB,WAAOL,GAAP;;;;;;AAMyBK,IAAAA,CAAC,CAACK,gBAN3B;;;;AAUD,GAvCgC;;AAyCjCC,EAAAA,YAzCiC,wBAyCpBN,CAzCoB,EAyCV;AACrB,WAAOL,GAAP;;;;;;;;AAQWK,IAAAA,CAAC,CAACC,gBARb;;;AAWD,GArDgC;;AAuDjCM,EAAAA,UAvDiC,wBAuDpB;AACX,WAAOZ,GAAP;;;AAGD,GA3DgC;;AA6DjCa,EAAAA,SA7DiC,uBA6DrB;AACV,WAAOb,GAAP;;;;AAID,GAlEgC;;AAoEjCc,EAAAA,eApEiC,6BAoEf;AAChB,WAAOd,GAAP;;;AAGD,GAxEgC;;AA0EjCe,EAAAA,QA1EiC,sBA0EtB;AACT,WAAOf,GAAP;;;;AAID,GA/EgC;;AAiFjCgB,EAAAA,gBAjFiC,8BAiFd;AACjB,WAAOhB,GAAP;;;;;;;AAOD,GAzFgC;;AA2FjCiB,EAAAA,aA3FiC,2BA2FjB;AACd,WAAOjB,GAAP;;;AAGD,GA/FgC;;AAiGjCkB,EAAAA,MAjGiC,oBAiGxB;AACP,WAAOlB,GAAP;;;;AAID,GAtGgC;;AAwGjCmB,EAAAA,WAxGiC,uBAwGrBd,CAxGqB,EAwGX;AACpB,WAAOL,GAAP;;;;AAIWK,IAAAA,CAAC,CAACC,gBAJb;;;;;;;;;;;;AAgBD,GAzHgC;;AA2HjCc,EAAAA,cA3HiC,4BA2HhB;AACf,WAAOpB,GAAP;;;AAGD,GA/HgC;;AAiIjCqB,EAAAA,iBAjIiC,6BAiIfhB,CAjIe,EAiIL;AAC1B,WAAOL,GAAP;;AAEiCK,IAAAA,CAAC,CAACC,gBAFnC;;;AAKD,GAvIgC;AAwIjCgB,EAAAA,gBAxIiC,4BAwIhBjB,CAxIgB,EAwIN;AACzB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA5IgC;AA6IjCiB,EAAAA,iBA7IiC,6BA6IflB,CA7Ie,EA6IL;AAC1B,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACmB,SADlB;;AAGD,GAjJgC;AAkJjCC,EAAAA,mBAlJiC,+BAkJbpB,CAlJa,EAkJH;AAC5B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GAtJgC;AAuJjCoB,EAAAA,iBAvJiC,6BAuJfrB,CAvJe,EAuJL;AAC1B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA3JgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  playground() {\n    return css`\n      margin: -16px;\n      padding: 32px;\n    `;\n  },\n\n  title(t: Theme) {\n    return css`\n      width: 110px;\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  componentsGroup(t: Theme) {\n    return css`\n      max-width: 700px;\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  sidePageBody() {\n    return css`\n      padding: 0 30px 30px;\n    `;\n  },\n\n  variable(t: Theme) {\n    return css`\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ${t.borderColorFocus};\n        outline-offset: 8px;\n      }\n    `;\n  },\n\n  variableName(t: Theme) {\n    return css`\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ${t.textColorDefault};\n      flex: 1 1 auto;\n    `;\n  },\n\n  deprecated() {\n    return css`\n      text-decoration: line-through;\n    `;\n  },\n\n  colorIcon() {\n    return css`\n      height: 16px;\n      width: 16px;\n    `;\n  },\n\n  baseLinkWrapper() {\n    return css`\n      margin-left: auto;\n    `;\n  },\n\n  linkRoot() {\n    return css`\n      position: relative;\n      z-index: 1;\n    `;\n  },\n\n  baseVariableRoot() {\n    return css`\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    `;\n  },\n\n  loaderWrapper() {\n    return css`\n      width: 500px;\n    `;\n  },\n\n  loader() {\n    return css`\n      height: 300px;\n      margin: auto;\n    `;\n  },\n\n  tabsWrapper(t: Theme) {\n    return css`\n      margin: 0 -32px;\n      padding: 11px 32px;\n      position: relative;\n      color: ${t.textColorDefault};\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    `;\n  },\n\n  tooltipContent() {\n    return css`\n      width: 210px;\n    `;\n  },\n\n  stickyTabsWrapper(t: Theme) {\n    return css`\n      &:after {\n        box-shadow: 0 2px 10px 0px ${t.textColorDefault};\n      }\n    `;\n  },\n  tabsInnerWrapper(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n  playgroundWrapper(t: Theme) {\n    return css`\n      background: ${t.bgDefault};\n    `;\n  },\n  editorHeaderWrapper(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n  editorGroupHeader(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n});\n"]}

package/internal/ThemePlayground/Playground.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     playground(): string;
     title(t: Theme): string;
     componentsGroup(t: Theme): string;

package/internal/ThemePlayground/ShowcaseGroup/ShowcaseGroup.js

@@ -5,9 +5,9 @@ import { Button } from "../../../components/Button";
 import { Input } from "../../../components/Input";
 import { Toggle } from "../../../components/Toggle";
 import { Radio } from "../../../components/Radio";
-import { useTheme } from "../../../lib/theming/useTheme";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 export var ShowcaseGroup = function ShowcaseGroup(props) {
-  var theme = useTheme();
+  var theme = React.useContext(ThemeContext);
   return /*#__PURE__*/React.createElement("div", null, props.title && /*#__PURE__*/React.createElement("h2", {
     style: {
       color: theme.textColorDefault

package/internal/ThemePlayground/ShowcaseGroup/ShowcaseGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["React","Checkbox","Gapped","Button","Input","Toggle","Radio","useTheme","ShowcaseGroup","props","theme","title","color","textColorDefault"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,QAAT,QAAyB,4BAAzB;;;;;AAKA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAC1D,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;;AAEA;AACE;AACGE,IAAAA,KAAK,CAACE,KAAN,iBAAe,4BAAI,KAAK,EAAE,EAAEC,KAAK,EAAEF,KAAK,CAACG,gBAAf,EAAX,IAA+CJ,KAAK,CAACE,KAArD,CADlB;AAEE,wBAAC,MAAD,IAAQ,GAAG,EAAE,EAAb;AACE,wBAAC,MAAD,iBADF;AAEE,wBAAC,KAAD,OAFF;AAGE,wBAAC,MAAD,OAHF;AAIE,wBAAC,KAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,wBAAC,QAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CADF;;;;AAcD,CAjBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Input } from '../../components/Input';\nimport { Toggle } from '../../components/Toggle';\nimport { Radio } from '../../components/Radio';\nimport { useTheme } from '../../lib/theming/useTheme';\n\ninterface ShowcaseGroupProps {\n  title?: string;\n}\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => {\n  const theme = useTheme();\n\n  return (\n    <div>\n      {props.title && <h2 style={{ color: theme.textColorDefault }}>{props.title}</h2>}\n      <Gapped gap={10}>\n        <Button>Button</Button>\n        <Input />\n        <Toggle />\n        <Radio value={''} checked>\n          Radio\n        </Radio>\n        <Checkbox checked>Checkbox</Checkbox>\n      </Gapped>\n    </div>\n  );\n};\n"]}
+{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["React","Checkbox","Gapped","Button","Input","Toggle","Radio","ThemeContext","ShowcaseGroup","props","theme","useContext","title","color","textColorDefault"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,QAAT,QAAyB,2BAAzB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAC1D,MAAMC,KAAK,GAAGV,KAAK,CAACW,UAAN,CAAiBJ,YAAjB,CAAd;;AAEA;AACE;AACGE,IAAAA,KAAK,CAACG,KAAN,iBAAe,4BAAI,KAAK,EAAE,EAAEC,KAAK,EAAEH,KAAK,CAACI,gBAAf,EAAX,IAA+CL,KAAK,CAACG,KAArD,CADlB;AAEE,wBAAC,MAAD,IAAQ,GAAG,EAAE,EAAb;AACE,wBAAC,MAAD,iBADF;AAEE,wBAAC,KAAD,OAFF;AAGE,wBAAC,MAAD,OAHF;AAIE,wBAAC,KAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,wBAAC,QAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CADF;;;;AAcD,CAjBM","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Input } from '../../components/Input';\nimport { Toggle } from '../../components/Toggle';\nimport { Radio } from '../../components/Radio';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\ninterface ShowcaseGroupProps {\n  title?: string;\n}\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => {\n  const theme = React.useContext(ThemeContext);\n\n  return (\n    <div>\n      {props.title && <h2 style={{ color: theme.textColorDefault }}>{props.title}</h2>}\n      <Gapped gap={10}>\n        <Button>Button</Button>\n        <Input />\n        <Toggle />\n        <Radio value={''} checked>\n          Radio\n        </Radio>\n        <Checkbox checked>Checkbox</Checkbox>\n      </Gapped>\n    </div>\n  );\n};\n"]}

package/internal/ThemePlayground/ThemeContextPlayground/ThemeContextPlayground.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { FLAT_THEME_8PX_OLD } from "../../../lib/theming/themes/FlatTheme8pxOld";
 import { DEFAULT_THEME_8PX_OLD } from "../../../lib/theming/themes/DefaultTheme8pxOld";
@@ -14,10 +15,8 @@ import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { THEME_2022 } from "../../../lib/theming/themes/Theme2022";
 import { findPropertyDescriptor } from "../../../lib/theming/ThemeHelpers";
 import { THEME_2022_DARK } from "../../../lib/theming/themes/Theme2022Dark";
-import { ThemeProvider } from "../../../lib/theming/ThemeContext";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { ThemeEditor } from "../ThemeEditor";
-import { getStyles } from "../Playground.styles";
+import { styles } from "../Playground.styles";
 import { Playground } from "../Playground";
 import { ThemeType } from "../constants";
 
@@ -64,7 +63,6 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
           themes = _this$state.themes;
       var editingThemeType = getEditingThemeType(editingThemeItem);
       var themeErrors = themesErrors[editingThemeType];
-      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement(SidePage, {
         disableAnimations: true,
         ignoreBackgroundClick: true,
@@ -231,22 +229,17 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
   var _proto = ThemeContextPlayground.prototype;
 
   _proto.render = function render() {
-    var _this2 = this;
-
     var _this$state3 = this.state,
         currentTheme = _this$state3.currentTheme,
         editorOpened = _this$state3.editorOpened,
         currentThemeType = _this$state3.currentThemeType;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      return /*#__PURE__*/React.createElement(ThemeProvider, {
-        value: currentTheme
-      }, editorOpened && _this2.renderSidePage(), /*#__PURE__*/React.createElement(Playground, {
-        onThemeChange: _this2.handleThemeChange,
-        currentThemeType: currentThemeType,
-        onEditLinkClick: _this2.handleOpen
-      }));
-    });
+    return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+      value: currentTheme
+    }, editorOpened && this.renderSidePage(), /*#__PURE__*/React.createElement(Playground, {
+      onThemeChange: this.handleThemeChange,
+      currentThemeType: currentThemeType,
+      onEditLinkClick: this.handleOpen
+    }));
   };
 
   return ThemeContextPlayground;

package/internal/ThemePlayground/ThemeContextPlayground/ThemeContextPlayground.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["React","ThemeFactory","FLAT_THEME_8PX_OLD","DEFAULT_THEME_8PX_OLD","DEFAULT_THEME","DARK_THEME","SidePage","Gapped","ComboBox","Link","ColorFunctions","THEME_2022","findPropertyDescriptor","THEME_2022_DARK","ThemeProvider","EmotionConsumer","ThemeEditor","getStyles","Playground","ThemeType","getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","props","editableThemesItems","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","styles","emotion","handleClose","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","theme","currentValue","canSetVariable","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","defaultOld","dark","flatOld","theme2022","theme2022Dark","render","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\nimport { ThemeProvider } from '../../lib/theming/ThemeContext';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { getStyles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n  theme2022: Theme;\n  theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n  theme2022: ThemeErrorsType;\n  theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nconst getEditingThemeType = (editingThemeItem: PlaygroundState['editingThemeItem']) => {\n  if (editingThemeItem) {\n    return editingThemeItem.value;\n  }\n\n  return 'default';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private emotion!: Emotion;\n\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n    { value: ThemeType.Theme2022, label: 'Новая 2022' },\n    { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n        theme2022: THEME_2022,\n        theme2022Dark: THEME_2022_DARK,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n        theme2022: {},\n        theme2022Dark: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeProvider value={currentTheme}>\n              {editorOpened && this.renderSidePage()}\n              {\n                <Playground\n                  onThemeChange={this.handleThemeChange}\n                  currentThemeType={currentThemeType}\n                  onEditLinkClick={this.handleOpen}\n                />\n              }\n            </ThemeProvider>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n    const themeErrors = themesErrors[editingThemeType];\n    const styles = getStyles(this.emotion);\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeType]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}
+{"version":3,"sources":["ThemeContextPlayground.tsx"],"names":["React","ThemeContext","ThemeFactory","FLAT_THEME_8PX_OLD","DEFAULT_THEME_8PX_OLD","DEFAULT_THEME","DARK_THEME","SidePage","Gapped","ComboBox","Link","ColorFunctions","THEME_2022","findPropertyDescriptor","THEME_2022_DARK","ThemeEditor","styles","Playground","ThemeType","getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","props","editableThemesItems","Default","label","Dark","DefaultOld","FlatOld","Theme2022","Theme2022Dark","renderSidePage","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","handleClose","editorHeaderWrapper","getEditableThemesItems","handleEditingThemeSwitch","fontSize","marginTop","handelGetTheme","sidePageBody","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","theme","currentValue","canSetVariable","isValid","nextThemeErrors","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","defaultOld","dark","flatOld","theme2022","theme2022Dark","render","Component"],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { FLAT_THEME_8PX_OLD } from '../../lib/theming/themes/FlatTheme8pxOld';\nimport { DEFAULT_THEME_8PX_OLD } from '../../lib/theming/themes/DefaultTheme8pxOld';\nimport { DEFAULT_THEME } from '../../lib/theming/themes/DefaultTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\nimport { SidePage } from '../../components/SidePage';\nimport { Gapped } from '../../components/Gapped';\nimport { ComboBox } from '../../components/ComboBox';\nimport { Link } from '../../components/Link';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Writeable } from '../../typings/utility-types';\nimport { THEME_2022 } from '../../lib/theming/themes/Theme2022';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { THEME_2022_DARK } from '../../lib/theming/themes/Theme2022Dark';\n\nimport { ThemeEditor } from './ThemeEditor';\nimport { styles } from './Playground.styles';\nimport { Playground } from './Playground';\nimport { ThemeType } from './constants';\n\ninterface PlaygroundState {\n  editorOpened: boolean;\n  editingThemeItem?: EditingThemeItem;\n  themes: Themes;\n  themesErrors: ThemesErrors;\n  currentTheme: Theme;\n  currentThemeType: ThemeType;\n}\ninterface Themes {\n  default: Theme;\n  dark: Theme;\n  defaultOld: Theme;\n  flatOld: Theme;\n  theme2022: Theme;\n  theme2022Dark: Theme;\n}\ninterface ThemesErrors {\n  default: ThemeErrorsType;\n  dark: ThemeErrorsType;\n  defaultOld: ThemeErrorsType;\n  flatOld: ThemeErrorsType;\n  theme2022: ThemeErrorsType;\n  theme2022Dark: ThemeErrorsType;\n}\ninterface EditingThemeItem {\n  value: ThemeType;\n  label: string;\n}\ninterface PlaygroundProps {\n  children?: ReactNode;\n}\nexport type ThemeErrorsType = Writeable<{ [key in keyof Theme]?: boolean }>;\n\nconst getEditingThemeType = (editingThemeItem: PlaygroundState['editingThemeItem']) => {\n  if (editingThemeItem) {\n    return editingThemeItem.value;\n  }\n\n  return 'default';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.Default, label: 'Дефолтная' },\n    { value: ThemeType.Dark, label: 'Темная' },\n    { value: ThemeType.DefaultOld, label: 'Старая дефолтная' },\n    { value: ThemeType.FlatOld, label: 'Старая плоская' },\n    { value: ThemeType.Theme2022, label: 'Новая 2022' },\n    { value: ThemeType.Theme2022Dark, label: 'Новая 2022 Тёмная' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: DEFAULT_THEME,\n      currentThemeType: ThemeType.Default,\n      editorOpened: false,\n      themes: {\n        default: DEFAULT_THEME,\n        defaultOld: DEFAULT_THEME_8PX_OLD,\n        dark: DARK_THEME,\n        flatOld: FLAT_THEME_8PX_OLD,\n        theme2022: THEME_2022,\n        theme2022Dark: THEME_2022_DARK,\n      },\n      themesErrors: {\n        default: {},\n        defaultOld: {},\n        dark: {},\n        flatOld: {},\n        theme2022: {},\n        theme2022Dark: {},\n      },\n    };\n  }\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <ThemeContext.Provider value={currentTheme}>\n        {editorOpened && this.renderSidePage()}\n        {\n          <Playground\n            onThemeChange={this.handleThemeChange}\n            currentThemeType={currentThemeType}\n            onEditLinkClick={this.handleOpen}\n          />\n        }\n      </ThemeContext.Provider>\n    );\n  }\n\n  private renderSidePage = () => {\n    const { currentTheme, themesErrors, editingThemeItem, themes } = this.state;\n\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n    const themeErrors = themesErrors[editingThemeType];\n\n    return (\n      <SidePage disableAnimations ignoreBackgroundClick blockBackground width={600} onClose={this.handleClose}>\n        <SidePage.Header>\n          <div className={styles.editorHeaderWrapper(currentTheme)}>\n            <Gapped wrap verticalAlign=\"middle\">\n              <span>Тема для редактирования:</span>\n              <ComboBox\n                getItems={this.getEditableThemesItems}\n                value={editingThemeItem}\n                onValueChange={this.handleEditingThemeSwitch}\n              />\n            </Gapped>\n          </div>\n          <div style={{ fontSize: 14, marginTop: 8 }}>\n            <Link onClick={this.handelGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={styles.sidePageBody()}>\n            <ThemeEditor\n              editingTheme={themes[editingThemeType]}\n              currentTheme={currentTheme}\n              currentErrors={themeErrors}\n              onValueChange={this.handleThemeVariableChange}\n            />\n          </div>\n        </SidePage.Body>\n      </SidePage>\n    );\n  };\n\n  private handelGetTheme = () => {\n    const currentTheme = this.state.currentTheme;\n    const themeObject: Writeable<ThemeIn> = {};\n    ThemeFactory.getKeys(currentTheme).forEach((key) => {\n      const descriptor = Object.getOwnPropertyDescriptor(currentTheme, key);\n      if (descriptor && !descriptor.get && DEFAULT_THEME[key] && currentTheme[key] !== DEFAULT_THEME[key]) {\n        themeObject[key] = currentTheme[key] as keyof Theme;\n      }\n    });\n\n    console.log(JSON.stringify(themeObject));\n  };\n\n  private handleOpen = () => {\n    this.setState((state) => ({\n      editorOpened: true,\n      editingThemeItem: this.editableThemesItems.find((i) => i.value === state.currentThemeType),\n    }));\n  };\n\n  private handleClose = () => {\n    this.setState({\n      editorOpened: false,\n    });\n  };\n\n  private handleThemeChange = (value: string) => {\n    const themeType = value as ThemeType;\n    this.setState({\n      currentThemeType: themeType,\n      currentTheme: this.state.themes[themeType],\n    });\n  };\n\n  private handleThemeVariableChange = (variable: keyof Theme, value: string) => {\n    const { editingThemeItem, currentTheme, themes, themesErrors } = this.state;\n    const editingThemeType = getEditingThemeType(editingThemeItem);\n\n    const theme = themes[editingThemeType];\n    const currentValue = theme[variable] as string;\n\n    let canSetVariable = true;\n    if (ColorFunctions.isValid(currentValue)) {\n      canSetVariable = ColorFunctions.isValid(value);\n      themesErrors[editingThemeType][variable] = !canSetVariable;\n    }\n\n    const nextThemeErrors: ThemesErrors = { ...themesErrors };\n    nextThemeErrors[editingThemeType][variable] = !canSetVariable;\n    const stateUpdate = { themes, currentTheme, themesErrors: nextThemeErrors };\n\n    if (canSetVariable) {\n      const result = this.changeThemeVariable(theme, variable, value);\n      stateUpdate.themes[editingThemeType] = result;\n      if (this.state.currentThemeType === editingThemeType) {\n        stateUpdate.currentTheme = result;\n      }\n    }\n\n    this.setState(stateUpdate);\n  };\n\n  private getEditableThemesItems = (query: string) => {\n    return Promise.resolve(this.editableThemesItems.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())));\n  };\n\n  private handleEditingThemeSwitch = (item: EditingThemeItem) => {\n    this.setState({ editingThemeItem: item });\n  };\n\n  private changeThemeVariable = (theme: Theme, variableName: keyof Theme, variableValue: string): Theme => {\n    const result: ThemeIn = {};\n    ThemeFactory.getKeys(theme).forEach((key) => {\n      const descriptor = findPropertyDescriptor(theme, key);\n      descriptor.enumerable = true;\n      descriptor.configurable = true;\n      if (key === variableName) {\n        delete descriptor.get;\n        delete descriptor.set;\n        descriptor.value = variableValue;\n      }\n      Object.defineProperty(result, key, descriptor);\n    });\n\n    return ThemeFactory.create<ThemeIn>(result);\n  };\n}\n"]}

package/internal/ThemePlayground/ThemeContextPlayground.d.ts

@@ -37,7 +37,6 @@ export declare type ThemeErrorsType = Writeable<{
     [key in keyof Theme]?: boolean;
 }>;
 export declare class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {
-    private emotion;
     private readonly editableThemesItems;
     constructor(props: PlaygroundProps);
     render(): JSX.Element;