@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1 +1 @@
-{"version":3,"names":["React","SearchLoupeIcon16Regular","AttachLinkIcon16Regular","CheckAIcon16Regular","MinusCircleIcon16Regular","TrashCanIcon16Regular","QuestionCircleIcon16Regular","RenderEnvironmentContext","Button","Tabs","Gapped","Link","Input","ThemeContext","Tooltip","Sticky","isTestEnv","FileUploader","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","getStyles","SizesGroup","useSticky","Playground","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","stopEl","createRef","renderTabsGroup","createElement","side","getStop","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","DarkTheme","LightTheme","renderSizesGroup","title","theme","size","renderLinksGroup","propsList","icon","children","use","disabled","wrap","verticalAlign","gap","renderButtonsGroup","arrow","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","prefix","rightIcon","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","className","styles","render","pos","trigger","disableAnimations","renderPaging","renderFileUploader","multiple","renderStickyStopElement","ref","style","height","current","_inheritsLoose","_proto","prototype","_this2","Consumer","_ref","emotion","cx","renderMain","wrapperClassName","playground","playgroundWrapper","vertical","_this$cx","_this$props","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","marginTop","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","value","onValueChange","tabsInnerWrapper","Tab","id","onClick","Component"],"sources":["Playground.tsx"],"sourcesContent":["import React from 'react';\nimport { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';\nimport { AttachLinkIcon16Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular';\nimport { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';\nimport { MinusCircleIcon16Regular } from '@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon16Regular';\nimport { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';\nimport { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { ButtonProps } from '../../components/Button';\nimport { Button } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport type { LinkProps } from '../../components/Link';\nimport { Link } from '../../components/Link';\nimport type { InputProps } from '../../components/Input';\nimport { Input } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\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 { getStyles } 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 cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ emotion }) => {\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.Consumer>\n    );\n  }\n  private renderMain() {\n    const wrapperClassName = this.cx(this.styles.playground(), this.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, marginTop: 36 };\n    const tabsOuterWrapperClass = this.cx({\n      [this.styles.tabsWrapper(this.theme)]: true,\n      [this.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={this.styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.LightTheme}>Светлая тема</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DarkTheme}>Тёмная тема</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.DarkTheme:\n        return ThemeType.DarkTheme;\n      default:\n        return ThemeType.LightTheme;\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: <AttachLinkIcon16Regular />, children: 'Enabled' },\n      { icon: <CheckAIcon16Regular />, use: 'success', children: 'Success' },\n      { icon: <MinusCircleIcon16Regular />, use: 'danger', children: 'Danger' },\n      { icon: <TrashCanIcon16Regular />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashCanIcon16Regular />, 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={<SearchLoupeIcon16Regular />} />\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={this.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={<QuestionCircleIcon16Regular />} />\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","SearchLoupeIcon16Regular","AttachLinkIcon16Regular","CheckAIcon16Regular","MinusCircleIcon16Regular","TrashCanIcon16Regular","QuestionCircleIcon16Regular","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","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","stopEl","createRef","renderTabsGroup","createElement","side","getStop","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","DarkTheme","LightTheme","renderSizesGroup","title","theme","size","renderLinksGroup","propsList","icon","children","use","disabled","wrap","verticalAlign","gap","renderButtonsGroup","arrow","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","prefix","rightIcon","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","className","render","pos","trigger","disableAnimations","renderPaging","renderFileUploader","multiple","renderStickyStopElement","ref","style","height","current","_inheritsLoose","_proto","prototype","_this2","Consumer","renderMain","wrapperClassName","playground","playgroundWrapper","vertical","_cx","_this$props","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","marginTop","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","value","onValueChange","tabsInnerWrapper","Tab","id","onClick","Component"],"sources":["Playground.tsx"],"sourcesContent":["import React from 'react';\nimport { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';\nimport { AttachLinkIcon16Regular } from '@skbkontur/icons/icons/AttachLinkIcon/AttachLinkIcon16Regular';\nimport { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';\nimport { MinusCircleIcon16Regular } from '@skbkontur/icons/icons/MinusCircleIcon/MinusCircleIcon16Regular';\nimport { TrashCanIcon16Regular } from '@skbkontur/icons/icons/TrashCanIcon/TrashCanIcon16Regular';\nimport { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular';\n\nimport type { ButtonProps } from '../../components/Button';\nimport { Button } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport type { LinkProps } from '../../components/Link';\nimport { Link } from '../../components/Link';\nimport type { InputProps } from '../../components/Input';\nimport { Input } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport type { 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, marginTop: 36 };\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.LightTheme}>Светлая тема</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DarkTheme}>Тёмная тема</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.DarkTheme:\n        return ThemeType.DarkTheme;\n      default:\n        return ThemeType.LightTheme;\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: <AttachLinkIcon16Regular />, children: 'Enabled' },\n      { icon: <CheckAIcon16Regular />, use: 'success', children: 'Success' },\n      { icon: <MinusCircleIcon16Regular />, use: 'danger', children: 'Danger' },\n      { icon: <TrashCanIcon16Regular />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashCanIcon16Regular />, 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={<SearchLoupeIcon16Regular />} />\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={<QuestionCircleIcon16Regular />} />\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"],"mappings":"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","ignoreList":[]}

