@skbkontur/react-ui 6.4.1-8cb58.0 → 6.4.2-static-css.0

package/lib/styles/baselineCompensation.js

@@ -0,0 +1,122 @@
+import { isChrome, isFirefox } from '../client.js';
+import { getSafeWindow } from '../globalObject.js';
+/**
+ * Компенсация базовой линии шрифта LabGrotesque — сдвиг на ±1px, свой у каждого
+ * браузера.
+ *
+ * Раньше значение вычислялось в JS и подставлялось в стили числом. Из-за этого
+ * стили Checkbox, Radio и Toggle отличались на сервере и в браузере: на сервере
+ * нет `navigator.userAgent`, поэтому в `margin-top: calc(...)` попадало другое
+ * число. Разные стили — разный хеш — разный класснейм — расхождение на гидрации.
+ *
+ * Теперь в стили попадает выражение с CSS-переменными, одинаковое везде, а сами
+ * переменные объявляются один раз глобально. Класснейм больше не зависит от
+ * браузера, а результат в каждом реальном браузере остаётся прежним.
+ */
+var IS_CHROME_VAR = '--react-ui-is-chrome';
+var IS_FIREFOX_VAR = '--react-ui-is-firefox';
+/**
+ * Значение по умолчанию — 0, то есть «ни Chrome, ни Firefox».
+ *
+ * На сервере переменные не объявляются вовсе, и подставляется этот фолбэк.
+ */
+var isChromeVar = "var(".concat(IS_CHROME_VAR, ", 0)");
+var isFirefoxVar = "var(".concat(IS_FIREFOX_VAR, ", 0)");
+/**
+ * Величина компенсации — токен темы `labGrotesqueBaselineCompensation`. Он
+ * безразмерный (`'1'`), поэтому размерность даёт множитель `1px`: произведение
+ * `число * число * длина` внутри `calc()` валидно, как и вложение результата во
+ * внешний `calc()` с якорем — `calc(var(--kontur-checkboxBoxOffsetY) + …)`.
+ *
+ * Раньше значение читалось из темы в JS через `parseInt`, и дробный оверрайд
+ * (например `'1.5'`) молча обрезался до 1. Со ссылкой на переменную он работает
+ * как задан в теме.
+ */
+export var labGrotesqueBaselineCompensation = "var(--kontur-labGrotesqueBaselineCompensation) * 1px";
+/**
+ * Инстансы, для которых флаги уже поставлены — вызывать за один рендер могут
+ * десятки компонентов, а `setProperty` на каждый был бы чистым расточительством.
+ */
+var flagged = new WeakSet();
+/**
+ * Объявляет флаги браузера как CSS-переменные. Зовётся из `CommonWrapper` —
+ * централизованно для всех компонентов, а не из `getStyles` конкретных: после
+ * перевода `Checkbox`/`Radio`/`Toggle` на `staticStyles()` их фабрика больше не
+ * выполняется вовсе, а флаги нужны раньше и независимо от того, какие
+ * компоненты на странице фактически есть.
+ *
+ * Значения ставятся на корневой элемент через CSSOM, а не правилом `:root`
+ * через Emotion. Причина не в удобстве: правило потребовало бы тега `<style>`,
+ * то есть nonce — и это единственное, что осталось бы требовать его на
+ * странице, где весь остальной CSS приезжает файлом. `setProperty` не создаёт
+ * ни правила, ни тега, и `style-src` его не касается: директива смотрит на
+ * разбор разметки и на `setAttribute`, а не на объектную модель.
+ *
+ * Документ берётся из окружения рендера: компонент может жить в iframe, и флаги
+ * обязаны оказаться в том же документе, что и правила, которые их читают.
+ *
+ * На сервере не делает ничего: там браузер неизвестен, и объявить переменные
+ * значило бы зафиксировать неправильные значения в разметке.
+ */
+export var injectBaselineCompensationVars = function (globalObject) {
+    var _a;
+    var ownerDocument = (_a = globalObject.document) !== null && _a !== void 0 ? _a : getSafeWindow().document;
+    if (!ownerDocument) {
+        return;
+    }
+    if (flagged.has(ownerDocument)) {
+        return;
+    }
+    flagged.add(ownerDocument);
+    var style = ownerDocument.documentElement.style;
+    style.setProperty(IS_CHROME_VAR, isChrome ? '1' : '0');
+    style.setProperty(IS_FIREFOX_VAR, isFirefox ? '1' : '0');
+};
+/**
+ * Выбор ветви по размеру шрифта, в тех же условиях, что и прежняя JS-функция:
+ *
+ * - `fontSize < 16` — компенсация во всех браузерах, кроме Chrome;
+ * - `fontSize === 16` — обратная компенсация в Chrome;
+ * - `fontSize === 18` — обратная компенсация в Chrome и Firefox;
+ * - иначе компенсации нет.
+ */
+export var getBaselineCompensationVariant = function (fontSize) {
+    if (fontSize < 16) {
+        return 'lessThan16';
+    }
+    if (fontSize === 16) {
+        return 'exactly16';
+    }
+    if (fontSize === 18) {
+        return 'exactly18';
+    }
+    return 'none';
+};
+/**
+ * Слагаемое компенсации для `calc()` — вместе со знаком, готовое к подстановке.
+ */
+export var baselineCompensation = function (variant, compensation) {
+    switch (variant) {
+        case 'lessThan16':
+            return " + (1 - ".concat(isChromeVar, ") * ").concat(compensation);
+        case 'exactly16':
+            return " - ".concat(isChromeVar, " * ").concat(compensation);
+        case 'exactly18':
+            // Chrome и Firefox взаимно исключают друг друга, поэтому сумма флагов даёт 0 или 1.
+            return " - (".concat(isChromeVar, " + ").concat(isFirefoxVar, ") * ").concat(compensation);
+        case 'none':
+        default:
+            return '';
+    }
+};
+/**
+ * Компенсация для Toggle: обратный сдвиг в Chrome при `fontSize <= 16`.
+ *
+ * Условие отличается от {@link getBaselineCompensationVariant}, поэтому вынесено
+ * отдельно, а не подогнано под общий случай. Ветвь здесь одна, поэтому вместо
+ * набора вариантов — предикат.
+ */
+export var hasToggleBaselineCompensation = function (fontSize) { return fontSize <= 16; };
+/** Слагаемое компенсации Toggle для `calc()`, вместе со знаком. */
+export var toggleBaselineCompensation = function (compensation) { return " - ".concat(isChromeVar, " * ").concat(compensation); };
+//# sourceMappingURL=baselineCompensation.js.map

