@skbkontur/react-ui 6.4.6-b246a.0 → 6.4.7-25ce4.0

package/lib/styles/UiFont.css.js

@@ -0,0 +1,2 @@
+
+export var UI_FONT_NAME = 'ui';

package/lib/styles/UiFont.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiFont.css.js","sourceRoot":"","sources":["UiFont.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,IAAM,YAAY,GAAG,IAAI,CAAC;AAEjC,IAAM,WAAW,GACf,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,oHAAoH;IACpH,wEAAwE,CAAC;AAE3E,mHAAmH;AACnH,cAAc,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,qCAA8B,WAAW,sBAAmB,EAAE,CAAC,CAAC","sourcesContent":["import { globalFontFace } from '@vanilla-extract/css';\n\nexport const UI_FONT_NAME = 'ui';\n\nconst uiFontWoff2 =\n  'd09GMk9UVE8AAAM0AAkAAAAABOwAAALtAAEZmQAAAAAAAAAAAAAAAAAAAAAAAAAADYNHBmAATAE2AiQDEAQGBYJHByAbSQTIHodxLLFkxvCafPI36w' +\n  'UCtbTOiShd0zOVLzXnVD3Mprf8381PJXqgZb2jFq3JN9rLLMKAEi2lMG8HzqkL4rRGmlAlSFHfIhL0YtdjFEbbAPDD2JUXUURAJRBjl6txH54vKxuX' +\n  'HP/FwmZOmLmImVsys1HRh8nnGD0jMldklFN+ebnk32ymBCATYs9eUNfDZcK63rHvdC91WW2od/d1rYdytB4ACDwoN9HVhJLspIz5RfRs95ndG4zTxu' +\n  '3dG6+tN0Ly/p5bjC179u3ZfKvxOMDp6+i3YZ4iUvhUwYyOfKYo5+ZXruz7oHVcM0dmlNMivlyinulTxYFn2m7b8zNK/G7eqhMX4hso3Eu3ilY8XuO5' +\n  'eCuRyxYDne7OaZTk7IwtqKJCx5F9atBVXuFM5GzWGqcZPOaxIRi9+roWJEcV4/H+ZIO36ojjbYJxXeN+4MY/7jDOb7pm2ILwjHq8P9XgLTrito87qk' +\n  'Ef7CLmfwstiPJxdjqjM48An8/cQb1yxj7tl46qhw/xmMX4tAfkDF/mP/g07YE4zeY5k9ycI+PNf7K5QjTQzkXUEz2Dl5pzl/LqS9U8KxsELOaYwly3' +\n  'nS/t5+cy9nI2c4OSS2QmFNilyVIzAGr660kbyLBgcFdC+l4OaAguNq6ZufAiH9rKWzMjgPsMoflAVgCABOkcgHxIlAIygBC0iN9OkQDACXsjQagsjb' +\n  'Z4LKu1EndYL6271lqrPVQNEX1Ksi/K1yM4o6035S9k+QMAvEqtx/19iZkRySVvBWCbVeohr26j1AwKEiTXeAUAoKWtE36AzEVifNwB1ANQAG6sbhkQ' +\n  'OGevBSTY4ETLtAxRkA1+WD0mg1AHCEIoDhEJHqQiMkqg5jKtRxTo6LesomUfNP1jDP2SljAv944saTKsxwF9qtLkKpVVq96UW3Q0xgCOHAtWMIxYiB' +\n  'HqxBI7OpBSCWUQhm52JqMxLGRwwwl9nBSD9eoApB6rAhMqLNTYSkMdMgw+qyIwAAAAAA==';\n\n// Шрифт `ui` объявляется здесь один раз: при вызове из нескольких модулей @font-face попадал в react-ui.css дважды\nglobalFontFace(UI_FONT_NAME, { src: `url(data:font/woff2;base64,${uiFontWoff2}) format('woff2')` });\n"]}

package/lib/styles/getLabGrotesqueBaselineCompensation.d.ts

@@ -1 +1,6 @@
-export declare const getLabGrotesqueBaselineCompensation: (fontSize: number, compensation: number, isChrome: boolean, isFirefox: boolean) => number;
+/**
+ * Поправка базовой линии Lab Grotesque для стилей, собираемых при сборке: условие по размеру
+ * шрифта считается для значения по умолчанию, браузер — множителем из LabGrotesqueBaseline.css.ts.
+ */
+export declare const getLabGrotesqueBaselineCompensationCss: (fontSize: string, compensation: string) => string;
+export declare const getToggleBaselineCompensationCss: (fontSize: string, compensation: string) => string;

package/lib/styles/getLabGrotesqueBaselineCompensation.js

