@skbkontur/react-ui 4.9.0 → 4.9.2-theme2022.2

package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFileStatusIcon.js

@@ -0,0 +1,58 @@
+"use strict";exports.__esModule = true;exports.FileUploaderFileStatusIcon = void 0;var _react = _interopRequireWildcard(require("react"));
+
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
+var _ThemeHelpers = require("../../../lib/theming/ThemeHelpers");
+var _px = require("../../icons/16px");
+var _fileUtils = require("../fileUtils");
+var _Spinner = require("../../../components/Spinner");
+
+
+var _DeleteIcon = require("./DeleteIcon");
+var _ErrorIcon = require("./ErrorIcon");
+var _OkIcon = require("./OkIcon");
+var _FileUploaderFile = require("./FileUploaderFile.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+
+
+
+
+
+
+
+
+var FileUploaderFileStatusIcon = function FileUploaderFileStatusIcon(_ref)
+
+
+
+
+
+{var hovered = _ref.hovered,focusedByTab = _ref.focusedByTab,isInvalid = _ref.isInvalid,status = _ref.status,size = _ref.size;
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  var IconDelete = /*#__PURE__*/_react.default.createElement(_px.DeleteIcon, { className: _FileUploaderFile.jsStyles.deleteIcon(theme) });
+  var IconError = /*#__PURE__*/_react.default.createElement(_px.ErrorIcon, null);
+  var IconOk = /*#__PURE__*/_react.default.createElement(_px.OkIcon, { color: theme.fileUploaderIconColor });
+
+  if ((0, _ThemeHelpers.isTheme2022)(theme)) {
+    IconDelete = /*#__PURE__*/_react.default.createElement(_DeleteIcon.DeleteIcon, { size: size, className: _FileUploaderFile.jsStyles.deleteIcon(theme) });
+    IconError = /*#__PURE__*/_react.default.createElement(_ErrorIcon.ErrorIcon, { size: size });
+    IconOk = /*#__PURE__*/_react.default.createElement(_OkIcon.OkIcon, { size: size, color: theme.fileUploaderIconColor });
+  }
+
+  if (hovered || focusedByTab) {
+    return IconDelete;
+  }
+
+  if (isInvalid) {
+    return IconError;
+  }
+
+  switch (status) {
+    case _fileUtils.FileUploaderFileStatus.Loading:
+      return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: size, dimmed: true, caption: "" });
+    case _fileUtils.FileUploaderFileStatus.Uploaded:
+      return IconOk;
+    default:
+      return IconDelete;}
+
+};exports.FileUploaderFileStatusIcon = FileUploaderFileStatusIcon;