package/lib/styles/baselineCompensation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baselineCompensation.js","sourceRoot":"","sources":["baselineCompensation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AAEH,IAAM,aAAa,GAAG,sBAAsB,CAAC;AAC7C,IAAM,cAAc,GAAG,uBAAuB,CAAC;AAE/C;;;;GAIG;AACH,IAAM,WAAW,GAAG,cAAO,aAAa,SAAM,CAAC;AAC/C,IAAM,YAAY,GAAG,cAAO,cAAc,SAAM,CAAC;AAEjD;;;;;;;;;GASG;AACH,MAAM,CAAC,IAAM,gCAAgC,GAAG,sDAAsD,CAAC;AAEvG;;;GAGG;AACH,IAAM,OAAO,GAAG,IAAI,OAAO,EAAY,CAAC;AAExC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,IAAM,8BAA8B,GAAG,UAAC,YAA0B;;IACvE,IAAM,aAAa,GAAG,MAAA,YAAY,CAAC,QAAQ,mCAAI,aAAa,EAAE,CAAC,QAAQ,CAAC;IAExE,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,OAAO;IACT,CAAC;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;QAC/B,OAAO;IACT,CAAC;IAED,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAEnB,IAAA,KAAK,GAAK,aAAa,CAAC,eAAe,MAAlC,CAAmC;IAChD,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACvD,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC3D,CAAC,CAAC;AAUF;;;;;;;GAOG;AACH,MAAM,CAAC,IAAM,8BAA8B,GAAG,UAAC,QAAgB;IAC7D,IAAI,QAAQ,GAAG,EAAE,EAAE,CAAC;QAClB,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ,KAAK,EAAE,EAAE,CAAC;QACpB,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,IAAI,QAAQ,KAAK,EAAE,EAAE,CAAC;QACpB,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,OAAoC,EAAE,YAAoB;IAC7F,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,YAAY;YACf,OAAO,kBAAW,WAAW,iBAAO,YAAY,CAAE,CAAC;QACrD,KAAK,WAAW;YACd,OAAO,aAAM,WAAW,gBAAM,YAAY,CAAE,CAAC;QAC/C,KAAK,WAAW;YACd,oFAAoF;YACpF,OAAO,cAAO,WAAW,gBAAM,YAAY,iBAAO,YAAY,CAAE,CAAC;QACnE,KAAK,MAAM,CAAC;QACZ;YACE,OAAO,EAAE,CAAC;IACd,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,6BAA6B,GAAG,UAAC,QAAgB,IAAc,OAAA,QAAQ,IAAI,EAAE,EAAd,CAAc,CAAC;AAE3F,mEAAmE;AACnE,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,YAAoB,IAAa,OAAA,aAAM,WAAW,gBAAM,YAAY,CAAE,EAArC,CAAqC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../client.js';\nimport { getSafeWindow } from '../globalObject.js';\nimport type { GlobalObject } from '../globalObject.js';\n\n/**\n * Компенсация базовой линии шрифта LabGrotesque — сдвиг на ±1px, свой у каждого\n * браузера.\n *\n * Раньше значение вычислялось в JS и подставлялось в стили числом. Из-за этого\n * стили Checkbox, Radio и Toggle отличались на сервере и в браузере: на сервере\n * нет `navigator.userAgent`, поэтому в `margin-top: calc(...)` попадало другое\n * число. Разные стили — разный хеш — разный класснейм — расхождение на гидрации.\n *\n * Теперь в стили попадает выражение с CSS-переменными, одинаковое везде, а сами\n * переменные объявляются один раз глобально. Класснейм больше не зависит от\n * браузера, а результат в каждом реальном браузере остаётся прежним.\n */\n\nconst IS_CHROME_VAR = '--react-ui-is-chrome';\nconst IS_FIREFOX_VAR = '--react-ui-is-firefox';\n\n/**\n * Значение по умолчанию — 0, то есть «ни Chrome, ни Firefox».\n *\n * На сервере переменные не объявляются вовсе, и подставляется этот фолбэк.\n */\nconst isChromeVar = `var(${IS_CHROME_VAR}, 0)`;\nconst isFirefoxVar = `var(${IS_FIREFOX_VAR}, 0)`;\n\n/**\n * Величина компенсации — токен темы `labGrotesqueBaselineCompensation`. Он\n * безразмерный (`'1'`), поэтому размерность даёт множитель `1px`: произведение\n * `число * число * длина` внутри `calc()` валидно, как и вложение результата во\n * внешний `calc()` с якорем — `calc(var(--kontur-checkboxBoxOffsetY) + …)`.\n *\n * Раньше значение читалось из темы в JS через `parseInt`, и дробный оверрайд\n * (например `'1.5'`) молча обрезался до 1. Со ссылкой на переменную он работает\n * как задан в теме.\n */\nexport const labGrotesqueBaselineCompensation = `var(--kontur-labGrotesqueBaselineCompensation) * 1px`;\n\n/**\n * Инстансы, для которых флаги уже поставлены — вызывать за один рендер могут\n * десятки компонентов, а `setProperty` на каждый был бы чистым расточительством.\n */\nconst flagged = new WeakSet<Document>();\n\n/**\n * Объявляет флаги браузера как CSS-переменные. Зовётся из `CommonWrapper` —\n * централизованно для всех компонентов, а не из `getStyles` конкретных: после\n * перевода `Checkbox`/`Radio`/`Toggle` на `staticStyles()` их фабрика больше не\n * выполняется вовсе, а флаги нужны раньше и независимо от того, какие\n * компоненты на странице фактически есть.\n *\n * Значения ставятся на корневой элемент через CSSOM, а не правилом `:root`\n * через Emotion. Причина не в удобстве: правило потребовало бы тега `<style>`,\n * то есть nonce — и это единственное, что осталось бы требовать его на\n * странице, где весь остальной CSS приезжает файлом. `setProperty` не создаёт\n * ни правила, ни тега, и `style-src` его не касается: директива смотрит на\n * разбор разметки и на `setAttribute`, а не на объектную модель.\n *\n * Документ берётся из окружения рендера: компонент может жить в iframe, и флаги\n * обязаны оказаться в том же документе, что и правила, которые их читают.\n *\n * На сервере не делает ничего: там браузер неизвестен, и объявить переменные\n * значило бы зафиксировать неправильные значения в разметке.\n */\nexport const injectBaselineCompensationVars = (globalObject: GlobalObject): void => {\n  const ownerDocument = globalObject.document ?? getSafeWindow().document;\n\n  if (!ownerDocument) {\n    return;\n  }\n\n  if (flagged.has(ownerDocument)) {\n    return;\n  }\n\n  flagged.add(ownerDocument);\n\n  const { style } = ownerDocument.documentElement;\n  style.setProperty(IS_CHROME_VAR, isChrome ? '1' : '0');\n  style.setProperty(IS_FIREFOX_VAR, isFirefox ? '1' : '0');\n};\n\n/**\n * Ветвь компенсации. Ветвление немонотонное — на 17px компенсации нет вовсе, —\n * и в `calc()` не выражается, поэтому размер шрифта остаётся значением темы, а\n * решение принимает JS. В текст класса размер шрифта не попадает: по ветви\n * выбирается один из готовых статических классов.\n */\nexport type BaselineCompensationVariant = 'lessThan16' | 'exactly16' | 'exactly18' | 'none';\n\n/**\n * Выбор ветви по размеру шрифта, в тех же условиях, что и прежняя JS-функция:\n *\n * - `fontSize < 16` — компенсация во всех браузерах, кроме Chrome;\n * - `fontSize === 16` — обратная компенсация в Chrome;\n * - `fontSize === 18` — обратная компенсация в Chrome и Firefox;\n * - иначе компенсации нет.\n */\nexport const getBaselineCompensationVariant = (fontSize: number): BaselineCompensationVariant => {\n  if (fontSize < 16) {\n    return 'lessThan16';\n  }\n\n  if (fontSize === 16) {\n    return 'exactly16';\n  }\n\n  if (fontSize === 18) {\n    return 'exactly18';\n  }\n\n  return 'none';\n};\n\n/**\n * Слагаемое компенсации для `calc()` — вместе со знаком, готовое к подстановке.\n */\nexport const baselineCompensation = (variant: BaselineCompensationVariant, compensation: string): string => {\n  switch (variant) {\n    case 'lessThan16':\n      return ` + (1 - ${isChromeVar}) * ${compensation}`;\n    case 'exactly16':\n      return ` - ${isChromeVar} * ${compensation}`;\n    case 'exactly18':\n      // Chrome и Firefox взаимно исключают друг друга, поэтому сумма флагов даёт 0 или 1.\n      return ` - (${isChromeVar} + ${isFirefoxVar}) * ${compensation}`;\n    case 'none':\n    default:\n      return '';\n  }\n};\n\n/**\n * Компенсация для Toggle: обратный сдвиг в Chrome при `fontSize <= 16`.\n *\n * Условие отличается от {@link getBaselineCompensationVariant}, поэтому вынесено\n * отдельно, а не подогнано под общий случай. Ветвь здесь одна, поэтому вместо\n * набора вариантов — предикат.\n */\nexport const hasToggleBaselineCompensation = (fontSize: number): boolean => fontSize <= 16;\n\n/** Слагаемое компенсации Toggle для `calc()`, вместе со знаком. */\nexport const toggleBaselineCompensation = (compensation: string): string => ` - ${isChromeVar} * ${compensation}`;\n"]}