@@ -1,10 +1,27 @@
-export var getLabGrotesqueBaselineCompensation = function (fontSize, compensation, isChrome, isFirefox) {
-    if (fontSize < 16 && !isChrome) {
-        return compensation;
+// `var(--k-x, var(--k-y, 14px))` -> 14
+var defaultPx = function (value) { var _a, _b; return parseInt((_b = (_a = value.match(/(\d+(?:\.\d+)?)px\)*\s*$/)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : value); };
+/**
+ * Поправка базовой линии Lab Grotesque для стилей, собираемых при сборке: условие по размеру
+ * шрифта считается для значения по умолчанию, браузер — множителем из LabGrotesqueBaseline.css.ts.
+ */
+export var getLabGrotesqueBaselineCompensationCss = function (fontSize, compensation) {
+    var size = defaultPx(fontSize);
+    var factor;
+    if (size < 16) {
+        factor = 'var(--k-baseline-lt16, 1)';
     }
-    else if ((fontSize === 16 && isChrome) || (fontSize === 18 && (isFirefox || isChrome))) {
-        return -compensation;
+    else if (size === 16) {
+        factor = 'var(--k-baseline-16, 0)';
     }
-    return 0;
+    else if (size === 18) {
+        factor = 'var(--k-baseline-18, 0)';
+    }
+    else {
+        return '0px';
+    }
+    return "calc(".concat(factor, " * ").concat(compensation, " * 1px)");
+};
+export var getToggleBaselineCompensationCss = function (fontSize, compensation) {
+    return defaultPx(fontSize) <= 16 ? "calc(var(--k-baseline-toggle, 0) * ".concat(compensation, " * 1px)") : '0px';
 };
 //# sourceMappingURL=getLabGrotesqueBaselineCompensation.js.map

package/lib/styles/getLabGrotesqueBaselineCompensation.js.map

@@ -1 +1 @@
-{"version":3,"file":"getLabGrotesqueBaselineCompensation.js","sourceRoot":"","sources":["getLabGrotesqueBaselineCompensation.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,mCAAmC,GAAG,UACjD,QAAgB,EAChB,YAAoB,EACpB,QAAiB,EACjB,SAAkB;IAElB,IAAI,QAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC/B,OAAO,YAAY,CAAC;IACtB,CAAC;SAAM,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,KAAK,EAAE,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC;QACzF,OAAO,CAAC,YAAY,CAAC;IACvB,CAAC;IAED,OAAO,CAAC,CAAC;AACX,CAAC,CAAC","sourcesContent":["export const getLabGrotesqueBaselineCompensation = (\n  fontSize: number,\n  compensation: number,\n  isChrome: boolean,\n  isFirefox: boolean,\n): number => {\n  if (fontSize < 16 && !isChrome) {\n    return compensation;\n  } else if ((fontSize === 16 && isChrome) || (fontSize === 18 && (isFirefox || isChrome))) {\n    return -compensation;\n  }\n\n  return 0;\n};\n"]}
+{"version":3,"file":"getLabGrotesqueBaselineCompensation.js","sourceRoot":"","sources":["getLabGrotesqueBaselineCompensation.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,IAAM,SAAS,GAAG,UAAC,KAAa,gBAAa,OAAA,QAAQ,CAAC,MAAA,MAAA,KAAK,CAAC,KAAK,CAAC,0BAA0B,CAAC,0CAAG,CAAC,CAAC,mCAAI,KAAK,CAAC,CAAA,EAAA,CAAC;AAE7G;;;GAGG;AACH,MAAM,CAAC,IAAM,sCAAsC,GAAG,UAAC,QAAgB,EAAE,YAAoB;IAC3F,IAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,MAAM,CAAC;IACX,IAAI,IAAI,GAAG,EAAE,EAAE,CAAC;QACd,MAAM,GAAG,2BAA2B,CAAC;IACvC,CAAC;SAAM,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;QACvB,MAAM,GAAG,yBAAyB,CAAC;IACrC,CAAC;SAAM,IAAI,IAAI,KAAK,EAAE,EAAE,CAAC;QACvB,MAAM,GAAG,yBAAyB,CAAC;IACrC,CAAC;SAAM,CAAC;QACN,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,eAAQ,MAAM,gBAAM,YAAY,YAAS,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gCAAgC,GAAG,UAAC,QAAgB,EAAE,YAAoB;IACrF,OAAA,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,6CAAsC,YAAY,YAAS,CAAC,CAAC,CAAC,KAAK;AAA/F,CAA+F,CAAC","sourcesContent":["// `var(--k-x, var(--k-y, 14px))` -> 14\nconst defaultPx = (value: string): number => parseInt(value.match(/(\\d+(?:\\.\\d+)?)px\\)*\\s*$/)?.[1] ?? value);\n\n/**\n * Поправка базовой линии Lab Grotesque для стилей, собираемых при сборке: условие по размеру\n * шрифта считается для значения по умолчанию, браузер — множителем из LabGrotesqueBaseline.css.ts.\n */\nexport const getLabGrotesqueBaselineCompensationCss = (fontSize: string, compensation: string): string => {\n  const size = defaultPx(fontSize);\n  let factor;\n  if (size < 16) {\n    factor = 'var(--k-baseline-lt16, 1)';\n  } else if (size === 16) {\n    factor = 'var(--k-baseline-16, 0)';\n  } else if (size === 18) {\n    factor = 'var(--k-baseline-18, 0)';\n  } else {\n    return '0px';\n  }\n  return `calc(${factor} * ${compensation} * 1px)`;\n};\n\nexport const getToggleBaselineCompensationCss = (fontSize: string, compensation: string): string =>\n  defaultPx(fontSize) <= 16 ? `calc(var(--k-baseline-toggle, 0) * ${compensation} * 1px)` : '0px';\n"]}

package/lib/theming/Emotion.d.ts

@@ -1,15 +1,6 @@
 import type { Emotion } from '@emotion/css/create-instance';
-import type { Theme } from './Theme.js';
-export declare const REACT_UI_PREFIX: string;
-export declare const getEmotion: ({ key, container, nonce, }: {
-    container: HTMLElement;
-    key?: string;
-    nonce?: string;
-}) => Emotion;
-export interface StylesObject {
-    [className: string]: (() => string) | ((t: Theme) => string);
-}
-export type StylesGetter<S> = (emotion: Emotion) => S;
-export declare const memoizeStyle: <S extends StylesObject>(styles: S) => S;
-export declare const memoizeGetStyles: <S extends StylesObject>(getStyles: StylesGetter<S>) => StylesGetter<S>;
-export declare const prefix: (component: string, app?: string) => <T extends Record<string, string>>(classes: T) => T;
+import { prefix, REACT_UI_PREFIX } from '../prefix.js';
+export type { Emotion };
+export { prefix, REACT_UI_PREFIX };
+export declare const getEmotion: (container?: HTMLElement) => Emotion;
+export declare const emotion: Emotion;

package/lib/theming/Emotion.js

@@ -1,72 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import createEmotion from '@emotion/css/create-instance';
-import extraScopePlugin from 'stylis-plugin-extra-scope';
-import { Upgrade } from '../Upgrades.js';
-export var REACT_UI_PREFIX = Upgrade.getSpecificityClassName();
-var scope = new Array(Upgrade.getSpecificityLevel()).fill(".".concat(REACT_UI_PREFIX)).join('');
-export var getEmotion = function (_a) {
-    var _b = _a.key, key = _b === void 0 ? REACT_UI_PREFIX : _b, container = _a.container, nonce = _a.nonce;
-    return createEmotion({
-        key: key,
-        prepend: true,
-        stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,
-        container: container,
-        nonce: nonce,
+import { prefix, REACT_UI_PREFIX } from '../prefix.js';
+export { prefix, REACT_UI_PREFIX };
+// ponytail: мост только для демо — react-ui-addons, side-menu, empty-state и mass-actions-panel строят стили
+// на Emotion из контекста react-ui. Убрать, когда аддоны переедут на сборочный CSS.
+// Экземпляр создаётся при первом обращении, поэтому без таких библиотек <style> в документе не появляется.
+export var getEmotion = function (container) {
+    var instance;
+    return new Proxy({}, {
+        get: function (_, property) {
+            return (instance !== null && instance !== void 0 ? instance : (instance = createEmotion({ key: REACT_UI_PREFIX, prepend: true, container: container })))[property];
+        },
     });
 };
-function isZeroArgs(fn) {
-    return fn.length === 0;
-}
-var memoize = function (fn) {
-    if (isZeroArgs(fn)) {
-        var isCalled_1 = false;
-        var result_1;
-        return function () {
-            if (!isCalled_1) {
-                isCalled_1 = true;
-                result_1 = fn();
-            }
-            return result_1;
-        };
-    }
-    var cache = new WeakMap();
-    return function (arg) {
-        if (!cache.has(arg)) {
-            cache.set(arg, fn(arg));
-        }
-        return cache.get(arg);
-    };
-};
-export var memoizeStyle = function (styles) {
-    Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className])); });
-    return styles;
-};
-export var memoizeGetStyles = function (getStyles) {
-    var stylesCache = new WeakMap();
-    return function (emotion) {
-        if (!stylesCache.has(emotion)) {
-            stylesCache.set(emotion, memoizeStyle(getStyles(emotion)));
-        }
-        return stylesCache.get(emotion);
-    };
-};
-export var prefix = function (component, app) {
-    if (app === void 0) { app = REACT_UI_PREFIX; }
-    return function (classes) {
-        return Object.keys(classes).reduce(function (acc, key) {
-            var _a;
-            return __assign(__assign({}, acc), (_a = {}, _a[key] = "".concat(app, "-").concat(component, "-").concat(classes[key]), _a));
-        }, {});
-    };
-};
+export var emotion = getEmotion();
 //# sourceMappingURL=Emotion.js.map

package/lib/theming/Emotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emotion.js","sourceRoot":"","sources":["Emotion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport createEmotion from '@emotion/css/create-instance';\nimport extraScopePlugin from 'stylis-plugin-extra-scope';\n\nimport { Upgrade } from '../Upgrades.js';\nimport type { AnyObject, FunctionWithParams } from '../utils.js';\nimport type { Theme } from './Theme.js';\n\nexport const REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\nconst scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');\n\nexport const getEmotion = ({\n  key = REACT_UI_PREFIX,\n  container,\n  nonce,\n}: {\n  container: HTMLElement;\n  key?: string;\n  nonce?: string;\n}): Emotion =>\n  createEmotion({\n    key,\n    prepend: true,\n    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,\n    container,\n    nonce,\n  });\n\nfunction isZeroArgs<R, T extends FunctionWithParams<R>>(fn: T | FunctionWithParams<R>): fn is () => R {\n  return fn.length === 0;\n}\n\nconst memoize = <A extends AnyObject, 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)) {\n      cache.set(arg, fn(arg));\n    }\n\n    return cache.get(arg);\n  };\n};\n\nexport interface StylesObject {\n  [className: string]: (() => string) | ((t: Theme) => string);\n}\n\nexport type StylesGetter<S> = (emotion: Emotion) => S;\n\nexport const memoizeStyle = <S extends StylesObject>(styles: S): 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 memoizeGetStyles = <S extends StylesObject>(getStyles: StylesGetter<S>): StylesGetter<S> => {\n  const stylesCache = new WeakMap<Emotion, S>();\n  return (emotion: Emotion): S => {\n    if (!stylesCache.has(emotion)) {\n      stylesCache.set(emotion, memoizeStyle(getStyles(emotion)));\n    }\n\n    return stylesCache.get(emotion) as S;\n  };\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"]}
+{"version":3,"file":"Emotion.js","sourceRoot":"","sources":["Emotion.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAEnC,6GAA6G;AAC7G,oFAAoF;AACpF,2GAA2G;AAC3G,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,SAAuB;IAChD,IAAI,QAA6B,CAAC;IAClC,OAAO,IAAI,KAAK,CAAC,EAAa,EAAE;QAC9B,GAAG,EAAE,UAAC,CAAC,EAAE,QAAQ;YACf,OAAA,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,IAAR,QAAQ,GAAK,aAAa,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,WAAA,EAAE,CAAC,EAAC,CAAC,QAAyB,CAAC;QAA3G,CAA2G;KAC9G,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG,UAAU,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport createEmotion from '@emotion/css/create-instance';\n\nimport { prefix, REACT_UI_PREFIX } from '../prefix.js';\n\nexport type { Emotion };\nexport { prefix, REACT_UI_PREFIX };\n\n// ponytail: мост только для демо — react-ui-addons, side-menu, empty-state и mass-actions-panel строят стили\n// на Emotion из контекста react-ui. Убрать, когда аддоны переедут на сборочный CSS.\n// Экземпляр создаётся при первом обращении, поэтому без таких библиотек <style> в документе не появляется.\nexport const getEmotion = (container?: HTMLElement): Emotion => {\n  let instance: Emotion | undefined;\n  return new Proxy({} as Emotion, {\n    get: (_, property) =>\n      (instance ??= createEmotion({ key: REACT_UI_PREFIX, prepend: true, container }))[property as keyof Emotion],\n  });\n};\n\nexport const emotion = getEmotion();\n"]}

package/lib/theming/ThemeFactory.d.ts

@@ -1,17 +1,8 @@
 import type { NoInfer } from '../utils.js';
 import type { Theme, ThemeIn } from './Theme.js';
 export declare class ThemeFactory {
-    /**
-     * The default theme created with Object.create() is needed for the "overrideBaseTheme" to work.
-     *
-     * Themes should be frozen objects. But it is not possible to define properties on frozen objects.
-     * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,
-     * but allows to apply Object.defineProperty to his own properties.
-     */
-    private static readonly overridableDefaultTheme;
-    static get defaultTheme(): Theme;
+    static readonly defaultTheme: Theme;
     static create<T>(theme: ThemeIn & NoInfer<T>, baseTheme?: Theme): Readonly<Theme & NoInfer<T>>;
-    static overrideBaseTheme(theme: Theme): void;
     static getKeys<T extends Theme>(theme: T): Array<keyof T>;
     private static constructTheme;
 }

package/lib/theming/ThemeFactory.js

@@ -1,33 +1,12 @@
 import { isNonNullable } from '../utils.js';
-import { REACT_UI_THEME_MARKERS, findPropertyDescriptor } from './ThemeHelpers.js';
 import { LIGHT_THEME } from './themes/LightTheme.js';
 var ThemeFactory = /** @class */ (function () {
     function ThemeFactory() {
     }
-    Object.defineProperty(ThemeFactory, "defaultTheme", {
-        get: function () {
-            return this.overridableDefaultTheme;
-        },
-        enumerable: false,
-        configurable: true
-    });
     ThemeFactory.create = function (theme, baseTheme) {
         var base = baseTheme || this.defaultTheme;
         return this.constructTheme(base, theme);
     };
-    ThemeFactory.overrideBaseTheme = function (theme) {
-        var _this = this;
-        // copying theme variables
-        ThemeFactory.getKeys(this.defaultTheme).forEach(function (variableName) {
-            var descriptor = findPropertyDescriptor(theme, variableName);
-            Object.defineProperty(_this.defaultTheme, variableName, descriptor);
-        });
-        // copying theme markers
-        Object.values(REACT_UI_THEME_MARKERS).forEach(function (marker) {
-            var descriptor = findPropertyDescriptor(theme, marker.key);
-            Object.defineProperty(_this.defaultTheme, marker.key, descriptor);
-        });
-    };
     ThemeFactory.getKeys = function (theme) {
         var keys = [];
         while (isNonNullable(theme)) {
@@ -52,14 +31,7 @@ var ThemeFactory = /** @class */ (function () {
         });
         return Object.freeze(newTheme);
     };
-    /**
-     * The default theme created with Object.create() is needed for the "overrideBaseTheme" to work.
-     *
-     * Themes should be frozen objects. But it is not possible to define properties on frozen objects.
-     * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,
-     * but allows to apply Object.defineProperty to his own properties.
-     */
-    ThemeFactory.overridableDefaultTheme = Object.create(LIGHT_THEME);
+    ThemeFactory.defaultTheme = LIGHT_THEME;
     return ThemeFactory;
 }());
 export { ThemeFactory };

package/lib/theming/ThemeFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeFactory.js","sourceRoot":"","sources":["ThemeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;IAAA;IA4DA,CAAC;IAlDC,sBAAkB,4BAAY;aAA9B;YACE,OAAO,IAAI,CAAC,uBAAuB,CAAC;QACtC,CAAC;;;OAAA;IAEa,mBAAM,GAApB,UAAwB,KAA2B,EAAE,SAAiB;QACpE,IAAM,IAAI,GAAG,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC;QAC5C,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEa,8BAAiB,GAA/B,UAAgC,KAAY;QAA5C,iBAYC;QAXC,0BAA0B;QAC1B,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,UAAC,YAAY;YAC3D,IAAM,UAAU,GAAG,sBAAsB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAC/D,MAAM,CAAC,cAAc,CAAC,KAAI,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;QAEH,wBAAwB;QACxB,MAAM,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,UAAC,MAAM;YACnD,IAAM,UAAU,GAAG,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;YAC7D,MAAM,CAAC,cAAc,CAAC,KAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;QACnE,CAAC,CAAC,CAAC;IACL,CAAC;IAEa,oBAAO,GAArB,UAAuC,KAAQ;QAC7C,IAAM,IAAI,GAAmB,EAAE,CAAC;QAChC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAiB,CAAC,OAAO,CAAC,UAAC,GAAG;gBAC9C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC,CAAC,CAAC;YACH,yCAAyC;YACzC,6CAA6C;YAC7C,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEc,2BAAc,GAA7B,UAA8B,IAAW,EAAE,KAAc;QACvD,IAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,QAAQ;YAClC,IAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACpE,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IA1DD;;;;;;OAMG;IACqB,oCAAuB,GAAU,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAoDtF,mBAAC;CAAA,AA5DD,IA4DC;SA5DY,YAAY","sourcesContent":["import type { NoInfer } from '../utils.js';\nimport { isNonNullable } from '../utils.js';\nimport type { Theme, ThemeIn } from './Theme.js';\nimport { REACT_UI_THEME_MARKERS, findPropertyDescriptor } from './ThemeHelpers.js';\nimport { LIGHT_THEME } from './themes/LightTheme.js';\n\nexport class ThemeFactory {\n  /**\n   * The default theme created with Object.create() is needed for the \"overrideBaseTheme\" to work.\n   *\n   * Themes should be frozen objects. But it is not possible to define properties on frozen objects.\n   * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,\n   * but allows to apply Object.defineProperty to his own properties.\n   */\n  private static readonly overridableDefaultTheme: Theme = Object.create(LIGHT_THEME);\n\n  public static get defaultTheme(): Theme {\n    return this.overridableDefaultTheme;\n  }\n\n  public static create<T>(theme: ThemeIn & NoInfer<T>, baseTheme?: Theme): Readonly<Theme & NoInfer<T>> {\n    const base = baseTheme || this.defaultTheme;\n    return this.constructTheme(base, theme);\n  }\n\n  public static overrideBaseTheme(theme: Theme): void {\n    // copying theme variables\n    ThemeFactory.getKeys(this.defaultTheme).forEach((variableName) => {\n      const descriptor = findPropertyDescriptor(theme, variableName);\n      Object.defineProperty(this.defaultTheme, variableName, descriptor);\n    });\n\n    // copying theme markers\n    Object.values(REACT_UI_THEME_MARKERS).forEach((marker) => {\n      const descriptor = findPropertyDescriptor(theme, marker.key);\n      Object.defineProperty(this.defaultTheme, marker.key, descriptor);\n    });\n  }\n\n  public static getKeys<T extends Theme>(theme: T): Array<keyof T> {\n    const keys: Array<keyof T> = [];\n    while (isNonNullable(theme)) {\n      (Object.keys(theme) as typeof keys).forEach((key) => {\n        if (!keys.includes(key)) {\n          keys.push(key);\n        }\n      });\n      // TODO: Enable `no-param-reassign` rule.\n      // eslint-disable-next-line no-param-reassign\n      theme = Object.getPrototypeOf(theme);\n    }\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      if (descriptor) {\n        Object.defineProperty(newTheme, propName, descriptor);\n      }\n    });\n\n    return Object.freeze(newTheme);\n  }\n}\n"]}
+{"version":3,"file":"ThemeFactory.js","sourceRoot":"","sources":["ThemeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;IAAA;IAmCA,CAAC;IAhCe,mBAAM,GAApB,UAAwB,KAA2B,EAAE,SAAiB;QACpE,IAAM,IAAI,GAAG,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC;QAC5C,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEa,oBAAO,GAArB,UAAuC,KAAQ;QAC7C,IAAM,IAAI,GAAmB,EAAE,CAAC;QAChC,OAAO,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAiB,CAAC,OAAO,CAAC,UAAC,GAAG;gBAC9C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBACxB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC,CAAC,CAAC;YACH,yCAAyC;YACzC,6CAA6C;YAC7C,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;QAED,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEc,2BAAc,GAA7B,UAA8B,IAAW,EAAE,KAAc;QACvD,IAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,UAAC,QAAQ;YAClC,IAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACpE,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAjCsB,yBAAY,GAAU,WAAW,CAAC;IAkC3D,mBAAC;CAAA,AAnCD,IAmCC;SAnCY,YAAY","sourcesContent":["import type { NoInfer } from '../utils.js';\nimport { isNonNullable } from '../utils.js';\nimport type { Theme, ThemeIn } from './Theme.js';\nimport { LIGHT_THEME } from './themes/LightTheme.js';\n\nexport class ThemeFactory {\n  public static readonly defaultTheme: Theme = LIGHT_THEME;\n\n  public static create<T>(theme: ThemeIn & NoInfer<T>, baseTheme?: Theme): Readonly<Theme & NoInfer<T>> {\n    const base = baseTheme || this.defaultTheme;\n    return this.constructTheme(base, theme);\n  }\n\n  public static getKeys<T extends Theme>(theme: T): Array<keyof T> {\n    const keys: Array<keyof T> = [];\n    while (isNonNullable(theme)) {\n      (Object.keys(theme) as typeof keys).forEach((key) => {\n        if (!keys.includes(key)) {\n          keys.push(key);\n        }\n      });\n      // TODO: Enable `no-param-reassign` rule.\n      // eslint-disable-next-line no-param-reassign\n      theme = Object.getPrototypeOf(theme);\n    }\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      if (descriptor) {\n        Object.defineProperty(newTheme, propName, descriptor);\n      }\n    });\n\n    return Object.freeze(newTheme);\n  }\n}\n"]}

package/lib/theming/memoizeTheme.d.ts

@@ -0,0 +1,11 @@
+type Key = object | string | boolean | undefined;
+/**
+ * Запоминает производную тему по ссылкам на аргументы (объекты — в WeakMap, строки, флаги и `undefined` — в Map).
+ * Новый объект темы на каждый рендер промахивается мимо кеша `getThemeVars` и заставляет React сверять
+ * сотни ключей `style` на носителе, поэтому тема должна меняться только вместе со своими входами.
+ * Все входы функции обязаны быть её аргументами.
+ */
+export declare function memoizeTheme<Args extends Key[], R>(fn: (...args: Args) => R): (...args: Args) => R;
+/** `ThemeFactory.create(propsTheme, theme)` с памятью по ссылкам; без `propsTheme` — сама `theme`. */
+export declare const mergePropsTheme: (theme: Readonly<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass>, propsTheme?: Partial<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass> | undefined) => Readonly<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass>;
+export {};

package/lib/theming/memoizeTheme.js

@@ -0,0 +1,37 @@
+import { ThemeFactory } from './ThemeFactory.js';
+/**
+ * Запоминает производную тему по ссылкам на аргументы (объекты — в WeakMap, строки, флаги и `undefined` — в Map).
+ * Новый объект темы на каждый рендер промахивается мимо кеша `getThemeVars` и заставляет React сверять
+ * сотни ключей `style` на носителе, поэтому тема должна меняться только вместе со своими входами.
+ * Все входы функции обязаны быть её аргументами.
+ */
+export function memoizeTheme(fn) {
+    var root = {};
+    return function () {
+        var _a, _b;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var node = root;
+        for (var _c = 0, args_1 = args; _c < args_1.length; _c++) {
+            var arg = args_1[_c];
+            var isObject = typeof arg === 'object' && arg !== null;
+            var map = isObject ? ((_a = node.objects) !== null && _a !== void 0 ? _a : (node.objects = new WeakMap())) : ((_b = node.primitives) !== null && _b !== void 0 ? _b : (node.primitives = new Map()));
+            var next = map.get(arg);
+            if (!next) {
+                next = {};
+                map.set(arg, next);
+            }
+            node = next;
+        }
+        if (!node.hasValue) {
+            node.value = fn.apply(void 0, args);
+            node.hasValue = true;
+        }
+        return node.value;
+    };
+}
+/** `ThemeFactory.create(propsTheme, theme)` с памятью по ссылкам; без `propsTheme` — сама `theme`. */
+export var mergePropsTheme = memoizeTheme(function (theme, propsTheme) { return (propsTheme ? ThemeFactory.create(propsTheme, theme) : theme); });
+//# sourceMappingURL=memoizeTheme.js.map

package/lib/theming/memoizeTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoizeTheme.js","sourceRoot":"","sources":["memoizeTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjD;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAwB,EAAwB;IAC1E,IAAM,IAAI,GAAc,EAAE,CAAC;IAC3B,OAAO;;QAAC,cAAa;aAAb,UAAa,EAAb,qBAAa,EAAb,IAAa;YAAb,yBAAa;;QACnB,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI,EAAE,CAAC;YAApB,IAAM,GAAG,aAAA;YACZ,IAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,CAAC;YACzD,IAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAC,IAAI,CAAC,OAAO,oCAAZ,IAAI,CAAC,OAAO,GAAK,IAAI,OAAO,EAAE,EAAC,CAAC,CAAC,CAAC,OAAC,IAAI,CAAC,UAAU,oCAAf,IAAI,CAAC,UAAU,GAAK,IAAI,GAAG,EAAE,EAAC,CAAC;YAC1F,IAAI,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,GAAa,CAAC,CAAC;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,IAAI,GAAG,EAAE,CAAC;gBACV,GAAG,CAAC,GAAG,CAAC,GAAa,EAAE,IAAI,CAAC,CAAC;YAC/B,CAAC;YACD,IAAI,GAAG,IAAI,CAAC;QACd,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,EAAE,eAAI,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,OAAO,IAAI,CAAC,KAAU,CAAC;IACzB,CAAC,CAAC;AACJ,CAAC;AAED,sGAAsG;AACtG,MAAM,CAAC,IAAM,eAAe,GAAG,YAAY,CACzC,UAAC,KAAY,EAAE,UAAoB,IAAY,OAAA,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,UAAmB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAtE,CAAsE,CACtH,CAAC","sourcesContent":["import type { Theme, ThemeIn } from './Theme.js';\nimport { ThemeFactory } from './ThemeFactory.js';\n\ntype Key = object | string | boolean | undefined;\n\ninterface CacheNode {\n  objects?: WeakMap<object, CacheNode>;\n  primitives?: Map<unknown, CacheNode>;\n  hasValue?: boolean;\n  value?: unknown;\n}\n\n/**\n * Запоминает производную тему по ссылкам на аргументы (объекты — в WeakMap, строки, флаги и `undefined` — в Map).\n * Новый объект темы на каждый рендер промахивается мимо кеша `getThemeVars` и заставляет React сверять\n * сотни ключей `style` на носителе, поэтому тема должна меняться только вместе со своими входами.\n * Все входы функции обязаны быть её аргументами.\n */\nexport function memoizeTheme<Args extends Key[], R>(fn: (...args: Args) => R): (...args: Args) => R {\n  const root: CacheNode = {};\n  return (...args: Args): R => {\n    let node = root;\n    for (const arg of args) {\n      const isObject = typeof arg === 'object' && arg !== null;\n      const map = isObject ? (node.objects ??= new WeakMap()) : (node.primitives ??= new Map());\n      let next = map.get(arg as object);\n      if (!next) {\n        next = {};\n        map.set(arg as object, next);\n      }\n      node = next;\n    }\n    if (!node.hasValue) {\n      node.value = fn(...args);\n      node.hasValue = true;\n    }\n    return node.value as R;\n  };\n}\n\n/** `ThemeFactory.create(propsTheme, theme)` с памятью по ссылкам; без `propsTheme` — сама `theme`. */\nexport const mergePropsTheme = memoizeTheme(\n  (theme: Theme, propsTheme?: ThemeIn): Theme => (propsTheme ? ThemeFactory.create(propsTheme as Theme, theme) : theme),\n);\n"]}

package/lib/theming/themeVars.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+import type { Theme } from './Theme.js';
+import '../../theme-loader.js';
+export declare const themeVarName: (token: string) => string;
+/**
+ * Стили без переменных темы. Носитель кладёт их ребёнку в `props.style`, и если ребёнок — компонент,
+ * они доезжают до вложенного носителя: там они уже посчитаны заново, а старые значения мешали бы
+ * вложенной теме вернуть токен к значению по умолчанию. Чужие `--k-color-*` из палитры не трогаем.
+ */
+export declare const omitThemeVars: (style: React.CSSProperties | undefined) => React.CSSProperties;
+/**
+ * Тема, которую применил ближайший носитель выше по DOM (CommonWrapper, контейнер портала). Нужна, чтобы
+ * вложенная тема могла вернуть токен к значению по умолчанию: переменная предка иначе наследуется.
+ */
+export declare const ThemeCarrierContext: React.Context<Readonly<typeof import("../../internal/themes/BasicTheme.js").BasicThemeClass> | null>;
+/**
+ * Переменные, которыми тема отличается от темы носителя выше (без носителя — от темы по умолчанию: её значения
+ * уже зашиты в CSS запасными значениями `var(--k-x, <значение>)`). Токен, вернувшийся к значению по умолчанию,
+ * сбрасывается в `initial`: иначе наследовалась бы переменная предка.
+ */
+export declare const getThemeVars: (theme: Theme, parent?: Theme | null) => React.CSSProperties;
+/**
+ * Копия переменных темы для theme-loader.js: в серверном HTML атрибут `style` блокирует строгий CSP. Только на
+ * сервере — на клиенте React ставит style через CSSOM, а лишний атрибут помешал бы гидрации.
+ */
+export declare const getServerThemeVarsAttr: (vars: React.CSSProperties) => string | undefined;
+/**
+ * Значение токена по умолчанию: снимает обёртку `var(--k-<токен>, <значение темы>)` один раз. Значение темы
+ * само может быть `var(--k-color-..., #fff)` из палитры — его не раскрываем: master сравнивал именно эти строки.
+ * Для условий в стилях, которые вычисляются при сборке.
+ */
+export declare const tokenDefault: (value: string) => string;
+/**
+ * Пустые по умолчанию токены, которые тема задала. Их объявления в CSS стоят под
+ * `@scope ([data-k-set~="<токен>"])` (см. whenThemeSets в vanilla.ts), чтобы без темы отбрасываться, как раньше.
+ */
+export declare const getThemeSetTokens: (theme: Theme) => string;

package/lib/theming/themeVars.js

@@ -0,0 +1,121 @@
+import { createContext } from 'react';
+import { LIGHT_THEME } from './themes/LightTheme.js';
+// переносит тему из серверного HTML под строгим CSP до гидрации; модуль грузят все носители темы
+import '../../theme-loader.js';
+var THEME_VAR_PREFIX = '--k-';
+export var themeVarName = function (token) { return "".concat(THEME_VAR_PREFIX).concat(token); };
+var cache = new WeakMap();
+var themeVarNames = new Set();
+for (var key in LIGHT_THEME) {
+    themeVarNames.add(themeVarName(key));
+}
+/**
+ * Стили без переменных темы. Носитель кладёт их ребёнку в `props.style`, и если ребёнок — компонент,
+ * они доезжают до вложенного носителя: там они уже посчитаны заново, а старые значения мешали бы
+ * вложенной теме вернуть токен к значению по умолчанию. Чужие `--k-color-*` из палитры не трогаем.
+ */
+export var omitThemeVars = function (style) {
+    if (!style) {
+        return {};
+    }
+    var rest = {};
+    for (var _i = 0, _a = Object.keys(style); _i < _a.length; _i++) {
+        var key = _a[_i];
+        if (!themeVarNames.has(key)) {
+            rest[key] = style[key];
+        }
+    }
+    return rest;
+};
+/**
+ * Тема, которую применил ближайший носитель выше по DOM (CommonWrapper, контейнер портала). Нужна, чтобы
+ * вложенная тема могла вернуть токен к значению по умолчанию: переменная предка иначе наследуется.
+ */
+export var ThemeCarrierContext = createContext(null);
+ThemeCarrierContext.displayName = 'ThemeCarrierContext';
+/**
+ * Переменные, которыми тема отличается от темы носителя выше (без носителя — от темы по умолчанию: её значения
+ * уже зашиты в CSS запасными значениями `var(--k-x, <значение>)`). Токен, вернувшийся к значению по умолчанию,
+ * сбрасывается в `initial`: иначе наследовалась бы переменная предка.
+ */
+export var getThemeVars = function (theme, parent) {
+    if (parent === void 0) { parent = null; }
+    var parentKey = parent !== null && parent !== void 0 ? parent : LIGHT_THEME;
+    var byParent = cache.get(theme);
+    if (!byParent) {
+        byParent = new WeakMap();
+        cache.set(theme, byParent);
+    }
+    var vars = byParent.get(parentKey);
+    if (vars) {
+        return vars;
+    }
+    vars = {};
+    if (theme !== LIGHT_THEME || (parent && parent !== LIGHT_THEME)) {
+        for (var key in theme) {
+            var value = theme[key];
+            var base = LIGHT_THEME[key];
+            var inherited = parent ? parent[key] : base;
+            if (typeof value === 'string' && value !== inherited) {
+                // `initial` делает переменную недействительной — срабатывает запасное значение из var(); `inherit` вернул бы
+                // значение предка
+                vars[themeVarName(key)] = value === base || value === '' ? 'initial' : value;
+            }
+        }
+    }
+    byParent.set(parentKey, vars);
+    return vars;
+};
+var varsAttrCache = new WeakMap();
+/**
+ * Копия переменных темы для theme-loader.js: в серверном HTML атрибут `style` блокирует строгий CSP. Только на
+ * сервере — на клиенте React ставит style через CSSOM, а лишний атрибут помешал бы гидрации.
+ */
+export var getServerThemeVarsAttr = function (vars) {
+    if (typeof document !== 'undefined') {
+        return undefined;
+    }
+    var attr = varsAttrCache.get(vars);
+    if (attr === undefined) {
+        attr = Object.entries(vars)
+            .map(function (_a) {
+            var name = _a[0], value = _a[1];
+            return "".concat(name, ":").concat(value);
+        })
+            .join(';');
+        varsAttrCache.set(vars, attr);
+    }
+    return attr || undefined;
+};
+/**
+ * Значение токена по умолчанию: снимает обёртку `var(--k-<токен>, <значение темы>)` один раз. Значение темы
+ * само может быть `var(--k-color-..., #fff)` из палитры — его не раскрываем: master сравнивал именно эти строки.
+ * Для условий в стилях, которые вычисляются при сборке.
+ */
+export var tokenDefault = function (value) {
+    var match = /^var\(--k-[A-Za-z0-9]+,\s*(.*)\)$/.exec(value.trim());
+    return match ? match[1] : value;
+};
+var setTokensCache = new WeakMap();
+/**
+ * Пустые по умолчанию токены, которые тема задала. Их объявления в CSS стоят под
+ * `@scope ([data-k-set~="<токен>"])` (см. whenThemeSets в vanilla.ts), чтобы без темы отбрасываться, как раньше.
+ */
+export var getThemeSetTokens = function (theme) {
+    var tokens = setTokensCache.get(theme);
+    if (tokens === undefined) {
+        var set = [];
+        for (var key in theme) {
+            var value = theme[key];
+            if (LIGHT_THEME[key] === '' &&
+                typeof value === 'string' &&
+                value !== '') {
+                set.push(key);
+            }
+        }
+        tokens = set.join(' ');
+        setTokensCache.set(theme, tokens);
+    }
+    return tokens;
+};
+//# sourceMappingURL=themeVars.js.map

package/lib/theming/themeVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeVars.js","sourceRoot":"","sources":["themeVars.ts"],"names":[],"mappings":"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","sourcesContent":["import type React from 'react';\nimport { createContext } from 'react';\n\nimport type { Theme } from './Theme.js';\nimport { LIGHT_THEME } from './themes/LightTheme.js';\n// переносит тему из серверного HTML под строгим CSP до гидрации; модуль грузят все носители темы\nimport '../../theme-loader.js';\n\nconst THEME_VAR_PREFIX = '--k-';\n\nexport const themeVarName = (token: string): string => `${THEME_VAR_PREFIX}${token}`;\n\nconst cache = new WeakMap<Theme, WeakMap<Theme, React.CSSProperties>>();\n\nconst themeVarNames = new Set<string>();\nfor (const key in LIGHT_THEME) {\n  themeVarNames.add(themeVarName(key));\n}\n\n/**\n * Стили без переменных темы. Носитель кладёт их ребёнку в `props.style`, и если ребёнок — компонент,\n * они доезжают до вложенного носителя: там они уже посчитаны заново, а старые значения мешали бы\n * вложенной теме вернуть токен к значению по умолчанию. Чужие `--k-color-*` из палитры не трогаем.\n */\nexport const omitThemeVars = (style: React.CSSProperties | undefined): React.CSSProperties => {\n  if (!style) {\n    return {};\n  }\n  const rest: Record<string, unknown> = {};\n  for (const key of Object.keys(style)) {\n    if (!themeVarNames.has(key)) {\n      rest[key] = style[key as keyof React.CSSProperties];\n    }\n  }\n  return rest as React.CSSProperties;\n};\n\n/**\n * Тема, которую применил ближайший носитель выше по DOM (CommonWrapper, контейнер портала). Нужна, чтобы\n * вложенная тема могла вернуть токен к значению по умолчанию: переменная предка иначе наследуется.\n */\nexport const ThemeCarrierContext = createContext<Theme | null>(null);\nThemeCarrierContext.displayName = 'ThemeCarrierContext';\n\n/**\n * Переменные, которыми тема отличается от темы носителя выше (без носителя — от темы по умолчанию: её значения\n * уже зашиты в CSS запасными значениями `var(--k-x, <значение>)`). Токен, вернувшийся к значению по умолчанию,\n * сбрасывается в `initial`: иначе наследовалась бы переменная предка.\n */\nexport const getThemeVars = (theme: Theme, parent: Theme | null = null): React.CSSProperties => {\n  const parentKey = parent ?? LIGHT_THEME;\n  let byParent = cache.get(theme);\n  if (!byParent) {\n    byParent = new WeakMap();\n    cache.set(theme, byParent);\n  }\n  let vars = byParent.get(parentKey);\n  if (vars) {\n    return vars;\n  }\n  vars = {};\n  if (theme !== LIGHT_THEME || (parent && parent !== LIGHT_THEME)) {\n    for (const key in theme) {\n      const value = (theme as unknown as Record<string, unknown>)[key];\n      const base = (LIGHT_THEME as unknown as Record<string, unknown>)[key];\n      const inherited = parent ? (parent as unknown as Record<string, unknown>)[key] : base;\n      if (typeof value === 'string' && value !== inherited) {\n        // `initial` делает переменную недействительной — срабатывает запасное значение из var(); `inherit` вернул бы\n        // значение предка\n        (vars as Record<string, string>)[themeVarName(key)] = value === base || value === '' ? 'initial' : value;\n      }\n    }\n  }\n  byParent.set(parentKey, vars);\n  return vars;\n};\n\nconst varsAttrCache = new WeakMap<React.CSSProperties, string>();\n\n/**\n * Копия переменных темы для theme-loader.js: в серверном HTML атрибут `style` блокирует строгий CSP. Только на\n * сервере — на клиенте React ставит style через CSSOM, а лишний атрибут помешал бы гидрации.\n */\nexport const getServerThemeVarsAttr = (vars: React.CSSProperties): string | undefined => {\n  if (typeof document !== 'undefined') {\n    return undefined;\n  }\n  let attr = varsAttrCache.get(vars);\n  if (attr === undefined) {\n    attr = Object.entries(vars)\n      .map(([name, value]) => `${name}:${value}`)\n      .join(';');\n    varsAttrCache.set(vars, attr);\n  }\n  return attr || undefined;\n};\n\n/**\n * Значение токена по умолчанию: снимает обёртку `var(--k-<токен>, <значение темы>)` один раз. Значение темы\n * само может быть `var(--k-color-..., #fff)` из палитры — его не раскрываем: master сравнивал именно эти строки.\n * Для условий в стилях, которые вычисляются при сборке.\n */\nexport const tokenDefault = (value: string): string => {\n  const match = /^var\\(--k-[A-Za-z0-9]+,\\s*(.*)\\)$/.exec(value.trim());\n  return match ? match[1] : value;\n};\n\nconst setTokensCache = new WeakMap<Theme, string>();\n\n/**\n * Пустые по умолчанию токены, которые тема задала. Их объявления в CSS стоят под\n * `@scope ([data-k-set~=\"<токен>\"])` (см. whenThemeSets в vanilla.ts), чтобы без темы отбрасываться, как раньше.\n */\nexport const getThemeSetTokens = (theme: Theme): string => {\n  let tokens = setTokensCache.get(theme);\n  if (tokens === undefined) {\n    const set: string[] = [];\n    for (const key in theme) {\n      const value = (theme as unknown as Record<string, unknown>)[key];\n      if (\n        (LIGHT_THEME as unknown as Record<string, unknown>)[key] === '' &&\n        typeof value === 'string' &&\n        value !== ''\n      ) {\n        set.push(key);\n      }\n    }\n    tokens = set.join(' ');\n    setTokensCache.set(theme, tokens);\n  }\n  return tokens;\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "6.4.6-b246a.0",
+  "version": "6.4.7-25ce4.0",
   "description": "UI Components",
   "homepage": "https://tech.skbkontur.ru/kontur-ui",
   "bugs": {
@@ -12,13 +12,19 @@
     "url": "git+ssh://git@github.com/skbkontur/retail-ui.git"
   },
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css",
+    "*.css.ts",
+    "theme-loader.js",
+    "./lib/renderEnvironment/RenderEnvironmentContext.*"
+  ],
   "exports": {
     ".": "./index.js",
     "./components/*": "./components/*.js",
     "./lib/*": "./lib/*.js",
     "./hooks/*": "./hooks/*.js",
     "./internal/*": "./internal/*.js",
+    "./theme-loader.js": "./theme-loader.js",
     "./package.json": "./package.json",
     "./components/Autocomplete": "./components/Autocomplete/index.js",
     "./components/Autocomplete/Autocomplete": "./components/Autocomplete/Autocomplete.js",
@@ -149,6 +155,8 @@
     "./components/Tabs/Tab": "./components/Tabs/Tab.js",
     "./components/Textarea": "./components/Textarea/index.js",
     "./components/Textarea/Textarea": "./components/Textarea/Textarea.js",
+    "./components/ThemeContainer": "./components/ThemeContainer/index.js",
+    "./components/ThemeContainer/ThemeContainer": "./components/ThemeContainer/ThemeContainer.js",
     "./components/TimePicker": "./components/TimePicker/index.js",
     "./components/TimePicker/TimePicker": "./components/TimePicker/TimePicker.js",
     "./components/TimePicker/locale": "./components/TimePicker/locale/index.js",
@@ -235,16 +243,19 @@
     "./lib/rootNode/getRootNode": "./lib/rootNode/getRootNode.js",
     "./lib/rootNode/rootNodeDecorator": "./lib/rootNode/rootNodeDecorator.js",
     "./lib/size": "./lib/size/index.js",
-    "./lib/size/SizeControlContext": "./lib/size/SizeControlContext.js"
+    "./lib/size/SizeControlContext": "./lib/size/SizeControlContext.js",
+    "./react-ui.css": "./react-ui.css"
   },
   "scripts": {
     "clean": "git clean -fdxqe node_modules",
     "prebuild": "yarn rimraf build",
     "build": "run-s build:* build:lint:*",
     "build:tsc": "tsc --outDir build -p prod.tsconfig.json",
-    "build:copy-files": "copyfiles package.json README.md CHANGELOG.md LICENSE typings/* build",
+    "build:vanilla-css": "node ./scripts/build-vanilla-css.mts",
+    "build:copy-files": "copyfiles package.json README.md CHANGELOG.md LICENSE theme-loader.js typings/* build",
     "build:lint:publint": "publint --pack npm ./build",
-    "build:lint:attw": "attw --ignore-rules cjs-resolves-to-esm --quiet --pack ./build",
+    "build:lint:vanilla": "node ./scripts/check-build.mts",
+    "build:lint:attw": "attw --ignore-rules cjs-resolves-to-esm --exclude-entrypoints ./react-ui.css ./theme-loader.js --quiet --pack ./build",
     "build:exports": "node ./scripts/exports.ts",
     "prerelease": "yarn build",
     "release": "npm publish ./build --workspaces=false",
@@ -286,7 +297,6 @@
     "react-clientside-effect": "^1.2.6",
     "react-transition-group": "^4.4.5",
     "shallowequal": "^1.1.0",
-    "stylis-plugin-extra-scope": "^0.3.0",
     "tabbable": "^6.2.0",
     "use-callback-ref": "^1.3.2",
     "use-sidecar": "^1.1.2",
@@ -323,7 +333,11 @@
     "@types/react-dom": "19.2.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/shallowequal": "^1.1.1",
+    "@types/stylis": "4.2.5",
     "@types/warning": "^3.0.0",
+    "@vanilla-extract/css": "^1.21.2",
+    "@vanilla-extract/integration": "^8.0.10",
+    "@vanilla-extract/vite-plugin": "^5.2.6",
     "axios": "^1.7.2",
     "babel-loader": "^9.1.3",
     "chalk": "4.1.0",
@@ -356,6 +370,7 @@
     "storybook": "8.6.14",
     "string-replace-loader": "3.1.0",
     "style-loader": "^4.0.0",
+    "stylis": "4.2.0",
     "typescript": "5.9.3",
     "upath": "^2.0.1",
     "url-loader": "^4.1.1",