@skbkontur/react-ui 0.0.0-b0853da840 → 0.0.0-b08da15166

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

@@ -0,0 +1,159 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
+  playground: function playground() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: -16px;\n      padding: 32px;\n    "])));
+
+
+
+  },
+
+  title: function title(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 110px;\n      color: ", ";\n    "])),
+
+    t.textColorDefault);
+
+  },
+
+  componentsGroup: function componentsGroup(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      max-width: 700px;\n      color: ", ";\n    "])),
+
+    t.textColorDefault);
+
+  },
+
+  sidePageBody: function sidePageBody() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 30px 30px;\n    "])));
+
+
+  },
+
+  variable: function variable(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: line-through;\n    "])));
+
+
+  },
+
+  colorIcon: function colorIcon() {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 16px;\n      width: 16px;\n    "])));
+
+
+
+  },
+
+  baseLinkWrapper: function baseLinkWrapper() {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: auto;\n    "])));
+
+
+  },
+
+  linkRoot: function linkRoot() {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n    "])));
+
+
+
+  },
+
+  baseVariableRoot: function baseVariableRoot() {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    "])));
+
+
+
+
+
+
+  },
+
+  loaderWrapper: function loaderWrapper() {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 500px;\n    "])));
+
+
+  },
+
+  loader: function loader() {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 300px;\n      margin: auto;\n    "])));
+
+
+
+  },
+
+  tabsWrapper: function tabsWrapper(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 210px;\n    "])));
+
+
+  },
+
+  stickyTabsWrapper: function stickyTabsWrapper(t) {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "])),
+
+    t.textColorDefault);
+
+
+  },
+  tabsInnerWrapper: function tabsInnerWrapper(t) {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDefault);
+
+  },
+  playgroundWrapper: function playgroundWrapper(t) {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    t.bgDefault);
+
+  },
+  editorHeaderWrapper: function editorHeaderWrapper(t) {
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDefault);
+
+  },
+  editorGroupHeader: function editorGroupHeader(t) {
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.textColorDefault);
+
+  } });exports.styles = styles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Playground.styles.ts"],"names":["styles","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":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,UADiC,wBACpB;AACX,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,KARiC,iBAQ3BC,CAR2B,EAQjB;AACd,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACC,gBAFb;;AAID,GAbgC;;AAejCC,EAAAA,eAfiC,2BAejBF,CAfiB,EAeP;AACxB,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACC,gBAFb;;AAID,GApBgC;;AAsBjCE,EAAAA,YAtBiC,0BAsBlB;AACb,eAAOL,YAAP;;;AAGD,GA1BgC;;AA4BjCM,EAAAA,QA5BiC,oBA4BxBJ,CA5BwB,EA4Bd;AACjB,eAAOF,YAAP;;;;;;AAMyBE,IAAAA,CAAC,CAACK,gBAN3B;;;;AAUD,GAvCgC;;AAyCjCC,EAAAA,YAzCiC,wBAyCpBN,CAzCoB,EAyCV;AACrB,eAAOF,YAAP;;;;;;;;AAQWE,IAAAA,CAAC,CAACC,gBARb;;;AAWD,GArDgC;;AAuDjCM,EAAAA,UAvDiC,wBAuDpB;AACX,eAAOT,YAAP;;;AAGD,GA3DgC;;AA6DjCU,EAAAA,SA7DiC,uBA6DrB;AACV,eAAOV,YAAP;;;;AAID,GAlEgC;;AAoEjCW,EAAAA,eApEiC,6BAoEf;AAChB,eAAOX,YAAP;;;AAGD,GAxEgC;;AA0EjCY,EAAAA,QA1EiC,sBA0EtB;AACT,eAAOZ,YAAP;;;;AAID,GA/EgC;;AAiFjCa,EAAAA,gBAjFiC,8BAiFd;AACjB,eAAOb,YAAP;;;;;;;AAOD,GAzFgC;;AA2FjCc,EAAAA,aA3FiC,2BA2FjB;AACd,eAAOd,YAAP;;;AAGD,GA/FgC;;AAiGjCe,EAAAA,MAjGiC,oBAiGxB;AACP,eAAOf,YAAP;;;;AAID,GAtGgC;;AAwGjCgB,EAAAA,WAxGiC,uBAwGrBd,CAxGqB,EAwGX;AACpB,eAAOF,YAAP;;;;AAIWE,IAAAA,CAAC,CAACC,gBAJb;;;;;;;;;;;;AAgBD,GAzHgC;;AA2HjCc,EAAAA,cA3HiC,4BA2HhB;AACf,eAAOjB,YAAP;;;AAGD,GA/HgC;;AAiIjCkB,EAAAA,iBAjIiC,6BAiIfhB,CAjIe,EAiIL;AAC1B,eAAOF,YAAP;;AAEiCE,IAAAA,CAAC,CAACC,gBAFnC;;;AAKD,GAvIgC;AAwIjCgB,EAAAA,gBAxIiC,4BAwIhBjB,CAxIgB,EAwIN;AACzB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA5IgC;AA6IjCiB,EAAAA,iBA7IiC,6BA6IflB,CA7Ie,EA6IL;AAC1B,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACmB,SADlB;;AAGD,GAjJgC;AAkJjCC,EAAAA,mBAlJiC,+BAkJbpB,CAlJa,EAkJH;AAC5B,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GAtJgC;AAuJjCoB,EAAAA,iBAvJiC,6BAuJfrB,CAvJe,EAuJL;AAC1B,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA3JgC,EAAb,CAAf,C","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/cjs/internal/ThemePlayground/RadioPlayground.d.ts