package/lib/theming/Emotion.d.ts

@@ -1,15 +1,49 @@
-import type { Emotion } from '@emotion/css/create-instance';
-import type { Theme } from './Theme.js';
+/**
+ * Что осталось от Emotion: склейка имён и префикс классов.
+ *
+ * Инстанса здесь больше нет. Он держался ради двух вещей — вставки правил и
+ * `cx`, — и первой не осталось: все стилевые модули отдают готовые имена
+ * классов, а правила приезжают файлом `react-ui.css`. От второй осталась чистая
+ * функция: ни кеша, ни тега `<style>`, ни контейнера ей не нужно.
+ *
+ * Тип `Emotion` импортируется только ради сигнатуры `cx` — чтобы у приложений,
+ * которые брали её из инстанса, тип не поменялся.
+ */
 export declare const REACT_UI_PREFIX: string;
-export declare const getEmotion: ({ key, container, nonce, }: {
-    container: HTMLElement;
-    key?: string;
-    nonce?: string;
-}) => Emotion;
+/** Аргумент `cx`: строка, число, массив таких же или словарь «класс → условие». */
+type ClassNamesArg = string | number | boolean | null | undefined | ClassNamesArg[] | Record<string, unknown>;
+/** Склейка имён классов: то, что осталось от `cx`. */
+export type ClassNames = (...args: ClassNamesArg[]) => string;
+/**
+ * Склейка имён вместо слияния зарегистрированных классов.
+ *
+ * `cx` из Emotion не склеивает имена, а сливает содержимое классов в один
+ * новый, чьё правило вставляется в рантайме. Сливать нечего: правила
+ * компонентов приезжают файлом, и слияние породило бы правило, которого в файле
+ * нет.
+ *
+ * Без слияния спор между правилами решает порядок в таблице стилей. Пока
+ * правила вставлял рантайм, этот порядок равнялся порядку первого вызова `css`:
+ * у `Button` размерный класс оказывался в таблице раньше `root`, и сброс кнопки
+ * (`padding: 0`) перебивал размер — снимок вычисленных стилей дал на этом 6452
+ * расхождения. В извлечённом файле порядок задаёт обход геттеров: `root`
+ * объявлен первым, модификаторы после, и каскад отрабатывает как надо.
+ */
+export declare const concatClassNames: ClassNames;
+/** Словарь классов компонента: имя геттера → имя класса. */
 export interface StylesObject {
-    [className: string]: (() => string) | ((t: Theme) => string);
+    [key: string]: (...args: never[]) => string;
 }
