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

package/internal/ClearCrossIcon/ClearCrossIcon.js

@@ -22,27 +22,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
 import { getStyles } from './ClearCrossIcon.styles.js';
 import { CrossIcon } from './CrossIcon.js';
 export var ClearCrossIcon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'small' : _b, style = _a.style, dataTid = _a["data-tid"], rest = __rest(_a, ["size", "style", 'data-tid']);
     var globalObject = useGlobal();
-    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
-    var theme = React.useContext(ThemeContext);
     var keyListener = useKeyListener();
     var getSizeClassNames = function (size) {
         switch (size) {
             case 'large':
-                return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };
+                return { button: styles.clearCrossLarge(), span: styles.relativeWidthLarge() };
             case 'medium':
-                return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };
+                return { button: styles.clearCrossMedium(), span: styles.relativeWidthMedium() };
             case 'small':
             default:
-                return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };
+                return { button: styles.clearCrossSmall(), span: styles.relativeWidthSmall() };
         }
     };
     var _c = React.useState(false), focusedByTab = _c[0], setFocusedByTab = _c[1];
@@ -58,9 +56,9 @@ export var ClearCrossIcon = function (_a) {
     var handleBlur = function () { return setFocusedByTab(false); };
     return (React.createElement(CommonWrapper, __assign({}, rest),
         React.createElement("span", { className: getSizeClassNames(size).span },
-            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root(theme), 
+            React.createElement("button", __assign({ "data-tid": dataTid, type: "button", tabIndex: -1, className: cx(styles.root(), 
                 // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
-                focusedByTab && styles.focus(theme), getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
+                focusedByTab && styles.focus(), getSizeClassNames(size).button), style: style, onFocus: handleFocus, onBlur: handleBlur }, rest),
                 React.createElement(CrossIcon, { size: size, focusable: true })))));
 };
 ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';

package/internal/ClearCrossIcon/ClearCrossIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { getStyles } from './ClearCrossIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const theme = React.useContext(ThemeContext);\n  const keyListener = useKeyListener();\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(theme),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(theme),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}
+{"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["ClearCrossIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,OAAO,EAAE,gBAAgB,IAAI,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAGtE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAU3C,MAAM,CAAC,IAAM,cAAc,GAAiD,UAAC,EAK5E;IAJC,IAAA,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,KAAK,WAAA,EACO,OAAO,iBAAA,EAChB,IAAI,cAJoE,6BAK5E,CADQ;IAEP,IAAM,YAAY,GAAG,SAAS,EAAE,CAAC;IACjC,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,IAAM,iBAAiB,GAAG,UAAC,IAAe;QACxC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,EAAE,CAAC;YACjF,KAAK,QAAQ;gBACX,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,mBAAmB,EAAE,EAAE,CAAC;YACnF,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,kBAAkB,EAAE,EAAE,CAAC;QACnF,CAAC;IACH,CAAC,CAAC;IAEI,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,EAA/D,YAAY,QAAA,EAAE,eAAe,QAAkC,CAAC;IAEvE,IAAM,WAAW,GAAG;;QAClB,4FAA4F;QAC5F,MAAA,YAAY,CAAC,qBAAqB,6DAAG;YACnC,IAAI,WAAW,CAAC,YAAY,EAAE,CAAC;gBAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,IAAM,UAAU,GAAG,cAAM,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,CAAC;IAEhD,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI;QACrB,8BAAM,SAAS,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI;YAC3C,qDACY,OAAO,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EAAE;gBACb,qHAAqH;gBACrH,YAAY,IAAI,MAAM,CAAC,KAAK,EAAE,EAC9B,iBAAiB,CAAC,IAAI,CAAC,CAAC,MAAM,CAC/B,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,IACd,IAAI;gBAER,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,SAAG,CAC5B,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,mBAAmB,GAAG,gBAAgB,CAAC;AACtD,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { TokenSize } from '../../components/Token/index.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { getStyles } from './ClearCrossIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const styles = useStyles(getStyles);\n  const keyListener = useKeyListener();\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(), span: styles.relativeWidthLarge() };\n      case 'medium':\n        return { button: styles.clearCrossMedium(), span: styles.relativeWidthMedium() };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(), span: styles.relativeWidthSmall() };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts

@@ -1,12 +1,11 @@
-import type { Emotion } from '@emotion/css/create-instance';
-import type { Theme } from '../../lib/theming/Theme.js';
-export declare const getStyles: (emotion: Emotion) => {
-    root(t: Theme): string;
-    focus(t: Theme): string;
-    clearCrossSmall(t: Theme): string;
-    clearCrossMedium(t: Theme): string;
-    clearCrossLarge(t: Theme): string;
-    relativeWidthSmall(t: Theme): string;
-    relativeWidthMedium(t: Theme): string;
-    relativeWidthLarge(t: Theme): string;
-};
+/** Правила — в `ClearCrossIcon.css`; здесь только имена классов. */
+export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
+    root: string;
+    focus: string;
+    clearCrossSmall: string;
+    clearCrossMedium: string;
+    clearCrossLarge: string;
+    relativeWidthSmall: string;
+    relativeWidthMedium: string;
+    relativeWidthLarge: string;
+}>;

