@skbkontur/react-ui 6.4.7-9ac75.0 → 6.4.7

package/lib/styles/UiFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiFont.js","sourceRoot":"","sources":["UiFont.ts"],"names":[],"mappings":";;;;AAEA,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,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,OAAgB,IAAW,OAAA,OAAO,CAAC,YAAY,gLAAA,qCAE7D,EAAY,yCACO,EAAW,2BAEhD,KAHkB,YAAY,EACO,WAAW,GAHW,CAK3D,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\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\nexport const injectGlobalFont = (emotion: Emotion): void => emotion.injectGlobal`\n  @font-face {\n    font-family: ${UI_FONT_NAME};\n    src: url(data:font/woff2;base64,${uiFontWoff2}) format('woff2');\n  }\n`;\n"]}

package/lib/styles/getLabGrotesqueBaselineCompensation.d.ts

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

package/lib/styles/getLabGrotesqueBaselineCompensation.js

@@ -1,27 +1,10 @@
-// `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)';
+export var getLabGrotesqueBaselineCompensation = function (fontSize, compensation, isChrome, isFirefox) {
+    if (fontSize < 16 && !isChrome) {
+        return compensation;
     }
-    else if (size === 16) {
-        factor = 'var(--k-baseline-16, 0)';
+    else if ((fontSize === 16 && isChrome) || (fontSize === 18 && (isFirefox || isChrome))) {
+        return -compensation;
     }
-    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';
+    return 0;
 };
 //# sourceMappingURL=getLabGrotesqueBaselineCompensation.js.map

package/lib/styles/getLabGrotesqueBaselineCompensation.js.map

@@ -1 +1 @@
-{"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"]}
+{"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"]}

package/lib/theming/AnimationKeyframes.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from './Theme.js';
+export declare const getAnimationKeyframes: import("./Emotion.js").StylesGetter<{
+    spinnerCircleOffset(): string;
+    spinnerCircleLength(): string;
+    spinnerCircleRotate(): string;
+    spinnerColor(t: Theme): string;
+}>;

package/lib/theming/AnimationKeyframes.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from './Emotion.js';
+export var getAnimationKeyframes = memoizeGetStyles(function (_a) {
+    var keyframes = _a.keyframes;
+    return ({
+        spinnerCircleOffset: function () {
+            return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      "], ["\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      "])));
+        },
+        spinnerCircleLength: function () {
+            return keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "], ["\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      "])));
+        },
+        spinnerCircleRotate: function () {
+            return keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        100% { transform: rotate(360deg); }\n      "], ["\n        100% { transform: rotate(360deg); }\n      "])));
+        },
+        spinnerColor: function (t) {
+            return keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "], ["\n        100%, 0% { stroke: ", "; }\n        40% { stroke: ", "; }\n        66% { stroke: ", "; }\n        80%, 90% { stroke: ", "; }\n      "])), t.red, t.yellow, t.green, t.brand);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=AnimationKeyframes.js.map

package/lib/theming/AnimationKeyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationKeyframes.js","sourceRoot":"","sources":["AnimationKeyframes.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,CAAC,IAAM,qBAAqB,GAAG,gBAAgB,CAAC,UAAC,EAAsB;QAApB,SAAS,eAAA;IAAgB,OAAA,CAAC;QACjF,mBAAmB;YACjB,OAAO,SAAS,kKAAA,+FAGb,KAAC;QACN,CAAC;QACD,mBAAmB;YACjB,OAAO,SAAS,uOAAA,oKAIb,KAAC;QACN,CAAC;QACD,mBAAmB;YACjB,OAAO,SAAS,0HAAA,uDAEb,KAAC;QACN,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,SAAS,mNAAA,+BACS,EAAK,6BACV,EAAQ,6BACR,EAAO,kCACF,EAAO,aAC7B,KAJsB,CAAC,CAAC,GAAG,EACV,CAAC,CAAC,MAAM,EACR,CAAC,CAAC,KAAK,EACF,CAAC,CAAC,KAAK,EAC5B;QACN,CAAC;KACF,CAAC;AA3BgF,CA2BhF,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from './Emotion.js';\nimport type { Theme } from './Theme.js';\n\nexport const getAnimationKeyframes = memoizeGetStyles(({ keyframes }: Emotion) => ({\n  spinnerCircleOffset() {\n    return keyframes`\n        0% { stroke-dashoffset: 231.25%; }\n        100% { stroke-dashoffset: 0%; }\n      `;\n  },\n  spinnerCircleLength() {\n    return keyframes`\n        0% { stroke-dasharray: 62.5%, 168.75%; }\n        50% {  stroke-dasharray: 187.5%, 43.75%; }\n        100% { stroke-dasharray: 62.5%, 168.75%; }\n      `;\n  },\n  spinnerCircleRotate() {\n    return keyframes`\n        100% { transform: rotate(360deg); }\n      `;\n  },\n  spinnerColor(t: Theme) {\n    return keyframes`\n        100%, 0% { stroke: ${t.red}; }\n        40% { stroke: ${t.yellow}; }\n        66% { stroke: ${t.green}; }\n        80%, 90% { stroke: ${t.brand}; }\n      `;\n  },\n}));\n"]}

package/lib/theming/Emotion.d.ts

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

package/lib/theming/Emotion.js

@@ -1,16 +1,72 @@
+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 { 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];
-        },
+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,
     });
 };
-export var emotion = getEmotion();
+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));
+        }, {});
+    };
+};
 //# sourceMappingURL=Emotion.js.map

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;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"]}
+{"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"]}