package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFileStatusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FileUploaderFileStatusIcon.tsx"],"names":["FileUploaderFileStatusIcon","hovered","focusedByTab","isInvalid","status","size","theme","ThemeContext","IconDelete","jsStyles","deleteIcon","IconError","IconOk","fileUploaderIconColor","FileUploaderFileStatus","Loading","Uploaded"],"mappings":"mFAAA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA,6D;;;;;;;;;;AAUO,IAAMA,0BAAoF,GAAG,SAAvFA,0BAAuF;;;;;;AAM9F,KALJC,OAKI,QALJA,OAKI,CAJJC,YAII,QAJJA,YAII,CAHJC,SAGI,QAHJA,SAGI,CAFJC,MAEI,QAFJA,MAEI,CADJC,IACI,QADJA,IACI;AACJ,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,MAAIC,UAAU,gBAAG,6BAAC,cAAD,IAAY,SAAS,EAAEC,2BAASC,UAAT,CAAoBJ,KAApB,CAAvB,GAAjB;AACA,MAAIK,SAAS,gBAAG,6BAAC,aAAD,OAAhB;AACA,MAAIC,MAAM,gBAAG,6BAAC,UAAD,IAAQ,KAAK,EAAEN,KAAK,CAACO,qBAArB,GAAb;;AAEA,MAAI,+BAAYP,KAAZ,CAAJ,EAAwB;AACtBE,IAAAA,UAAU,gBAAG,6BAAC,sBAAD,IAAgB,IAAI,EAAEH,IAAtB,EAA4B,SAAS,EAAEI,2BAASC,UAAT,CAAoBJ,KAApB,CAAvC,GAAb;AACAK,IAAAA,SAAS,gBAAG,6BAAC,oBAAD,IAAe,IAAI,EAAEN,IAArB,GAAZ;AACAO,IAAAA,MAAM,gBAAG,6BAAC,cAAD,IAAY,IAAI,EAAEP,IAAlB,EAAwB,KAAK,EAAEC,KAAK,CAACO,qBAArC,GAAT;AACD;;AAED,MAAIZ,OAAO,IAAIC,YAAf,EAA6B;AAC3B,WAAOM,UAAP;AACD;;AAED,MAAIL,SAAJ,EAAe;AACb,WAAOQ,SAAP;AACD;;AAED,UAAQP,MAAR;AACE,SAAKU,kCAAuBC,OAA5B;AACE,0BAAO,6BAAC,gBAAD,IAAS,IAAI,EAAEV,IAAf,EAAqB,MAAM,MAA3B,EAA4B,OAAO,EAAC,EAApC,GAAP;AACF,SAAKS,kCAAuBE,QAA5B;AACE,aAAOJ,MAAP;AACF;AACE,aAAOJ,UAAP,CANJ;;AAQD,CAnCM,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { isTheme2022 } from '../../../lib/theming/ThemeHelpers';\nimport { DeleteIcon, ErrorIcon, OkIcon } from '../../icons/16px';\nimport { FileUploaderFileStatus } from '../fileUtils';\nimport { Spinner } from '../../../components/Spinner';\nimport { FileUploaderSize } from '../../../components/FileUploader';\n\nimport { DeleteIcon as DeleteIcon2022 } from './DeleteIcon';\nimport { ErrorIcon as ErrorIcon2022 } from './ErrorIcon';\nimport { OkIcon as OkIcon2022 } from './OkIcon';\nimport { jsStyles } from './FileUploaderFile.styles';\n\ninterface FileUploaderFileStatusIconProps {\n  hovered: boolean;\n  focusedByTab: boolean;\n  isInvalid: boolean;\n  status: FileUploaderFileStatus;\n  size: FileUploaderSize;\n}\n\nexport const FileUploaderFileStatusIcon: React.FunctionComponent<FileUploaderFileStatusIconProps> = ({\n  hovered,\n  focusedByTab,\n  isInvalid,\n  status,\n  size,\n}) => {\n  const theme = useContext(ThemeContext);\n\n  let IconDelete = <DeleteIcon className={jsStyles.deleteIcon(theme)} />;\n  let IconError = <ErrorIcon />;\n  let IconOk = <OkIcon color={theme.fileUploaderIconColor} />;\n\n  if (isTheme2022(theme)) {\n    IconDelete = <DeleteIcon2022 size={size} className={jsStyles.deleteIcon(theme)} />;\n    IconError = <ErrorIcon2022 size={size} />;\n    IconOk = <OkIcon2022 size={size} color={theme.fileUploaderIconColor} />;\n  }\n\n  if (hovered || focusedByTab) {\n    return IconDelete;\n  }\n\n  if (isInvalid) {\n    return IconError;\n  }\n\n  switch (status) {\n    case FileUploaderFileStatus.Loading:\n      return <Spinner type={size} dimmed caption=\"\" />;\n    case FileUploaderFileStatus.Uploaded:\n      return IconOk;\n    default:\n      return IconDelete;\n  }\n};\n"]}

