@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/hooks/useMemoObject.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+export var useMemoObject = function (objectValue) {
+    return useMemo(function () { return objectValue; }, Object.values(objectValue));
+};
+//# sourceMappingURL=useMemoObject.js.map

package/hooks/useMemoObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMemoObject.js","sourceRoot":"","sources":["../../hooks/useMemoObject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIhC,MAAM,CAAC,IAAM,aAAa,GAAG,UAA4B,WAAoB;IAC3E,OAAO,OAAO,CAAU,cAAM,OAAA,WAAW,EAAX,CAAW,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AACzE,CAAC,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport type { AnyObject } from '../lib/utils.js';\n\nexport const useMemoObject = <TObject extends AnyObject>(objectValue: TObject): TObject => {\n  return useMemo<TObject>(() => objectValue, Object.values(objectValue));\n};\n"]}

package/index.d.ts

@@ -0,0 +1,62 @@
+export * from './components/Autocomplete/index.js';
+export * from './components/Button/index.js';
+export * from './components/Calendar/index.js';
+export * from './components/Center/index.js';
+export * from './components/Checkbox/index.js';
+export * from './components/ComboBox/index.js';
+export * from './components/CurrencyInput/index.js';
+export * from './components/CurrencyLabel/index.js';
+export * from './components/DateInput/index.js';
+export * from './components/DatePicker/index.js';
+export * from './components/DateRangePicker/index.js';
+export * from './components/Dropdown/index.js';
+export * from './components/DropdownMenu/index.js';
+export * from './components/FileUploader/index.js';
+export * from './components/FxInput/index.js';
+export * from './components/Gapped/index.js';
+export * from './components/GlobalLoader/index.js';
+export * from './components/Group/index.js';
+export * from './components/Hint/index.js';
+export * from './components/Input/index.js';
+export * from './components/Kebab/index.js';
+export * from './components/Link/index.js';
+export * from './components/Loader/index.js';
+export * from './components/MenuFooter/index.js';
+export * from './components/MenuHeader/index.js';
+export * from './components/MenuItem/index.js';
+export * from './components/MenuSeparator/index.js';
+export * from './components/MiniModal/index.js';
+export * from './components/Modal/index.js';
+export * from './components/Paging/index.js';
+export * from './components/PasswordInput/index.js';
+export * from './components/Radio/index.js';
+export * from './components/RadioGroup/index.js';
+export * from './components/ScrollContainer/index.js';
+export * from './components/Select/index.js';
+export * from './components/SidePage/index.js';
+export * from './components/Spinner/index.js';
+export * from './components/Sticky/index.js';
+export * from './components/Switcher/index.js';
+export * from './components/Tabs/index.js';
+export * from './components/Textarea/index.js';
+export * from './components/Toast/index.js';
+export * from './components/SingleToast/index.js';
+export * from './components/Toggle/index.js';
+export * from './components/Token/index.js';
+export * from './components/TokenInput/index.js';
+export * from './components/Tooltip/index.js';
+export * from './components/TooltipMenu/index.js';
+export * from './components/ResponsiveLayout/index.js';
+export * from './components/MaskedInput/index.js';
+export * from './lib/featureFlagsContext/index.js';
+export * from './lib/locale/index.js';
+export * from './lib/size/index.js';
+export * from './lib/theming/ThemeContext.js';
+export * from './lib/theming/ThemeFactory.js';
+export * from './lib/theming/themes/LightTheme.js';
+export * from './lib/theming/themes/DarkTheme.js';
+export * from './lib/types/props.js';
+export * from './internal/Popup/types.js';
+export type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';
+export * as ColorFunctions from './lib/styles/ColorFunctions.js';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions.js';

package/index.js

