@skbkontur/react-ui 0.0.0-001618ff8c → 0.0.0-044e274f2c

package/cjs/components/PasswordInput/ClosedIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ClosedIcon = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _EyeClosedIcon16Light = require("../../internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light");
+var _EyeClosedIcon20Light = require("../../internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light");
+var _EyeClosedIcon24Regular = require("../../internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular");
+
+var ClosedIcon = exports.ClosedIcon = (0, _iconSizer.iconSizer)(
+  {
+    small: function small() {return /*#__PURE__*/_react.default.createElement(_EyeClosedIcon16Light.EyeClosedIcon16Light, null);},
+    medium: function medium() {return /*#__PURE__*/_react.default.createElement(_EyeClosedIcon20Light.EyeClosedIcon20Light, null);},
+    large: function large() {return /*#__PURE__*/_react.default.createElement(_EyeClosedIcon24Regular.EyeClosedIcon24Regular, null);}
+  },
+  'ClosedIcon'
+);

package/cjs/components/PasswordInput/ClosedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_iconSizer","_EyeClosedIcon16Light","_EyeClosedIcon20Light","_EyeClosedIcon24Regular","ClosedIcon","exports","iconSizer","small","default","createElement","EyeClosedIcon16Light","medium","EyeClosedIcon20Light","large","EyeClosedIcon24Regular"],"sources":["ClosedIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { EyeClosedIcon16Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon16Light';\nimport { EyeClosedIcon20Light } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon20Light';\nimport { EyeClosedIcon24Regular } from '../../internal/icons2022/EyeClosedIcon/EyeClosedIcon24Regular';\n\nexport const ClosedIcon = iconSizer(\n  {\n    small: () => <EyeClosedIcon16Light />,\n    medium: () => <EyeClosedIcon20Light />,\n    large: () => <EyeClosedIcon24Regular />,\n  },\n  'ClosedIcon',\n);\n"],"mappings":"gKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;;AAEO,IAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,oBAAS;EACjC;IACEC,KAAK,EAAE,SAAAA,MAAA,uBAAMV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,qBAAA,CAAAS,oBAAoB,MAAE,CAAC;IACrCC,MAAM,EAAE,SAAAA,OAAA,uBAAMd,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACP,qBAAA,CAAAU,oBAAoB,MAAE,CAAC;IACtCC,KAAK,EAAE,SAAAA,MAAA,uBAAMhB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,uBAAA,CAAAW,sBAAsB,MAAE,CAAC;EACzC,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/cjs/components/PasswordInput/OpenedIcon.d.ts

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

package/cjs/components/PasswordInput/OpenedIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.OpenedIcon = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _iconSizer = require("../../internal/icons2022/iconSizer");
+var _EyeOpenIcon16Light = require("../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light");
+var _EyeOpenIcon20Light = require("../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light");
+var _EyeOpenIcon24Regular = require("../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular");
+
+var OpenedIcon = exports.OpenedIcon = (0, _iconSizer.iconSizer)(
+  {
+    small: function small() {return /*#__PURE__*/_react.default.createElement(_EyeOpenIcon16Light.EyeOpenIcon16Light, null);},
+    medium: function medium() {return /*#__PURE__*/_react.default.createElement(_EyeOpenIcon20Light.EyeOpenIcon20Light, null);},
+    large: function large() {return /*#__PURE__*/_react.default.createElement(_EyeOpenIcon24Regular.EyeOpenIcon24Regular, null);}
+  },
+  'OpenedIcon'
+);

package/cjs/components/PasswordInput/OpenedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_iconSizer","_EyeOpenIcon16Light","_EyeOpenIcon20Light","_EyeOpenIcon24Regular","OpenedIcon","exports","iconSizer","small","default","createElement","EyeOpenIcon16Light","medium","EyeOpenIcon20Light","large","EyeOpenIcon24Regular"],"sources":["OpenedIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { EyeOpenIcon16Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon16Light';\nimport { EyeOpenIcon20Light } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon20Light';\nimport { EyeOpenIcon24Regular } from '../../internal/icons2022/EyeOpenIcon/EyeOpenIcon24Regular';\n\nexport const OpenedIcon = iconSizer(\n  {\n    small: () => <EyeOpenIcon16Light />,\n    medium: () => <EyeOpenIcon20Light />,\n    large: () => <EyeOpenIcon24Regular />,\n  },\n  'OpenedIcon',\n);\n"],"mappings":"gKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;;AAEO,IAAMK,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,IAAAE,oBAAS;EACjC;IACEC,KAAK,EAAE,SAAAA,MAAA,uBAAMV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,mBAAA,CAAAS,kBAAkB,MAAE,CAAC;IACnCC,MAAM,EAAE,SAAAA,OAAA,uBAAMd,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACP,mBAAA,CAAAU,kBAAkB,MAAE,CAAC;IACpCC,KAAK,EAAE,SAAAA,MAAA,uBAAMhB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACN,qBAAA,CAAAW,oBAAoB,MAAE,CAAC;EACvC,CAAC;EACD;AACF,CAAC","ignoreList":[]}

package/cjs/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,65 @@
+import React, { AriaAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { InputProps } from '../Input';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {
+    detectCapsLock?: boolean;
+}
+export interface PasswordInputState {
+    visible: boolean;
+    focused: boolean;
+    capsLockEnabled?: boolean | null;
+}
+export declare const PasswordInputDataTids: {
+    readonly root: "PasswordInput";
+    readonly capsLockDetector: "PasswordInputCapsLockDetector";
+    readonly eyeIcon: "PasswordInputEyeIcon";
+};
+type DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;
+/**
+ * Компонент для ввода пароля
+ */
+export declare class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static propTypes: {
+        /**
+         * Включает CapsLock детектор
+         */
+        detectCapsLock: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: PasswordInputState;
+    private theme;
+    private emotion;
+    private styles;
+    private input;
+    private setRootNode;
+    private readonly locale;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState): PasswordInputState | {
+        visible: boolean;
+    };
+    render(): React.JSX.Element;
+    /**
+     * @public
+     */
+    focus: () => void;
+    /**
+     * @public
+     */
+    blur: () => void;
+    private handleKeyPress;
+    private handleKeydown;
+    private handleToggleVisibility;
+    private handleFocusOnInput;
+    private handleFocus;
+    private handleBlur;
+    private getEyeWrapperClassname;
+    private renderEye;
+    private refInput;
+    private hideSymbols;
+    private renderMain;
+}
+export {};

package/cjs/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,276 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PasswordInputDataTids = exports.PasswordInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _globalObject = require("@skbkontur/global-object");
+
+
+var _decorators = require("../../lib/locale/decorators");
+var _RenderLayer = require("../../internal/RenderLayer");
+var _utils = require("../../lib/utils");
+var _identifiers = require("../../lib/events/keyboard/identifiers");
+var _KeyboardEventCodes = require("../../lib/events/keyboard/KeyboardEventCodes");
+var _Input = require("../Input");
+
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _PasswordInput2 = require("./PasswordInput.styles");
+var _PasswordInputIcon = require("./PasswordInputIcon");
+var _locale = require("./locale");var _excluded = ["detectCapsLock"];var _dec, _class, _PasswordInput;
+
+
+
+
+
+
+
+
+
+
+
+var PasswordInputDataTids = exports.PasswordInputDataTids = {
+  root: 'PasswordInput',
+  capsLockDetector: 'PasswordInputCapsLockDetector',
+  eyeIcon: 'PasswordInputEyeIcon'
+};
+
+
+
+/**
+ * Компонент для ввода пароля
+ */var
+
+
+PasswordInput = exports.PasswordInput = (_dec = (0, _decorators.locale)('PasswordInput', _locale.PasswordInputLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_PasswordInput = /*#__PURE__*/function (_React$PureComponent) {function PasswordInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(PasswordInput.defaultProps);_this.
+
+    state = {
+      visible: false,
+      focused: false,
+      capsLockEnabled: false
+    };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+     * @public
+     */_this.
+    focus = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };
+
+    /**
+     * @public
+     */_this.
+    blur = function () {
+      _this.handleBlur();
+    };_this.
+
+    handleKeyPress = function (e) {
+      var _this$props = _this.props,onKeyPress = _this$props.onKeyPress,detectCapsLock = _this$props.detectCapsLock;
+
+      if (onKeyPress) {
+        onKeyPress(e);
+      }
+
+      if (!detectCapsLock) {
+        return;
+      }
+
+      var capsLockEnabled = e.getModifierState(_KeyboardEventCodes.KeyboardEventCodes.CapsLock);
+
+      _this.setState({ capsLockEnabled: capsLockEnabled });
+    };_this.
+
+    handleKeydown = function (e) {
+      var _this2 = _this,_this2$props = _this2.
+        props,detectCapsLock = _this2$props.detectCapsLock,onKeyDown = _this2$props.onKeyDown,
+        capsLockEnabled = _this2.state.capsLockEnabled;
+
+
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+
+      if (!detectCapsLock) {
+        return;
+      }
+
+      if ((0, _identifiers.isKeyCapsLock)(e) && (0, _utils.isNonNullable)(capsLockEnabled)) {
+        _this.setState({ capsLockEnabled: !capsLockEnabled });
+      }
+    };_this.
+
+    handleToggleVisibility = function () {
+      _this.setState(function (prevState) {return { visible: !prevState.visible };}, _this.handleFocusOnInput);
+    };_this.
+
+    handleFocusOnInput = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };_this.
+
+    handleFocus = function (event) {
+      if (_this.state.focused) {
+        return;
+      }
+
+      _this.setState({ focused: true });
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    };_this.
+
+    handleBlur = function () {
+      if (_this.input) {
+        _this.input.blur();
+      }
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderEye = function () {
+      var capsLockEnabled = _this.state.capsLockEnabled;
+      var styles = _this.styles;
+      return /*#__PURE__*/(
+        _react.default.createElement("span", { className: styles.iconWrapper() },
+        capsLockEnabled && /*#__PURE__*/
+        _react.default.createElement("span", { className: styles.capsLockDetector(), "data-tid": PasswordInputDataTids.capsLockDetector }), /*#__PURE__*/
+
+        _react.default.createElement("span", { className: _this.emotion.cx(styles.toggleVisibility(_this.theme), _this.getEyeWrapperClassname()) },
+        !_this.props.disabled && /*#__PURE__*/
+        _react.default.createElement("button", {
+          type: "button",
+          "aria-label": _this.state.visible ? _this.locale.eyeClosedAriaLabel : _this.locale.eyeOpenedAriaLabel,
+          onClick: _this.handleToggleVisibility,
+          className: styles.icon(),
+          "data-tid": PasswordInputDataTids.eyeIcon }, /*#__PURE__*/
+
+        _react.default.createElement(_PasswordInputIcon.PasswordInputIcon, { size: _this.props.size, visible: _this.state.visible })
+        )
+
+        )
+        ));
+
+    };_this.
+
+    refInput = function (element) {
+      _this.input = element;
+    };_this.
+
+    hideSymbols = function () {
+      _this.setState({ visible: false });
+
+      if (!_this.state.focused) {
+        return;
+      }
+
+      _this.setState({ focused: false });
+    };_this.
+
+    renderMain = function (props) {
+      var detectCapsLock = props.detectCapsLock,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        onKeyDown: _this.handleKeydown,
+        onKeyPress: _this.handleKeyPress,
+        rightIcon: _this.renderEye(),
+        onFocus: _this.handleFocus });
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_RenderLayer.RenderLayer, { onFocusOutside: _this.hideSymbols, onClickOutside: _this.hideSymbols, active: _this.state.focused }, /*#__PURE__*/
+        _react.default.createElement("div", { "data-tid": PasswordInputDataTids.root, className: _this.styles.root() }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: _this.refInput, type: _this.state.visible ? 'text' : 'password' }, inputProps))
+        )
+        ));
+
+    };return _this;}(0, _inheritsLoose2.default)(PasswordInput, _React$PureComponent);var _proto = PasswordInput.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.detectCapsLock) {this.setState({ capsLockEnabled: null });} // @ts-expect-error: IE-specific API.
+    if (_client.isIE11 && (0, _globalObject.isBrowser)(_globalObject.globalObject) && !_globalObject.globalObject.document.msCapsLockWarningOff) {// @ts-expect-error: Read the comment above.
+      // turns off default ie capslock warning
+      _globalObject.globalObject.document.msCapsLockWarningOff = true;}};PasswordInput.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {if (props.disabled) {return { visible: false };}return state;};_proto.render = function render() {var _this3 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this3.emotion = emotion;_this3.styles = (0, _PasswordInput2.getStyles)(_this3.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this3.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), _this3.renderMain(_this3.props));});});};_proto.getEyeWrapperClassname = function getEyeWrapperClassname() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.eyeWrapperLarge(this.theme);case 'medium':return styles.eyeWrapperMedium(this.theme);case 'small':default:return styles.eyeWrapperSmall(this.theme);}};return PasswordInput;}(_react.default.PureComponent), _PasswordInput.__KONTUR_REACT_UI__ = 'PasswordInput', _PasswordInput.displayName = 'PasswordInput', _PasswordInput.propTypes = { /**
+   * Включает CapsLock детектор
+   */detectCapsLock: _propTypes.default.bool }, _PasswordInput.defaultProps = { size: 'small' }, _PasswordInput)) || _class) || _class);