package/cjs/internal/FileUploaderControl/FileUploaderFile/OkIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const OkIcon: import("../../../lib/forwardRefAndName").ReactUIComponentWithRef<SVGSVGElement, Omit<import("../../icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/internal/FileUploaderControl/FileUploaderFile/OkIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.OkIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../icons2022/iconSizer");
+var _CheckAIcon16Light = require("../../icons2022/CheckAIcon/CheckAIcon16Light");
+var _CheckAIcon20Light = require("../../icons2022/CheckAIcon/CheckAIcon20Light");
+var _CheckAIcon24Regular = require("../../icons2022/CheckAIcon/CheckAIcon24Regular"); /* eslint-disable react/display-name */
+
+var OkIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_CheckAIcon16Light.CheckAIcon16Light, { disableCompensation: false });},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_CheckAIcon20Light.CheckAIcon20Light, { disableCompensation: false });},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_CheckAIcon24Regular.CheckAIcon24Regular, { disableCompensation: false });} },
+
+'OkIcon');exports.OkIcon = OkIcon;

package/cjs/internal/FileUploaderControl/FileUploaderFile/OkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["OkIcon.tsx"],"names":["OkIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,qF,CANA;;AAQO,IAAMA,MAAM,GAAG;AACpB;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,oCAAD,IAAmB,mBAAmB,EAAE,KAAxC,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,oCAAD,IAAmB,mBAAmB,EAAE,KAAxC,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,wCAAD,IAAqB,mBAAmB,EAAE,KAA1C,GAAN,EAHT,EADoB;;AAMpB,QANoB,CAAf,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../icons2022/iconSizer';\nimport { CheckAIcon16Light } from '../../icons2022/CheckAIcon/CheckAIcon16Light';\nimport { CheckAIcon20Light } from '../../icons2022/CheckAIcon/CheckAIcon20Light';\nimport { CheckAIcon24Regular } from '../../icons2022/CheckAIcon/CheckAIcon24Regular';\n\nexport const OkIcon = iconSizer(\n  {\n    small: () => <CheckAIcon16Light disableCompensation={false} />,\n    medium: () => <CheckAIcon20Light disableCompensation={false} />,\n    large: () => <CheckAIcon24Regular disableCompensation={false} />,\n  },\n  'OkIcon',\n);\n"]}

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { FileUploaderAttachedFile } from '../fileUtils';
-import { FileUploaderSize } from '../../../components/FileUploader';
-interface FileUploaderFileListProps {
-    renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
-    size: FileUploaderSize;
-}
-export declare const FileUploaderFileDataTids: {
-    readonly fileList: "FileUploader__fileList";
-};
-export declare const FileUploaderFileList: {
-    (props: FileUploaderFileListProps): JSX.Element;
-    displayName: string;
-};
-export {};
+import React from 'react';
+import { FileUploaderAttachedFile } from '../fileUtils';
+import { FileUploaderSize } from '../../../components/FileUploader';
+interface FileUploaderFileListProps {
+    renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
+    size: FileUploaderSize;
+}
+export declare const FileUploaderFileDataTids: {
+    readonly fileList: "FileUploader__fileList";
+};
+export declare const FileUploaderFileList: {
+    (props: FileUploaderFileListProps): JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts

@@ -1,8 +1,8 @@
-import { Theme } from '../../../lib/theming/Theme';
-export declare const jsStyles: {
-    file(): string;
-    fileWrapper(t: Theme): string;
-    fileWrapperSmall(t: Theme): string;
-    fileWrapperMedium(t: Theme): string;
-    fileWrapperLarge(t: Theme): string;
-};
+import { Theme } from '../../../lib/theming/Theme';
+export declare const jsStyles: {
+    file(): string;
+    fileWrapper(t: Theme): string;
+    fileWrapperSmall(t: Theme): string;
+    fileWrapperMedium(t: Theme): string;
+    fileWrapperLarge(t: Theme): string;
+};

package/cjs/internal/FileUploaderControl/FileUploaderFileValidationResult.d.ts

@@ -1,7 +1,7 @@
-export declare class FileUploaderFileValidationResult {
-    readonly isValid: boolean;
-    readonly message?: string;
-    constructor(isValid: boolean, message?: string);
-    static error(message: string): FileUploaderFileValidationResult;
-    static ok(): FileUploaderFileValidationResult;
-}
+export declare class FileUploaderFileValidationResult {
+    readonly isValid: boolean;
+    readonly message?: string;
+    constructor(isValid: boolean, message?: string);
+    static error(message: string): FileUploaderFileValidationResult;
+    static ok(): FileUploaderFileValidationResult;
+}

package/cjs/internal/FileUploaderControl/fileUtils.d.ts

@@ -1,14 +1,14 @@
-import { FileUploaderFileValidationResult } from './FileUploaderFileValidationResult';
-export declare enum FileUploaderFileStatus {
-    Attached = "Attached",
-    Loading = "Loading",
-    Uploaded = "Uploaded",
-    Error = "Error"
-}
-export interface FileUploaderAttachedFile {
-    id: string;
-    originalFile: File;
-    status: FileUploaderFileStatus;
-    validationResult: FileUploaderFileValidationResult;
-}
-export declare const getAttachedFile: (file: File) => FileUploaderAttachedFile;
+import { FileUploaderFileValidationResult } from './FileUploaderFileValidationResult';
+export declare enum FileUploaderFileStatus {
+    Attached = "Attached",
+    Loading = "Loading",
+    Uploaded = "Uploaded",
+    Error = "Error"
+}
+export interface FileUploaderAttachedFile {
+    id: string;
+    originalFile: File;
+    status: FileUploaderFileStatus;
+    validationResult: FileUploaderFileValidationResult;
+}
+export declare const getAttachedFile: (file: File) => FileUploaderAttachedFile;

package/cjs/internal/FileUploaderControl/hooks/useControlLocale.d.ts

@@ -1 +1 @@
-export declare const useControlLocale: () => import("../../../components/FileUploader/locale").FileUploaderLocale;
+export declare const useControlLocale: () => import("../../../components/FileUploader/locale").FileUploaderLocale;

package/cjs/internal/FileUploaderControl/hooks/useFileUploaderSize.d.ts

@@ -1,2 +1,2 @@
-import { FileUploaderSize } from '../../../components/FileUploader';
-export declare function useFileUploaderSize<T>(size: FileUploaderSize, { small, medium, large }: Record<FileUploaderSize, T>): T;
+import { FileUploaderSize } from '../../../components/FileUploader';
+export declare function useFileUploaderSize<T>(size: FileUploaderSize, { small, medium, large }: Record<FileUploaderSize, T>): T;

package/cjs/internal/FileUploaderControl/hooks/useUpload.d.ts

@@ -1,3 +1,3 @@
-import { Nullable } from '../../../typings/utility-types';
-import { FileUploaderAttachedFile } from '../fileUtils';
-export declare const useUpload: (request: Nullable<(file: FileUploaderAttachedFile) => Promise<void>>, onRequestSuccess?: Nullable<(fileId: string) => void>, onRequestError?: Nullable<(fileId: string) => void>) => (file: FileUploaderAttachedFile) => Promise<void>;
+import { Nullable } from '../../../typings/utility-types';
+import { FileUploaderAttachedFile } from '../fileUtils';
+export declare const useUpload: (request: Nullable<(file: FileUploaderAttachedFile) => Promise<void>>, onRequestSuccess?: Nullable<(fileId: string) => void>, onRequestError?: Nullable<(fileId: string) => void>) => (file: FileUploaderAttachedFile) => Promise<void>;

package/cjs/internal/FileUploaderControl/withFileUploaderControlProvider.d.ts

@@ -1,3 +1,3 @@
-import React, { ComponentType } from 'react';
-import { FileUploaderControlProviderProps } from './FileUploaderControlProvider';
-export declare const withFileUploaderControlProvider: <TProps extends Record<string, any>, TRef extends Record<string, any>>(Component: React.ComponentType<Pick<TProps & FileUploaderControlProviderProps, Exclude<keyof TProps, keyof FileUploaderControlProviderProps>>>) => React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps & FileUploaderControlProviderProps> & React.RefAttributes<TRef>>>;
+import React, { ComponentType } from 'react';
+import { FileUploaderControlProviderProps } from './FileUploaderControlProvider';
+export declare const withFileUploaderControlProvider: <TProps extends Record<string, any>, TRef extends Record<string, any>>(Component: React.ComponentType<Pick<TProps & FileUploaderControlProviderProps, Exclude<keyof TProps, keyof FileUploaderControlProviderProps>>>) => React.MemoExoticComponent<React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps & FileUploaderControlProviderProps> & React.RefAttributes<TRef>>>;

package/cjs/internal/FocusTrap/FocusTrap.d.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface FocusTrapProps extends CommonProps {
-    children: React.ReactElement<any>;
-    onBlur?: (event: FocusEvent) => void;
-}
-export declare class FocusTrap extends React.PureComponent<FocusTrapProps> {
-    static __KONTUR_REACT_UI__: string;
-    private setRootNode;
-    private focusOutsideListenerToken;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private onClickOutside;
-    private attachListeners;
-    private detachListeners;
-    private handleNativeDocClick;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface FocusTrapProps extends CommonProps {
+    children: React.ReactElement<any>;
+    onBlur?: (event: FocusEvent) => void;
+}
+export declare class FocusTrap extends React.PureComponent<FocusTrapProps> {
+    static __KONTUR_REACT_UI__: string;
+    private setRootNode;
+    private focusOutsideListenerToken;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private onClickOutside;
+    private attachListeners;
+    private detachListeners;
+    private handleNativeDocClick;
+}

package/cjs/internal/FocusTrap/index.d.ts

@@ -1 +1 @@
-export * from './FocusTrap';
+export * from './FocusTrap';

package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-export declare class HideBodyVerticalScroll extends React.Component {
-    static __KONTUR_REACT_UI__: string;
-    private initialScroll;
-    private master;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): null;
-    private updateScrollVisibility;
-    private hideScroll;
-    private attachStyle;
-    private restoreStyles;
-}
+import React from 'react';
+export declare class HideBodyVerticalScroll extends React.Component {
+    static __KONTUR_REACT_UI__: string;
+    private initialScroll;
+    private master;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): null;
+    private updateScrollVisibility;
+    private hideScroll;
+    private attachStyle;
+    private restoreStyles;
+}