@@ -0,0 +1 @@
+export declare const RadioPlayground: () => JSX.Element;

package/cjs/internal/ThemePlayground/RadioPlayground.js

@@ -0,0 +1,23 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RadioPlayground = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _Gapped = require("../../components/Gapped");
+var _Radio = require("../../components/Radio");
+
+var _helpers = require("./helpers");
+
+var propsList = [
+{ value: '', children: 'Default', checked: false },
+{ value: '', children: 'Checked' },
+{ value: '', children: 'Disabled', disabled: true },
+{ value: '', children: 'Focused', focused: true },
+{ value: '', children: 'Error', error: true },
+{ value: '', children: 'Warning', warning: true }];
+
+
+var RadioPlayground = function RadioPlayground() {
+  return /*#__PURE__*/(
+    _react.default.createElement(_Gapped.Gapped, { gap: 0, vertical: true },
+    (0, _helpers.getComponentsFromPropsList)( /*#__PURE__*/_react.default.createElement(_Radio.Radio, { value: '', checked: true }), propsList)));
+
+
+};exports.RadioPlayground = RadioPlayground;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["RadioPlayground.tsx"],"names":["propsList","value","children","checked","disabled","focused","error","warning","RadioPlayground"],"mappings":"6JAAA;;AAEA;AACA;;AAEA;;AAEA,IAAMA,SAAoC,GAAG;AAC3C,EAAEC,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCC,OAAO,EAAE,KAA3C,EAD2C;AAE3C,EAAEF,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAF2C;AAG3C,EAAED,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,UAAvB,EAAmCE,QAAQ,EAAE,IAA7C,EAH2C;AAI3C,EAAEH,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCG,OAAO,EAAE,IAA3C,EAJ2C;AAK3C,EAAEJ,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,OAAvB,EAAgCI,KAAK,EAAE,IAAvC,EAL2C;AAM3C,EAAEL,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCK,OAAO,EAAE,IAA3C,EAN2C,CAA7C;;;AASO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC;AACE,iCAAC,cAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACG,2DAA2B,6BAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,GAA3B,EAAyDR,SAAzD,CADH,CADF;;;AAKD,CANM,C","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Radio, RadioProps } from '../../components/Radio';\n\nimport { getComponentsFromPropsList } from './helpers';\n\nconst propsList: Array<RadioProps<string>> = [\n  { value: '', children: 'Default', checked: false },\n  { value: '', children: 'Checked' },\n  { value: '', children: 'Disabled', disabled: true },\n  { value: '', children: 'Focused', focused: true },\n  { value: '', children: 'Error', error: true },\n  { value: '', children: 'Warning', warning: true },\n];\n\nexport const RadioPlayground = () => {\n  return (\n    <Gapped gap={0} vertical>\n      {getComponentsFromPropsList(<Radio value={''} checked />, propsList)}\n    </Gapped>\n  );\n};\n"]}

package/cjs/internal/ThemePlayground/SelectPlayground.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectProps } from '../../components/Select';
+export declare class SelectPlayground extends React.Component<SelectProps<string, string>, {
+    value: string | undefined;
+}> {
+    state: {
+        value: string;
+    };
+    private readonly selectItems;
+    render(): JSX.Element;
+    private handleChange;
+}