package/lib/theming/ThemeFactory.d.ts

@@ -1,8 +1,17 @@
 import type { NoInfer } from '../utils.js';
 import type { Theme, ThemeIn } from './Theme.js';
 export declare class ThemeFactory {
-    static readonly defaultTheme: Theme;
+    /**
+     * 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 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,12 +1,33 @@
 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)) {
@@ -31,7 +52,14 @@ var ThemeFactory = /** @class */ (function () {
         });
         return Object.freeze(newTheme);
     };
-    ThemeFactory.defaultTheme = LIGHT_THEME;
+    /**
+     * 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);
     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,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"]}
+{"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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "6.4.7-9ac75.0",
+  "version": "6.4.7",
   "description": "UI Components",
   "homepage": "https://tech.skbkontur.ru/kontur-ui",
   "bugs": {
@@ -12,19 +12,13 @@
     "url": "git+ssh://git@github.com/skbkontur/retail-ui.git"
   },
   "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.css.ts",
-    "theme-loader.js",
-    "./lib/renderEnvironment/RenderEnvironmentContext.*"
-  ],
+  "sideEffects": false,
   "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",
@@ -155,8 +149,6 @@
     "./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",
@@ -243,19 +235,16 @@
     "./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",
-    "./react-ui.css": "./react-ui.css"
+    "./lib/size/SizeControlContext": "./lib/size/SizeControlContext.js"
   },
   "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: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:copy-files": "copyfiles package.json README.md CHANGELOG.md LICENSE typings/* build",
     "build:lint:publint": "publint --pack npm ./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:lint:attw": "attw --ignore-rules cjs-resolves-to-esm --quiet --pack ./build",
     "build:exports": "node ./scripts/exports.ts",
     "prerelease": "yarn build",
     "release": "npm publish ./build --workspaces=false",
@@ -297,6 +286,7 @@
     "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",
@@ -333,11 +323,7 @@
     "@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",
@@ -370,7 +356,6 @@
     "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",

package/typings/stylis-plugin-extra-scope.d.ts

@@ -0,0 +1,3 @@
+declare module 'stylis-plugin-extra-scope' {
+  export default (scope: string) => StylisPlugin;
+}

package/components/Autocomplete/Autocomplete.css.d.ts

@@ -1,6 +0,0 @@
-export declare const root: string;
-export declare const noPortal: string;
-export declare const styles: {
-    root: string;
-    noPortal: string;
-};

package/components/Autocomplete/Autocomplete.css.js

@@ -1,4 +0,0 @@
-
-export var noPortal = 'react-ui-Autocomplete__noPortal';
-export var root = 'react-ui-Autocomplete__root';
-export var styles = {root:'react-ui-Autocomplete__root',noPortal:'react-ui-Autocomplete__noPortal'};

package/components/Autocomplete/Autocomplete.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Autocomplete.css.js","sourceRoot":"","sources":["Autocomplete.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC;IACxB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,CAAC,CAAC,UAAU;CACpB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;AAExD,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,IAAI,MAAA,EAAE,QAAQ,UAAA,EAAE,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { t } from '../../lib/theming/vanilla.js';\n\nexport const root = style({\n  display: 'inline-block',\n  width: t.inputWidth,\n});\n\nexport const noPortal = style({ position: 'relative' });\n\nexport const styles = { root, noPortal };\n"]}

package/components/Button/Button.css.d.ts

@@ -1,166 +0,0 @@
-import { globalClasses } from './Button.classes.js';
-export { globalClasses };
-export declare const root: string;
-/** @deprecated */
-export declare const outlineDefault: string;
-/** @deprecated */
-export declare const outlineWarning: string;
-/** @deprecated */
-export declare const outlineError: string;
-/** @deprecated */
-export declare const outlineLink: string;
-/** @deprecated */
-export declare const outlineLinkWarning: string;
-/** @deprecated */
-export declare const outlineLinkError: string;
-export declare const sizeSmall: string;
-export declare const sizeMedium: string;
-export declare const sizeLarge: string;
-export declare const sizeSmallWithIcon: string;
-export declare const sizeMediumWithIcon: string;
-export declare const sizeLargeWithIcon: string;
-export declare const sizeSmallWithRightIcon: string;
-export declare const sizeMediumWithRightIcon: string;
-export declare const sizeLargeWithRightIcon: string;
-export declare const sizeSmallWithIconWithoutText: string;
-export declare const sizeMediumWithIconWithoutText: string;
-export declare const sizeLargeWithIconWithoutText: string;
-/** @deprecated */
-export declare const link: string;
-/** @deprecated */
-export declare const linkLineHeight: string;
-/** @deprecated */
-export declare const linkLineHeightSafariFallback: string;
-/** @deprecated */
-export declare const linkFocus: string;
-/** @deprecated */
-export declare const linkDisabled: string;
-export declare const arrowIconRoot: string;
-export declare const arrowIconRootSmall: string;
-export declare const arrowIconRootMedium: string;
-export declare const arrowIconRootLarge: string;
-export declare const arrowIconLeft: string;
-export declare const accent: string;
-export declare const success: string;
-export declare const danger: string;
-export declare const pay: string;
-export declare const text: string;
-export declare const outline: string;
-export declare const fill: string;
-export declare const caption: string;
-export declare const wrap: string;
-export declare const wrapSmall: string;
-export declare const wrapMedium: string;
-export declare const wrapLarge: string;
-/** @deprecated */
-export declare const narrow: string;
-export declare const noPadding: string;
-export declare const noRightPadding: string;
-export declare const wrapLink: string;
-export declare const loading: string;
-export declare const visibilityHidden: string;
-export declare const activeDefault: string;
-export declare const activeAccent: string;
-export declare const activeSuccess: string;
-export declare const activeDanger: string;
-export declare const activePay: string;
-export declare const activeLink: string;
-export declare const activeText: string;
-export declare const activeOutline: string;
-export declare const activeFill: string;
-export declare const withArrowIconRightSmall: string;
-export declare const withArrowIconRightMedium: string;
-export declare const withArrowIconRightLarge: string;
-export declare const withArrowIconLeftSmall: string;
-export declare const withArrowIconLeftMedium: string;
-export declare const withArrowIconLeftLarge: string;
-export declare const focus: string;
-export declare const checked: string;
-export declare const checkedFocused: string;
-export declare const disabled: string;
-export declare const disabledWithoutOutline: string;
-export declare const checkedDisabled: string;
-/** @deprecated */
-export declare const borderless: string;
-export declare const backlessDisabled: string;
-export declare const textDisabled: string;
-export declare const captionLink: string;
-export declare const captionDisabled: string;
-export declare const styles: {
-    root: string;
-    withArrowIconRightSmall: string;
-    withArrowIconRightMedium: string;
-    withArrowIconRightLarge: string;
-    withArrowIconLeftSmall: string;
-    withArrowIconLeftMedium: string;
-    withArrowIconLeftLarge: string;
-    outlineDefault: string;
-    outlineWarning: string;
-    outlineError: string;
-    outlineLink: string;
-    outlineLinkWarning: string;
-    outlineLinkError: string;
-    sizeSmall: string;
-    sizeMedium: string;
-    sizeLarge: string;
-    sizeSmallWithIcon: string;
-    sizeMediumWithIcon: string;
-    sizeLargeWithIcon: string;
-    sizeSmallWithRightIcon: string;
-    sizeMediumWithRightIcon: string;
-    sizeLargeWithRightIcon: string;
-    sizeSmallWithIconWithoutText: string;
-    sizeMediumWithIconWithoutText: string;
-    sizeLargeWithIconWithoutText: string;
-    link: string;
-    linkLineHeight: string;
-    linkLineHeightSafariFallback: string;
-    linkFocus: string;
-    linkDisabled: string;
-    focus: string;
-    disabled: string;
-    disabledWithoutOutline: string;
-    arrowIconRoot: string;
-    arrowIconRootSmall: string;
-    arrowIconRootMedium: string;
-    arrowIconRootLarge: string;
-    arrowIconLeft: string;
-    default: string;
-    accent: string;
-    success: string;
-    danger: string;
-    pay: string;
-    text: string;
-    outline: string;
-    fill: string;
-    checked: string;
-    checkedFocused: string;
-    checkedDisabled: string;
-    caption: string;
-    captionLink: string;
-    captionDisabled: string;
-    wrap: string;
-    wrapSmall: string;
-    wrapMedium: string;
-    wrapLarge: string;
-    narrow: string;
-    noPadding: string;
-    noRightPadding: string;
-    wrapLink: string;
-    borderless: string;
-    backlessDisabled: string;
-    textDisabled: string;
-    loading: string;
-    visibilityHidden: string;
-};
-export declare const activeStyles: {
-    default: string;
-    accent: string;
-    success: string;
-    danger: string;
-    pay: string;
-    link: string;
-    text: string;
-    outline: string;
-    fill: string;
-};