package/cjs/internal/HideBodyVerticalScroll/index.d.ts

@@ -1 +1 @@
-export * from './HideBodyVerticalScroll';
+export * from './HideBodyVerticalScroll';

package/cjs/internal/IgnoreLayerClick/IgnoreLayerClick.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-export interface IgnoreLayerClickProps {
-    children: React.ReactNode;
-    active: boolean;
-}
-export declare class IgnoreLayerClick extends React.Component<IgnoreLayerClickProps> {
-    render(): React.ReactNode;
-}
+import React from 'react';
+export interface IgnoreLayerClickProps {
+    children: React.ReactNode;
+    active: boolean;
+}
+export declare class IgnoreLayerClick extends React.Component<IgnoreLayerClickProps> {
+    render(): React.ReactNode;
+}

package/cjs/internal/IgnoreLayerClick/index.d.ts

@@ -1 +1 @@
-export * from './IgnoreLayerClick';
+export * from './IgnoreLayerClick';

package/cjs/internal/InputLikeText/HiddenInput.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-interface Props extends React.HTMLAttributes<HTMLInputElement> {
-    nodeRef: (ref: HTMLInputElement | null) => void;
-}
-/**
- * В **IE11** событие `onPaste` вызывается только у редактируемых элементов: `input`, `textarea`, `[contenteditable]`.
- * Для решения этой проблемы, перед "вставкой" фокусируемся на инпуте
- * после этого `onPaste` вызывается у инпута и всплывает.
- */
-export declare class HiddenInput extends React.Component<Props> {
-    render(): JSX.Element;
-}
-export {};
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLInputElement> {
+    nodeRef: (ref: HTMLInputElement | null) => void;
+}
+/**
+ * В **IE11** событие `onPaste` вызывается только у редактируемых элементов: `input`, `textarea`, `[contenteditable]`.
+ * Для решения этой проблемы, перед "вставкой" фокусируемся на инпуте
+ * после этого `onPaste` вызывается у инпута и всплывает.
+ */
+export declare class HiddenInput extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export {};