@@ -0,0 +1,62 @@
+export * from './components/Autocomplete/index.js';
+export * from './components/Button/index.js';
+export * from './components/Calendar/index.js';
+export * from './components/Center/index.js';
+export * from './components/Checkbox/index.js';
+export * from './components/ComboBox/index.js';
+export * from './components/CurrencyInput/index.js';
+export * from './components/CurrencyLabel/index.js';
+export * from './components/DateInput/index.js';
+export * from './components/DatePicker/index.js';
+export * from './components/DateRangePicker/index.js';
+export * from './components/Dropdown/index.js';
+export * from './components/DropdownMenu/index.js';
+export * from './components/FileUploader/index.js';
+export * from './components/FxInput/index.js';
+export * from './components/Gapped/index.js';
+export * from './components/GlobalLoader/index.js';
+export * from './components/Group/index.js';
+export * from './components/Hint/index.js';
+export * from './components/Input/index.js';
+export * from './components/Kebab/index.js';
+export * from './components/Link/index.js';
+export * from './components/Loader/index.js';
+export * from './components/MenuFooter/index.js';
+export * from './components/MenuHeader/index.js';
+export * from './components/MenuItem/index.js';
+export * from './components/MenuSeparator/index.js';
+export * from './components/MiniModal/index.js';
+export * from './components/Modal/index.js';
+export * from './components/Paging/index.js';
+export * from './components/PasswordInput/index.js';
+export * from './components/Radio/index.js';
+export * from './components/RadioGroup/index.js';
+export * from './components/ScrollContainer/index.js';
+export * from './components/Select/index.js';
+export * from './components/SidePage/index.js';
+export * from './components/Spinner/index.js';
+export * from './components/Sticky/index.js';
+export * from './components/Switcher/index.js';
+export * from './components/Tabs/index.js';
+export * from './components/Textarea/index.js';
+export * from './components/Toast/index.js';
+export * from './components/SingleToast/index.js';
+export * from './components/Toggle/index.js';
+export * from './components/Token/index.js';
+export * from './components/TokenInput/index.js';
+export * from './components/Tooltip/index.js';
+export * from './components/TooltipMenu/index.js';
+export * from './components/ResponsiveLayout/index.js';
+export * from './components/MaskedInput/index.js';
+export * from './lib/featureFlagsContext/index.js';
+export * from './lib/locale/index.js';
+export * from './lib/size/index.js';
+export * from './lib/theming/ThemeContext.js';
+export * from './lib/theming/ThemeFactory.js';
+export * from './lib/theming/themes/LightTheme.js';
+export * from './lib/theming/themes/DarkTheme.js';
+export * from './lib/types/props.js';
+export * from './internal/Popup/types.js';
+export * as ColorFunctions from './lib/styles/ColorFunctions.js';
+export * as DimensionFunctions from './lib/styles/DimensionFunctions.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,KAAK,cAAc,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,kBAAkB,MAAM,oCAAoC,CAAC","sourcesContent":["export * from './components/Autocomplete/index.js';\nexport * from './components/Button/index.js';\nexport * from './components/Calendar/index.js';\nexport * from './components/Center/index.js';\nexport * from './components/Checkbox/index.js';\nexport * from './components/ComboBox/index.js';\nexport * from './components/CurrencyInput/index.js';\nexport * from './components/CurrencyLabel/index.js';\nexport * from './components/DateInput/index.js';\nexport * from './components/DatePicker/index.js';\nexport * from './components/DateRangePicker/index.js';\nexport * from './components/Dropdown/index.js';\nexport * from './components/DropdownMenu/index.js';\nexport * from './components/FileUploader/index.js';\nexport * from './components/FxInput/index.js';\nexport * from './components/Gapped/index.js';\nexport * from './components/GlobalLoader/index.js';\nexport * from './components/Group/index.js';\nexport * from './components/Hint/index.js';\nexport * from './components/Input/index.js';\nexport * from './components/Kebab/index.js';\nexport * from './components/Link/index.js';\nexport * from './components/Loader/index.js';\nexport * from './components/MenuFooter/index.js';\nexport * from './components/MenuHeader/index.js';\nexport * from './components/MenuItem/index.js';\nexport * from './components/MenuSeparator/index.js';\nexport * from './components/MiniModal/index.js';\nexport * from './components/Modal/index.js';\nexport * from './components/Paging/index.js';\nexport * from './components/PasswordInput/index.js';\nexport * from './components/Radio/index.js';\nexport * from './components/RadioGroup/index.js';\nexport * from './components/ScrollContainer/index.js';\nexport * from './components/Select/index.js';\nexport * from './components/SidePage/index.js';\nexport * from './components/Spinner/index.js';\nexport * from './components/Sticky/index.js';\nexport * from './components/Switcher/index.js';\nexport * from './components/Tabs/index.js';\nexport * from './components/Textarea/index.js';\nexport * from './components/Toast/index.js';\nexport * from './components/SingleToast/index.js';\nexport * from './components/Toggle/index.js';\nexport * from './components/Token/index.js';\nexport * from './components/TokenInput/index.js';\nexport * from './components/Tooltip/index.js';\nexport * from './components/TooltipMenu/index.js';\nexport * from './components/ResponsiveLayout/index.js';\nexport * from './components/MaskedInput/index.js';\nexport * from './lib/featureFlagsContext/index.js';\nexport * from './lib/locale/index.js';\nexport * from './lib/size/index.js';\nexport * from './lib/theming/ThemeContext.js';\nexport * from './lib/theming/ThemeFactory.js';\nexport * from './lib/theming/themes/LightTheme.js';\nexport * from './lib/theming/themes/DarkTheme.js';\nexport * from './lib/types/props.js';\nexport * from './internal/Popup/types.js';\nexport type { PopupMenuCaptionProps } from './internal/PopupMenu/index.js';\nexport * as ColorFunctions from './lib/styles/ColorFunctions.js';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions.js';\n"]}