-export type StylesGetter<S> = (emotion: Emotion) => S;
+/**
+ * Фабрика словаря классов.
+ *
+ * Аргумент остался необязательным ради формы вызова: модули объявляют
+ * `staticStyles({...})`, а компоненты зовут `getStyles()`. Инстанс сюда больше
+ * не передаётся.
+ */
+export type StylesGetter<S> = (ignored?: unknown) => S;
 export declare const memoizeStyle: <S extends StylesObject>(styles: S) => S;
 export declare const memoizeGetStyles: <S extends StylesObject>(getStyles: StylesGetter<S>) => StylesGetter<S>;
+/** `prefix('button')({ root: 'root' })` -> `{ root: 'react-ui-button-root' }`. */
 export declare const prefix: (component: string, app?: string) => <T extends Record<string, string>>(classes: T) => T;
+export {};

package/lib/theming/Emotion.js

@@ -9,57 +9,92 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import createEmotion from '@emotion/css/create-instance';
-import extraScopePlugin from 'stylis-plugin-extra-scope';
 import { Upgrade } from '../Upgrades.js';
+/**
+ * Что осталось от Emotion: склейка имён и префикс классов.
+ *
+ * Инстанса здесь больше нет. Он держался ради двух вещей — вставки правил и
+ * `cx`, — и первой не осталось: все стилевые модули отдают готовые имена
+ * классов, а правила приезжают файлом `react-ui.css`. От второй осталась чистая
+ * функция: ни кеша, ни тега `<style>`, ни контейнера ей не нужно.
+ *
+ * Тип `Emotion` импортируется только ради сигнатуры `cx` — чтобы у приложений,
+ * которые брали её из инстанса, тип не поменялся.
+ */
 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,
-    });
+/**
+ * Склейка имён вместо слияния зарегистрированных классов.
+ *
+ * `cx` из Emotion не склеивает имена, а сливает содержимое классов в один
+ * новый, чьё правило вставляется в рантайме. Сливать нечего: правила
+ * компонентов приезжают файлом, и слияние породило бы правило, которого в файле
+ * нет.
+ *
+ * Без слияния спор между правилами решает порядок в таблице стилей. Пока
+ * правила вставлял рантайм, этот порядок равнялся порядку первого вызова `css`:
+ * у `Button` размерный класс оказывался в таблице раньше `root`, и сброс кнопки
+ * (`padding: 0`) перебивал размер — снимок вычисленных стилей дал на этом 6452
+ * расхождения. В извлечённом файле порядок задаёт обход геттеров: `root`
+ * объявлен первым, модификаторы после, и каскад отрабатывает как надо.
+ */
+export var concatClassNames = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var names = [];
+    var push = function (arg) {
+        if (!arg) {
+            return;
+        }
+        if (typeof arg === 'string' || typeof arg === 'number') {
+            names.push(String(arg));
+            return;
+        }
+        if (Array.isArray(arg)) {
+            arg.forEach(push);
+            return;
+        }
+        for (var _i = 0, _a = Object.entries(arg); _i < _a.length; _i++) {
+            var _b = _a[_i], name_1 = _b[0], value = _b[1];
+            if (value) {
+                names.push(name_1);
+            }
+        }
+    };
+    args.forEach(push);
+    return names.join(' ');
 };
 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();
+    var cache = new Map();
+    var noArgs = Symbol('no-args');
     return function (arg) {
-        if (!cache.has(arg)) {
-            cache.set(arg, fn(arg));
+        var key = arg !== null && arg !== void 0 ? arg : noArgs;
+        if (!cache.has(key)) {
+            cache.set(key, isZeroArgs(fn) ? fn() : fn(arg));
         }
-        return cache.get(arg);
+        return cache.get(key);
     };
 };
 export var memoizeStyle = function (styles) {
-    Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className])); });
-    return styles;
+    var result = {};
+    for (var _i = 0, _a = Object.keys(styles); _i < _a.length; _i++) {
+        var key = _a[_i];
+        result[key] = memoize(styles[key]);
+    }
+    return result;
 };
 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);
+    var cached;
+    return function () {
+        cached !== null && cached !== void 0 ? cached : (cached = memoizeStyle(getStyles()));
+        return cached;
     };
 };