package/cjs/internal/ThemePlayground/SelectPlayground.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SelectPlayground = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Select = require("../../components/Select");var
+
+SelectPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SelectPlayground, _React$Component);function SelectPlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    state = {
+      value: capitalize(_this.props.size) };_this.
+
+    selectItems = ['Small', 'Medium', 'Large'];_this.
+
+
+
+
+
+
+
+
+
+
+
+
+    handleChange = function (value) {
+      _this.setState({
+        value: value });
+
+    };return _this;}var _proto = SelectPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_Select.Select, (0, _extends2.default)({}, this.props, { value: this.state.value, items: this.selectItems, onValueChange: this.handleChange }));};return SelectPlayground;}(_react.default.Component);exports.SelectPlayground = SelectPlayground;
+
+
+var capitalize = function capitalize(input) {if (input === void 0) {input = '';}
+  return input.charAt(0).toUpperCase() + input.slice(1);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SelectPlayground.tsx"],"names":["SelectPlayground","state","value","capitalize","props","size","selectItems","handleChange","setState","render","React","Component","input","charAt","toUpperCase","slice"],"mappings":"8UAAA;;AAEA,iD;;AAEaA,gB;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAEC,UAAU,CAAC,MAAKC,KAAL,CAAWC,IAAZ,CADJ,E;;AAGEC,IAAAA,W,GAAc,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,C;;;;;;;;;;;;;AAavBC,IAAAA,Y,GAAe,UAACL,KAAD,EAAmB;AACxC,YAAKM,QAAL,CAAc;AACZN,QAAAA,KAAK,EAALA,KADY,EAAd;;AAGD,K,8DAfMO,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,cAAD,6BACM,KAAKL,KADX,IAEE,KAAK,EAAE,KAAKH,KAAL,CAAWC,KAFpB,EAGE,KAAK,EAAE,KAAKI,WAHd,EAIE,aAAa,EAAE,KAAKC,YAJtB,IADF,CAQD,C,2BAfmCG,eAAMC,S;;;AAwB5C,IAAMR,UAAU,GAAG,SAAbA,UAAa,CAACS,KAAD,EAAwB,KAAvBA,KAAuB,cAAvBA,KAAuB,GAAf,EAAe;AACzC,SAAOA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,KAAgCF,KAAK,CAACG,KAAN,CAAY,CAAZ,CAAvC;AACD,CAFD","sourcesContent":["import React from 'react';\n\nimport { Select, SelectProps } from '../../components/Select';\n\nexport class SelectPlayground extends React.Component<SelectProps<string, string>, { value: string | undefined }> {\n  public state = {\n    value: capitalize(this.props.size),\n  };\n  private readonly selectItems = ['Small', 'Medium', 'Large'];\n\n  public render() {\n    return (\n      <Select<string, string>\n        {...this.props}\n        value={this.state.value}\n        items={this.selectItems}\n        onValueChange={this.handleChange}\n      />\n    );\n  }\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n  };\n}\n\nconst capitalize = (input = ''): string => {\n  return input.charAt(0).toUpperCase() + input.slice(1);\n};\n"]}

package/cjs/internal/ThemePlayground/ShowcaseGroup.d.ts

@@ -0,0 +1,5 @@
+interface ShowcaseGroupProps {
+    title?: string;
+}
+export declare const ShowcaseGroup: (props: ShowcaseGroupProps) => JSX.Element;
+export {};

package/cjs/internal/ThemePlayground/ShowcaseGroup.js

@@ -0,0 +1,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ShowcaseGroup = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _Checkbox = require("../../components/Checkbox");
+var _Gapped = require("../../components/Gapped");
+var _Button = require("../../components/Button");
+var _Input = require("../../components/Input");
+var _Toggle = require("../../components/Toggle");
+var _Radio = require("../../components/Radio");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+
+
+
+var ShowcaseGroup = function ShowcaseGroup(props) {
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", null,
+    props.title && /*#__PURE__*/_react.default.createElement("h2", { style: { color: theme.textColorDefault } }, props.title), /*#__PURE__*/
+    _react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/
+    _react.default.createElement(_Button.Button, null, "Button"), /*#__PURE__*/
+    _react.default.createElement(_Input.Input, null), /*#__PURE__*/
+    _react.default.createElement(_Toggle.Toggle, null), /*#__PURE__*/
+    _react.default.createElement(_Radio.Radio, { value: '', checked: true }, "Radio"), /*#__PURE__*/
+
+
+    _react.default.createElement(_Checkbox.Checkbox, { checked: true }, "Checkbox"))));
+
+
+
+};exports.ShowcaseGroup = ShowcaseGroup;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["ShowcaseGroup","props","theme","React","useContext","ThemeContext","title","color","textColorDefault"],"mappings":"2JAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA+B;AAC1D,MAAMC,KAAK,GAAGC,eAAMC,UAAN,CAAiBC,0BAAjB,CAAd;;AAEA;AACE;AACGJ,IAAAA,KAAK,CAACK,KAAN,iBAAe,qCAAI,KAAK,EAAE,EAAEC,KAAK,EAAEL,KAAK,CAACM,gBAAf,EAAX,IAA+CP,KAAK,CAACK,KAArD,CADlB;AAEE,iCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,iCAAC,cAAD,iBADF;AAEE,iCAAC,YAAD,OAFF;AAGE,iCAAC,cAAD,OAHF;AAIE,iCAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,iCAAC,kBAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CADF;;;;AAcD,CAjBM,C","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/cjs/internal/ThemePlayground/SizesGroup.d.ts