package/internal/ThemePlayground/Playground.d.ts

@@ -6,8 +6,6 @@ export interface PlaygroundProps {
     onEditLinkClick: () => void;
 }
 export declare class Playground extends React.Component<PlaygroundProps> {
-    private cx;
-    private styles;
     private theme;
     private stopEl;
     render(): React.JSX.Element;

package/internal/ThemePlayground/Playground.md

@@ -0,0 +1,7 @@
+Разные варианты стилизации компонентов:
+
+```jsx harmony
+import { ThemeContextPlayground } from './ThemeContextPlayground';
+
+<ThemeContextPlayground />;
+```

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

@@ -1,67 +1,65 @@
 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;
-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: 0 -24px;\n        padding: 0 24px;\n        border-radius: 8px;\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        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        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: 0 -24px;\n      padding: 0 24px;\n      border-radius: 8px;\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      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      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,"names":["memoizeStyle","getStyles","emotion","playground","css","_templateObject","_taggedTemplateLiteralLoose","title","t","_templateObject2","textColorDefault","componentsGroup","_templateObject3","sidePageBody","_templateObject4","variable","_templateObject5","borderColorFocus","variableName","_templateObject6","deprecated","_templateObject7","colorIcon","_templateObject8","baseLinkWrapper","_templateObject9","linkRoot","_templateObject10","baseVariableRoot","_templateObject11","loaderWrapper","_templateObject12","loader","_templateObject13","tabsWrapper","_templateObject14","tooltipContent","_templateObject15","stickyTabsWrapper","_templateObject16","tabsInnerWrapper","_templateObject17","playgroundWrapper","_templateObject18","bgDefault","editorHeaderWrapper","_templateObject19","editorGroupHeader","_templateObject20"],"sources":["Playground.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    playground() {\n      return emotion.css`\n        margin: 0 -24px;\n        padding: 0 24px;\n        border-radius: 8px;\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        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        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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","playground","_templateObject","_taggedTemplateLiteralLoose","title","t","_templateObject2","textColorDefault","componentsGroup","_templateObject3","sidePageBody","_templateObject4","variable","_templateObject5","borderColorFocus","variableName","_templateObject6","deprecated","_templateObject7","colorIcon","_templateObject8","baseLinkWrapper","_templateObject9","linkRoot","_templateObject10","baseVariableRoot","_templateObject11","loaderWrapper","_templateObject12","loader","_templateObject13","tabsWrapper","_templateObject14","tooltipContent","_templateObject15","stickyTabsWrapper","_templateObject16","tabsInnerWrapper","_templateObject17","playgroundWrapper","_templateObject18","bgDefault","editorHeaderWrapper","_templateObject19","editorGroupHeader","_templateObject20"],"sources":["Playground.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  playground() {\n    return css`\n      margin: 0 -24px;\n      padding: 0 24px;\n      border-radius: 8px;\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      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      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"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { 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/ThemeContextPlayground/ThemeContextPlayground.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { SidePage } from "../../../components/SidePage";
@@ -13,7 +12,7 @@ import { findPropertyDescriptor } from "../../../lib/theming/ThemeHelpers";
 import { LIGHT_THEME } from "../../../lib/theming/themes/LightTheme";
 import { DARK_THEME } from "../../../lib/theming/themes/DarkTheme";
 import { ThemeEditor } from "../ThemeEditor";
-import { getStyles } from "../Playground.styles";
+import { styles } from "../Playground.styles";
 import { Playground } from "../Playground";
 import { ThemeType } from "../constants";
 var getEditingThemeType = function getEditingThemeType(editingThemeItem) {
@@ -51,7 +50,7 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/
         React.createElement(SidePage.Header, null, /*#__PURE__*/
         React.createElement("div", {
-          className: _this.styles.editorHeaderWrapper(currentTheme)
+          className: styles.editorHeaderWrapper(currentTheme)
         }, /*#__PURE__*/
         React.createElement(Gapped, {
           wrap: true,
@@ -74,7 +73,7 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
         }, "\u0412\u044B\u0432\u0435\u0441\u0442\u0438 \u0442\u0435\u043C\u0443 \u0432 \u043A\u043E\u043D\u0441\u043E\u043B\u044C"))), /*#__PURE__*/
         React.createElement(SidePage.Body, null, /*#__PURE__*/
         React.createElement("div", {
-          className: _this.styles.sidePageBody()
+          className: styles.sidePageBody()
         }, /*#__PURE__*/
         React.createElement(ThemeEditor, {
           editingTheme: themes[editingThemeType],
@@ -190,22 +189,17 @@ export var ThemeContextPlayground = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ThemeContextPlayground, _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(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var emotion = _ref.emotion;
-      _this2.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        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;
 }(React.Component);

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","ThemeContext","ThemeFactory","SidePage","Gapped","ComboBox","Link","ColorFunctions","findPropertyDescriptor","LIGHT_THEME","DARK_THEME","ThemeEditor","getStyles","Playground","ThemeType","getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","_React$Component","props","_this","call","editableThemesItems","LightTheme","label","DarkTheme","renderSidePage","_this$state","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","createElement","disableAnimations","ignoreBackgroundClick","blockBackground","width","onClose","handleClose","Header","className","styles","editorHeaderWrapper","wrap","verticalAlign","getItems","getEditableThemesItems","onValueChange","handleEditingThemeSwitch","style","fontSize","marginTop","onClick","handleGetTheme","Body","sidePageBody","editingTheme","currentErrors","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","_this$state2","theme","currentValue","canSetVariable","isValid","nextThemeErrors","_extends","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","lightTheme","darkTheme","_inheritsLoose","_proto","prototype","render","_this2","_this$state3","Consumer","_ref","emotion","Provider","onThemeChange","onEditLinkClick","Component"],"sources":["ThemeContextPlayground.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React from 'react';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\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 type { Writeable } from '../../typings/utility-types';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { LIGHT_THEME } from '../../lib/theming/themes/LightTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\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  lightTheme: Theme;\n  darkTheme: Theme;\n}\ninterface ThemesErrors {\n  lightTheme: ThemeErrorsType;\n  darkTheme: 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 'lightTheme';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.LightTheme, label: 'Светлая тема' },\n    { value: ThemeType.DarkTheme, label: 'Тёмная тема' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: LIGHT_THEME,\n      currentThemeType: ThemeType.LightTheme,\n      editorOpened: false,\n      themes: {\n        lightTheme: LIGHT_THEME,\n        darkTheme: DARK_THEME,\n      },\n      themesErrors: {\n        lightTheme: {},\n        darkTheme: {},\n      },\n    };\n  }\n\n  private styles!: ReturnType<typeof getStyles>;\n\n  public render() {\n    const { currentTheme, editorOpened, currentThemeType } = this.state;\n    return (\n      <RenderEnvironmentContext.Consumer>\n        {({ emotion }) => {\n          this.styles = getStyles(emotion);\n\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      </RenderEnvironmentContext.Consumer>\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={this.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.handleGetTheme}>Вывести тему в консоль</Link>\n          </div>\n        </SidePage.Header>\n        <SidePage.Body>\n          <div className={this.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 handleGetTheme = () => {\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 && LIGHT_THEME[key] && currentTheme[key] !== LIGHT_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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ThemeContext","ThemeFactory","SidePage","Gapped","ComboBox","Link","ColorFunctions","findPropertyDescriptor","LIGHT_THEME","DARK_THEME","ThemeEditor","styles","Playground","ThemeType","getEditingThemeType","editingThemeItem","value","ThemeContextPlayground","_React$Component","props","_this","call","editableThemesItems","LightTheme","label","DarkTheme","renderSidePage","_this$state","state","currentTheme","themesErrors","themes","editingThemeType","themeErrors","createElement","disableAnimations","ignoreBackgroundClick","blockBackground","width","onClose","handleClose","Header","className","editorHeaderWrapper","wrap","verticalAlign","getItems","getEditableThemesItems","onValueChange","handleEditingThemeSwitch","style","fontSize","marginTop","onClick","handleGetTheme","Body","sidePageBody","editingTheme","currentErrors","handleThemeVariableChange","themeObject","getKeys","forEach","key","descriptor","Object","getOwnPropertyDescriptor","get","console","log","JSON","stringify","handleOpen","setState","editorOpened","find","i","currentThemeType","handleThemeChange","themeType","variable","_this$state2","theme","currentValue","canSetVariable","isValid","nextThemeErrors","_extends","stateUpdate","result","changeThemeVariable","query","Promise","resolve","filter","toLowerCase","includes","item","variableName","variableValue","enumerable","configurable","set","defineProperty","create","lightTheme","darkTheme","_inheritsLoose","_proto","prototype","render","_this$state3","Provider","onThemeChange","onEditLinkClick","Component"],"sources":["ThemeContextPlayground.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\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 type { Writeable } from '../../typings/utility-types';\nimport { findPropertyDescriptor } from '../../lib/theming/ThemeHelpers';\nimport { LIGHT_THEME } from '../../lib/theming/themes/LightTheme';\nimport { DARK_THEME } from '../../lib/theming/themes/DarkTheme';\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  lightTheme: Theme;\n  darkTheme: Theme;\n}\ninterface ThemesErrors {\n  lightTheme: ThemeErrorsType;\n  darkTheme: 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 'lightTheme';\n};\nexport class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {\n  private readonly editableThemesItems = [\n    { value: ThemeType.LightTheme, label: 'Светлая тема' },\n    { value: ThemeType.DarkTheme, label: 'Тёмная тема' },\n  ];\n\n  constructor(props: PlaygroundProps) {\n    super(props);\n    this.state = {\n      currentTheme: LIGHT_THEME,\n      currentThemeType: ThemeType.LightTheme,\n      editorOpened: false,\n      themes: {\n        lightTheme: LIGHT_THEME,\n        darkTheme: DARK_THEME,\n      },\n      themesErrors: {\n        lightTheme: {},\n        darkTheme: {},\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.handleGetTheme}>Вывести тему в консоль</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 handleGetTheme = () => {\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 && LIGHT_THEME[key] && currentTheme[key] !== LIGHT_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"],"mappings":"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","ignoreList":[]}

package/internal/ThemePlayground/ThemeContextPlayground.d.ts

@@ -32,7 +32,6 @@ export type ThemeErrorsType = Writeable<{
 export declare class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {
     private readonly editableThemesItems;
     constructor(props: PlaygroundProps);
-    private styles;
     render(): React.JSX.Element;
     private renderSidePage;
     private handleGetTheme;

package/internal/ThemePlayground/ThemeEditor/ThemeEditor.js

@@ -1,14 +1,13 @@
 import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import { RenderEnvironmentContext, useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { Gapped } from "../../../components/Gapped";
 import { Loader } from "../../../components/Loader";
 import { isNonNullable } from "../../../lib/utils";
 import { VariableValue } from "../VariableValue";
 import { VARIABLES_GROUPS, DEPRECATED_VARIABLES } from "../constants";
-import { getStyles } from "../Playground.styles";
+import { styles } from "../Playground.styles";
 export var ThemeEditor = /*#__PURE__*/function (_React$Component) {
   function ThemeEditor() {
     var _this;
@@ -60,23 +59,18 @@ export var ThemeEditor = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ThemeEditor, _React$Component);
   var _proto = ThemeEditor.prototype;
   _proto.render = function render() {
-    var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var emotion = _ref.emotion;
-      _this2.styles = getStyles(emotion);
-      return _this2.state.isLoading ? /*#__PURE__*/React.createElement("div", {
-        className: _this2.styles.loaderWrapper()
-      }, /*#__PURE__*/React.createElement(Loader, {
-        type: "big",
-        active: true,
-        className: _this2.styles.loader()
-      })) : _this2.renderGroups();
-    });
+    return this.state.isLoading ? /*#__PURE__*/React.createElement("div", {
+      className: styles.loaderWrapper()
+    }, /*#__PURE__*/React.createElement(Loader, {
+      type: "big",
+      active: true,
+      className: styles.loader()
+    })) : this.renderGroups();
   };
   _proto.componentDidMount = function componentDidMount() {
-    var _this3 = this;
+    var _this2 = this;
     this.updateTimeout = window.setTimeout(function () {
-      _this3.setState({
+      _this2.setState({
         groups: VARIABLES_GROUPS,
         isLoading: false
       });
@@ -94,7 +88,6 @@ var Group = function Group(props) {
     onValueChange = props.onValueChange,
     title = props.title,
     variables = props.variables;
-  var styles = getStyles(useEmotion());
   return variables.length > 0 ? /*#__PURE__*/
   React.createElement(React.Fragment, null, /*#__PURE__*/
   React.createElement("h2", {