+/** `prefix('button')({ root: 'root' })` -> `{ root: 'react-ui-button-root' }`. */
 export var prefix = function (component, app) {
     if (app === void 0) { app = REACT_UI_PREFIX; }
     return function (classes) {

package/lib/theming/Emotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emotion.js","sourceRoot":"","sources":["Emotion.ts"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,aAAa,MAAM,8BAA8B,CAAC;AACzD,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAIzC,MAAM,CAAC,IAAM,eAAe,GAAG,OAAO,CAAC,uBAAuB,EAAE,CAAC;AAEjE,IAAM,KAAK,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,IAAI,CAAC,WAAI,eAAe,CAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5F,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAQ1B;QAPC,WAAqB,EAArB,GAAG,mBAAG,eAAe,KAAA,EACrB,SAAS,eAAA,EACT,KAAK,WAAA;IAML,OAAA,aAAa,CAAC;QACZ,GAAG,KAAA;QACH,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAC5D,SAAS,WAAA;QACT,KAAK,OAAA;KACN,CAAC;AANF,CAME,CAAC;AAEL,SAAS,UAAU,CAAqC,EAA6B;IACnF,OAAO,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACzB,CAAC;AAED,IAAM,OAAO,GAAG,UAAyB,EAA+B;IACtE,IAAI,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC;QACnB,IAAI,UAAQ,GAAG,KAAK,CAAC;QACrB,IAAI,QAAS,CAAC;QACd,OAAO;YACL,IAAI,CAAC,UAAQ,EAAE,CAAC;gBACd,UAAQ,GAAG,IAAI,CAAC;gBAChB,QAAM,GAAG,EAAE,EAAE,CAAC;YAChB,CAAC;YACD,OAAO,QAAM,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC;IAED,IAAM,KAAK,GAAG,IAAI,OAAO,EAAE,CAAC;IAC5B,OAAO,UAAC,GAAM;QACZ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACpB,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAC1B,CAAC;QAED,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,CAAC,IAAM,YAAY,GAAG,UAAyB,MAAS;IAC5D,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,UAAC,SAAS,IAAK,OAAA,CAAC,MAAM,CAAC,SAAoB,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAe,CAAC,EAAzE,CAAyE,CAAC,CAAC;IACtH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAyB,SAA0B;IACjF,IAAM,WAAW,GAAG,IAAI,OAAO,EAAc,CAAC;IAC9C,OAAO,UAAC,OAAgB;QACtB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAC9B,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC7D,CAAC;QAED,OAAO,WAAW,CAAC,GAAG,CAAC,OAAO,CAAM,CAAC;IACvC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,MAAM,GACjB,UAAC,SAAiB,EAAE,GAAqB;IAArB,oBAAA,EAAA,qBAAqB;IACzC,OAAA,UAAmC,OAAU;QAC3C,OAAA,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,GAAG;;YACnC,6BAAY,GAAG,gBAAG,GAAG,IAAG,UAAG,GAAG,cAAI,SAAS,cAAI,OAAO,CAAC,GAAG,CAAC,CAAE,OAAG;QAClE,CAAC,EAAE,EAAO,CAAC;IAFX,CAEW;AAHb,CAGa,CAAC","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":"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","sourcesContent":["import { Upgrade } from '../Upgrades.js';\nimport type { AnyObject, FunctionWithParams } from '../utils.js';\n\n/**\n * Что осталось от Emotion: склейка имён и префикс классов.\n *\n * Инстанса здесь больше нет. Он держался ради двух вещей — вставки правил и\n * `cx`, — и первой не осталось: все стилевые модули отдают готовые имена\n * классов, а правила приезжают файлом `react-ui.css`. От второй осталась чистая\n * функция: ни кеша, ни тега `<style>`, ни контейнера ей не нужно.\n *\n * Тип `Emotion` импортируется только ради сигнатуры `cx` — чтобы у приложений,\n * которые брали её из инстанса, тип не поменялся.\n */\nexport const REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\n/** Аргумент `cx`: строка, число, массив таких же или словарь «класс → условие». */\ntype ClassNamesArg = string | number | boolean | null | undefined | ClassNamesArg[] | Record<string, unknown>;\n\n/** Склейка имён классов: то, что осталось от `cx`. */\nexport type ClassNames = (...args: ClassNamesArg[]) => string;\n\n/**\n * Склейка имён вместо слияния зарегистрированных классов.\n *\n * `cx` из Emotion не склеивает имена, а сливает содержимое классов в один\n * новый, чьё правило вставляется в рантайме. Сливать нечего: правила\n * компонентов приезжают файлом, и слияние породило бы правило, которого в файле\n * нет.\n *\n * Без слияния спор между правилами решает порядок в таблице стилей. Пока\n * правила вставлял рантайм, этот порядок равнялся порядку первого вызова `css`:\n * у `Button` размерный класс оказывался в таблице раньше `root`, и сброс кнопки\n * (`padding: 0`) перебивал размер — снимок вычисленных стилей дал на этом 6452\n * расхождения. В извлечённом файле порядок задаёт обход геттеров: `root`\n * объявлен первым, модификаторы после, и каскад отрабатывает как надо.\n */\nexport const concatClassNames: ClassNames = (...args: ClassNamesArg[]) => {\n  const names: string[] = [];\n\n  const push = (arg: ClassNamesArg) => {\n    if (!arg) {\n      return;\n    }\n    if (typeof arg === 'string' || typeof arg === 'number') {\n      names.push(String(arg));\n      return;\n    }\n    if (Array.isArray(arg)) {\n      arg.forEach(push);\n      return;\n    }\n    for (const [name, value] of Object.entries(arg)) {\n      if (value) {\n        names.push(name);\n      }\n    }\n  };\n\n  args.forEach(push);\n\n  return names.join(' ');\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  const cache = new Map<A | symbol, R>();\n  const noArgs = Symbol('no-args');\n\n  return (arg?: A) => {\n    const key = arg ?? noArgs;\n    if (!cache.has(key)) {\n      cache.set(key, isZeroArgs(fn) ? fn() : (fn as (value: A) => R)(arg as A));\n    }\n\n    return cache.get(key) as R;\n  };\n};\n\n/** Словарь классов компонента: имя геттера → имя класса. */\nexport interface StylesObject {\n  [key: string]: (...args: never[]) => string;\n}\n\n/**\n * Фабрика словаря классов.\n *\n * Аргумент остался необязательным ради формы вызова: модули объявляют\n * `staticStyles({...})`, а компоненты зовут `getStyles()`. Инстанс сюда больше\n * не передаётся.\n */\nexport type StylesGetter<S> = (ignored?: unknown) => S;\n\nexport const memoizeStyle = <S extends StylesObject>(styles: S): S => {\n  const result = {} as S;\n\n  for (const key of Object.keys(styles) as Array<keyof S>) {\n    result[key] = memoize(styles[key] as never) as S[keyof S];\n  }\n\n  return result;\n};\n\nexport const memoizeGetStyles = <S extends StylesObject>(getStyles: StylesGetter<S>): StylesGetter<S> => {\n  let cached: S | undefined;\n\n  return () => {\n    cached ??= memoizeStyle(getStyles());\n\n    return cached;\n  };\n};\n\n/** `prefix('button')({ root: 'root' })` -> `{ root: 'react-ui-button-root' }`. */\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/lib/theming/declaredTheme.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { ThemeCssVars } from './themeCssVarsClass.js';
+/**
+ * Какая тема уже объявлена в DOM над этим узлом.
+ *
+ * Зачем. Блок объявлений `--kontur-*` печатался на корне КАЖДОГО компонента, и
+ * это закрывало половину обещания темизации: объявление на самом элементе всегда
+ * сильнее унаследованного, поэтому `:root { --kontur-btnDefaultBg: … }` от
+ * приложения до компонента не доходило — его экранировал собственный блок
+ * компонента (раздел 8.3 дизайн-документа). Носитель нужен ровно там, где тема
+ * СМЕНИЛАСЬ, а не на каждом узле.
+ *
+ * Значение — ПОДПИСЬ носителя, а не объект темы. Сравнивать темы по identity
+ * нельзя: декораторы Storybook делают `ThemeFactory.create(theme, storybookTheme)`
+ * на каждый рендер, объект каждый раз новый, а значения те же — и экономии не
+ * было бы вовсе. Подпись включает инлайн-дельту, потому что дельта — такая же
+ * часть того, что действует на узле, как и класс.
+ *
+ * `null` значит «выше не объявлено ничего»: тогда носитель печатается, как
+ * печатался раньше. Это и есть значение по умолчанию, и оно намеренно НЕ равно
+ * «светлая тема»: пока жив рантайм-режим, на `:root` не объявлено ничего, и
+ * умолчание «светлая» оставило бы страницу без переменных вовсе. Приложение
+ * сообщает корневую тему пропом `rootTheme`, когда подключило файл темы.
+ */
+export declare const themeCarrierSignature: (vars: ThemeCssVars) => string;
+/**
+ * Носитель, объявленный выше по DOM. Публикуют его те, кто его печатает.
+ */
+export declare const DeclaredThemeContext: React.Context<string | null>;
+/**
+ * Носитель, объявленный на корне документа.
+ *
+ * Отдельный контекст, и его никто не переопределяет: он нужен порталам.
+ * Портальное поддерево живёт в контейнере у `body`, то есть вне того места DOM,
+ * где стоял носитель предка, — значит внутри портала действует КОРНЕВАЯ тема, и
+ * значение надо не перенести, а сбросить к корневому.
+ *
+ * Через React, а не через атрибуты DOM: образец из `colors`
+ * (`applyKonturColorsAttributes`) работает в `componentDidMount`, то есть кадром
+ * позже — это мигание, — не умеет переносить инлайн-дельту и не существует на
+ * сервере. У `colors` нет React-контекста, у нас есть.
+ */
+export declare const RootDeclaredThemeContext: React.Context<string | null>;

package/lib/theming/declaredTheme.js

@@ -0,0 +1,56 @@
+import React from 'react';
+/**
+ * Какая тема уже объявлена в DOM над этим узлом.
+ *
+ * Зачем. Блок объявлений `--kontur-*` печатался на корне КАЖДОГО компонента, и
+ * это закрывало половину обещания темизации: объявление на самом элементе всегда
+ * сильнее унаследованного, поэтому `:root { --kontur-btnDefaultBg: … }` от
+ * приложения до компонента не доходило — его экранировал собственный блок
+ * компонента (раздел 8.3 дизайн-документа). Носитель нужен ровно там, где тема
+ * СМЕНИЛАСЬ, а не на каждом узле.
+ *
+ * Значение — ПОДПИСЬ носителя, а не объект темы. Сравнивать темы по identity
+ * нельзя: декораторы Storybook делают `ThemeFactory.create(theme, storybookTheme)`
+ * на каждый рендер, объект каждый раз новый, а значения те же — и экономии не
+ * было бы вовсе. Подпись включает инлайн-дельту, потому что дельта — такая же
+ * часть того, что действует на узле, как и класс.
+ *
+ * `null` значит «выше не объявлено ничего»: тогда носитель печатается, как
+ * печатался раньше. Это и есть значение по умолчанию, и оно намеренно НЕ равно
+ * «светлая тема»: пока жив рантайм-режим, на `:root` не объявлено ничего, и
+ * умолчание «светлая» оставило бы страницу без переменных вовсе. Приложение
+ * сообщает корневую тему пропом `rootTheme`, когда подключило файл темы.
+ */
+export var themeCarrierSignature = function (vars) {
+    var style = vars.style;
+    if (!style) {
+        return vars.className;
+    }
+    // Ключи сортируются: порядок объявлений в дельте на результат не влияет, а
+    // подпись от него зависеть не должна — иначе один и тот же носитель считался
+    // бы разным.
+    var declarations = Object.keys(style)
+        .sort()
+        .map(function (name) { return "".concat(name, ":").concat(style[name]); })
+        .join(';');
+    return "".concat(vars.className, "|").concat(declarations);
+};
+/**
+ * Носитель, объявленный выше по DOM. Публикуют его те, кто его печатает.
+ */
+export var DeclaredThemeContext = React.createContext(null);
+/**
+ * Носитель, объявленный на корне документа.
+ *
+ * Отдельный контекст, и его никто не переопределяет: он нужен порталам.
+ * Портальное поддерево живёт в контейнере у `body`, то есть вне того места DOM,
+ * где стоял носитель предка, — значит внутри портала действует КОРНЕВАЯ тема, и
+ * значение надо не перенести, а сбросить к корневому.
+ *
+ * Через React, а не через атрибуты DOM: образец из `colors`
+ * (`applyKonturColorsAttributes`) работает в `componentDidMount`, то есть кадром
+ * позже — это мигание, — не умеет переносить инлайн-дельту и не существует на
+ * сервере. У `colors` нет React-контекста, у нас есть.
+ */
+export var RootDeclaredThemeContext = React.createContext(null);
+//# sourceMappingURL=declaredTheme.js.map

package/lib/theming/declaredTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"declaredTheme.js","sourceRoot":"","sources":["declaredTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAkB;IACtD,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,2EAA2E;IAC3E,6EAA6E;IAC7E,aAAa;IACb,IAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;SACpC,IAAI,EAAE;SACN,GAAG,CAAC,UAAC,IAAI,IAAK,OAAA,UAAG,IAAI,cAAI,KAAK,CAAC,IAAI,CAAC,CAAE,EAAxB,CAAwB,CAAC;SACvC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,UAAG,IAAI,CAAC,SAAS,cAAI,YAAY,CAAE,CAAC;AAC7C,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAgB,IAAI,CAAC,CAAC;AAE7E;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,IAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAgB,IAAI,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ThemeCssVars } from './themeCssVarsClass.js';\n\n/**\n * Какая тема уже объявлена в DOM над этим узлом.\n *\n * Зачем. Блок объявлений `--kontur-*` печатался на корне КАЖДОГО компонента, и\n * это закрывало половину обещания темизации: объявление на самом элементе всегда\n * сильнее унаследованного, поэтому `:root { --kontur-btnDefaultBg: … }` от\n * приложения до компонента не доходило — его экранировал собственный блок\n * компонента (раздел 8.3 дизайн-документа). Носитель нужен ровно там, где тема\n * СМЕНИЛАСЬ, а не на каждом узле.\n *\n * Значение — ПОДПИСЬ носителя, а не объект темы. Сравнивать темы по identity\n * нельзя: декораторы Storybook делают `ThemeFactory.create(theme, storybookTheme)`\n * на каждый рендер, объект каждый раз новый, а значения те же — и экономии не\n * было бы вовсе. Подпись включает инлайн-дельту, потому что дельта — такая же\n * часть того, что действует на узле, как и класс.\n *\n * `null` значит «выше не объявлено ничего»: тогда носитель печатается, как\n * печатался раньше. Это и есть значение по умолчанию, и оно намеренно НЕ равно\n * «светлая тема»: пока жив рантайм-режим, на `:root` не объявлено ничего, и\n * умолчание «светлая» оставило бы страницу без переменных вовсе. Приложение\n * сообщает корневую тему пропом `rootTheme`, когда подключило файл темы.\n */\nexport const themeCarrierSignature = (vars: ThemeCssVars): string => {\n  const style = vars.style;\n  if (!style) {\n    return vars.className;\n  }\n\n  // Ключи сортируются: порядок объявлений в дельте на результат не влияет, а\n  // подпись от него зависеть не должна — иначе один и тот же носитель считался\n  // бы разным.\n  const declarations = Object.keys(style)\n    .sort()\n    .map((name) => `${name}:${style[name]}`)\n    .join(';');\n\n  return `${vars.className}|${declarations}`;\n};\n\n/**\n * Носитель, объявленный выше по DOM. Публикуют его те, кто его печатает.\n */\nexport const DeclaredThemeContext = React.createContext<string | null>(null);\n\n/**\n * Носитель, объявленный на корне документа.\n *\n * Отдельный контекст, и его никто не переопределяет: он нужен порталам.\n * Портальное поддерево живёт в контейнере у `body`, то есть вне того места DOM,\n * где стоял носитель предка, — значит внутри портала действует КОРНЕВАЯ тема, и\n * значение надо не перенести, а сбросить к корневому.\n *\n * Через React, а не через атрибуты DOM: образец из `colors`\n * (`applyKonturColorsAttributes`) работает в `componentDidMount`, то есть кадром\n * позже — это мигание, — не умеет переносить инлайн-дельту и не существует на\n * сервере. У `colors` нет React-контекста, у нас есть.\n */\nexport const RootDeclaredThemeContext = React.createContext<string | null>(null);\n"]}

package/lib/theming/hashString.d.ts

@@ -0,0 +1,19 @@
+/**
+ * MurmurHash2 — тот же хеш, что считал `@emotion/hash`.
+ *
+ * Вшит, а не взят пакетом, по одной причине: `@emotion/hash` в зависимостях
+ * выглядел бы как «Emotion не снят», хотя от него оставалась одна чистая
+ * функция без побочных эффектов. Инстанса Emotion в библиотеке больше нет
+ * (работа T10), и это последнее, что от него тянулось.
+ *
+ * Алгоритм менять НЕЛЬЗЯ, даже на «лучший». Имя класса-носителя темы считается
+ * от значений темы этой функцией, и то же имя вычисляет сборка
+ * (`scripts/extract-theme-css.mts`), печатая под ним правило в файл. Разойдись
+ * они — и разметка ссылалась бы на класс, которого в файле нет: страница без
+ * переменных, без единой ошибки в консоли. Совпадение держит гейт
+ * `__tests__/staticThemeVars.test.ts`.
+ *
+ * Портировано из https://github.com/aappleby/smhasher (MurmurHash2), через
+ * реализацию Emotion.
+ */
+export declare function hashString(str: string): string;

package/lib/theming/hashString.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-bitwise */
+/**
+ * MurmurHash2 — тот же хеш, что считал `@emotion/hash`.
+ *
+ * Вшит, а не взят пакетом, по одной причине: `@emotion/hash` в зависимостях
+ * выглядел бы как «Emotion не снят», хотя от него оставалась одна чистая
+ * функция без побочных эффектов. Инстанса Emotion в библиотеке больше нет
+ * (работа T10), и это последнее, что от него тянулось.
+ *
+ * Алгоритм менять НЕЛЬЗЯ, даже на «лучший». Имя класса-носителя темы считается
+ * от значений темы этой функцией, и то же имя вычисляет сборка
+ * (`scripts/extract-theme-css.mts`), печатая под ним правило в файл. Разойдись
+ * они — и разметка ссылалась бы на класс, которого в файле нет: страница без
+ * переменных, без единой ошибки в консоли. Совпадение держит гейт
+ * `__tests__/staticThemeVars.test.ts`.
+ *
+ * Портировано из https://github.com/aappleby/smhasher (MurmurHash2), через
+ * реализацию Emotion.
+ */
+export function hashString(str) {
+    var h = 0;
+    var k;
+    var i = 0;
+    var len = str.length;
+    for (; len >= 4; ++i, len -= 4) {
+        k =
+            (str.charCodeAt(i) & 0xff) |
+                ((str.charCodeAt(++i) & 0xff) << 8) |
+                ((str.charCodeAt(++i) & 0xff) << 16) |
+                ((str.charCodeAt(++i) & 0xff) << 24);
+        k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);
+        k ^= k >>> 24;
+        h =
+            ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^
+                ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));
+    }
+    switch (len) {
+        case 3:
+            h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+        // fallthrough
+        case 2:
+            h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+        // fallthrough
+        case 1:
+            h ^= str.charCodeAt(i) & 0xff;
+            h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+    }
+    h ^= h >>> 13;
+    h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);
+    return ((h ^ (h >>> 15)) >>> 0).toString(36);
+}
+//# sourceMappingURL=hashString.js.map