@@ -0,0 +1,4 @@
+export declare type SizesGroupProps = {
+    size: 'small' | 'medium' | 'large';
+};
+export declare const SizesGroup: ({ size }: SizesGroupProps) => JSX.Element;

package/cjs/internal/ThemePlayground/SizesGroup.js

@@ -0,0 +1,20 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SizesGroup = void 0;var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("@skbkontur/react-icons/Card"));
+var _Link = _interopRequireDefault(require("@skbkontur/react-icons/Link"));
+
+var _Input = require("../../components/Input");
+var _Gapped = require("../../components/Gapped");
+var _Button = require("../../components/Button");
+
+var _SelectPlayground = require("./SelectPlayground");
+
+
+
+var SizesGroup = function SizesGroup(_ref) {var size = _ref.size;return /*#__PURE__*/(
+    _react.default.createElement(_Gapped.Gapped, { wrap: true, verticalAlign: "middle", gap: 10 }, /*#__PURE__*/
+    _react.default.createElement(_SelectPlayground.SelectPlayground, { width: 120, size: size }), /*#__PURE__*/
+    _react.default.createElement(_Input.Input, { rightIcon: /*#__PURE__*/_react.default.createElement(_Card.default, null), placeholder: 'Text value', size: size }), /*#__PURE__*/
+    _react.default.createElement(_Button.Button, { width: 120, size: size }, "Button"), /*#__PURE__*/
+
+
+    _react.default.createElement(_Button.Button, { icon: /*#__PURE__*/_react.default.createElement(_Link.default, null), use: 'link', size: size }, "Button like a link")));};exports.SizesGroup = SizesGroup;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SizesGroup.tsx"],"names":["SizesGroup","size"],"mappings":"wJAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;;AAIO,IAAMA,UAAU,GAAG,SAAbA,UAAa,YAAGC,IAAH,QAAGA,IAAH;AACxB,iCAAC,cAAD,IAAQ,IAAI,MAAZ,EAAa,aAAa,EAAC,QAA3B,EAAoC,GAAG,EAAE,EAAzC;AACE,iCAAC,kCAAD,IAAkB,KAAK,EAAE,GAAzB,EAA8B,IAAI,EAAEA,IAApC,GADF;AAEE,iCAAC,YAAD,IAAO,SAAS,eAAE,6BAAC,aAAD,OAAlB,EAAgC,WAAW,EAAE,YAA7C,EAA2D,IAAI,EAAEA,IAAjE,GAFF;AAGE,iCAAC,cAAD,IAAQ,KAAK,EAAE,GAAf,EAAoB,IAAI,EAAEA,IAA1B,aAHF;;;AAME,iCAAC,cAAD,IAAQ,IAAI,eAAE,6BAAC,aAAD,OAAd,EAA4B,GAAG,EAAE,MAAjC,EAAyC,IAAI,EAAEA,IAA/C,yBANF,CADwB,GAAnB,C","sourcesContent":["import React from 'react';\nimport CardIcon from '@skbkontur/react-icons/Card';\nimport LinkIcon from '@skbkontur/react-icons/Link';\n\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\n\nimport { SelectPlayground } from './SelectPlayground';\n\nexport type SizesGroupProps = { size: 'small' | 'medium' | 'large' };\n\nexport const SizesGroup = ({ size }: SizesGroupProps) => (\n  <Gapped wrap verticalAlign=\"middle\" gap={10}>\n    <SelectPlayground width={120} size={size} />\n    <Input rightIcon={<CardIcon />} placeholder={'Text value'} size={size} />\n    <Button width={120} size={size}>\n      Button\n    </Button>\n    <Button icon={<LinkIcon />} use={'link'} size={size}>\n      Button like a link\n    </Button>\n  </Gapped>\n);\n"]}

package/cjs/internal/ThemePlayground/SwitcherPlayground.js