package/cjs/components/PasswordInput/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_propTypes","_globalObject","_decorators","_RenderLayer","_utils","_identifiers","_KeyboardEventCodes","_Input","_client","_CommonWrapper","_ThemeContext","_Emotion","_rootNode","_createPropsGetter","_PasswordInput2","_PasswordInputIcon","_locale","_excluded","_dec","_class","_PasswordInput","PasswordInputDataTids","exports","root","capsLockDetector","eyeIcon","PasswordInput","locale","PasswordInputLocaleHelper","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","visible","focused","capsLockEnabled","focus","input","blur","handleBlur","handleKeyPress","e","_this$props","props","onKeyPress","detectCapsLock","getModifierState","Codes","CapsLock","setState","handleKeydown","_this2","_this2$props","onKeyDown","isKeyCapsLock","isNonNullable","handleToggleVisibility","prevState","handleFocusOnInput","handleFocus","event","onFocus","renderEye","styles","default","createElement","className","iconWrapper","emotion","cx","toggleVisibility","theme","getEyeWrapperClassname","disabled","type","eyeClosedAriaLabel","eyeOpenedAriaLabel","onClick","icon","PasswordInputIcon","size","refInput","element","hideSymbols","renderMain","rest","_objectWithoutPropertiesLoose2","inputProps","_extends2","rightIcon","RenderLayer","onFocusOutside","onClickOutside","active","Input","ref","_inheritsLoose2","_proto","prototype","componentDidMount","isIE11","isBrowser","globalObject","document","msCapsLockWarningOff","getDerivedStateFromProps","render","_this3","EmotionConsumer","getStyles","ThemeContext","Consumer","CommonWrapper","rootNodeRef","setRootNode","eyeWrapperLarge","eyeWrapperMedium","eyeWrapperSmall","React","PureComponent","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool"],"sources":["PasswordInput.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyCapsLock } from '../../lib/events/keyboard/identifiers';\nimport { KeyboardEventCodes as Codes } from '../../lib/events/keyboard/KeyboardEventCodes';\nimport { Input, InputProps } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { isIE11 } from '../../lib/client';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getStyles } from './PasswordInput.styles';\nimport { PasswordInputIcon } from './PasswordInputIcon';\nimport { PasswordInputLocale, PasswordInputLocaleHelper } from './locale';\n\nexport interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, InputProps {\n  detectCapsLock?: boolean;\n}\n\nexport interface PasswordInputState {\n  visible: boolean;\n  focused: boolean;\n  capsLockEnabled?: boolean | null;\n}\n\nexport const PasswordInputDataTids = {\n  root: 'PasswordInput',\n  capsLockDetector: 'PasswordInputCapsLockDetector',\n  eyeIcon: 'PasswordInputEyeIcon',\n} as const;\n\ntype DefaultProps = Required<Pick<PasswordInputProps, 'size'>>;\n\n/**\n * Компонент для ввода пароля\n */\n@rootNode\n@locale('PasswordInput', PasswordInputLocaleHelper)\nexport class PasswordInput extends React.PureComponent<PasswordInputProps, PasswordInputState> {\n  public static __KONTUR_REACT_UI__ = 'PasswordInput';\n  public static displayName = 'PasswordInput';\n\n  public static propTypes = {\n    /**\n     * Включает CapsLock детектор\n     */\n    detectCapsLock: PropTypes.bool,\n  };\n\n  public static defaultProps: DefaultProps = {\n    size: 'small',\n  };\n\n  private getProps = createPropsGetter(PasswordInput.defaultProps);\n\n  public state: PasswordInputState = {\n    visible: false,\n    focused: false,\n    capsLockEnabled: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n\n  private input: Nullable<Input>;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: PasswordInputLocale;\n\n  public componentDidMount() {\n    if (this.props.detectCapsLock) {\n      this.setState({ capsLockEnabled: null });\n    }\n\n    // @ts-expect-error: IE-specific API.\n    if (isIE11 && isBrowser(globalObject) && !globalObject.document.msCapsLockWarningOff) {\n      // @ts-expect-error: Read the comment above.\n      // turns off default ie capslock warning\n      globalObject.document.msCapsLockWarningOff = true;\n    }\n  }\n\n  public static getDerivedStateFromProps(props: PasswordInputProps, state: PasswordInputState) {\n    if (props.disabled) {\n      return { visible: false };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    {this.renderMain(this.props)}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public blur = () => {\n    this.handleBlur();\n  };\n\n  private handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const { onKeyPress, detectCapsLock } = this.props;\n\n    if (onKeyPress) {\n      onKeyPress(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    const capsLockEnabled = e.getModifierState(Codes.CapsLock);\n\n    this.setState({ capsLockEnabled });\n  };\n\n  private handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const {\n      props: { detectCapsLock, onKeyDown },\n      state: { capsLockEnabled },\n    } = this;\n\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n\n    if (!detectCapsLock) {\n      return;\n    }\n\n    if (isKeyCapsLock(e) && isNonNullable(capsLockEnabled)) {\n      this.setState({ capsLockEnabled: !capsLockEnabled });\n    }\n  };\n\n  private handleToggleVisibility = () => {\n    this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocusOnInput);\n  };\n\n  private handleFocusOnInput = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.state.focused) {\n      return;\n    }\n\n    this.setState({ focused: true });\n\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  private handleBlur = () => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private getEyeWrapperClassname() {\n    const styles = this.styles;\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.eyeWrapperLarge(this.theme);\n      case 'medium':\n        return styles.eyeWrapperMedium(this.theme);\n      case 'small':\n      default:\n        return styles.eyeWrapperSmall(this.theme);\n    }\n  }\n\n  private renderEye = () => {\n    const { capsLockEnabled } = this.state;\n    const styles = this.styles;\n    return (\n      <span className={styles.iconWrapper()}>\n        {capsLockEnabled && (\n          <span className={styles.capsLockDetector()} data-tid={PasswordInputDataTids.capsLockDetector} />\n        )}\n        <span className={this.emotion.cx(styles.toggleVisibility(this.theme), this.getEyeWrapperClassname())}>\n          {!this.props.disabled && (\n            <button\n              type=\"button\"\n              aria-label={this.state.visible ? this.locale.eyeClosedAriaLabel : this.locale.eyeOpenedAriaLabel}\n              onClick={this.handleToggleVisibility}\n              className={styles.icon()}\n              data-tid={PasswordInputDataTids.eyeIcon}\n            >\n              <PasswordInputIcon size={this.props.size} visible={this.state.visible} />\n            </button>\n          )}\n        </span>\n      </span>\n    );\n  };\n\n  private refInput = (element: Input) => {\n    this.input = element;\n  };\n\n  private hideSymbols = () => {\n    this.setState({ visible: false });\n\n    if (!this.state.focused) {\n      return;\n    }\n\n    this.setState({ focused: false });\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {\n    const { detectCapsLock, ...rest } = props;\n    const inputProps = {\n      ...rest,\n      onKeyDown: this.handleKeydown,\n      onKeyPress: this.handleKeyPress,\n      rightIcon: this.renderEye(),\n      onFocus: this.handleFocus,\n    };\n\n    return (\n      <RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols} active={this.state.focused}>\n        <div data-tid={PasswordInputDataTids.root} className={this.styles.root()}>\n          <Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />\n        </div>\n      </RenderLayer>\n    );\n  };\n}\n"],"mappings":"+eAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;;AAGA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AACA,IAAAO,mBAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;;AAEA,IAAAS,OAAA,GAAAT,OAAA;AACA,IAAAU,cAAA,GAAAV,OAAA;;AAEA,IAAAW,aAAA,GAAAX,OAAA;AACA,IAAAY,QAAA,GAAAZ,OAAA;AACA,IAAAa,SAAA,GAAAb,OAAA;AACA,IAAAc,kBAAA,GAAAd,OAAA;;AAEA,IAAAe,eAAA,GAAAf,OAAA;AACA,IAAAgB,kBAAA,GAAAhB,OAAA;AACA,IAAAiB,OAAA,GAAAjB,OAAA,aAA0E,IAAAkB,SAAA,0BAAAC,IAAA,EAAAC,MAAA,EAAAC,cAAA;;;;;;;;;;;;AAYnE,IAAMC,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG;EACnCE,IAAI,EAAE,eAAe;EACrBC,gBAAgB,EAAE,+BAA+B;EACjDC,OAAO,EAAE;AACX,CAAU;;;;AAIV;AACA;AACA,GAFA;;;AAKaC,aAAa,GAAAJ,OAAA,CAAAI,aAAA,IAAAR,IAAA,GADzB,IAAAS,kBAAM,EAAC,eAAe,EAAEC,iCAAyB,CAAC,MADlDC,kBAAQ,EAAAV,MAAA,GAAAD,IAAA,CAAAC,MAAA,IAAAC,cAAA,0BAAAU,oBAAA,YAAAJ,cAAA,OAAAK,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,oBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,oBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;;;;;;;;;;;;;;IAiBCU,QAAQ,GAAG,IAAAC,oCAAiB,EAAChB,aAAa,CAACiB,YAAY,CAAC,CAAAZ,KAAA;;IAEzDa,KAAK,GAAuB;MACjCC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE,KAAK;MACdC,eAAe,EAAE;IACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsDD;AACF;AACA,OAFEhB,KAAA;IAGOiB,KAAK,GAAG,YAAM;MACnB,IAAIjB,KAAA,CAAKkB,KAAK,EAAE;QACdlB,KAAA,CAAKkB,KAAK,CAACD,KAAK,CAAC,CAAC;MACpB;IACF,CAAC;;IAED;AACF;AACA,OAFEjB,KAAA;IAGOmB,IAAI,GAAG,YAAM;MAClBnB,KAAA,CAAKoB,UAAU,CAAC,CAAC;IACnB,CAAC,CAAApB,KAAA;;IAEOqB,cAAc,GAAG,UAACC,CAAwC,EAAK;MACrE,IAAAC,WAAA,GAAuCvB,KAAA,CAAKwB,KAAK,CAAzCC,UAAU,GAAAF,WAAA,CAAVE,UAAU,CAAEC,cAAc,GAAAH,WAAA,CAAdG,cAAc;;MAElC,IAAID,UAAU,EAAE;QACdA,UAAU,CAACH,CAAC,CAAC;MACf;;MAEA,IAAI,CAACI,cAAc,EAAE;QACnB;MACF;;MAEA,IAAMV,eAAe,GAAGM,CAAC,CAACK,gBAAgB,CAACC,sCAAK,CAACC,QAAQ,CAAC;;MAE1D7B,KAAA,CAAK8B,QAAQ,CAAC,EAAEd,eAAe,EAAfA,eAAe,CAAC,CAAC,CAAC;IACpC,CAAC,CAAAhB,KAAA;;IAEO+B,aAAa,GAAG,UAACT,CAAwC,EAAK;MACpE,IAAAU,MAAA,GAAAhC,KAAA,CAAAiC,YAAA,GAAAD,MAAA;QACER,KAAK,CAAIE,cAAc,GAAAO,YAAA,CAAdP,cAAc,CAAEQ,SAAS,GAAAD,YAAA,CAATC,SAAS;QACzBlB,eAAe,GAAAgB,MAAA,CAAxBnB,KAAK,CAAIG,eAAe;;;MAG1B,IAAIkB,SAAS,EAAE;QACbA,SAAS,CAACZ,CAAC,CAAC;MACd;;MAEA,IAAI,CAACI,cAAc,EAAE;QACnB;MACF;;MAEA,IAAI,IAAAS,0BAAa,EAACb,CAAC,CAAC,IAAI,IAAAc,oBAAa,EAACpB,eAAe,CAAC,EAAE;QACtDhB,KAAA,CAAK8B,QAAQ,CAAC,EAAEd,eAAe,EAAE,CAACA,eAAe,CAAC,CAAC,CAAC;MACtD;IACF,CAAC,CAAAhB,KAAA;;IAEOqC,sBAAsB,GAAG,YAAM;MACrCrC,KAAA,CAAK8B,QAAQ,CAAC,UAACQ,SAAS,UAAM,EAAExB,OAAO,EAAE,CAACwB,SAAS,CAACxB,OAAO,CAAC,CAAC,EAAC,EAAEd,KAAA,CAAKuC,kBAAkB,CAAC;IAC1F,CAAC,CAAAvC,KAAA;;IAEOuC,kBAAkB,GAAG,YAAM;MACjC,IAAIvC,KAAA,CAAKkB,KAAK,EAAE;QACdlB,KAAA,CAAKkB,KAAK,CAACD,KAAK,CAAC,CAAC;MACpB;IACF,CAAC,CAAAjB,KAAA;;IAEOwC,WAAW,GAAG,UAACC,KAAyC,EAAK;MACnE,IAAIzC,KAAA,CAAKa,KAAK,CAACE,OAAO,EAAE;QACtB;MACF;;MAEAf,KAAA,CAAK8B,QAAQ,CAAC,EAAEf,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;;MAEhC,IAAIf,KAAA,CAAKwB,KAAK,CAACkB,OAAO,EAAE;QACtB1C,KAAA,CAAKwB,KAAK,CAACkB,OAAO,CAACD,KAAK,CAAC;MAC3B;IACF,CAAC,CAAAzC,KAAA;;IAEOoB,UAAU,GAAG,YAAM;MACzB,IAAIpB,KAAA,CAAKkB,KAAK,EAAE;QACdlB,KAAA,CAAKkB,KAAK,CAACC,IAAI,CAAC,CAAC;MACnB;IACF,CAAC,CAAAnB,KAAA;;;;;;;;;;;;;;;IAeO2C,SAAS,GAAG,YAAM;MACxB,IAAQ3B,eAAe,GAAKhB,KAAA,CAAKa,KAAK,CAA9BG,eAAe;MACvB,IAAM4B,MAAM,GAAG5C,KAAA,CAAK4C,MAAM;MAC1B;QACE9E,MAAA,CAAA+E,OAAA,CAAAC,aAAA,WAAMC,SAAS,EAAEH,MAAM,CAACI,WAAW,CAAC,CAAE;QACnChC,eAAe;QACdlD,MAAA,CAAA+E,OAAA,CAAAC,aAAA,WAAMC,SAAS,EAAEH,MAAM,CAACnD,gBAAgB,CAAC,CAAE,EAAC,YAAUH,qBAAqB,CAACG,gBAAiB,EAAE,CAChG;;QACD3B,MAAA,CAAA+E,OAAA,CAAAC,aAAA,WAAMC,SAAS,EAAE/C,KAAA,CAAKiD,OAAO,CAACC,EAAE,CAACN,MAAM,CAACO,gBAAgB,CAACnD,KAAA,CAAKoD,KAAK,CAAC,EAAEpD,KAAA,CAAKqD,sBAAsB,CAAC,CAAC,CAAE;QAClG,CAACrD,KAAA,CAAKwB,KAAK,CAAC8B,QAAQ;QACnBxF,MAAA,CAAA+E,OAAA,CAAAC,aAAA;UACES,IAAI,EAAC,QAAQ;UACb,cAAYvD,KAAA,CAAKa,KAAK,CAACC,OAAO,GAAGd,KAAA,CAAKJ,MAAM,CAAC4D,kBAAkB,GAAGxD,KAAA,CAAKJ,MAAM,CAAC6D,kBAAmB;UACjGC,OAAO,EAAE1D,KAAA,CAAKqC,sBAAuB;UACrCU,SAAS,EAAEH,MAAM,CAACe,IAAI,CAAC,CAAE;UACzB,YAAUrE,qBAAqB,CAACI,OAAQ;;QAExC5B,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAAC9D,kBAAA,CAAA4E,iBAAiB,IAACC,IAAI,EAAE7D,KAAA,CAAKwB,KAAK,CAACqC,IAAK,EAAC/C,OAAO,EAAEd,KAAA,CAAKa,KAAK,CAACC,OAAQ,EAAE;QAClE;;QAEN;QACF,CAAC;;IAEX,CAAC,CAAAd,KAAA;;IAEO8D,QAAQ,GAAG,UAACC,OAAc,EAAK;MACrC/D,KAAA,CAAKkB,KAAK,GAAG6C,OAAO;IACtB,CAAC,CAAA/D,KAAA;;IAEOgE,WAAW,GAAG,YAAM;MAC1BhE,KAAA,CAAK8B,QAAQ,CAAC,EAAEhB,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;;MAEjC,IAAI,CAACd,KAAA,CAAKa,KAAK,CAACE,OAAO,EAAE;QACvB;MACF;;MAEAf,KAAA,CAAK8B,QAAQ,CAAC,EAAEf,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IACnC,CAAC,CAAAf,KAAA;;IAEOiE,UAAU,GAAG,UAACzC,KAAiD,EAAK;MAC1E,IAAQE,cAAc,GAAcF,KAAK,CAAjCE,cAAc,CAAKwC,IAAI,OAAAC,8BAAA,CAAAtB,OAAA,EAAKrB,KAAK,EAAAtC,SAAA;MACzC,IAAMkF,UAAU,OAAAC,SAAA,CAAAxB,OAAA;MACXqB,IAAI;QACPhC,SAAS,EAAElC,KAAA,CAAK+B,aAAa;QAC7BN,UAAU,EAAEzB,KAAA,CAAKqB,cAAc;QAC/BiD,SAAS,EAAEtE,KAAA,CAAK2C,SAAS,CAAC,CAAC;QAC3BD,OAAO,EAAE1C,KAAA,CAAKwC,WAAW,GAC1B;;;MAED;QACE1E,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAAC1E,YAAA,CAAAmG,WAAW,IAACC,cAAc,EAAExE,KAAA,CAAKgE,WAAY,EAACS,cAAc,EAAEzE,KAAA,CAAKgE,WAAY,EAACU,MAAM,EAAE1E,KAAA,CAAKa,KAAK,CAACE,OAAQ;QAC1GjD,MAAA,CAAA+E,OAAA,CAAAC,aAAA,UAAK,YAAUxD,qBAAqB,CAACE,IAAK,EAACuD,SAAS,EAAE/C,KAAA,CAAK4C,MAAM,CAACpD,IAAI,CAAC,CAAE;QACvE1B,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAACtE,MAAA,CAAAmG,KAAK,MAAAN,SAAA,CAAAxB,OAAA,IAAC+B,GAAG,EAAE5E,KAAA,CAAK8D,QAAS,EAACP,IAAI,EAAEvD,KAAA,CAAKa,KAAK,CAACC,OAAO,GAAG,MAAM,GAAG,UAAW,IAAKsD,UAAU,CAAG;QACzF;QACM,CAAC;;IAElB,CAAC,QAAApE,KAAA,MAAA6E,eAAA,CAAAhC,OAAA,EAAAlD,aAAA,EAAAI,oBAAA,MAAA+E,MAAA,GAAAnF,aAAA,CAAAoF,SAAA,CAAAD,MAAA,CAhMME,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,IAAI,CAACxD,KAAK,CAACE,cAAc,EAAE,CAC7B,IAAI,CAACI,QAAQ,CAAC,EAAEd,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,CAC1C,CAAC,CAED;IACA,IAAIiE,cAAM,IAAI,IAAAC,uBAAS,EAACC,0BAAY,CAAC,IAAI,CAACA,0BAAY,CAACC,QAAQ,CAACC,oBAAoB,EAAE,CACpF;MACA;MACAF,0BAAY,CAACC,QAAQ,CAACC,oBAAoB,GAAG,IAAI,CACnD,CACF,CAAC,CAAA1F,aAAA,CAEa2F,wBAAwB,GAAtC,SAAAA,yBAAuC9D,KAAyB,EAAEX,KAAyB,EAAE,CAC3F,IAAIW,KAAK,CAAC8B,QAAQ,EAAE,CAClB,OAAO,EAAExC,OAAO,EAAE,KAAK,CAAC,CAAC,CAC3B,CAEA,OAAOD,KAAK,CACd,CAAC,CAAAiE,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACE1H,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAAClE,QAAA,CAAA6G,eAAe,QACb,UAACxC,OAAO,EAAK,CACZuC,MAAI,CAACvC,OAAO,GAAGA,OAAO,CACtBuC,MAAI,CAAC5C,MAAM,GAAG,IAAA8C,yBAAS,EAACF,MAAI,CAACvC,OAAO,CAAC,CACrC,oBACEnF,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAACnE,aAAA,CAAAgH,YAAY,CAACC,QAAQ,QACnB,UAACxC,KAAK,EAAK,CACVoC,MAAI,CAACpC,KAAK,GAAGA,KAAK,CAClB,oBACEtF,MAAA,CAAA+E,OAAA,CAAAC,aAAA,CAACpE,cAAA,CAAAmH,aAAa,MAAAxB,SAAA,CAAAxB,OAAA,IAACiD,WAAW,EAAEN,MAAI,CAACO,WAAY,IAAKP,MAAI,CAAChE,KAAK,GACzDgE,MAAI,CAACvB,UAAU,CAACuB,MAAI,CAAChE,KAAK,CACd,CAAC,CAEpB,CACqB,CAAC,CAE5B,CACe,CAAC,CAEtB,CAAC,CAAAsD,MAAA,CAiFOzB,sBAAsB,GAA9B,SAAAA,uBAAA,EAAiC,CAC/B,IAAMT,MAAM,GAAG,IAAI,CAACA,MAAM,CAC1B,QAAQ,IAAI,CAAClC,QAAQ,CAAC,CAAC,CAACmD,IAAI,GAC1B,KAAK,OAAO,CACV,OAAOjB,MAAM,CAACoD,eAAe,CAAC,IAAI,CAAC5C,KAAK,CAAC,CAC3C,KAAK,QAAQ,CACX,OAAOR,MAAM,CAACqD,gBAAgB,CAAC,IAAI,CAAC7C,KAAK,CAAC,CAC5C,KAAK,OAAO,CACZ,QACE,OAAOR,MAAM,CAACsD,eAAe,CAAC,IAAI,CAAC9C,KAAK,CAAC,CAC7C,CACF,CAAC,QAAAzD,aAAA,GArKgCwG,cAAK,CAACC,aAAa,GAAA/G,cAAA,CACtCgH,mBAAmB,GAAG,eAAe,EAAAhH,cAAA,CACrCiH,WAAW,GAAG,eAAe,EAAAjH,cAAA,CAE7BkH,SAAS,GAAG,EACxB;AACJ;AACA,KACI7E,cAAc,EAAE8E,kBAAS,CAACC,IAAI,CAChC,CAAC,EAAApH,cAAA,CAEauB,YAAY,GAAiB,EACzCiD,IAAI,EAAE,OAAO,CACf,CAAC,EAAAxE,cAAA,MAAAD,MAAA,KAAAA,MAAA","ignoreList":[]}

package/cjs/components/PasswordInput/PasswordInput.md

@@ -0,0 +1,28 @@
+```jsx harmony
+<PasswordInput />
+```
+
+Пример с отслеживанием нажатия CapsLock:
+
+```jsx harmony
+<PasswordInput detectCapsLock />
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface PasswordInputLocale {
+  eyeOpenedAriaLabel?: string;
+  eyeClosedAriaLabel?: string;
+}
+
+const ru_RU = {
+  eyeOpenedAriaLabel: 'Скрыть символы пароля',
+  eyeClosedAriaLabel: 'Отобразить символы пароля',
+}
+
+const en_GB = {
+  eyeOpenedAriaLabel: 'Hide password symbols',
+  eyeClosedAriaLabel: 'Show password symbols',
+}
+```

package/cjs/components/PasswordInput/PasswordInput.styles.d.ts

@@ -0,0 +1,12 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
+    toggleVisibility(t: Theme): string;
+    capsLockDetector(): string;
+    iconWrapper(): string;
+    eyeWrapperSmall(t: Theme): string;
+    eyeWrapperMedium(t: Theme): string;
+    eyeWrapperLarge(t: Theme): string;
+    icon(): string;
+};

package/cjs/components/PasswordInput/PasswordInput.styles.js

@@ -0,0 +1,87 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+
+var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+var getStyles = exports.getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: relative;\n        display: inline-block;\n        line-height: normal;\n\n        input::-ms-clear,\n        input::-ms-reveal {\n          display: none;\n        }\n      "])));
+
+
+
+
+
+
+
+
+
+      },
+      toggleVisibility: function toggleVisibility(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n        cursor: pointer;\n        opacity: ", ";\n        user-select: none;\n\n        &:hover {\n          color: ", ";\n          opacity: ", ";\n        }\n      "])),
+        t.passwordInputVisibilityIconColor,
+
+        t.passwordInputVisibilityIconOpacity,
+
+
+
+        t.passwordInputVisibilityIconHoverColor,
+        t.passwordInputVisibilityIconHoverOpacity);
+
+
+      },
+      capsLockDetector: function capsLockDetector() {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n        font-size: 9px;\n        margin-right: 8px;\n        color: #fff;\n        cursor: default;\n        background: #999;\n        padding: 2px 5px;\n        border-radius: 3px;\n        z-index: 9;\n        box-sizing: border-box;\n        line-height: normal;\n\n        &::before {\n          content: 'CapsLock';\n        }\n      "])));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      },
+      iconWrapper: function iconWrapper() {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      "])));
+
+
+
+
+      },
+
+      eyeWrapperSmall: function eyeWrapperSmall(t) {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: ", ";\n      "])),
+        t.inputIconSizeSmall);
+
+      },
+
+      eyeWrapperMedium: function eyeWrapperMedium(t) {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: ", ";\n      "])),
+        t.inputIconSizeMedium);
+
+      },
+
+      eyeWrapperLarge: function eyeWrapperLarge(t) {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: ", ";\n      "])),
+        t.inputIconSizeLarge);
+
+      },
+      icon: function icon() {
+        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      "])));
+
+
+
+
+
+
+
+      }
+    }));};

