@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-e2bc4.0

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

@@ -1,5 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-import type { Theme } from '../../lib/theming/Theme';
+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;

package/internal/ClearCrossIcon/ClearCrossIcon.styles.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeStyle } from '../../lib/theming/Emotion.js';
+import { resetButton } from '../../lib/styles/Mixins.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;
+//# sourceMappingURL=ClearCrossIcon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearCrossIcon.styles.js","sourceRoot":"","sources":["../../../internal/ClearCrossIcon/ClearCrossIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,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 { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { resetButton } from '../../lib/styles/Mixins.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"]}

package/internal/ClearCrossIcon/CrossIcon.d.ts

@@ -1,3 +1,3 @@
-export declare const CrossIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
-    size?: import("../icons2022/BaseIcon").IconProps["size"] | import("../icons2022/iconConstants").IconSizeAliases;
+export declare const CrossIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../icons2022/BaseIcon.js").IconProps["size"] | import("../icons2022/iconConstants.js").IconSizeAliases;
 }>;

package/internal/ClearCrossIcon/CrossIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { iconSizer } from '../icons2022/iconSizer.js';
+import { XIcon16Light } from '../icons2022/XIcon/XIcon16Light.js';
+import { XIcon20Light } from '../icons2022/XIcon/XIcon20Light.js';
+import { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular.js';
+export var CrossIcon = iconSizer({
+    small: function () { return React.createElement(XIcon16Light, { align: "none" }); },
+    medium: function () { return React.createElement(XIcon20Light, { align: "none" }); },
+    large: function () { return React.createElement(XIcon24Regular, { align: "none" }); },
+}, 'CrossIcon');
+//# sourceMappingURL=CrossIcon.js.map

package/internal/ClearCrossIcon/CrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossIcon.js","sourceRoot":"","sources":["../../../internal/ClearCrossIcon/CrossIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,CAAC,IAAM,SAAS,GAAG,SAAS,CAChC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,YAAY,IAAC,KAAK,EAAC,MAAM,GAAG,EAA7B,CAA6B;IAC1C,MAAM,EAAE,cAAM,OAAA,oBAAC,YAAY,IAAC,KAAK,EAAC,MAAM,GAAG,EAA7B,CAA6B;IAC3C,KAAK,EAAE,cAAM,OAAA,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,EAA/B,CAA+B;CAC7C,EACD,WAAW,CACZ,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../icons2022/iconSizer.js';\nimport { XIcon16Light } from '../icons2022/XIcon/XIcon16Light.js';\nimport { XIcon20Light } from '../icons2022/XIcon/XIcon20Light.js';\nimport { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular.js';\n\nexport const CrossIcon = iconSizer(\n  {\n    small: () => <XIcon16Light align=\"none\" />,\n    medium: () => <XIcon20Light align=\"none\" />,\n    large: () => <XIcon24Regular align=\"none\" />,\n  },\n  'CrossIcon',\n);\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon.d.ts

@@ -1,6 +1,6 @@
 import type { AriaAttributes, CSSProperties } from 'react';
 import React from 'react';
-import type { CommonProps } from '../CommonWrapper';
+import type { CommonProps } from '../CommonWrapper/index.js';
 export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
     /**
      * Ширина и высота иконки крестика

package/internal/CloseButtonIcon/CloseButtonIcon.js

@@ -0,0 +1,63 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { useKeyListener } from '../../lib/events/keyListener.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { CommonWrapper } from '../CommonWrapper/index.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 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 handleFocus = function () {
+        var _a;
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        (_a = globalObject.requestAnimationFrame) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
+            if (keyListener.isTabPressed) {
+                setFocusedByTab(true);
+            }
+        });
+    };
+    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(__assign({}, style), { width: side, height: side }), onFocus: handleFocus, onBlur: handleBlur }, rest),
+            React.createElement("span", { className: styles.wrapper() },
+                React.createElement(CrossIcon, { size: side < size ? side : size, focusable: tabIndex >= 0 })))));
+};
+CloseButtonIcon.__KONTUR_REACT_UI__ = 'CloseButtonIcon';
+CloseButtonIcon.displayName = 'CloseButtonIcon';
+//# sourceMappingURL=CloseButtonIcon.js.map

package/internal/CloseButtonIcon/CloseButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButtonIcon.js","sourceRoot":"","sources":["../../../internal/CloseButtonIcon/CloseButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, CSSProperties } from 'react';\nimport React from 'react';\n\nimport { useGlobal, useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\n\nimport { getStyles } from './CloseButtonIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    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={{ ...style, width: side, height: side }}\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"]}

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

@@ -1,5 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-import type { Theme } from '../../lib/theming/Theme';
+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;

package/internal/CloseButtonIcon/CloseButtonIcon.styles.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 { memoizeStyle } from '../../lib/theming/Emotion.js';
+import { resetButton } from '../../lib/styles/Mixins.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;
+//# sourceMappingURL=CloseButtonIcon.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButtonIcon.styles.js","sourceRoot":"","sources":["../../../internal/CloseButtonIcon/CloseButtonIcon.styles.tsx"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,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 { memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { resetButton } from '../../lib/styles/Mixins.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"]}

package/internal/CloseButtonIcon/CrossIcon.d.ts

@@ -1,3 +1,3 @@
-export declare const CrossIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
-    size?: import("../icons2022/BaseIcon").IconProps["size"] | import("../icons2022/iconConstants").IconSizeAliases;
+export declare const CrossIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../icons2022/BaseIcon.js").IconProps["size"] | import("../icons2022/iconConstants.js").IconSizeAliases;
 }>;

package/internal/CloseButtonIcon/CrossIcon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { iconSizer } from '../icons2022/iconSizer.js';
+import { XIcon20Light } from '../icons2022/XIcon/XIcon20Light.js';
+import { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular.js';
+export var CrossIcon = iconSizer({
+    small: function () { return React.createElement(XIcon20Light, { size: 16, align: "none" }); },
+    medium: function () { return React.createElement(XIcon20Light, { align: "none" }); },
+    large: function () { return React.createElement(XIcon24Regular, { align: "none" }); },
+}, 'CrossIcon');
+//# sourceMappingURL=CrossIcon.js.map

package/internal/CloseButtonIcon/CrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrossIcon.js","sourceRoot":"","sources":["../../../internal/CloseButtonIcon/CrossIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAEtE,MAAM,CAAC,IAAM,SAAS,GAAG,SAAS,CAChC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,MAAM,GAAG,EAAvC,CAAuC;IACpD,MAAM,EAAE,cAAM,OAAA,oBAAC,YAAY,IAAC,KAAK,EAAC,MAAM,GAAG,EAA7B,CAA6B;IAC3C,KAAK,EAAE,cAAM,OAAA,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,GAAG,EAA/B,CAA+B;CAC7C,EACD,WAAW,CACZ,CAAC","sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../icons2022/iconSizer.js';\nimport { XIcon20Light } from '../icons2022/XIcon/XIcon20Light.js';\nimport { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular.js';\n\nexport const CrossIcon = iconSizer(\n  {\n    small: () => <XIcon20Light size={16} align=\"none\" />,\n    medium: () => <XIcon20Light align=\"none\" />,\n    large: () => <XIcon24Regular align=\"none\" />,\n  },\n  'CrossIcon',\n);\n"]}

package/internal/CommonWrapper/CommonWrapper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';
+import type { TGetRootNode } from '../../lib/rootNode/index.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;

package/internal/CommonWrapper/CommonWrapper.js

@@ -0,0 +1,105 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { isFunction, isRefableElement } from '../../lib/utils.js';
+import { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
+import { getElementRef } from '../../lib/getElementRef.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { extractCommonProps } from './utils/extractCommonProps.js';
+import { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';
+var CommonWrapper = /** @class */ (function (_super) {
+    __extends(CommonWrapper, _super);
+    function CommonWrapper() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.rootNodeSubscription = null;
+        _this.ref = function (instance) {
+            var _a, _b, _c, _d;
+            _this.setRootNode(instance);
+            (_b = (_a = _this.props).rootNodeRef) === null || _b === void 0 ? void 0 : _b.call(_a, getRootNode(instance));
+            // refs are called when instances change,
+            // so we have to renew or remove old subscription
+            (_c = _this.rootNodeSubscription) === null || _c === void 0 ? void 0 : _c.remove();
+            _this.rootNodeSubscription = null;
+            if (instance && isInstanceWithRootNode(instance)) {
+                _this.rootNodeSubscription = (_d = instance.addRootNodeChangeListener) === null || _d === void 0 ? void 0 : _d.call(instance, function (node) {
+                    var _a, _b;
+                    _this.setRootNode(node);
+                    (_b = (_a = _this.props).rootNodeRef) === null || _b === void 0 ? void 0 : _b.call(_a, node);
+                });
+            }
+            var originalRef = getElementRef(_this.child);
+            if (typeof originalRef === 'function' || (originalRef && typeof originalRef === 'object')) {
+                originalRef && callChildRef(originalRef, instance);
+            }
+        };
+        return _this;
+    }
+    CommonWrapper.prototype.render = function () {
+        var _this = this;
+        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;
+        var getChildProps = function (child) {
+            var childProps = __assign(__assign({}, getCommonVisualStateDataAttributes(rest)), dataProps);
+            isRefableElement(child) && (childProps.ref = _this.ref);
+            var classNames = _this.cx(child.props.className, className);
+            classNames && (childProps.className = classNames);
+            var styles = __assign(__assign({}, child.props.style), style);
+            Object.keys(styles).length && (childProps.style = styles);
+            return childProps;
+        };
+        return React.isValidElement(this.child)
+            ? React.cloneElement(this.child, getChildProps(this.child))
+            : this.child;
+    };
+    CommonWrapper.__KONTUR_REACT_UI__ = 'CommonWrapper';
+    CommonWrapper.displayName = 'CommonWrapper';
+    CommonWrapper = __decorate([
+        withRenderEnvironment,
+        rootNode
+    ], CommonWrapper);
+    return CommonWrapper;
+}(React.Component));
+export { CommonWrapper };
+//# sourceMappingURL=CommonWrapper.js.map

package/internal/CommonWrapper/CommonWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonWrapper.js","sourceRoot":"","sources":["../../../internal/CommonWrapper/CommonWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isFunction, isRefableElement } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { TGetRootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, isInstanceWithRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { getElementRef } from '../../lib/getElementRef.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types.js';\nimport { extractCommonProps } from './utils/extractCommonProps.js';\nimport { getCommonVisualStateDataAttributes } from './utils/getCommonVisualStateDataAttributes.js';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@withRenderEnvironment\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n  CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n  public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n  public static displayName = 'CommonWrapper';\n\n  private cx!: Emotion['cx'];\n  private child: React.ReactNode;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n  render() {\n    const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n    this.child = isFunction(children) ? children(rest) : children;\n\n    const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n      const childProps: Record<string, unknown> = {\n        ...getCommonVisualStateDataAttributes(rest),\n        ...dataProps,\n      };\n\n      isRefableElement(child) && (childProps.ref = this.ref);\n\n      const classNames: string = this.cx(child.props.className, className);\n      classNames && (childProps.className = classNames);\n\n      const styles: React.CSSProperties = { ...child.props.style, ...style };\n      Object.keys(styles).length && (childProps.style = styles);\n\n      return childProps;\n    };\n\n    return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n      ? React.cloneElement(this.child, getChildProps(this.child))\n      : this.child;\n  }\n\n  private ref = (instance: Nullable<React.ReactInstance>) => {\n    this.setRootNode(instance);\n    this.props.rootNodeRef?.(getRootNode(instance));\n\n    // refs are called when instances change,\n    // so we have to renew or remove old subscription\n    this.rootNodeSubscription?.remove();\n    this.rootNodeSubscription = null;\n\n    if (instance && isInstanceWithRootNode(instance)) {\n      this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n        this.setRootNode(node);\n        this.props.rootNodeRef?.(node);\n      });\n    }\n\n    const originalRef = getElementRef(this.child as React.ReactElement);\n    if (typeof originalRef === 'function' || (originalRef && typeof originalRef === 'object')) {\n      originalRef && callChildRef(originalRef, instance);\n    }\n  };\n}\n"]}

package/internal/CommonWrapper/index.d.ts

@@ -1,3 +1,3 @@
-export * from './CommonWrapper';
-export type { CommonWrapperRestProps } from './types';
-export type { CommonProps } from './types';
+export * from './CommonWrapper.js';
+export type { CommonWrapperRestProps } from './types.js';
+export type { CommonProps } from './types.js';

package/internal/CommonWrapper/index.js

@@ -0,0 +1,2 @@
+export * from './CommonWrapper.js';
+//# sourceMappingURL=index.js.map

package/internal/CommonWrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../internal/CommonWrapper/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './CommonWrapper.js';\nexport type { CommonWrapperRestProps } from './types.js';\nexport type { CommonProps } from './types.js';\n"]}

package/internal/CommonWrapper/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { Nullable } from '../../typings/utility-types';
+import type { Nullable } from '../../typings/utility-types.js';
 export interface CommonProps {
     /**
      * HTML-атрибут `class`.

package/internal/CommonWrapper/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/internal/CommonWrapper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../internal/CommonWrapper/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { Nullable } from '../../typings/utility-types.js';\n\nexport interface CommonProps {\n  /**\n   * HTML-атрибут `class`.\n   */\n  className?: React.HTMLAttributes<HTMLElement>['className'];\n  /**\n   * HTML-атрибут `style`.\n   */\n  style?: React.HTMLAttributes<HTMLElement>['style'];\n  /**\n   * Наравне с data-tid транслируются любые data-атрибуты. Они попадают на корневой элемент.\n   */\n  'data-tid'?: string;\n  children?: React.ReactNode;\n}\n\nexport interface CommonPropsRootNodeRef {\n  rootNodeRef?: (instance: Nullable<Element>) => void;\n}\n\nexport type NotCommonProps<P> = Omit<P, keyof CommonProps>;\nexport type CommonWrapperProps<P> = P & {\n  children: React.ReactNode | ((rest: CommonWrapperRestProps<P>) => React.ReactNode);\n};\nexport type CommonWrapperRestProps<P> = Omit<NotCommonProps<P>, 'children'>;\n"]}

package/internal/CommonWrapper/utils/extractCommonProps.d.ts

@@ -1,3 +1,3 @@
-import type { NotCommonProps } from '../types';
-import type { CommonPropsWithRootNodeRef } from '../CommonWrapper';
+import type { NotCommonProps } from '../types.js';
+import type { CommonPropsWithRootNodeRef } from '../CommonWrapper.js';
 export declare const extractCommonProps: <P extends CommonPropsWithRootNodeRef>(props: P) => [CommonPropsWithRootNodeRef, NotCommonProps<P>];

package/internal/CommonWrapper/utils/extractCommonProps.js

@@ -0,0 +1,28 @@
+export var extractCommonProps = function (props) {
+    var common = {};
+    var rest = {};
+    for (var prop in props) {
+        if (isCommonProp(prop)) {
+            // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.
+            common[prop] = props[prop];
+        }
+        else {
+            // @ts-expect-error: Read the comment above.
+            rest[prop] = props[prop];
+        }
+    }
+    return [common, rest];
+};
+var isCommonProp = function (prop) {
+    switch (true) {
+        case prop === 'className':
+        case prop === 'style':
+        case prop === 'rootNodeRef':
+        case prop === 'children':
+        case prop.indexOf('data-') === 0: // все data-атрибуты
+            return true;
+        default:
+            return false;
+    }
+};
+//# sourceMappingURL=extractCommonProps.js.map

package/internal/CommonWrapper/utils/extractCommonProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractCommonProps.js","sourceRoot":"","sources":["../../../../internal/CommonWrapper/utils/extractCommonProps.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAChC,KAAQ;IAER,IAAM,MAAM,GAAG,EAAgC,CAAC;IAChD,IAAM,IAAI,GAAG,EAAuB,CAAC;IAErC,KAAK,IAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,YAAY,CAAC,IAAwC,CAAC,EAAE,CAAC;YAC3D,4KAA4K;YAC5K,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AACxB,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,IAAsC;IAC1D,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI,KAAK,WAAW,CAAC;QAC1B,KAAK,IAAI,KAAK,OAAO,CAAC;QACtB,KAAK,IAAI,KAAK,aAAa,CAAC;QAC5B,KAAK,IAAI,KAAK,UAAU,CAAC;QACzB,KAAK,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,oBAAoB;YACpD,OAAO,IAAI,CAAC;QACd;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { NotCommonProps } from '../types.js';\nimport type { CommonPropsWithRootNodeRef } from '../CommonWrapper.js';\n\nexport const extractCommonProps = <P extends CommonPropsWithRootNodeRef>(\n  props: P,\n): [CommonPropsWithRootNodeRef, NotCommonProps<P>] => {\n  const common = {} as CommonPropsWithRootNodeRef;\n  const rest = {} as NotCommonProps<P>;\n\n  for (const prop in props) {\n    if (isCommonProp(prop as keyof CommonPropsWithRootNodeRef)) {\n      // @ts-expect-error: See: https://github.com/skbkontur/retail-ui/pull/2257#discussion_r565275843 and https://github.com/skbkontur/retail-ui/pull/2257#discussion_r569542736.\n      common[prop] = props[prop];\n    } else {\n      // @ts-expect-error: Read the comment above.\n      rest[prop] = props[prop];\n    }\n  }\n\n  return [common, rest];\n};\n\nconst isCommonProp = (prop: keyof CommonPropsWithRootNodeRef) => {\n  switch (true) {\n    case prop === 'className':\n    case prop === 'style':\n    case prop === 'rootNodeRef':\n    case prop === 'children':\n    case prop.indexOf('data-') === 0: // все data-атрибуты\n      return true;\n    default:\n      return false;\n  }\n};\n"]}

package/internal/CommonWrapper/utils/getCommonVisualStateDataAttributes.d.ts

@@ -1,2 +1,2 @@
-import type { VisualStateDataAttributesResultType } from './getVisualStateDataAttributes';
+import type { VisualStateDataAttributesResultType } from './getVisualStateDataAttributes.js';
 export declare function getCommonVisualStateDataAttributes(componentProps: Record<string, unknown>): VisualStateDataAttributesResultType;

package/internal/CommonWrapper/utils/getCommonVisualStateDataAttributes.js

@@ -0,0 +1,9 @@
+import { getVisualStateDataAttributes } from './getVisualStateDataAttributes.js';
+import { tryGetBoolean } from './tryGetBoolean.js';
+export function getCommonVisualStateDataAttributes(componentProps) {
+    return getVisualStateDataAttributes({
+        error: tryGetBoolean(componentProps['error']),
+        warning: tryGetBoolean(componentProps['warning']),
+    });
+}
+//# sourceMappingURL=getCommonVisualStateDataAttributes.js.map

package/internal/CommonWrapper/utils/getCommonVisualStateDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCommonVisualStateDataAttributes.js","sourceRoot":"","sources":["../../../../internal/CommonWrapper/utils/getCommonVisualStateDataAttributes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,UAAU,kCAAkC,CAChD,cAAuC;IAEvC,OAAO,4BAA4B,CAAC;QAClC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7C,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;KAClD,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type { VisualStateDataAttributesResultType } from './getVisualStateDataAttributes.js';\nimport { getVisualStateDataAttributes } from './getVisualStateDataAttributes.js';\nimport { tryGetBoolean } from './tryGetBoolean.js';\n\nexport function getCommonVisualStateDataAttributes(\n  componentProps: Record<string, unknown>,\n): VisualStateDataAttributesResultType {\n  return getVisualStateDataAttributes({\n    error: tryGetBoolean(componentProps['error']),\n    warning: tryGetBoolean(componentProps['warning']),\n  });\n}\n"]}

package/internal/CommonWrapper/utils/getVisualStateDataAttributes.d.ts

@@ -1,3 +1,3 @@
-import type { Nullable } from '../../../typings/utility-types';
+import type { Nullable } from '../../../typings/utility-types.js';
 export type VisualStateDataAttributesResultType = Record<string, string>;
 export declare function getVisualStateDataAttributes<T extends Record<string, Nullable<boolean>>>(attributes: T): VisualStateDataAttributesResultType;

package/internal/CommonWrapper/utils/getVisualStateDataAttributes.js

@@ -0,0 +1,12 @@
+import { toKebabCase } from '../../../lib/toKebabCase.js';
+var prefix = "data-visual-state-";
+function fillResult(result, key, value) {
+    if (value) {
+        result["".concat(prefix).concat(toKebabCase(key))] = '';
+    }
+    return result;
+}
+export function getVisualStateDataAttributes(attributes) {
+    return Object.entries(attributes).reduce(function (previousValue, currentValue) { return fillResult(previousValue, currentValue[0], currentValue[1]); }, {});
+}
+//# sourceMappingURL=getVisualStateDataAttributes.js.map

package/internal/CommonWrapper/utils/getVisualStateDataAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVisualStateDataAttributes.js","sourceRoot":"","sources":["../../../../internal/CommonWrapper/utils/getVisualStateDataAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAK1D,IAAM,MAAM,GAAG,oBAAoB,CAAC;AAEpC,SAAS,UAAU,CAAC,MAA2C,EAAE,GAAW,EAAE,KAAwB;IACpG,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,CAAC,UAAG,MAAM,SAAG,WAAW,CAAC,GAAG,CAAC,CAAE,CAAC,GAAG,EAAE,CAAC;IAC9C,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,4BAA4B,CAC1C,UAAa;IAEb,OAAO,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,MAAM,CACtC,UAAC,aAAa,EAAE,YAAY,IAAK,OAAA,UAAU,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAA3D,CAA2D,EAC5F,EAAE,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { toKebabCase } from '../../../lib/toKebabCase.js';\nimport type { Nullable } from '../../../typings/utility-types.js';\n\nexport type VisualStateDataAttributesResultType = Record<string, string>;\n\nconst prefix = `data-visual-state-`;\n\nfunction fillResult(result: VisualStateDataAttributesResultType, key: string, value: Nullable<boolean>) {\n  if (value) {\n    result[`${prefix}${toKebabCase(key)}`] = '';\n  }\n\n  return result;\n}\n\nexport function getVisualStateDataAttributes<T extends Record<string, Nullable<boolean>>>(\n  attributes: T,\n): VisualStateDataAttributesResultType {\n  return Object.entries(attributes).reduce(\n    (previousValue, currentValue) => fillResult(previousValue, currentValue[0], currentValue[1]),\n    {},\n  );\n}\n"]}

package/internal/CommonWrapper/utils/tryGetBoolean.js

@@ -0,0 +1,2 @@
+export var tryGetBoolean = function (value) { return (typeof value === 'boolean' ? value : undefined); };
+//# sourceMappingURL=tryGetBoolean.js.map

package/internal/CommonWrapper/utils/tryGetBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tryGetBoolean.js","sourceRoot":"","sources":["../../../../internal/CommonWrapper/utils/tryGetBoolean.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAc,IAA0B,OAAA,CAAC,OAAO,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,EAAhD,CAAgD,CAAC","sourcesContent":["export const tryGetBoolean = (value: unknown): boolean | undefined => (typeof value === 'boolean' ? value : undefined);\n"]}

package/internal/CustomComboBox/ArrowDownIcon.d.ts

@@ -1,3 +1,3 @@
-export declare const ArrowDownIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon").IconProps, "size"> & {
-    size?: import("../icons2022/BaseIcon").IconProps["size"] | import("../icons2022/iconConstants").IconSizeAliases;
+export declare const ArrowDownIcon: import("../../lib/forwardRefAndName.js").ReactUIIconWithRef<SVGSVGElement, Omit<import("../icons2022/BaseIcon.js").IconProps, "size"> & {
+    size?: import("../icons2022/BaseIcon.js").IconProps["size"] | import("../icons2022/iconConstants.js").IconSizeAliases;
 }>;

package/internal/CustomComboBox/ArrowDownIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ArrowCDownIcon16Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular.js';
+import { ArrowCDownIcon20Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular.js';
+import { ArrowCDownIcon24Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular.js';
+import { iconSizer } from '../icons2022/iconSizer.js';
+export var ArrowDownIcon = iconSizer({
+    small: function () { return React.createElement(ArrowCDownIcon16Regular, null); },
+    medium: function () { return React.createElement(ArrowCDownIcon20Regular, null); },
+    large: function () { return React.createElement(ArrowCDownIcon24Regular, null); },
+}, 'ArrowDownIcon');
+//# sourceMappingURL=ArrowDownIcon.js.map

package/internal/CustomComboBox/ArrowDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowDownIcon.js","sourceRoot":"","sources":["../../../internal/CustomComboBox/ArrowDownIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,wDAAwD,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,wDAAwD,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,wDAAwD,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,MAAM,CAAC,IAAM,aAAa,GAAG,SAAS,CACpC;IACE,KAAK,EAAE,cAAM,OAAA,oBAAC,uBAAuB,OAAG,EAA3B,CAA2B;IACxC,MAAM,EAAE,cAAM,OAAA,oBAAC,uBAAuB,OAAG,EAA3B,CAA2B;IACzC,KAAK,EAAE,cAAM,OAAA,oBAAC,uBAAuB,OAAG,EAA3B,CAA2B;CACzC,EACD,eAAe,CAChB,CAAC","sourcesContent":["import React from 'react';\n\nimport { ArrowCDownIcon16Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular.js';\nimport { ArrowCDownIcon20Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular.js';\nimport { ArrowCDownIcon24Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular.js';\nimport { iconSizer } from '../icons2022/iconSizer.js';\n\nexport const ArrowDownIcon = iconSizer(\n  {\n    small: () => <ArrowCDownIcon16Regular />,\n    medium: () => <ArrowCDownIcon20Regular />,\n    large: () => <ArrowCDownIcon24Regular />,\n  },\n  'ArrowDownIcon',\n);\n"]}

package/internal/CustomComboBox/ComboBoxMenu.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Menu } from '../Menu';
-import type { MenuItemState } from '../../components/MenuItem';
-import type { Nullable } from '../../typings/utility-types';
-import type { ComboBoxExtendedItem } from '../../components/ComboBox';
-import type { SizeProp } from '../../lib/types/props';
-import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
+import { Menu } from '../Menu/index.js';
+import type { MenuItemState } from '../../components/MenuItem/index.js';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { ComboBoxExtendedItem } from '../../components/ComboBox/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import { ComboBoxRequestStatus } from './CustomComboBoxTypes.js';
 export interface ComboBoxMenuProps<T> {
     opened?: boolean;
     items?: Nullable<Array<ComboBoxExtendedItem<T>>>;