package/internal/ClearCrossIcon/ClearCrossIcon.styles.js

@@ -1,36 +1,13 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { resetButton } from '../../lib/styles/Mixins.js';
-import { memoizeStyle } from '../../lib/theming/Emotion.js';
-export var getStyles = function (emotion) {
-    return memoizeStyle({
-        root: function (t) {
-            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "], ["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])), resetButton(), t.clearCrossIconColor, t.transitionDuration, t.transitionTimingFunction, t.clearCrossIconHoverColor, t.clearCrossIconAlign, t.inputBorderWidth, t.inputBorderWidth);
-        },
-        focus: function (t) {
-            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.clearCrossIconHoverColor);
-        },
-        clearCrossSmall: function (t) {
-            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthSmall, t.clearCrossIconHeightSmall, t.clearCrossIconBorderRadiusSmall);
-        },
-        clearCrossMedium: function (t) {
-            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthMedium, t.clearCrossIconHeightMedium, t.clearCrossIconBorderRadiusMedium);
-        },
-        clearCrossLarge: function (t) {
-            return emotion.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.clearCrossIconWidthLarge, t.clearCrossIconHeightLarge, t.clearCrossIconBorderRadiusLarge);
-        },
-        relativeWidthSmall: function (t) {
-            return emotion.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeSmall);
-        },
-        relativeWidthMedium: function (t) {
-            return emotion.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeMedium);
-        },
-        relativeWidthLarge: function (t) {
-            return emotion.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: inline-block;\n      width: ", ";\n    "], ["\n      display: inline-block;\n      width: ", ";\n    "])), t.inputIconSizeLarge);
-        },
-    });
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+import { staticStyles } from '../../lib/theming/staticStyles.js';
+/** Правила — в `ClearCrossIcon.css`; здесь только имена классов. */
+export var getStyles = staticStyles({
+    root: 'react-ui-ClearCrossIcon-root',
+    focus: 'react-ui-ClearCrossIcon-focus',
+    clearCrossSmall: 'react-ui-ClearCrossIcon-clearCrossSmall',
+    clearCrossMedium: 'react-ui-ClearCrossIcon-clearCrossMedium',
+    clearCrossLarge: 'react-ui-ClearCrossIcon-clearCrossLarge',
+    relativeWidthSmall: 'react-ui-ClearCrossIcon-relativeWidthSmall',
+    relativeWidthMedium: 'react-ui-ClearCrossIcon-relativeWidthMedium',
+    relativeWidthLarge: 'react-ui-ClearCrossIcon-relativeWidthLarge',
+});
 //# sourceMappingURL=ClearCrossIcon.styles.js.map