@@ -0,0 +1,30 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SwitcherPlayground = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Switcher = require("../../components/Switcher");
+
+var defaultItems = ['Default', 'Error'];var
+
+SwitcherPlayground = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SwitcherPlayground, _React$Component);function SwitcherPlayground() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+    state = {
+      value: '',
+      error: false };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    handleValueChange = function (value) {
+      _this.setState({ value: value, error: value === 'Error' });
+    };return _this;}var _proto = SwitcherPlayground.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_Switcher.Switcher, (0, _extends2.default)({ value: this.state.value, onValueChange: this.handleValueChange, items: this.props.items || defaultItems, error: this.state.error }, this.props));};return SwitcherPlayground;}(_react.default.Component);exports.SwitcherPlayground = SwitcherPlayground;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SwitcherPlayground.tsx"],"names":["defaultItems","SwitcherPlayground","state","value","error","handleValueChange","setState","render","props","items","React","Component"],"mappings":"gVAAA;;AAEA;;AAEA,IAAMA,YAAY,GAAG,CAAC,SAAD,EAAY,OAAZ,CAArB,C;;AAEaC,kB;;;;AAIJC,IAAAA,K,GAAQ;AACbC,MAAAA,KAAK,EAAE,EADM;AAEbC,MAAAA,KAAK,EAAE,KAFM,E;;;;;;;;;;;;;;;AAiBPC,IAAAA,iB,GAAoB,UAACF,KAAD,EAAmB;AAC7C,YAAKG,QAAL,CAAc,EAAEH,KAAK,EAALA,KAAF,EAASC,KAAK,EAAED,KAAK,KAAK,OAA1B,EAAd;AACD,K,gEAdMI,M,GAAP,kBAAgB,CACd,oBACE,6BAAC,kBAAD,2BACE,KAAK,EAAE,KAAKL,KAAL,CAAWC,KADpB,EAEE,aAAa,EAAE,KAAKE,iBAFtB,EAGE,KAAK,EAAE,KAAKG,KAAL,CAAWC,KAAX,IAAoBT,YAH7B,EAIE,KAAK,EAAE,KAAKE,KAAL,CAAWE,KAJpB,IAKM,KAAKI,KALX,EADF,CASD,C,6BAnBqCE,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Switcher } from '../../components/Switcher';\n\nconst defaultItems = ['Default', 'Error'];\n\nexport class SwitcherPlayground extends React.Component<\n  { items?: string[]; disabled?: boolean },\n  { value: string; error: boolean }\n> {\n  public state = {\n    value: '',\n    error: false,\n  };\n\n  public render() {\n    return (\n      <Switcher\n        value={this.state.value}\n        onValueChange={this.handleValueChange}\n        items={this.props.items || defaultItems}\n        error={this.state.error}\n        {...this.props}\n      />\n    );\n  }\n\n  private handleValueChange = (value: string) => {\n    this.setState({ value, error: value === 'Error' });\n  };\n}\n"]}

package/cjs/internal/ThemePlayground/ThemeContextPlayground.d.ts

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+import { Theme } from '../../lib/theming/Theme';
+import { Writeable } from '../../typings/utility-types';
+import { ThemeType } from './constants';
+interface PlaygroundState {
+    editorOpened: boolean;
+    editingThemeItem?: EditingThemeItem;
+    themes: Themes;
+    themesErrors: ThemesErrors;
+    currentTheme: Theme;
+    currentThemeType: ThemeType;
+}
+interface Themes {
+    default: Theme;
+    dark: Theme;
+    defaultOld: Theme;
+    flatOld: Theme;
+    theme2022: Theme;
+    theme2022Dark: Theme;
+}
+interface ThemesErrors {
+    default: ThemeErrorsType;
+    dark: ThemeErrorsType;
+    defaultOld: ThemeErrorsType;
+    flatOld: ThemeErrorsType;
+    theme2022: ThemeErrorsType;
+    theme2022Dark: ThemeErrorsType;
+}
+interface EditingThemeItem {
+    value: ThemeType;
+    label: string;
+}
+interface PlaygroundProps {
+    children?: ReactNode;
+}
+export declare type ThemeErrorsType = Writeable<{
+    [key in keyof Theme]?: boolean;
+}>;
+export declare class ThemeContextPlayground extends React.Component<PlaygroundProps, PlaygroundState> {
+    private readonly editableThemesItems;
+    constructor(props: PlaygroundProps);
+    render(): JSX.Element;
+    private renderSidePage;
+    private handelGetTheme;
+    private handleOpen;
+    private handleClose;
+    private handleThemeChange;
+    private handleThemeVariableChange;
+    private getEditableThemesItems;
+    private handleEditingThemeSwitch;
+    private changeThemeVariable;
+}
+export {};