package/cjs/components/PasswordInput/PasswordInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","getStyles","exports","emotion","memoizeStyle","root","css","_taggedTemplateLiteralLoose2","default","toggleVisibility","t","passwordInputVisibilityIconColor","passwordInputVisibilityIconOpacity","passwordInputVisibilityIconHoverColor","passwordInputVisibilityIconHoverOpacity","capsLockDetector","iconWrapper","eyeWrapperSmall","inputIconSizeSmall","eyeWrapperMedium","inputIconSizeMedium","eyeWrapperLarge","inputIconSizeLarge","icon"],"sources":["PasswordInput.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        position: relative;\n        display: inline-block;\n        line-height: normal;\n\n        input::-ms-clear,\n        input::-ms-reveal {\n          display: none;\n        }\n      `;\n    },\n    toggleVisibility(t: Theme) {\n      return emotion.css`\n        color: ${t.passwordInputVisibilityIconColor};\n        cursor: pointer;\n        opacity: ${t.passwordInputVisibilityIconOpacity};\n        user-select: none;\n\n        &:hover {\n          color: ${t.passwordInputVisibilityIconHoverColor};\n          opacity: ${t.passwordInputVisibilityIconHoverOpacity};\n        }\n      `;\n    },\n    capsLockDetector() {\n      return emotion.css`\n        display: inline-block;\n        font-size: 9px;\n        margin-right: 8px;\n        color: #fff;\n        cursor: default;\n        background: #999;\n        padding: 2px 5px;\n        border-radius: 3px;\n        z-index: 9;\n        box-sizing: border-box;\n        line-height: normal;\n\n        &::before {\n          content: 'CapsLock';\n        }\n      `;\n    },\n    iconWrapper() {\n      return emotion.css`\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n      `;\n    },\n\n    eyeWrapperSmall(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeSmall};\n      `;\n    },\n\n    eyeWrapperMedium(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeMedium};\n      `;\n    },\n\n    eyeWrapperLarge(t: Theme) {\n      return emotion.css`\n        min-width: ${t.inputIconSizeLarge};\n      `;\n    },\n    icon() {\n      return emotion.css`\n        padding: 0;\n        border: none;\n        font: inherit;\n        color: inherit;\n        background-color: transparent;\n        cursor: pointer;\n      `;\n    },\n  });\n"],"mappings":";;;AAGA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAElD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOF,OAAO,CAACG,GAAG,CAAAb,eAAA,KAAAA,eAAA,OAAAc,4BAAA,CAAAC,OAAA;;;;;;;;;;MAUpB,CAAC;MACDC,gBAAgB,WAAAA,iBAACC,CAAQ,EAAE;QACzB,OAAOP,OAAO,CAACG,GAAG,CAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;QACPE,CAAC,CAACC,gCAAgC;;QAEhCD,CAAC,CAACE,kCAAkC;;;;QAIpCF,CAAC,CAACG,qCAAqC;QACrCH,CAAC,CAACI,uCAAuC;;;MAG1D,CAAC;MACDC,gBAAgB,WAAAA,iBAAA,EAAG;QACjB,OAAOZ,OAAO,CAACG,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;;;;;;;;;;;;;;;;MAiBpB,CAAC;MACDQ,WAAW,WAAAA,YAAA,EAAG;QACZ,OAAOb,OAAO,CAACG,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;;MAKpB,CAAC;;MAEDS,eAAe,WAAAA,gBAACP,CAAQ,EAAE;QACxB,OAAOP,OAAO,CAACG,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACHE,CAAC,CAACQ,kBAAkB;;MAErC,CAAC;;MAEDC,gBAAgB,WAAAA,iBAACT,CAAQ,EAAE;QACzB,OAAOP,OAAO,CAACG,GAAG,CAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;QACHE,CAAC,CAACU,mBAAmB;;MAEtC,CAAC;;MAEDC,eAAe,WAAAA,gBAACX,CAAQ,EAAE;QACxB,OAAOP,OAAO,CAACG,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;QACHE,CAAC,CAACY,kBAAkB;;MAErC,CAAC;MACDC,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOpB,OAAO,CAACG,GAAG,CAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;;MAQpB;IACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/PasswordInput/PasswordInputIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PasswordInputProps, PasswordInputState } from './PasswordInput';
+export type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> & Pick<PasswordInputProps, 'size'>;
+export declare const PasswordInputIcon: ({ visible, size }: PasswordInputIconProps) => React.JSX.Element;