package/internal/ClearCrossIcon/ClearCrossIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearCrossIcon.styles.js","sourceRoot":"","sources":["ClearCrossIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,OAAgB;IACxC,OAAA,YAAY,CAAC;QACX,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,0WAAA,UAChB,EAAa,iBACN,EAAqB,qDAEV,EAAoB,GAAI,EAA0B,qCAE3D,EAA0B,2DAGlB,EAAqB,0EAG9B,EAAkB,iBACpB,EAAkB,SAC3B,KAbG,WAAW,EAAE,EACN,CAAC,CAAC,mBAAmB,EAEV,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAE3D,CAAC,CAAC,wBAAwB,EAGlB,CAAC,CAAC,mBAAmB,EAG9B,CAAC,CAAC,gBAAgB,EACpB,CAAC,CAAC,gBAAgB,EAC1B;QACF,CAAC;QAED,KAAK,YAAC,CAAQ;YACZ,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA0B,WACpC,KADU,CAAC,CAAC,wBAAwB,EACnC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA0B,mBACzB,EAA2B,0BACpB,EAAiC,SACnD,KAHU,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,yBAAyB,EACpB,CAAC,CAAC,+BAA+B,EAClD;QACF,CAAC;QACD,gBAAgB,YAAC,CAAQ;YACvB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA2B,mBAC1B,EAA4B,0BACrB,EAAkC,SACpD,KAHU,CAAC,CAAC,yBAAyB,EAC1B,CAAC,CAAC,0BAA0B,EACrB,CAAC,CAAC,gCAAgC,EACnD;QACF,CAAC;QACD,eAAe,YAAC,CAAQ;YACtB,OAAO,OAAO,CAAC,GAAG,gJAAA,iBACT,EAA0B,mBACzB,EAA2B,0BACpB,EAAiC,SACnD,KAHU,CAAC,CAAC,wBAAwB,EACzB,CAAC,CAAC,yBAAyB,EACpB,CAAC,CAAC,+BAA+B,EAClD;QACF,CAAC;QACD,kBAAkB,YAAC,CAAQ;YACzB,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAoB,SAC9B,KADU,CAAC,CAAC,kBAAkB,EAC7B;QACF,CAAC;QACD,mBAAmB,YAAC,CAAQ;YAC1B,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAqB,SAC/B,KADU,CAAC,CAAC,mBAAmB,EAC9B;QACF,CAAC;QACD,kBAAkB,YAAC,CAAQ;YACzB,OAAO,OAAO,CAAC,GAAG,6HAAA,+CAET,EAAoB,SAC9B,KADU,CAAC,CAAC,kBAAkB,EAC7B;QACF,CAAC;KACF,CAAC;AAhEF,CAgEE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n      ${resetButton()}\n      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\n    `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n        color: ${t.clearCrossIconHoverColor};\n      `;\n    },\n\n    clearCrossSmall(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n    },\n    clearCrossMedium(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n    },\n    clearCrossLarge(t: Theme) {\n      return emotion.css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n    },\n    relativeWidthSmall(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n    },\n    relativeWidthMedium(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n    },\n    relativeWidthLarge(t: Theme) {\n      return emotion.css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n    },\n  });\n"]}
+{"version":3,"file":"ClearCrossIcon.styles.js","sourceRoot":"","sources":["ClearCrossIcon.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,oEAAoE;AACpE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,8BAA8B;IACpC,KAAK,EAAE,+BAA+B;IACtC,eAAe,EAAE,yCAAyC;IAC1D,gBAAgB,EAAE,0CAA0C;IAC5D,eAAe,EAAE,yCAAyC;IAC1D,kBAAkB,EAAE,4CAA4C;IAChE,mBAAmB,EAAE,6CAA6C;IAClE,kBAAkB,EAAE,4CAA4C;CACjE,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `ClearCrossIcon.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-ClearCrossIcon-root',\n  focus: 'react-ui-ClearCrossIcon-focus',\n  clearCrossSmall: 'react-ui-ClearCrossIcon-clearCrossSmall',\n  clearCrossMedium: 'react-ui-ClearCrossIcon-clearCrossMedium',\n  clearCrossLarge: 'react-ui-ClearCrossIcon-clearCrossLarge',\n  relativeWidthSmall: 'react-ui-ClearCrossIcon-relativeWidthSmall',\n  relativeWidthMedium: 'react-ui-ClearCrossIcon-relativeWidthMedium',\n  relativeWidthLarge: 'react-ui-ClearCrossIcon-relativeWidthLarge',\n});\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, CSSProperties } from 'react';
+import type { AriaAttributes } from 'react';
 import React from 'react';
 import type { CommonProps } from '../CommonWrapper/index.js';
 export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
@@ -15,22 +15,32 @@ export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>
      */
     side?: number;
     /**
-     * Цвет иконки
+     * Возможность сфокусироваться на кнопке клавишей TAB
+     *
+     * @default true
+     * */
+    tabbable?: boolean;
+    /**
+     * Цвет иконки.
      *
-     * Переменная темы: `closeBtnIconColor`
+     * @deprecated Библиотека внутри себя цвет задаёт классом через `className`.
+     * Проп оставлен для совместимости и порождает правило в рантайме, поэтому его
+     * содержимое нельзя извлечь на этапе сборки.
      */
-    color?: CSSProperties['color'];
+    color?: string;
     /**
-     * Цвет иконки при наведении мышью и при фокусе
+     * Цвет иконки при наведении мышью и при фокусе.
      *
-     * Переменная темы: `closeBtnIconHoverColor`
+     * @deprecated См. `color`.
      */
-    colorHover?: CSSProperties['color'];
+    colorHover?: string;
     /**
-     * Возможность сфокусироваться на кнопке клавишей TAB
+     * Класс с цветом иконки — вместо цвета в `root`.
      *
-     * @default true
-     * */
-    tabbable?: boolean;
+     * Нужен, чтобы цвет вызывающего и цвет по умолчанию были взаимоисключающими:
+     * в статическом CSS спор между ними решался бы порядком правил, а он не в
+     * пользу вызывающего.
+     */
+    colorClassName?: string;
 }
 export declare const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps>;

package/internal/CloseButtonIcon/CloseButtonIcon.js

@@ -22,25 +22,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { useKeyListener } from '../../lib/events/keyListener.js';
-import { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';
+import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
+import { THEME_CSS_VAR_PREFIX } from '../../lib/theming/themeToCssVars.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
 import { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';
 import { getStyles } from './CloseButtonIcon.styles.js';
 import { CrossIcon } from './CrossIcon.js';
 export var CloseButtonIcon = function (_a) {
-    var _b = _a.side, side = _b === void 0 ? DEFAULT_ICON_SIZE : _b, _c = _a.size, size = _c === void 0 ? DEFAULT_ICON_SIZE : _c, color = _a.color, colorHover = _a.colorHover, _d = _a.tabbable, tabbable = _d === void 0 ? true : _d, style = _a.style, rest = __rest(_a, ["side", "size", "color", "colorHover", "tabbable", "style"]);
+    var _b, _c;
+    var _d = _a.side, side = _d === void 0 ? DEFAULT_ICON_SIZE : _d, _e = _a.size, size = _e === void 0 ? DEFAULT_ICON_SIZE : _e, _f = _a.tabbable, tabbable = _f === void 0 ? true : _f, style = _a.style, className = _a.className, color = _a.color, colorHover = _a.colorHover, colorClassName = _a.colorClassName, rest = __rest(_a, ["side", "size", "tabbable", "style", "className", "color", "colorHover", "colorClassName"]);
     var globalObject = useGlobal();
-    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
-    var _theme = React.useContext(ThemeContext);
-    var theme = ThemeFactory.create({
-        closeBtnIconColor: color !== null && color !== void 0 ? color : _theme.closeBtnIconColor,
-        closeBtnIconHoverColor: colorHover !== null && colorHover !== void 0 ? colorHover : _theme.closeBtnIconHoverColor,
-    }, _theme);
     var keyListener = useKeyListener();
-    var _e = React.useState(false), focusedByTab = _e[0], setFocusedByTab = _e[1];
+    var _g = React.useState(false), focusedByTab = _g[0], setFocusedByTab = _g[1];
     var handleFocus = function () {
         var _a;
         // focus event fires before keyDown eventlistener
@@ -53,8 +48,28 @@ export var CloseButtonIcon = function (_a) {
     };
     var handleBlur = function () { return setFocusedByTab(false); };
     var tabIndex = !tabbable || rest.disabled ? -1 : 0;
-    return (React.createElement(CommonWrapper, __assign({}, rest),
-        React.createElement("button", __assign({ tabIndex: tabIndex, className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)), style: __assign({ width: side, height: side }, style), onFocus: handleFocus, onBlur: handleBlur }, rest),
+    // Внутри библиотеки цвет приезжает статическим классом через `className`, и
+    // содержимое таких классов от темы не зависит. Пропы `color`/`colorHover`
+    // остались только ради совместимости: каталог называется `internal`, но после
+    // сборки путь до компонента резолвится, то есть снятие пропов было бы
+    // ломающим.
+    //
+    // Раньше на каждый такой проп создавалось правило в рантайме — последнее
+    // место в библиотеке, где это ещё происходило. Теперь значение подставляется
+    // в ту же переменную, которую правило и читает
+    // (`.defaultColor { color: var(--kontur-closeBtnIconColor) }`), объявлением на
+    // самом элементе: объявление на узле сильнее унаследованного, поэтому
+    // переданный цвет побеждает, а `:hover` подхватывает свою переменную тем же
+    // правилом. Ни инстанса Emotion, ни тега `<style>` для этого не нужно.
+    // Через `Record<string, string>`: `CSSProperties` не знает про пользовательские
+    // свойства, а тем же приёмом уже едет инлайн-дельта темы в `CommonWrapper`.
+    var overrideColors = __assign(__assign({}, (color ? (_b = {}, _b["".concat(THEME_CSS_VAR_PREFIX, "closeBtnIconColor")] = color, _b) : null)), (colorHover ? (_c = {}, _c["".concat(THEME_CSS_VAR_PREFIX, "closeBtnIconHoverColor")] = colorHover, _c) : null));
+    // `className` уходит в `CommonWrapper`, а не на `<button>`: сырой спред `rest`
+    // ложится после атрибута `className`, и переданный класс затирал бы
+    // собственные классы кнопки. `CommonWrapper` домешивает его через `cx`,
+    // поэтому цвет от вызывающего перебивает цвет из `root`.
+    return (React.createElement(CommonWrapper, __assign({}, rest, { className: className }),
+        React.createElement("button", __assign({ tabIndex: tabIndex, style: __assign(__assign({ width: side, height: side }, overrideColors), style), onFocus: handleFocus, onBlur: handleBlur }, rest, { className: cx(styles.root(), colorClassName !== null && colorClassName !== void 0 ? colorClassName : styles.defaultColor(), !rest.disabled && focusedByTab && styles.focus(), rest.disabled && styles.rootDisabled()) }),
             React.createElement("span", { className: styles.wrapper() },
                 React.createElement(CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })))));
 };

package/internal/CloseButtonIcon/CloseButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { getStyles } from './CloseButtonIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ width: side, height: side, ...style }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}
+{"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { THEME_CSS_VAR_PREFIX } from '../../lib/theming/themeToCssVars.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { getStyles } from './CloseButtonIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n  /**\n   * Цвет иконки.\n   *\n   * @deprecated Библиотека внутри себя цвет задаёт классом через `className`.\n   * Проп оставлен для совместимости и порождает правило в рантайме, поэтому его\n   * содержимое нельзя извлечь на этапе сборки.\n   */\n  color?: string;\n  /**\n   * Цвет иконки при наведении мышью и при фокусе.\n   *\n   * @deprecated См. `color`.\n   */\n  colorHover?: string;\n  /**\n   * Класс с цветом иконки — вместо цвета в `root`.\n   *\n   * Нужен, чтобы цвет вызывающего и цвет по умолчанию были взаимоисключающими:\n   * в статическом CSS спор между ними решался бы порядком правил, а он не в\n   * пользу вызывающего.\n   */\n  colorClassName?: string;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  tabbable = true,\n  style,\n  className,\n  color,\n  colorHover,\n  colorClassName,\n  ...rest\n}) => {\n  const globalObject = useGlobal();\n  const styles = useStyles(getStyles);\n  const keyListener = useKeyListener();\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  // Внутри библиотеки цвет приезжает статическим классом через `className`, и\n  // содержимое таких классов от темы не зависит. Пропы `color`/`colorHover`\n  // остались только ради совместимости: каталог называется `internal`, но после\n  // сборки путь до компонента резолвится, то есть снятие пропов было бы\n  // ломающим.\n  //\n  // Раньше на каждый такой проп создавалось правило в рантайме — последнее\n  // место в библиотеке, где это ещё происходило. Теперь значение подставляется\n  // в ту же переменную, которую правило и читает\n  // (`.defaultColor { color: var(--kontur-closeBtnIconColor) }`), объявлением на\n  // самом элементе: объявление на узле сильнее унаследованного, поэтому\n  // переданный цвет побеждает, а `:hover` подхватывает свою переменную тем же\n  // правилом. Ни инстанса Emotion, ни тега `<style>` для этого не нужно.\n  // Через `Record<string, string>`: `CSSProperties` не знает про пользовательские\n  // свойства, а тем же приёмом уже едет инлайн-дельта темы в `CommonWrapper`.\n  const overrideColors: Record<string, string> = {\n    ...(color ? { [`${THEME_CSS_VAR_PREFIX}closeBtnIconColor`]: color } : null),\n    ...(colorHover ? { [`${THEME_CSS_VAR_PREFIX}closeBtnIconHoverColor`]: colorHover } : null),\n  };\n\n  // `className` уходит в `CommonWrapper`, а не на `<button>`: сырой спред `rest`\n  // ложится после атрибута `className`, и переданный класс затирал бы\n  // собственные классы кнопки. `CommonWrapper` домешивает его через `cx`,\n  // поэтому цвет от вызывающего перебивает цвет из `root`.\n  return (\n    <CommonWrapper {...rest} className={className}>\n      <button\n        tabIndex={tabIndex}\n        style={{ width: side, height: side, ...(overrideColors as React.CSSProperties), ...style }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n        className={cx(\n          styles.root(),\n          colorClassName ?? styles.defaultColor(),\n          !rest.disabled && focusedByTab && styles.focus(),\n          rest.disabled && styles.rootDisabled(),\n        )}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n\nCloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';\nCloseButtonIcon.displayName = 'CloseButtonIcon';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts

@@ -1,8 +1,8 @@
-import type { Emotion } from '@emotion/css/create-instance';
-import type { Theme } from '../../lib/theming/Theme.js';
-export declare const getStyles: (emotion: Emotion) => {
-    root(t: Theme): string;
-    rootDisabled(t: Theme): string;
-    focus(t: Theme): string;
-    wrapper(): string;
-};
+/** Правила — в `CloseButtonIcon.css`; здесь только имена классов. */
+export declare const getStyles: (ignored?: unknown) => import("../../lib/theming/staticStyles.js").StaticStyles<{
+    root: string;
+    defaultColor: string;
+    rootDisabled: string;
+    focus: string;
+    wrapper: string;
+}>;

package/internal/CloseButtonIcon/CloseButtonIcon.styles.js

@@ -1,24 +1,10 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { resetButton } from '../../lib/styles/Mixins.js';
-import { memoizeStyle } from '../../lib/theming/Emotion.js';
-export var getStyles = function (emotion) {
-    return memoizeStyle({
-        root: function (t) {
-            return emotion.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "], ["\n        ", "\n        display: inline-block;\n        position: relative;\n        border-radius: ", ";\n        color: ", ";\n        cursor: pointer;\n        transition: color ", " ", ";\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ", ";\n        }\n      "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
-        },
-        rootDisabled: function (t) {
-            return emotion.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.closeBtnIconDisabledColor);
-        },
-        focus: function (t) {
-            return emotion.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        box-shadow: ", ";\n      "], ["\n        box-shadow: ", ";\n      "])), t.closeBtnIconFocusShadow);
-        },
-        wrapper: function () {
-            return emotion.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "], ["\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      "])));
-        },
-    });
-};
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+import { staticStyles } from '../../lib/theming/staticStyles.js';
+/** Правила — в `CloseButtonIcon.css`; здесь только имена классов. */
+export var getStyles = staticStyles({
+    root: 'react-ui-CloseButtonIcon-root',
+    defaultColor: 'react-ui-CloseButtonIcon-defaultColor',
+    rootDisabled: 'react-ui-CloseButtonIcon-rootDisabled',
+    focus: 'react-ui-CloseButtonIcon-focus',
+    wrapper: 'react-ui-CloseButtonIcon-wrapper',
+});
 //# sourceMappingURL=CloseButtonIcon.styles.js.map

package/internal/CloseButtonIcon/CloseButtonIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButtonIcon.styles.js","sourceRoot":"","sources":["CloseButtonIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,OAAgB;IACxC,OAAA,YAAY,CAAC;QACX,IAAI,YAAC,CAAQ;YACX,OAAO,OAAO,CAAC,GAAG,sWAAA,YACd,EAAa,wFAGE,EAA0B,oBAClC,EAAmB,yDAER,EAAoB,GAAI,EAA0B,6EAI3D,EAAwB,sBAEpC,KAZG,WAAW,EAAE,EAGE,CAAC,CAAC,wBAAwB,EAClC,CAAC,CAAC,iBAAiB,EAER,CAAC,CAAC,kBAAkB,EAAI,CAAC,CAAC,wBAAwB,EAI3D,CAAC,CAAC,sBAAsB,EAEnC;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,OAAO,CAAC,GAAG,mGAAA,mBACP,EAA2B,WACrC,KADU,CAAC,CAAC,yBAAyB,EACpC;QACJ,CAAC;QACD,KAAK,YAAC,CAAQ;YACZ,OAAO,OAAO,CAAC,GAAG,wGAAA,wBACF,EAAyB,WACxC,KADe,CAAC,CAAC,uBAAuB,EACvC;QACJ,CAAC;QACD,OAAO;YACL,OAAO,OAAO,CAAC,GAAG,mRAAA,gNAQjB,KAAC;QACJ,CAAC;KACF,CAAC;AAtCF,CAsCE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { resetButton } from '../../lib/styles/Mixins.js';\nimport { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton()}\n        display: inline-block;\n        position: relative;\n        border-radius: ${t.closeBtnIconBorderRadius};\n        color: ${t.closeBtnIconColor};\n        cursor: pointer;\n        transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n        &:enabled:focus,\n        &:enabled:hover {\n          color: ${t.closeBtnIconHoverColor};\n        }\n      `;\n    },\n    rootDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.closeBtnIconDisabledColor};\n      `;\n    },\n    focus(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.closeBtnIconFocusShadow};\n      `;\n    },\n    wrapper() {\n      return emotion.css`\n        box-sizing: content-box;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n      `;\n    },\n  });\n"]}
+{"version":3,"file":"CloseButtonIcon.styles.js","sourceRoot":"","sources":["CloseButtonIcon.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,qEAAqE;AACrE,MAAM,CAAC,IAAM,SAAS,GAAG,YAAY,CAAC;IACpC,IAAI,EAAE,+BAA+B;IACrC,YAAY,EAAE,uCAAuC;IACrD,YAAY,EAAE,uCAAuC;IACrD,KAAK,EAAE,gCAAgC;IACvC,OAAO,EAAE,kCAAkC;CAC5C,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../lib/theming/staticStyles.js';\n\n/** Правила — в `CloseButtonIcon.css`; здесь только имена классов. */\nexport const getStyles = staticStyles({\n  root: 'react-ui-CloseButtonIcon-root',\n  defaultColor: 'react-ui-CloseButtonIcon-defaultColor',\n  rootDisabled: 'react-ui-CloseButtonIcon-rootDisabled',\n  focus: 'react-ui-CloseButtonIcon-focus',\n  wrapper: 'react-ui-CloseButtonIcon-wrapper',\n});\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';
 export type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;
 export declare class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<CommonWrapperProps<P> & CommonPropsRootNodeRef> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
+    static contextType: React.Context<Readonly<typeof import("../themes/BasicTheme.js").BasicThemeClass>>;
+    context: React.ContextType<typeof ThemeContext>;
     private cx;
+    private globalObject;
     private child;
     getRootNode: TGetRootNode;
     private setRootNode;
     private rootNodeSubscription;
-    render(): React.ReactNode;
+    render(): React.JSX.Element;
     private ref;
 }

package/internal/CommonWrapper/CommonWrapper.js

@@ -47,9 +47,27 @@ import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
 import { getElementRef } from '../../lib/getElementRef.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { injectBaselineCompensationVars } from '../../lib/styles/baselineCompensation.js';
+import { DeclaredThemeContext, themeCarrierSignature } from '../../lib/theming/declaredTheme.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getThemeCssVars, isThemeCssVarsClass } from '../../lib/theming/themeCssVarsClass.js';
+import { THEME_CSS_VAR_PREFIX } from '../../lib/theming/themeToCssVars.js';
 import { isFunction, isRefableElement } from '../../lib/utils.js';
 import { extractCommonProps } from './utils/extractCommonProps.js';
 import { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';
+/** Объявления темы из чужой дельты: имена переменных начинаются с префикса. */
+var withoutThemeVars = function (style) {
+    if (!style) {
+        return style;
+    }
+    var result = {};
+    Object.keys(style).forEach(function (property) {
+        if (!property.startsWith(THEME_CSS_VAR_PREFIX)) {
+            result[property] = style[property];
+        }
+    });
+    return result;
+};
 var CommonWrapper = /** @class */ (function (_super) {
     __extends(CommonWrapper, _super);
     function CommonWrapper() {
@@ -79,27 +97,110 @@ var CommonWrapper = /** @class */ (function (_super) {
     }
     CommonWrapper.prototype.render = function () {
         var _this = this;
+        // Централизованно для всех компонентов: раньше звалось из `getStyles`
+        // Checkbox/Radio/Toggle, но после перевода на `staticStyles()` их фабрика
+        // не выполняется вовсе — см. комментарий у самой функции.
+        injectBaselineCompensationVars(this.globalObject);
         var _a = extractCommonProps(this.props), _b = _a[0], _c = _a[1], className = _b.className, style = _b.style, children = _b.children, rootNodeRef = _b.rootNodeRef, dataProps = __rest(_b, ["className", "style", "children", "rootNodeRef"]), rest = __rest(_c, []);
         this.child = isFunction(children) ? children(rest) : children;
         // TODO: replace count with only in 7.0
         if (React.Children.count(this.child) > 1) {
             warning(false, 'CommonWrapper expects a single child');
         }
-        var getChildProps = function (child) {
+        var getChildProps = function (child, needsCarrier) {
+            var _a;
             var childProps = __assign(__assign({}, getCommonVisualStateDataAttributes(rest)), dataProps);
             isRefableElement(child) && (childProps.ref = _this.ref);
-            var classNames = _this.cx(child.props.className, className);
+            // Класс с переменными темы приклеивается строкой, а НЕ через `cx`: `cx`
+            // сливает зарегистрированные классы в один новый, и тогда хеш общего класса
+            // зависел бы от значений темы — класснеймы снова разъехались бы между
+            // светлой и тёмной.
+            //
+            // Из класса ребёнка такой класс сначала выбрасывается: `CommonWrapper`
+            // вкладываются друг в друга (например у Kebab корень — Button), и без этого
+            // внешний класс переменных попал бы в `cx` внутреннего.
+            var themeVars = getThemeCssVars(_this.context);
+            var childClassNames = ((_a = child.props.className) !== null && _a !== void 0 ? _a : '').split(' ').filter(Boolean);
+            var hasOuterThemeVars = childClassNames.some(isThemeCssVarsClass);
+            var childClassName = childClassNames.filter(function (name) { return !isThemeCssVarsClass(name); }).join(' ');
+            // Из собственного пропа выбрасывается не всякий класс темы, а ровно тот,
+            // который печатается строкой ниже. Внешняя обёртка кладёт свой носитель
+            // именно в `className` внутреннего компонента (у Kebab корень — Button, у
+            // Autocomplete — Input), и без этого одно и то же имя оказывалось на узле
+            // до трёх раз.
+            //
+            // Фильтр по префиксу здесь не годится: `<Button className={
+            // useThemeCssVars(MY_THEME).className}>` — законный способ задать
+            // поддереву свою тему, и такой класс принадлежит приложению, а не нам.
+            // Дубликат носителя выбрасывается из пропа только тогда, когда мы печатаем
+            // свой: иначе выбрасывать нечего и НЕЛЬЗЯ. Внешняя обёртка кладёт носитель
+            // именно в `className` внутреннего компонента (`Group` прокидывает
+            // `{...this.props}` в свой `CommonWrapper`), и если свой мы не печатаем, то
+            // пришедший — единственный на узле. Вырезать его значило бы стереть тему
+            // у целого поддерева; на `FxInput` это ровно так и вышло.
+            var ownThemeClassNames = new Set(themeVars.className.split(' ').filter(Boolean));
+            var outerClassName = needsCarrier
+                ? (className === null || className === void 0 ? void 0 : className.split(' ').filter(function (name) { return !ownThemeClassNames.has(name); }).join(' ')) || undefined
+                : className;
+            // Носитель печатается только на ГРАНИЦЕ смены темы: если та же тема уже
+            // объявлена выше по DOM, повторять её блок незачем — а вреда от повтора
+            // много. Объявление на самом элементе всегда сильнее унаследованного,
+            // поэтому собственный блок на корне каждого компонента экранировал и
+            // `:root`, и контейнер приложения (раздел 8.3).
+            var classNames = [needsCarrier ? themeVars.className : '', _this.cx(childClassName, outerClassName)]
+                .filter(Boolean)
+                .join(' ');
             classNames && (childProps.className = classNames);
-            var styles = __assign(__assign({}, child.props.style), style);
+            // Дельта производной темы идёт инлайном и стоит первой: свой `style` у
+            // компонента и `style` из пропов обязаны её перебивать, а не наоборот.
+            // React ставит объявления через CSSOM, поэтому правила в таблице стилей
+            // не появляется — со внешним CSS страница остаётся без тега `<style>`.
+            //
+            // Чужая дельта из пропов ребёнка выбрасывается вместе с чужим классом
+            // темы — эти двое всегда приезжают парой. `CommonWrapper` вкладываются
+            // друг в друга (у Kebab корень — Button), и между ними тема может
+            // смениться: тогда класс достался бы от одной темы, а объявления поверх
+            // него — от другой. Без класса темы `--kontur-*` в пропах — уже
+            // объявления приложения, и трогать их нельзя.
+            var outerStyle = hasOuterThemeVars ? withoutThemeVars(child.props.style) : child.props.style;
+            // Дельта производной темы — такая же часть носителя, как и класс, и едет
+            // вместе с ним: без класса базы её объявления не на чем считать.
+            var styles = __assign(__assign(__assign({}, (needsCarrier ? themeVars.style : undefined)), outerStyle), style);
             Object.keys(styles).length && (childProps.style = styles);
             return childProps;
         };
-        return React.isValidElement(this.child)
-            ? React.cloneElement(this.child, getChildProps(this.child))
-            : this.child;
+        var themeVars = getThemeCssVars(this.context);
+        var signature = themeCarrierSignature(themeVars);
+        // Через `Consumer`, а не `contextType`: тот занят `ThemeContext`, и второй
+        // контекст классовому компоненту иначе не прочитать. Тем же приёмом это уже
+        // сделано в `RenderEnvironmentDecorator`.
+        return (React.createElement(DeclaredThemeContext.Consumer, null, function (declared) {
+            var isElement = React.isValidElement(_this.child);
+            // Носитель нужен, только если тема сменилась И его есть на что
+            // повесить. Ребёнок не элемент — клонировать нечего, класс никуда не
+            // попадёт; объявить при этом тему объявленной значило бы обмануть
+            // поддерево: вложенные компоненты решили бы, что носитель выше есть,
+            // а его нет. Так и произошло на `FxInput`.
+            var needsCarrier = isElement && declared !== signature;
+            // А публикуется объявленная тема ТОЛЬКО когда ребёнок — настоящий
+            // DOM-элемент. Если это компонент, класс уезжает ему пропом, и куда он
+            // его повесит — неизвестно: `Menu` вешает на узел глубже своего
+            // корня, и `MenuHeader` оказывался уже не под носителем. Знать это
+            // снаружи нельзя, поэтому там, где неизвестно, поддерево считается
+            // необъявленным — лишний носитель дешевле потерянных переменных.
+            var childIsDomElement = isElement && typeof _this.child.type === 'string';
+            var declaresForSubtree = needsCarrier && childIsDomElement;
+            var content = isElement
+                ? React.cloneElement(_this.child, getChildProps(_this.child, needsCarrier))
+                : _this.child;
+            // Провайдер не рождает DOM-узла, поэтому ни `ref`, ни `getRootNode`,
+            // ни разметка от него не меняются.
+            return declaresForSubtree ? (React.createElement(DeclaredThemeContext.Provider, { value: signature }, content)) : (content);
+        }));
     };
     CommonWrapper.__KONTUR_REACT_UI__ = 'CommonWrapper';
     CommonWrapper.displayName = 'CommonWrapper';
+    CommonWrapper.contextType = ThemeContext;
     CommonWrapper = __decorate([
         withRenderEnvironment,
         rootNode