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

package/cjs/lib/theming/AnimationKeyframes.js

@@ -0,0 +1,44 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.AnimationKeyframes = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("./Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+
+var AnimationKeyframes = {
+  spinnerCloudOffset: function spinnerCloudOffset(t) {
+    return (0, _Emotion.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        0% { stroke-dashoffset: 10; }\n        100% { stroke-dashoffset: 116; }\n      "])));
+
+
+
+  },
+
+  spinnerCloudLength: function spinnerCloudLength(t) {
+    return (0, _Emotion.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        0% { stroke-dasharray: 10, 96; }\n        50% { stroke-dasharray: 50, 56; }\n        100% { stroke-dasharray: 10, 96;}\n      "])));
+
+
+
+
+  },
+  spinnerCircleOffset: function spinnerCircleOffset(t) {
+    return (0, _Emotion.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        0% { stroke-dashoffset: 0; }\n        100% { stroke-dashoffset: -231.25%; }\n      "])));
+
+
+
+  },
+  spinnerCircleLength: function spinnerCircleLength(t) {
+    return (0, _Emotion.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "])));
+
+
+
+
+  },
+  spinnerCircleRotate: function spinnerCircleRotate(t) {
+    return (0, _Emotion.keyframes)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        100% { transform: rotate(360deg); }\n      "])));
+
+
+  },
+  spinnerColor: function spinnerColor(t) {
+    return (0, _Emotion.keyframes)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "])),
+    t.red,
+    t.yellow,
+    t.green,
+    t.brand);
+
+  } };exports.AnimationKeyframes = AnimationKeyframes;

package/cjs/lib/theming/AnimationKeyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AnimationKeyframes.ts"],"names":["AnimationKeyframes","spinnerCloudOffset","t","keyframes","spinnerCloudLength","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","spinnerColor","red","yellow","green","brand"],"mappings":"wRAAA,oC;;;AAGO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,kBADgC,8BACbC,CADa,EACH;AAC3B,eAAOC,kBAAP;;;;AAID,GAN+B;;AAQhCC,EAAAA,kBARgC,8BAQbF,CARa,EAQH;AAC3B,eAAOC,kBAAP;;;;;AAKD,GAd+B;AAehCE,EAAAA,mBAfgC,+BAeZH,CAfY,EAeF;AAC5B,eAAOC,kBAAP;;;;AAID,GApB+B;AAqBhCG,EAAAA,mBArBgC,+BAqBZJ,CArBY,EAqBF;AAC5B,eAAOC,kBAAP;;;;;AAKD,GA3B+B;AA4BhCI,EAAAA,mBA5BgC,+BA4BZL,CA5BY,EA4BF;AAC5B,eAAOC,kBAAP;;;AAGD,GAhC+B;AAiChCK,EAAAA,YAjCgC,wBAiCnBN,CAjCmB,EAiCT;AACrB,eAAOC,kBAAP;AACyBD,IAAAA,CAAC,CAACO,GAD3B;AAEoBP,IAAAA,CAAC,CAACQ,MAFtB;AAGoBR,IAAAA,CAAC,CAACS,KAHtB;AAIyBT,IAAAA,CAAC,CAACU,KAJ3B;;AAMD,GAxC+B,EAA3B,C","sourcesContent":["import { keyframes } from './Emotion';\nimport { Theme } from './Theme';\n\nexport const AnimationKeyframes = {\n  spinnerCloudOffset(t: Theme) {\n    return keyframes`\n        0% { stroke-dashoffset: 10; }\n        100% { stroke-dashoffset: 116; }\n      `;\n  },\n\n  spinnerCloudLength(t: Theme) {\n    return keyframes`\n        0% { stroke-dasharray: 10, 96; }\n        50% { stroke-dasharray: 50, 56; }\n        100% { stroke-dasharray: 10, 96;}\n      `;\n  },\n  spinnerCircleOffset(t: Theme) {\n    return keyframes`\n        0% { stroke-dashoffset: 0; }\n        100% { stroke-dashoffset: -231.25%; }\n      `;\n  },\n  spinnerCircleLength(t: Theme) {\n    return keyframes`\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      `;\n  },\n  spinnerCircleRotate(t: Theme) {\n    return keyframes`\n        100% { transform: rotate(360deg); }\n      `;\n  },\n  spinnerColor(t: Theme) {\n    return keyframes`\n        100%, 0% { stroke: ${t.red}; }\n        40% { stroke: ${t.yellow}; }\n        66% { stroke: ${t.green}; }\n        80%, 90% { stroke: ${t.brand}; }\n      `;\n  },\n};\n"]}

package/cjs/lib/theming/Emotion.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from './Theme';
+export declare const flush: () => void, hydrate: (ids: string[]) => void, cx: (...classNames: import("@emotion/css/create-instance").ClassNamesArg[]) => string, merge: (className: string) => string, getRegisteredStyles: (registeredStyles: string[], className: string) => string, injectGlobal: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): void;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): void;
+}, keyframes: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): string;
+}, css: {
+    (template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;
+    (...args: import("@emotion/serialize").CSSInterpolation[]): string;
+}, sheet: import("@emotion/css/create-instance").CSSStyleSheet, cache: import("@emotion/utils").EmotionCache;
+export declare const memoizeStyle: <S extends {
+    [className: string]: (() => string) | ((t: Theme) => string);
+}>(styles: S) => S;
+export declare const prefix: (component: string, app?: string) => <T extends Record<string, string>>(classes: T) => T;

package/cjs/lib/theming/Emotion.js

@@ -0,0 +1,54 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.prefix = exports.memoizeStyle = exports.cache = exports.sheet = exports.css = exports.keyframes = exports.injectGlobal = exports.getRegisteredStyles = exports.merge = exports.cx = exports.hydrate = exports.flush = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createInstance = _interopRequireDefault(require("@emotion/css/create-instance"));
+var _stylisPluginExtraScope = _interopRequireDefault(require("stylis-plugin-extra-scope"));
+
+var _Upgrades = require("../Upgrades");
+
+
+
+var REACT_UI_PREFIX = _Upgrades.Upgrade.getSpecificityClassName();
+
+var scope = new Array(_Upgrades.Upgrade.getSpecificityLevel()).fill("." + REACT_UI_PREFIX).join('');var _createEmotion =
+
+
+(0, _createInstance.default)({
+  key: REACT_UI_PREFIX,
+  stylisPlugins: scope ? [(0, _stylisPluginExtraScope.default)(scope)] : undefined }),flush = _createEmotion.flush,hydrate = _createEmotion.hydrate,cx = _createEmotion.cx,merge = _createEmotion.merge,getRegisteredStyles = _createEmotion.getRegisteredStyles,injectGlobal = _createEmotion.injectGlobal,keyframes = _createEmotion.keyframes,css = _createEmotion.css,sheet = _createEmotion.sheet,cache = _createEmotion.cache;exports.cache = cache;exports.sheet = sheet;exports.css = css;exports.keyframes = keyframes;exports.injectGlobal = injectGlobal;exports.getRegisteredStyles = getRegisteredStyles;exports.merge = merge;exports.cx = cx;exports.hydrate = hydrate;exports.flush = flush;
+
+
+function isZeroArgs(fn) {
+  return fn.length == 0;
+}
+
+var memoize = function memoize(fn) {
+  if (isZeroArgs(fn)) {
+    var isCalled = false;
+    var result;
+    return function () {
+      if (!isCalled) {
+        isCalled = true;
+        result = fn();
+      }
+      return result;
+    };
+  }
+
+  var cache = new WeakMap();
+  return function (arg) {
+    if (!cache.has(arg)) cache.set(arg, fn(arg));
+    return cache.get(arg);
+  };
+};
+
+var memoizeStyle = function memoizeStyle(
+styles)
+{
+  Object.keys(styles).forEach(function (className) {return styles[className] = memoize(styles[className]);});
+  return styles;
+};exports.memoizeStyle = memoizeStyle;
+
+var prefix =
+function prefix(component, app) {if (app === void 0) {app = REACT_UI_PREFIX;}return (
+    function (classes) {return (
+        Object.keys(classes).reduce(function (acc, key) {var _extends2;
+          return (0, _extends3.default)({}, acc, (_extends2 = {}, _extends2[key] = app + "-" + component + "-" + classes[key], _extends2));
+        }, {}));});};exports.prefix = prefix;

package/cjs/lib/theming/Emotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Emotion.ts"],"names":["REACT_UI_PREFIX","Upgrade","getSpecificityClassName","scope","Array","getSpecificityLevel","fill","join","key","stylisPlugins","undefined","flush","hydrate","cx","merge","getRegisteredStyles","injectGlobal","keyframes","css","sheet","cache","isZeroArgs","fn","length","memoize","isCalled","result","WeakMap","arg","has","set","get","memoizeStyle","styles","Object","keys","forEach","className","prefix","component","app","classes","reduce","acc"],"mappings":"mbAAA;AACA;;AAEA;;;;AAIA,IAAMA,eAAe,GAAGC,kBAAQC,uBAAR,EAAxB;;AAEA,IAAMC,KAAK,GAAG,IAAIC,KAAJ,CAAUH,kBAAQI,mBAAR,EAAV,EAAyCC,IAAzC,OAAkDN,eAAlD,EAAqEO,IAArE,CAA0E,EAA1E,CAAd,C;;;AAGE,6BAAc;AACZC,EAAAA,GAAG,EAAER,eADO;AAEZS,EAAAA,aAAa,EAAEN,KAAK,GAAG,CAAC,qCAAiBA,KAAjB,CAAD,CAAH,GAA+BO,SAFvC,EAAd,C,CADaC,K,kBAAAA,K,CAAOC,O,kBAAAA,O,CAASC,E,kBAAAA,E,CAAIC,K,kBAAAA,K,CAAOC,mB,kBAAAA,mB,CAAqBC,Y,kBAAAA,Y,CAAcC,S,kBAAAA,S,CAAWC,G,kBAAAA,G,CAAKC,K,kBAAAA,K,CAAOC,K,kBAAAA,K;;;AAMpG,SAASC,UAAT,CAAwDC,EAAxD,EAAyF;AACvF,SAAOA,EAAE,CAACC,MAAH,IAAa,CAApB;AACD;;AAED,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAsBF,EAAtB,EAAuF;AACrG,MAAID,UAAU,CAACC,EAAD,CAAd,EAAoB;AAClB,QAAIG,QAAQ,GAAG,KAAf;AACA,QAAIC,MAAJ;AACA,WAAO,YAAM;AACX,UAAI,CAACD,QAAL,EAAe;AACbA,QAAAA,QAAQ,GAAG,IAAX;AACAC,QAAAA,MAAM,GAAGJ,EAAE,EAAX;AACD;AACD,aAAOI,MAAP;AACD,KAND;AAOD;;AAED,MAAMN,KAAK,GAAG,IAAIO,OAAJ,EAAd;AACA,SAAO,UAACC,GAAD,EAAY;AACjB,QAAI,CAACR,KAAK,CAACS,GAAN,CAAUD,GAAV,CAAL,EAAqBR,KAAK,CAACU,GAAN,CAAUF,GAAV,EAAeN,EAAE,CAACM,GAAD,CAAjB;AACrB,WAAOR,KAAK,CAACW,GAAN,CAAUH,GAAV,CAAP;AACD,GAHD;AAID,CAlBD;;AAoBO,IAAMI,YAAY,GAAG,SAAfA,YAAe;AAC1BC,MAD0B;AAEpB;AACNC,EAAAA,MAAM,CAACC,IAAP,CAAYF,MAAZ,EAAoBG,OAApB,CAA4B,UAACC,SAAD,UAAgBJ,MAAM,CAACI,SAAD,CAAN,GAA+Bb,OAAO,CAACS,MAAM,CAACI,SAAD,CAAP,CAAtD,EAA5B;AACA,SAAOJ,MAAP;AACD,CALM,C;;AAOA,IAAMK,MAAM;AACjB,SADWA,MACX,CAACC,SAAD,EAAoBC,GAApB,OAAoBA,GAApB,cAAoBA,GAApB,GAA0BxC,eAA1B;AACA,cAAmCyC,OAAnC;AACEP,QAAAA,MAAM,CAACC,IAAP,CAAYM,OAAZ,EAAqBC,MAArB,CAA4B,UAACC,GAAD,EAAMnC,GAAN,EAAc;AACxC,4CAAYmC,GAAZ,6BAAkBnC,GAAlB,IAA2BgC,GAA3B,SAAkCD,SAAlC,SAA+CE,OAAO,CAACjC,GAAD,CAAtD;AACD,SAFD,EAEG,EAFH,CADF,GADA,GADK,C","sourcesContent":["import createEmotion from '@emotion/css/create-instance';\nimport extraScopePlugin from 'stylis-plugin-extra-scope';\n\nimport { Upgrade } from '../Upgrades';\n\nimport { Theme } from './Theme';\n\nconst REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\nconst scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');\n\nexport const { flush, hydrate, cx, merge, getRegisteredStyles, injectGlobal, keyframes, css, sheet, cache } =\n  createEmotion({\n    key: REACT_UI_PREFIX,\n    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,\n  });\n\nfunction isZeroArgs<R, T extends (...args: any[]) => R>(fn: T | Function): fn is () => R {\n  return fn.length == 0;\n}\n\nconst memoize = <A extends object, R>(fn: (() => R) | ((arg: A) => R)): (() => R) | ((arg: A) => R) => {\n  if (isZeroArgs(fn)) {\n    let isCalled = false;\n    let result: R;\n    return () => {\n      if (!isCalled) {\n        isCalled = true;\n        result = fn();\n      }\n      return result;\n    };\n  }\n\n  const cache = new WeakMap();\n  return (arg: A) => {\n    if (!cache.has(arg)) cache.set(arg, fn(arg));\n    return cache.get(arg);\n  };\n};\n\nexport const memoizeStyle = <S extends { [className: string]: (() => string) | ((t: Theme) => string) }>(\n  styles: S,\n): S => {\n  Object.keys(styles).forEach((className) => (styles[className as keyof S] = memoize(styles[className]) as S[keyof S]));\n  return styles;\n};\n\nexport const prefix =\n  (component: string, app = REACT_UI_PREFIX) =>\n  <T extends Record<string, string>>(classes: T): T =>\n    Object.keys(classes).reduce((acc, key) => {\n      return { ...acc, [key]: `${app}-${component}-${classes[key]}` };\n    }, {} as T);\n"]}

package/cjs/lib/theming/Theme.d.ts

@@ -0,0 +1,3 @@
+import { DefaultThemeInternal } from '../../internal/themes/DefaultTheme';
+export declare type Theme = Readonly<typeof DefaultThemeInternal>;
+export declare type ThemeIn = Partial<typeof DefaultThemeInternal>;

package/cjs/lib/theming/Theme.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/lib/theming/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/cjs/lib/theming/ThemeContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeContext: React.Context<Readonly<Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>>>;

package/cjs/lib/theming/ThemeContext.js

@@ -0,0 +1,7 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ThemeContext = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _DefaultTheme = require("./themes/DefaultTheme");
+
+var ThemeContext = /*#__PURE__*/_react.default.createContext(_DefaultTheme.DEFAULT_THEME);exports.ThemeContext = ThemeContext;
+
+ThemeContext.displayName = 'ThemeContext';

package/cjs/lib/theming/ThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ThemeContext.ts"],"names":["ThemeContext","React","createContext","DEFAULT_THEME","displayName"],"mappings":"0JAAA;;AAEA;;AAEO,IAAMA,YAAY,gBAAGC,eAAMC,aAAN,CAAoBC,2BAApB,CAArB,C;;AAEPH,YAAY,CAACI,WAAb,GAA2B,cAA3B","sourcesContent":["import React from 'react';\n\nimport { DEFAULT_THEME } from './themes/DefaultTheme';\n\nexport const ThemeContext = React.createContext(DEFAULT_THEME);\n\nThemeContext.displayName = 'ThemeContext';\n"]}

package/cjs/lib/theming/ThemeContext.md

@@ -0,0 +1,264 @@
+Для кастомизации компонентов используется ThemeContext, реализуемый через `React.Context<Theme>`
+
+Механизм работы: динамические стили генерируются в зависимости от темы в процессе render'а с помощью <a href="https://www.npmjs.com/package/emotion" target="_blank">emotion</a>, полученные классы добавляются в `className` соответствующих элементов.
+
+Тема задается с помощью `ThemeContext.Provider`:
+
+```jsx static
+import { ThemeContext } from '@skbkontur/react-ui';
+
+<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
+```
+
+Использовать тему в компоненте можно через `ThemeContext.Consumer`:
+
+```jsx static
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+<ThemeContext.Consumer>
+  {theme => /* ... */ }
+</ThemeContext.Consumer>
+```
+
+`useContext` в функциональных компонентах:
+
+```typescript static
+const theme = useContext(ThemeContext);
+```
+
+или задать `contextType` для класса:
+
+```typescript static
+public static contextType = ThemeContext;
+public context: Theme = this.context;
+```
+
+Список существующих тем:
+
+| Имя                     | Описание         |
+| ----------------------- | ---------------- |
+| `DEFAULT_THEME`         | Дефолтная        |
+| `DEFAULT_THEME_8PX_OLD` | Старая дефолтная |
+| `FLAT_THEME_8PX_OLD`    | Старая плоская   |
+
+## Примеры использования
+
+### Подключение старой плоской темы
+
+```jsx harmony
+import {ThemeContext, FLAT_THEME_8PX_OLD} from '@skbkontur/react-ui';
+import {ShowcaseGroup} from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+<ThemeContext.Provider value={FLAT_THEME_8PX_OLD}>
+  <ShowcaseGroup title="Flat Theme Old"/>
+</ThemeContext.Provider>;
+```
+
+### Создание собственной темы
+
+Собственные значения нужно передать в `ThemeFactory.create` и получившуюся тему можно использовать в `ThemeContext.Provider`. `ThemeFactory` расширяет переданный объект, задавая в качестве прототипа объект темы по умолчанию.
+
+```jsx harmony
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const myTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' });
+
+<ThemeContext.Provider value={myTheme}>
+  <ShowcaseGroup title="My Theme" />
+</ThemeContext.Provider>;
+```
+
+Вторым аргументом `ThemeFactory.create` может принимать объект, который будет использован в качестве базовой темы.
+
+```jsx static
+import { ThemeFactory } from '@skbkontur/react-ui';
+import { FLAT_THEME_8PX_OLD } from '@skbkontur/react-ui/lib/theming/themes/FlatTheme8pxOld';
+
+const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, FLAT_THEME_8PX_OLD);
+```
+
+### Использование темы в своих компонентах
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.textColorDefault }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Добавление своих переменных
+
+Если вы хотите дополнить одну из тем новыми переменными для своих компонентов, то вы можете использовать отдельный контекст в расширенным объектом темы.
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeFactory, Button } from '@skbkontur/react-ui';
+
+const MyThemeContext = React.createContext(ThemeFactory.create({ myTextColor: 'orange' }));
+
+MyThemeContext.displayName = 'MyThemeContext';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(MyThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.myTextColor }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Кастомизация в legacy-приложениях
+
+В случае, если контролы рендерятся через какую-то общую обертку, достаточно добавить в нее `ThemeContext.Provider` с вашей темой. В противном случае, вам подойдет метод `ThemeFactory.overrideDefaultTheme()`.
+
+```typescript static
+import theme from './theme/theme';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+ThemeFactory.overrideDefaultTheme(theme);
+```
+
+### Варианты кастомизации:
+
+Несколько тем одновременно:
+<br/>
+
+```jsx harmony
+import { ThemeContext, FLAT_THEME_8PX_OLD as flatTheme8pxOld } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const CombinedComponents = () => (
+  <>
+    <ShowcaseGroup title="Default" />
+    <ThemeContext.Provider value={flatTheme8pxOld}>
+      <div>
+        <ShowcaseGroup title="Flat old" />
+      </div>
+    </ThemeContext.Provider>
+  </>
+);
+
+<CombinedComponents />;
+```
+
+Вложенные темы:
+<br/>
+
+```jsx harmony
+import { ThemeContext, FLAT_THEME_8PX_OLD as flatTheme8pxOld, DEFAULT_THEME as defaultTheme } from '@skbkontur/react-ui';
+import { darkTheme } from '@skbkontur/react-ui/internal/ThemePlayground/darkTheme';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const wrapperStyles = {
+  border: '1px solid rgb(188, 187, 187)',
+  padding: '0 15px 15px',
+  marginTop: 25,
+};
+
+const NestedThemes = () => (
+  <ThemeContext.Provider value={flatTheme8pxOld}>
+    <div style={{ ...wrapperStyles, width: 750 }}>
+      <ShowcaseGroup title="Flat Old Theme" />
+      <ThemeContext.Provider value={defaultTheme}>
+        <div style={wrapperStyles}>
+          <ShowcaseGroup title="Default Theme" />
+          <ThemeContext.Provider value={darkTheme}>
+            <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
+              <ShowcaseGroup title="Dark Theme" />
+            </div>
+          </ThemeContext.Provider>
+        </div>
+      </ThemeContext.Provider>
+    </div>
+  </ThemeContext.Provider>
+);
+
+<NestedThemes />;
+```
+
+## Кастомизация @skbkontur/react-ui-addons
+
+Компоненты `@skbkontur/react-ui-addons` так же поддерживают кастомизацию через `ThemeContext` из `@skbkontur/react-ui`. Достаточно переопределить нужные переменные, которые перечислены на страницах компонентов в [докумендации аддонов](https://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).
+
+```tsx static
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { Logotype, AddonsThemeIn } from '@skbkontur/react-ui-addons';
+
+const myTheme = ThemeFactory.create<AddonsThemeIn>({
+  logoColor: 'black',
+});
+
+<ThemeContext.Provider value={myTheme}>
+  <Logotype />
+</ThemeContext.Provider>;
+```
+
+## Дополнительно
+
+### ColorFunctions.ts / DimensionFunctions.ts
+
+Несколько функций по работе с цветом вынесены из less в js, их можно использовать в своих темах (_ColorFunctions.ts_):
+
+```typescript static
+lighten(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+darken(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+contrast(colorString: string, darkString?: string, lightString?: string, threshold: number = 0.43): string
+red(colorString: string): string
+green(colorString: string): string
+blue(colorString: string): string
+alpha(colorString: string): string
+isValid(colorString: string): boolean // проверяет, можно ли распарсить строку в цвет
+```
+
+Документацию по их работе можно найти на сайте [less](http://lesscss.org/functions/#color-operations).
+В качестве colorString можно передать цвет в одном из форматов: `keyword`, `hex`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsl(h, s, l)`, `hsla(h, s, l, a)`.
+В качестве `amount` можно передать строку вида 'N%' или число от 0 до 1.
+Все значения больше или меньше возможных обрезаются. Например, для `rgba(300, -100, 123, 20)` `r=255, g=0, b=123, a=1`.
+Если распарсить `colorString` не получилось - выбрасывается исключение.
+Если это возможно, результат возвращается в том же виде, что и входная строка:
+
+```typescript static
+lighten('hsl(90, 0.8, 0.2)', '20%') === 'hsl(90, 0.8, 0.4)';
+lighten('rgba(50, 50, 50, 0.2)', '20%') === 'rgba(102, 102, 102, 0.2)';
+lighten('#80e619', 0.2) === '#b3f075';
+lighten('crimson', '20%') === '#f16581';
+```
+
+Для работы с размерами предусмотрена одна функция (_DimensionFunctions.ts_):
+
+```typescript static
+shift(value: string, shift: string): string
+
+// пример
+DimensionFunctions.shift('100%', '-20') === '80%'
+DimensionFunctions.shift('2em', '+2') === '4em'
+DimensionFunctions.shift('12', '+1') === '13px'  //если единица измерения не указана - используется px
+DimensionFunctions.shift('10.2', '12.333451') === '22.5335px' //дробная часть округляется до 4 знаков
+```
+
+### Список кастомизируемых компонентов
+
+Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
+Информация собирается в рантайме с помощью `Proxy`, поэтому в IE таблица не отображается.
+
+### Playground
+
+Внутренний компонент `Playground` (_components/internal/ThemePlayground/Playground.tsx_) можно использовать для построения своей темы.
+Для удобства в редакторе добавлено действие "вывести тему в консоль".

package/cjs/lib/theming/ThemeFactory.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ThemeIn } from './Theme';
+export declare class ThemeFactory {
+    static create<T extends {}>(theme: ThemeIn & T, baseTheme?: Theme): Readonly<Theme & T>;
+    static overrideDefaultTheme(theme: ThemeIn): void;
+    static getKeys<T extends Theme>(theme: T): (keyof T)[];
+    private static constructTheme;
+}

package/cjs/lib/theming/ThemeFactory.js

@@ -0,0 +1,39 @@
+"use strict";exports.__esModule = true;exports.ThemeFactory = void 0;var _DefaultTheme = require("../../internal/themes/DefaultTheme");var
+
+
+
+ThemeFactory = /*#__PURE__*/function () {function ThemeFactory() {}ThemeFactory.
+  create = function create(theme, baseTheme) {
+    var base = baseTheme || _DefaultTheme.DefaultThemeInternal;
+    return this.constructTheme(base, theme);
+  };ThemeFactory.
+
+  overrideDefaultTheme = function overrideDefaultTheme(theme) {
+    Object.keys(theme).forEach(function (variableName) {
+      var descriptor = Object.getOwnPropertyDescriptor(theme, variableName);
+      Object.defineProperty(_DefaultTheme.DefaultThemeInternal, variableName, descriptor);
+    });
+  };ThemeFactory.
+
+  getKeys = function getKeys(theme) {
+    var keys = [];
+    while (theme != null) {
+      Object.keys(theme).forEach(function (key) {
+        if (!keys.includes(key)) {
+          keys.push(key);
+        }
+      });
+      theme = Object.getPrototypeOf(theme);
+    }
+    return keys.sort();
+  };ThemeFactory.
+
+  constructTheme = function constructTheme(base, theme) {
+    var newTheme = Object.create(base);
+    Object.keys(theme).forEach(function (propName) {
+      var descriptor = Object.getOwnPropertyDescriptor(theme, propName);
+      Object.defineProperty(newTheme, propName, descriptor);
+    });
+
+    return Object.freeze(newTheme);
+  };return ThemeFactory;}();exports.ThemeFactory = ThemeFactory;

package/cjs/lib/theming/ThemeFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ThemeFactory.ts"],"names":["ThemeFactory","create","theme","baseTheme","base","DefaultThemeInternal","constructTheme","overrideDefaultTheme","Object","keys","forEach","variableName","descriptor","getOwnPropertyDescriptor","defineProperty","getKeys","key","includes","push","getPrototypeOf","sort","newTheme","propName","freeze"],"mappings":"qEAAA,kE;;;;AAIaA,Y;AACGC,EAAAA,M,GAAd,gBAAmCC,KAAnC,EAAuDC,SAAvD,EAA+F;AAC7F,QAAMC,IAAI,GAAGD,SAAS,IAAIE,kCAA1B;AACA,WAAO,KAAKC,cAAL,CAAoBF,IAApB,EAA0BF,KAA1B,CAAP;AACD,G;;AAEaK,EAAAA,oB,GAAd,8BAAmCL,KAAnC,EAAmD;AACjDM,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAACC,YAAD,EAAkB;AAC3C,UAAMC,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCS,YAAvC,CAAnB;AACAH,MAAAA,MAAM,CAACM,cAAP,CAAsBT,kCAAtB,EAA4CM,YAA5C,EAA0DC,UAA1D;AACD,KAHD;AAID,G;;AAEaG,EAAAA,O,GAAd,iBAAuCb,KAAvC,EAAiD;AAC/C,QAAMO,IAAoB,GAAG,EAA7B;AACA,WAAOP,KAAK,IAAI,IAAhB,EAAsB;AACnBM,MAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,CAAD,CAAuCQ,OAAvC,CAA+C,UAACM,GAAD,EAAS;AACtD,YAAI,CAACP,IAAI,CAACQ,QAAL,CAAcD,GAAd,CAAL,EAAyB;AACvBP,UAAAA,IAAI,CAACS,IAAL,CAAUF,GAAV;AACD;AACF,OAJD;AAKAd,MAAAA,KAAK,GAAGM,MAAM,CAACW,cAAP,CAAsBjB,KAAtB,CAAR;AACD;AACD,WAAOO,IAAI,CAACW,IAAL,EAAP;AACD,G;;AAEcd,EAAAA,c,GAAf,wBAA8BF,IAA9B,EAA2CF,KAA3C,EAA2D;AACzD,QAAMmB,QAAQ,GAAGb,MAAM,CAACP,MAAP,CAAcG,IAAd,CAAjB;AACAI,IAAAA,MAAM,CAACC,IAAP,CAAYP,KAAZ,EAAmBQ,OAAnB,CAA2B,UAACY,QAAD,EAAc;AACvC,UAAMV,UAAU,GAAGJ,MAAM,CAACK,wBAAP,CAAgCX,KAAhC,EAAuCoB,QAAvC,CAAnB;AACAd,MAAAA,MAAM,CAACM,cAAP,CAAsBO,QAAtB,EAAgCC,QAAhC,EAA0CV,UAA1C;AACD,KAHD;;AAKA,WAAOJ,MAAM,CAACe,MAAP,CAAcF,QAAd,CAAP;AACD,G","sourcesContent":["import { DefaultThemeInternal } from '../../internal/themes/DefaultTheme';\n\nimport { Theme, ThemeIn } from './Theme';\n\nexport class ThemeFactory {\n  public static create<T extends {}>(theme: ThemeIn & T, baseTheme?: Theme): Readonly<Theme & T> {\n    const base = baseTheme || DefaultThemeInternal;\n    return this.constructTheme(base, theme);\n  }\n\n  public static overrideDefaultTheme(theme: ThemeIn) {\n    Object.keys(theme).forEach((variableName) => {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, variableName)!;\n      Object.defineProperty(DefaultThemeInternal, variableName, descriptor);\n    });\n  }\n\n  public static getKeys<T extends Theme>(theme: T) {\n    const keys: Array<keyof T> = [];\n    while (theme != null) {\n      (Object.keys(theme) as Array<keyof T>).forEach((key) => {\n        if (!keys.includes(key)) {\n          keys.push(key);\n        }\n      });\n      theme = Object.getPrototypeOf(theme);\n    }\n    return keys.sort();\n  }\n\n  private static constructTheme(base: Theme, theme: ThemeIn) {\n    const newTheme = Object.create(base);\n    Object.keys(theme).forEach((propName) => {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, propName)!;\n      Object.defineProperty(newTheme, propName, descriptor);\n    });\n\n    return Object.freeze(newTheme);\n  }\n}\n"]}

package/cjs/lib/theming/ThemeHelpers.d.ts

@@ -0,0 +1,5 @@
+import { Theme, ThemeIn } from './Theme';
+export declare const exposeGetters: <T extends object>(theme: T) => T;
+export declare const REACT_UI_DARK_THEME_KEY = "__IS_REACT_UI_DARK_THEME__";
+export declare const isDarkTheme: (theme: Theme | ThemeIn) => boolean;
+export declare const markAsDarkTheme: <T extends object>(theme: T) => T;

package/cjs/lib/theming/ThemeHelpers.js

@@ -0,0 +1,31 @@
+"use strict";exports.__esModule = true;exports.markAsDarkTheme = exports.isDarkTheme = exports.REACT_UI_DARK_THEME_KEY = exports.exposeGetters = void 0;
+
+var exposeGetters = function exposeGetters(theme) {
+  var descriptors = Object.getOwnPropertyDescriptors(theme);
+  Object.keys(descriptors).forEach(function (key) {
+    var descriptor = descriptors[key];
+    if (typeof descriptor.get === 'function' && descriptor.configurable) {
+      descriptor.enumerable = true;
+      Object.defineProperty(theme, key, descriptor);
+    }
+  });
+  return theme;
+};exports.exposeGetters = exposeGetters;
+
+var REACT_UI_DARK_THEME_KEY = '__IS_REACT_UI_DARK_THEME__';exports.REACT_UI_DARK_THEME_KEY = REACT_UI_DARK_THEME_KEY;
+
+var isDarkTheme = function isDarkTheme(theme) {
+  //@ts-ignore
+  return theme[REACT_UI_DARK_THEME_KEY] === true;
+};exports.isDarkTheme = isDarkTheme;
+
+var markAsDarkTheme = function markAsDarkTheme(theme) {var _Object$create;
+  return Object.create(theme, (_Object$create = {}, _Object$create[
+  REACT_UI_DARK_THEME_KEY] = {
+    value: true,
+    writable: false,
+    enumerable: false,
+    configurable: false }, _Object$create));
+
+
+};exports.markAsDarkTheme = markAsDarkTheme;

package/cjs/lib/theming/ThemeHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ThemeHelpers.ts"],"names":["exposeGetters","theme","descriptors","Object","getOwnPropertyDescriptors","keys","forEach","key","descriptor","get","configurable","enumerable","defineProperty","REACT_UI_DARK_THEME_KEY","isDarkTheme","markAsDarkTheme","create","value","writable"],"mappings":";;AAEO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAmBC,KAAnB,EAAmC;AAC9D,MAAMC,WAAW,GAAGC,MAAM,CAACC,yBAAP,CAAiCH,KAAjC,CAApB;AACAE,EAAAA,MAAM,CAACE,IAAP,CAAYH,WAAZ,EAAyBI,OAAzB,CAAiC,UAACC,GAAD,EAAS;AACxC,QAAMC,UAAU,GAAGN,WAAW,CAACK,GAAD,CAA9B;AACA,QAAI,OAAOC,UAAU,CAACC,GAAlB,KAA0B,UAA1B,IAAwCD,UAAU,CAACE,YAAvD,EAAqE;AACnEF,MAAAA,UAAU,CAACG,UAAX,GAAwB,IAAxB;AACAR,MAAAA,MAAM,CAACS,cAAP,CAAsBX,KAAtB,EAA6BM,GAA7B,EAAkCC,UAAlC;AACD;AACF,GAND;AAOA,SAAOP,KAAP;AACD,CAVM,C;;AAYA,IAAMY,uBAAuB,GAAG,4BAAhC,C;;AAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACb,KAAD,EAAqC;AAC9D;AACA,SAAOA,KAAK,CAACY,uBAAD,CAAL,KAAmC,IAA1C;AACD,CAHM,C;;AAKA,IAAME,eAAe,GAAG,SAAlBA,eAAkB,CAAmBd,KAAnB,EAAmC;AAChE,SAAOE,MAAM,CAACa,MAAP,CAAcf,KAAd;AACJY,EAAAA,uBADI,IACsB;AACzBI,IAAAA,KAAK,EAAE,IADkB;AAEzBC,IAAAA,QAAQ,EAAE,KAFe;AAGzBP,IAAAA,UAAU,EAAE,KAHa;AAIzBD,IAAAA,YAAY,EAAE,KAJW,EADtB,kBAAP;;;AAQD,CATM,C","sourcesContent":["import { Theme, ThemeIn } from './Theme';\n\nexport const exposeGetters = <T extends object>(theme: T): T => {\n  const descriptors = Object.getOwnPropertyDescriptors(theme);\n  Object.keys(descriptors).forEach((key) => {\n    const descriptor = descriptors[key];\n    if (typeof descriptor.get === 'function' && descriptor.configurable) {\n      descriptor.enumerable = true;\n      Object.defineProperty(theme, key, descriptor);\n    }\n  });\n  return theme;\n};\n\nexport const REACT_UI_DARK_THEME_KEY = '__IS_REACT_UI_DARK_THEME__';\n\nexport const isDarkTheme = (theme: Theme | ThemeIn): boolean => {\n  //@ts-ignore\n  return theme[REACT_UI_DARK_THEME_KEY] === true;\n};\n\nexport const markAsDarkTheme = <T extends object>(theme: T): T => {\n  return Object.create(theme, {\n    [REACT_UI_DARK_THEME_KEY]: {\n      value: true,\n      writable: false,\n      enumerable: false,\n      configurable: false,\n    },\n  });\n};\n"]}

package/cjs/lib/theming/themes/DarkTheme.d.ts

@@ -0,0 +1 @@
+export declare const DARK_THEME: Readonly<Readonly<typeof import("../../../internal/themes/DefaultTheme").DefaultTheme>>;

package/cjs/lib/theming/themes/DarkTheme.js

@@ -0,0 +1,5 @@
+"use strict";exports.__esModule = true;exports.DARK_THEME = void 0;var _DarkTheme = require("../../../internal/themes/DarkTheme");
+var _ThemeFactory = require("../ThemeFactory");
+var _ThemeHelpers = require("../ThemeHelpers");
+
+var DARK_THEME = _ThemeFactory.ThemeFactory.create({}, (0, _ThemeHelpers.markAsDarkTheme)(_DarkTheme.DarkThemeInternal));exports.DARK_THEME = DARK_THEME;

package/cjs/lib/theming/themes/DarkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DarkTheme.ts"],"names":["DARK_THEME","ThemeFactory","create","DarkThemeInternal"],"mappings":"mEAAA;AACA;AACA;;AAEO,IAAMA,UAAU,GAAGC,2BAAaC,MAAb,CAAoB,EAApB,EAAwB,mCAAgBC,4BAAhB,CAAxB,CAAnB,C","sourcesContent":["import { DarkThemeInternal } from '../../../internal/themes/DarkTheme';\nimport { ThemeFactory } from '../ThemeFactory';\nimport { markAsDarkTheme } from '../ThemeHelpers';\n\nexport const DARK_THEME = ThemeFactory.create({}, markAsDarkTheme(DarkThemeInternal));\n"]}

package/cjs/lib/theming/themes/DefaultTheme.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_THEME: Readonly<Readonly<typeof import("../../../internal/themes/DefaultTheme").DefaultTheme>>;

package/cjs/lib/theming/themes/DefaultTheme.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.DEFAULT_THEME = void 0;var _DefaultTheme = require("../../../internal/themes/DefaultTheme");
+var _ThemeFactory = require("../ThemeFactory");
+
+var DEFAULT_THEME = _ThemeFactory.ThemeFactory.create({}, _DefaultTheme.DefaultThemeInternal);exports.DEFAULT_THEME = DEFAULT_THEME;

package/cjs/lib/theming/themes/DefaultTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DefaultTheme.ts"],"names":["DEFAULT_THEME","ThemeFactory","create","DefaultThemeInternal"],"mappings":"sEAAA;AACA;;AAEO,IAAMA,aAAa,GAAGC,2BAAaC,MAAb,CAAoB,EAApB,EAAwBC,kCAAxB,CAAtB,C","sourcesContent":["import { DefaultThemeInternal } from '../../../internal/themes/DefaultTheme';\nimport { ThemeFactory } from '../ThemeFactory';\n\nexport const DEFAULT_THEME = ThemeFactory.create({}, DefaultThemeInternal);\n"]}

package/cjs/lib/theming/themes/DefaultTheme8pxOld.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_THEME_8PX_OLD: Readonly<Readonly<typeof import("../../../internal/themes/DefaultTheme").DefaultTheme> & typeof import("../../../internal/themes/NotFlat").NotFlatTheme>;

package/cjs/lib/theming/themes/DefaultTheme8pxOld.js

@@ -0,0 +1,8 @@
+"use strict";exports.__esModule = true;exports.DEFAULT_THEME_8PX_OLD = void 0;var _ThemeFactory = require("../ThemeFactory");
+var _NotFlat = require("../../../internal/themes/NotFlat");
+var _OldColors = require("../../../internal/themes/OldColors");
+var _DefaultTheme = require("../../../internal/themes/DefaultTheme");
+
+var DEFAULT_THEME_8PX_OLD = _ThemeFactory.ThemeFactory.create(
+_NotFlat.NotFlatThemeInternal,
+_ThemeFactory.ThemeFactory.create(_OldColors.OldColorsThemeInternal, _DefaultTheme.DefaultThemeInternal));exports.DEFAULT_THEME_8PX_OLD = DEFAULT_THEME_8PX_OLD;

package/cjs/lib/theming/themes/DefaultTheme8pxOld.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DefaultTheme8pxOld.ts"],"names":["DEFAULT_THEME_8PX_OLD","ThemeFactory","create","NotFlatThemeInternal","OldColorsThemeInternal","DefaultThemeInternal"],"mappings":"8EAAA;AACA;AACA;AACA;;AAEO,IAAMA,qBAAqB,GAAGC,2BAAaC,MAAb;AACnCC,6BADmC;AAEnCF,2BAAaC,MAAb,CAAoBE,iCAApB,EAA4CC,kCAA5C,CAFmC,CAA9B,C","sourcesContent":["import { ThemeFactory } from '../ThemeFactory';\nimport { NotFlatThemeInternal } from '../../../internal/themes/NotFlat';\nimport { OldColorsThemeInternal } from '../../../internal/themes/OldColors';\nimport { DefaultThemeInternal } from '../../../internal/themes/DefaultTheme';\n\nexport const DEFAULT_THEME_8PX_OLD = ThemeFactory.create(\n  NotFlatThemeInternal,\n  ThemeFactory.create(OldColorsThemeInternal, DefaultThemeInternal),\n);\n"]}

package/cjs/lib/theming/themes/DefaultThemeMobile.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_THEME_MOBILE: Readonly<Readonly<typeof import("../../../internal/themes/DefaultTheme").DefaultTheme> & {
+    mobileMediaQuery: string;
+}>;

package/cjs/lib/theming/themes/DefaultThemeMobile.js

@@ -0,0 +1,9 @@
+"use strict";exports.__esModule = true;exports.DEFAULT_THEME_MOBILE = void 0;var _ThemeFactory = require("../ThemeFactory");
+
+var _DefaultTheme = require("./DefaultTheme");
+
+var DEFAULT_THEME_MOBILE = _ThemeFactory.ThemeFactory.create(
+{
+  mobileMediaQuery: '(max-width: 576px)' },
+
+_DefaultTheme.DEFAULT_THEME);exports.DEFAULT_THEME_MOBILE = DEFAULT_THEME_MOBILE;

package/cjs/lib/theming/themes/DefaultThemeMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DefaultThemeMobile.ts"],"names":["DEFAULT_THEME_MOBILE","ThemeFactory","create","mobileMediaQuery","DEFAULT_THEME"],"mappings":"6EAAA;;AAEA;;AAEO,IAAMA,oBAAoB,GAAGC,2BAAaC,MAAb;AAClC;AACEC,EAAAA,gBAAgB,EAAE,oBADpB,EADkC;;AAIlCC,2BAJkC,CAA7B,C","sourcesContent":["import { ThemeFactory } from '../ThemeFactory';\n\nimport { DEFAULT_THEME } from './DefaultTheme';\n\nexport const DEFAULT_THEME_MOBILE = ThemeFactory.create(\n  {\n    mobileMediaQuery: '(max-width: 576px)',\n  },\n  DEFAULT_THEME,\n);\n"]}

package/cjs/lib/theming/themes/FlatTheme8pxOld.d.ts

@@ -0,0 +1 @@
+export declare const FLAT_THEME_8PX_OLD: Readonly<Readonly<typeof import("../../../internal/themes/DefaultTheme").DefaultTheme> & typeof import("../../../internal/themes/OldColors").OldColorsTheme>;

package/cjs/lib/theming/themes/FlatTheme8pxOld.js

@@ -0,0 +1,5 @@
+"use strict";exports.__esModule = true;exports.FLAT_THEME_8PX_OLD = void 0;var _ThemeFactory = require("../ThemeFactory");
+var _OldColors = require("../../../internal/themes/OldColors");
+var _DefaultTheme = require("../../../internal/themes/DefaultTheme");
+
+var FLAT_THEME_8PX_OLD = _ThemeFactory.ThemeFactory.create(_OldColors.OldColorsThemeInternal, _DefaultTheme.DefaultThemeInternal);exports.FLAT_THEME_8PX_OLD = FLAT_THEME_8PX_OLD;

package/cjs/lib/theming/themes/FlatTheme8pxOld.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FlatTheme8pxOld.ts"],"names":["FLAT_THEME_8PX_OLD","ThemeFactory","create","OldColorsThemeInternal","DefaultThemeInternal"],"mappings":"2EAAA;AACA;AACA;;AAEO,IAAMA,kBAAkB,GAAGC,2BAAaC,MAAb,CAAoBC,iCAApB,EAA4CC,kCAA5C,CAA3B,C","sourcesContent":["import { ThemeFactory } from '../ThemeFactory';\nimport { OldColorsThemeInternal } from '../../../internal/themes/OldColors';\nimport { DefaultThemeInternal } from '../../../internal/themes/DefaultTheme';\n\nexport const FLAT_THEME_8PX_OLD = ThemeFactory.create(OldColorsThemeInternal, DefaultThemeInternal);\n"]}