package/cjs/components/PasswordInput/PasswordInputIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PasswordInputIcon = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+var _ClosedIcon = require("./ClosedIcon");
+var _OpenedIcon = require("./OpenedIcon");
+
+
+
+var PasswordInputIcon = exports.PasswordInputIcon = function PasswordInputIcon(_ref) {var visible = _ref.visible,size = _ref.size;
+  if (visible) {
+    return /*#__PURE__*/_react.default.createElement(_ClosedIcon.ClosedIcon, { size: size });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_OpenedIcon.OpenedIcon, { size: size });
+};

package/cjs/components/PasswordInput/PasswordInputIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_ClosedIcon","_OpenedIcon","PasswordInputIcon","exports","_ref","visible","size","default","createElement","ClosedIcon","OpenedIcon"],"sources":["PasswordInputIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport { PasswordInputProps, PasswordInputState } from './PasswordInput';\nimport { ClosedIcon } from './ClosedIcon';\nimport { OpenedIcon } from './OpenedIcon';\n\nexport type PasswordInputIconProps = Pick<PasswordInputState, 'visible'> & Pick<PasswordInputProps, 'size'>;\n\nexport const PasswordInputIcon = ({ visible, size }: PasswordInputIconProps) => {\n  if (visible) {\n    return <ClosedIcon size={size} />;\n  }\n\n  return <OpenedIcon size={size} />;\n};\n"],"mappings":"uKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;AAGA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;;;;AAIO,IAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAAE,IAAA,EAAkD,KAA5CC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EAC/C,IAAID,OAAO,EAAE;IACX,oBAAOR,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,WAAA,CAAAS,UAAU,IAACH,IAAI,EAAEA,IAAK,EAAE,CAAC;EACnC;;EAEA,oBAAOT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,WAAA,CAAAS,UAAU,IAACJ,IAAI,EAAEA,IAAK,EAAE,CAAC;AACnC,CAAC","ignoreList":[]}