package/cjs/internal/InputLikeText/InputLikeText.d.ts

@@ -1,78 +1,78 @@
-import React from 'react';
-import { MouseDragEventHandler } from '../../lib/events/MouseDrag';
-import { InputProps, InputState } from '../../components/Input';
-import { CommonProps } from '../CommonWrapper';
-export interface InputLikeTextProps extends CommonProps, InputProps {
-    children?: React.ReactNode;
-    innerRef?: (el: HTMLElement | null) => void;
-    onFocus?: React.FocusEventHandler<HTMLElement>;
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-    onMouseDragStart?: MouseDragEventHandler;
-    onMouseDragEnd?: MouseDragEventHandler;
-    takeContentWidth?: boolean;
-}
-export declare type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
-export declare const InputLikeTextDataTids: {
-    readonly root: "InputLikeText__root";
-    readonly input: "InputLikeText__input";
-};
-declare type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
-export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: {
-        blinking: boolean;
-        focused: boolean;
-    };
-    private theme;
-    private node;
-    private hiddenInput;
-    private lastSelectedInnerNode;
-    private frozen;
-    private frozenBlur;
-    private dragging;
-    private focusTimeout;
-    private blinkTimeout;
-    private setRootNode;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    /**
-     * @public
-     */
-    blink(): void;
-    getNode(): HTMLElement | null;
-    selectInnerNode: (node: HTMLElement | null, start?: number, end?: number) => void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private getIconClassname;
-    private renderLeftIcon;
-    private renderRightIcon;
-    private renderIcon;
-    private renderPrefix;
-    private renderSuffix;
-    private renderLeftSide;
-    private renderRightSide;
-    private renderPlaceholder;
-    private handleDocumentMouseDown;
-    private handleDocumentKeyDown;
-    private handleMouseDown;
-    private handleKeyDown;
-    private handleMouseDragStart;
-    private handleMouseDragEnd;
-    private handleFocus;
-    private handleBlur;
-    private hiddenInputRef;
-    private innerRef;
-    private defrost;
-    private getSizeClassName;
-}
-export {};
+import React from 'react';
+import { MouseDragEventHandler } from '../../lib/events/MouseDrag';
+import { InputProps, InputState } from '../../components/Input';
+import { CommonProps } from '../CommonWrapper';
+export interface InputLikeTextProps extends CommonProps, InputProps {
+    children?: React.ReactNode;
+    innerRef?: (el: HTMLElement | null) => void;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onMouseDragStart?: MouseDragEventHandler;
+    onMouseDragEnd?: MouseDragEventHandler;
+    takeContentWidth?: boolean;
+}
+export declare type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
+export declare const InputLikeTextDataTids: {
+    readonly root: "InputLikeText__root";
+    readonly input: "InputLikeText__input";
+};
+declare type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
+export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: {
+        blinking: boolean;
+        focused: boolean;
+    };
+    private theme;
+    private node;
+    private hiddenInput;
+    private lastSelectedInnerNode;
+    private frozen;
+    private frozenBlur;
+    private dragging;
+    private focusTimeout;
+    private blinkTimeout;
+    private setRootNode;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    /**
+     * @public
+     */
+    blink(): void;
+    getNode(): HTMLElement | null;
+    selectInnerNode: (node: HTMLElement | null, start?: number, end?: number) => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private getIconClassname;
+    private renderLeftIcon;
+    private renderRightIcon;
+    private renderIcon;
+    private renderPrefix;
+    private renderSuffix;
+    private renderLeftSide;
+    private renderRightSide;
+    private renderPlaceholder;
+    private handleDocumentMouseDown;
+    private handleDocumentKeyDown;
+    private handleMouseDown;
+    private handleKeyDown;
+    private handleMouseDragStart;
+    private handleMouseDragEnd;
+    private handleFocus;
+    private handleBlur;
+    private hiddenInputRef;
+    private innerRef;
+    private defrost;
+    private getSizeClassName;
+}
+export {};