package/internal/ClearCrossIcon/ClearCrossIcon.d.ts

@@ -0,0 +1,11 @@
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { CommonProps } from '../CommonWrapper/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+export interface ClearCrossIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** Ширина и высота иконки крестика
+     * @default small */
+    size?: SizeProp;
+    'data-tid'?: string;
+}
+export declare const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps>;

package/internal/ClearCrossIcon/ClearCrossIcon.js

@@ -0,0 +1,68 @@
+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 { 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) };
+            case 'medium':
+                return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };
+            case 'small':
+            default:
+                return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };
+        }
+    };
+    var _c = React.useState(false), focusedByTab = _c[0], setFocusedByTab = _c[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); };
+    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), 
+                // 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),
+                React.createElement(CrossIcon, { size: size, focusable: true })))));
+};
+ClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';
+ClearCrossIcon.displayName = 'ClearCrossIcon';
+//# sourceMappingURL=ClearCrossIcon.js.map

package/internal/ClearCrossIcon/ClearCrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearCrossIcon.js","sourceRoot":"","sources":["../../../internal/ClearCrossIcon/ClearCrossIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } 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 type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { TokenSize } from '../../components/Token/index.js';\n\nimport { getStyles } from './ClearCrossIcon.styles.js';\nimport { CrossIcon } from './CrossIcon.js';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    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"]}

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

@@ -0,0 +1,12 @@
+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;
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,36 @@
+import type { AriaAttributes, CSSProperties } 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 {
+    /**
+     * Ширина и высота иконки крестика
+     *
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Ширина и высота всей кнопки
+     *
+     * @default 16
+     */
+    side?: number;
+    /**
+     * Цвет иконки
+     *
+     * Переменная темы: `closeBtnIconColor`
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Цвет иконки при наведении мышью и при фокусе
+     *
+     * Переменная темы: `closeBtnIconHoverColor`
+     */
+    colorHover?: CSSProperties['color'];
+    /**
+     * Возможность сфокусироваться на кнопке клавишей TAB
+     *
+     * @default true
+     * */
+    tabbable?: boolean;
+}
+export declare const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps>;

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

@@ -0,0 +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;
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,15 @@
+import React from 'react';
+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;
+    static displayName: string;
+    private cx;
+    private child;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private rootNodeSubscription;
+    render(): React.ReactNode;
+    private ref;
+}