package/lib/theming/hashString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hashString.js","sourceRoot":"","sources":["hashString.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAE/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,UAAU,CAAC,GAAW;IACpC,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,CAAC,CAAC;IACN,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;IAErB,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAC/B,CAAC;YACC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;gBAC1B,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACpC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACvC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC;YACC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;gBAC3D,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,QAAQ,GAAG,EAAE,CAAC;QACZ,KAAK,CAAC;YACJ,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5C,cAAc;QACd,KAAK,CAAC;YACJ,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,cAAc;QACd,KAAK,CAAC;YACJ,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;YAC9B,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;IAE9D,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["/* eslint-disable no-bitwise */\n\n/**\n * MurmurHash2 — тот же хеш, что считал `@emotion/hash`.\n *\n * Вшит, а не взят пакетом, по одной причине: `@emotion/hash` в зависимостях\n * выглядел бы как «Emotion не снят», хотя от него оставалась одна чистая\n * функция без побочных эффектов. Инстанса Emotion в библиотеке больше нет\n * (работа T10), и это последнее, что от него тянулось.\n *\n * Алгоритм менять НЕЛЬЗЯ, даже на «лучший». Имя класса-носителя темы считается\n * от значений темы этой функцией, и то же имя вычисляет сборка\n * (`scripts/extract-theme-css.mts`), печатая под ним правило в файл. Разойдись\n * они — и разметка ссылалась бы на класс, которого в файле нет: страница без\n * переменных, без единой ошибки в консоли. Совпадение держит гейт\n * `__tests__/staticThemeVars.test.ts`.\n *\n * Портировано из https://github.com/aappleby/smhasher (MurmurHash2), через\n * реализацию Emotion.\n */\nexport function hashString(str: string): string {\n  let h = 0;\n  let k;\n  let i = 0;\n  let len = str.length;\n\n  for (; len >= 4; ++i, len -= 4) {\n    k =\n      (str.charCodeAt(i) & 0xff) |\n      ((str.charCodeAt(++i) & 0xff) << 8) |\n      ((str.charCodeAt(++i) & 0xff) << 16) |\n      ((str.charCodeAt(++i) & 0xff) << 24);\n    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16);\n    k ^= k >>> 24;\n    h =\n      ((k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0xe995) << 16)) ^\n      ((h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16));\n  }\n\n  switch (len) {\n    case 3:\n      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n    // fallthrough\n    case 2:\n      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n    // fallthrough\n    case 1:\n      h ^= str.charCodeAt(i) & 0xff;\n      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);\n  }\n\n  h ^= h >>> 13;\n  h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0xe995) << 16);\n\n  return ((h ^ (h >>> 15)) >>> 0).toString(36);\n}\n"]}