package/cjs/internal/InputLikeText/InputLikeText.js

@@ -17,9 +17,12 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _listenFocusOutside = require("../../lib/listenFocusOutside");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _InputLayoutAside = require("../../components/Input/InputLayout/InputLayoutAside");
+var _InputLayoutContext = require("../../components/Input/InputLayout/InputLayoutContext");
 
-var _InputLikeText = require("./InputLikeText.styles");
-var _HiddenInput = require("./HiddenInput");var _excluded = ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth"];var _class, _class2, _temp;
+var _HiddenInput = require("./HiddenInput");
+var _InputLikeText = require("./InputLikeText.styles");var _excluded = ["innerRef", "tabIndex", "placeholder", "align", "borderless", "width", "size", "error", "warning", "onValueChange", "disabled", "prefix", "suffix", "leftIcon", "rightIcon", "value", "onMouseDragStart", "onMouseDragEnd", "takeContentWidth"];var _class, _class2, _temp;
 
 
 
@@ -172,8 +175,16 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
       var _this$state = _this.state,focused = _this$state.focused,blinking = _this$state.blinking;
 
-      var leftSide = _this.renderLeftSide();
-      var rightSide = _this.renderRightSide();
+      var leftSide = (0, _ThemeHelpers.isTheme2022)(_this.theme) ? /*#__PURE__*/
+      _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: leftIcon, text: prefix, side: "left" }) :
+
+      _this.renderLeftSide();
+
+      var rightSide = (0, _ThemeHelpers.isTheme2022)(_this.theme) ? /*#__PURE__*/
+      _react.default.createElement(_InputLayoutAside.InputLayoutAside, { icon: rightIcon, text: suffix, side: "right" }) :
+
+      _this.renderRightSide();
+
 
       var className = (0, _Emotion.cx)(_InputLikeText.styles.root(), _Input.styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[
       _Input.styles.disabled(_this.theme)] = !!disabled, _cx[
@@ -192,6 +203,9 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       _InputLikeText.styles.userSelectContain()] = focused, _cx2));
 
 
+      var context = _InputLayoutContext.InputLayoutContextDefault;
+      Object.assign(context, { disabled: disabled, focused: focused, size: size });
+
       return /*#__PURE__*/(
         _react.default.createElement("span", (0, _extends2.default)({
           "data-tid": InputLikeTextDataTids.root },
@@ -205,6 +219,7 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
           onKeyDown: _this.handleKeyDown,
           onMouseDown: _this.handleMouseDown }), /*#__PURE__*/
 
+        _react.default.createElement(_InputLayoutContext.InputLayoutContext.Provider, { value: context }, /*#__PURE__*/
         _react.default.createElement("input", { type: "hidden", value: value }),
         leftSide, /*#__PURE__*/
         _react.default.createElement("span", { className: wrapperClass }, /*#__PURE__*/
@@ -221,7 +236,8 @@ InputLikeText = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
         _this.renderPlaceholder()),
 
         rightSide,
-        _client.isIE11 && focused && /*#__PURE__*/_react.default.createElement(_HiddenInput.HiddenInput, { nodeRef: _this.hiddenInputRef })));
+        _client.isIE11 && focused && /*#__PURE__*/_react.default.createElement(_HiddenInput.HiddenInput, { nodeRef: _this.hiddenInputRef }))));
+
 
 
     };_this.