package/cjs/components/PasswordInput/__creevey__/PasswordInput.creevey.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/components/PasswordInput/__creevey__/PasswordInput.creevey.js

@@ -0,0 +1,38 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _creevey = require("creevey");
+
+(0, _creevey.kind)('PasswordInput', function () {
+  (0, _creevey.story)('Plain', function (_ref) {var setStoryParameters = _ref.setStoryParameters;
+    setStoryParameters({
+      skip: {
+        'flickering screenshot': { in: ['chrome2022'], tests: ['With typed password'] }
+      }
+    });
+
+    (0, _creevey.test)('Plain', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {return _regenerator.default.wrap(function _callee$(_context) {while (1) switch (_context.prev = _context.next) {case 0:_context.t0 =
+            this;_context.next = 3;return this.takeScreenshot();case 3:_context.t1 = _context.sent;_context.next = 6;return _context.t0.expect.call(_context.t0, _context.t1).to.matchImage('Plain');case 6:case "end":return _context.stop();}}, _callee, this);}))
+    );
+
+    (0, _creevey.test)('With typed password', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {return _regenerator.default.wrap(function _callee2$(_context2) {while (1) switch (_context2.prev = _context2.next) {case 0:_context2.next = 2;return (
+              this.browser.
+              actions({
+                bridge: true
+              }).
+              click(this.browser.findElement({ css: '[type="password"]' })).
+              sendKeys('Test...').
+              perform());case 2:_context2.t0 =
+            this;_context2.next = 5;return this.takeScreenshot();case 5:_context2.t1 = _context2.sent;_context2.next = 8;return _context2.t0.expect.call(_context2.t0, _context2.t1).to.matchImage('With typed password');case 8:case "end":return _context2.stop();}}, _callee2, this);}))
+    );
+
+    (0, _creevey.test)('With visible password', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {return _regenerator.default.wrap(function _callee3$(_context3) {while (1) switch (_context3.prev = _context3.next) {case 0:_context3.next = 2;return (
+              this.browser.
+              actions({
+                bridge: true
+              }).
+              click(this.browser.findElement({ css: '[type="password"]' })).
+              sendKeys('Test...').
+              click(this.browser.findElement({ css: '[data-tid="PasswordInputEyeIcon"]' })).
+              perform());case 2:_context3.t0 =
+            this;_context3.next = 5;return this.takeScreenshot();case 5:_context3.t1 = _context3.sent;_context3.next = 8;return _context3.t0.expect.call(_context3.t0, _context3.t1).to.matchImage('With visible password');case 8:case "end":return _context3.stop();}}, _callee3, this);}))
+    );
+  });
+});