package/lib/theming/staticStyles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Стилевой модуль, правила которого лежат обычным CSS-файлом.
+ *
+ * Такой модуль ничего не вставляет в рантайме и ничего не считает: он отдаёт
+ * готовые имена классов, а сами правила приезжают файлом рядом
+ * (`<Компонент>.css`), который сборка складывает в `react-ui.css`.
+ *
+ * Форма вызова оставлена прежней — `getStyles()` с игнорируемым
+ * аргументом, — чтобы компоненты не пришлось править вместе со стилями:
+ * миграция идёт по одному файлу, и каждый шаг должен быть проверяемым
+ * отдельно. Аргумент объявлен необязательным, поэтому арность функции нулевая,
+ * и извлечение статического CSS такой модуль пропускает — правил в нём нет.
+ */
+export type StaticStyles<T extends Record<string, string>> = {
+    [K in keyof T]: () => string;
+};
+export declare const staticStyles: <T extends Record<string, string>>(classes: T) => ((ignored?: unknown) => StaticStyles<T>);

package/lib/theming/staticStyles.js

@@ -0,0 +1,8 @@
+export var staticStyles = function (classes) {
+    var styles = Object.fromEntries(Object.entries(classes).map(function (_a) {
+        var name = _a[0], className = _a[1];
+        return [name, function () { return className; }];
+    }));
+    return function () { return styles; };
+};
+//# sourceMappingURL=staticStyles.js.map

package/lib/theming/staticStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"staticStyles.js","sourceRoot":"","sources":["staticStyles.ts"],"names":[],"mappings":"AAeA,MAAM,CAAC,IAAM,YAAY,GAAG,UAC1B,OAAU;IAEV,IAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAC/B,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAiB;YAAhB,IAAI,QAAA,EAAE,SAAS,QAAA;QAAM,OAAA,CAAC,IAAI,EAAE,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;IAAvB,CAAuB,CAAC,CACzD,CAAC;IAErB,OAAO,cAAM,OAAA,MAAM,EAAN,CAAM,CAAC;AACtB,CAAC,CAAC","sourcesContent":["/**\n * Стилевой модуль, правила которого лежат обычным CSS-файлом.\n *\n * Такой модуль ничего не вставляет в рантайме и ничего не считает: он отдаёт\n * готовые имена классов, а сами правила приезжают файлом рядом\n * (`<Компонент>.css`), который сборка складывает в `react-ui.css`.\n *\n * Форма вызова оставлена прежней — `getStyles()` с игнорируемым\n * аргументом, — чтобы компоненты не пришлось править вместе со стилями:\n * миграция идёт по одному файлу, и каждый шаг должен быть проверяемым\n * отдельно. Аргумент объявлен необязательным, поэтому арность функции нулевая,\n * и извлечение статического CSS такой модуль пропускает — правил в нём нет.\n */\nexport type StaticStyles<T extends Record<string, string>> = { [K in keyof T]: () => string };\n\nexport const staticStyles = <T extends Record<string, string>>(\n  classes: T,\n): ((ignored?: unknown) => StaticStyles<T>) => {\n  const styles = Object.fromEntries(\n    Object.entries(classes).map(([name, className]) => [name, () => className]),\n  ) as StaticStyles<T>;\n\n  return () => styles;\n};\n"]}