@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/cjs/components/Input/InputLayout/InputLayout.styles.js

@@ -1,59 +1,56 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStylesLayout = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-var _chars = require("../../../lib/chars");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.stylesLayout = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _chars = require("../../../lib/chars");
 var _Emotion = require("../../../lib/theming/Emotion");
 
 var _Input = require("../Input.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-var getStylesLayout = exports.getStylesLayout = function getStylesLayout(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        return (0, _Input.getStyles)(emotion).root(t);
-      },
-      input: function input() {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "])));
+var stylesLayout = exports.stylesLayout = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return _Input.styles.root(t);
+  },
+  input: function input() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    "])));
 
 
 
 
 
 
-      },
-      aside: function aside() {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "])),
+  },
+  aside: function aside() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n\n      &::before {\n        content: '", "';\n      }\n    "])),
 
 
 
 
 
-        _chars.ZERO_WIDTH_SPACE_CSS);
+    _chars.ZERO_WIDTH_SPACE_CSS);
 
 
-      },
-      icon: function icon(t) {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.inputIconColor);
+  },
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputIconColor);
 
-      },
-      iconFocus: function iconFocus(t) {
-        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.inputFocusedIconColor);
+  },
+  iconFocus: function iconFocus(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputFocusedIconColor);
 
-      },
-      iconDisabled: function iconDisabled(t) {
-        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        cursor: default;\n        color: ", ";\n      "])),
+  },
+  iconDisabled: function iconDisabled(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n      color: ", ";\n    "])),
 
-        t.inputIconColorDisabled);
+    t.inputIconColorDisabled);
 
-      },
-      text: function text(t) {
-        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.inputPlaceholderColor);
+  },
+  text: function text(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputPlaceholderColor);
 
-      },
-      textDisabled: function textDisabled(t) {
-        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n      "])),
-        t.inputPlaceholderColorDisabled);
+  },
+  textDisabled: function textDisabled(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.inputPlaceholderColorDisabled);
 
-      }
-    }));};
+  }
+});

package/cjs/components/Input/InputLayout/InputLayout.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_chars","require","_Emotion","_Input","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","getStylesLayout","exports","emotion","memoizeStyle","root","t","getStyles","input","css","_taggedTemplateLiteralLoose2","default","aside","ZERO_WIDTH_SPACE_CSS","icon","inputIconColor","iconFocus","inputFocusedIconColor","iconDisabled","inputIconColorDisabled","text","inputPlaceholderColor","textDisabled","inputPlaceholderColorDisabled"],"sources":["InputLayout.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars';\nimport { memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\nimport { getStyles } from '../Input.styles';\n\nexport const getStylesLayout = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return getStyles(emotion).root(t);\n    },\n    input() {\n      return emotion.css`\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      `;\n    },\n    aside() {\n      return emotion.css`\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '${ZERO_WIDTH_SPACE_CSS}';\n        }\n      `;\n    },\n    icon(t: Theme) {\n      return emotion.css`\n        color: ${t.inputIconColor};\n      `;\n    },\n    iconFocus(t: Theme) {\n      return emotion.css`\n        color: ${t.inputFocusedIconColor};\n      `;\n    },\n    iconDisabled(t: Theme) {\n      return emotion.css`\n        cursor: default;\n        color: ${t.inputIconColorDisabled};\n      `;\n    },\n    text(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColor};\n      `;\n    },\n    textDisabled(t: Theme) {\n      return emotion.css`\n        color: ${t.inputPlaceholderColorDisabled};\n      `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA,oBAA4C,IAAAG,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAErC,IAAMC,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAIE,OAAgB;IAC9C,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAO,IAAAC,gBAAS,EAACJ,OAAO,CAAC,CAACE,IAAI,CAACC,CAAC,CAAC;MACnC,CAAC;MACDE,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOL,OAAO,CAACM,GAAG,CAAAf,eAAA,KAAAA,eAAA,OAAAgB,4BAAA,CAAAC,OAAA;;;;;;;MAOpB,CAAC;MACDC,KAAK,WAAAA,MAAA,EAAG;QACN,OAAOT,OAAO,CAACM,GAAG,CAAAd,gBAAA,KAAAA,gBAAA,OAAAe,4BAAA,CAAAC,OAAA;;;;;;QAMFE,2BAAoB;;;MAGtC,CAAC;MACDC,IAAI,WAAAA,KAACR,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACM,GAAG,CAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;QACPL,CAAC,CAACS,cAAc;;MAE7B,CAAC;MACDC,SAAS,WAAAA,UAACV,CAAQ,EAAE;QAClB,OAAOH,OAAO,CAACM,GAAG,CAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;QACPL,CAAC,CAACW,qBAAqB;;MAEpC,CAAC;MACDC,YAAY,WAAAA,aAACZ,CAAQ,EAAE;QACrB,OAAOH,OAAO,CAACM,GAAG,CAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;;QAEPL,CAAC,CAACa,sBAAsB;;MAErC,CAAC;MACDC,IAAI,WAAAA,KAACd,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACM,GAAG,CAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;QACPL,CAAC,CAACe,qBAAqB;;MAEpC,CAAC;MACDC,YAAY,WAAAA,aAAChB,CAAQ,EAAE;QACrB,OAAOH,OAAO,CAACM,GAAG,CAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;QACPL,CAAC,CAACiB,6BAA6B;;MAE5C;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_chars","require","_Emotion","_Input","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","stylesLayout","exports","memoizeStyle","root","t","styles","input","css","_taggedTemplateLiteralLoose2","default","aside","ZERO_WIDTH_SPACE_CSS","icon","inputIconColor","iconFocus","inputFocusedIconColor","iconDisabled","inputIconColorDisabled","text","inputPlaceholderColor","textDisabled","inputPlaceholderColorDisabled"],"sources":["InputLayout.styles.ts"],"sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars';\nimport { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\nimport { styles } from '../Input.styles';\n\nexport const stylesLayout = memoizeStyle({\n  root(t: Theme) {\n    return styles.root(t);\n  },\n  input() {\n    return css`\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    `;\n  },\n  aside() {\n    return css`\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n\n      &::before {\n        content: '${ZERO_WIDTH_SPACE_CSS}';\n      }\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      color: ${t.inputIconColor};\n    `;\n  },\n  iconFocus(t: Theme) {\n    return css`\n      color: ${t.inputFocusedIconColor};\n    `;\n  },\n  iconDisabled(t: Theme) {\n    return css`\n      cursor: default;\n      color: ${t.inputIconColorDisabled};\n    `;\n  },\n  text(t: Theme) {\n    return css`\n      color: ${t.inputPlaceholderColor};\n    `;\n  },\n  textDisabled(t: Theme) {\n    return css`\n      color: ${t.inputPlaceholderColorDisabled};\n    `;\n  },\n});\n"],"mappings":"0RAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA,oBAAyC,IAAAG,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAElC,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,qBAAY,EAAC;EACvCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOC,aAAM,CAACF,IAAI,CAACC,CAAC,CAAC;EACvB,CAAC;EACDE,KAAK,WAAAA,MAAA,EAAG;IACN,WAAOC,YAAG,EAAAd,eAAA,KAAAA,eAAA,OAAAe,4BAAA,CAAAC,OAAA;;;;;;;EAOZ,CAAC;EACDC,KAAK,WAAAA,MAAA,EAAG;IACN,WAAOH,YAAG,EAAAb,gBAAA,KAAAA,gBAAA,OAAAc,4BAAA,CAAAC,OAAA;;;;;;IAMME,2BAAoB;;;EAGtC,CAAC;EACDC,IAAI,WAAAA,KAACR,CAAQ,EAAE;IACb,WAAOG,YAAG,EAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;IACCL,CAAC,CAACS,cAAc;;EAE7B,CAAC;EACDC,SAAS,WAAAA,UAACV,CAAQ,EAAE;IAClB,WAAOG,YAAG,EAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;IACCL,CAAC,CAACW,qBAAqB;;EAEpC,CAAC;EACDC,YAAY,WAAAA,aAACZ,CAAQ,EAAE;IACrB,WAAOG,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;;IAECL,CAAC,CAACa,sBAAsB;;EAErC,CAAC;EACDC,IAAI,WAAAA,KAACd,CAAQ,EAAE;IACb,WAAOG,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACCL,CAAC,CAACe,qBAAqB;;EAEpC,CAAC;EACDC,YAAY,WAAAA,aAAChB,CAAQ,EAAE;IACrB,WAAOG,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACCL,CAAC,CAACiB,6BAA6B;;EAE5C;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Input/InputLayout/InputLayoutAside.js

@@ -1,7 +1,6 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.InputLayoutAside = void 0;var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAside = void 0;var _react = _interopRequireDefault(require("react"));
 
 
-var _Emotion = require("../../../lib/theming/Emotion");
 
 var _InputLayout = require("./InputLayout.styles");
 var _InputLayoutAsideIcon = require("./InputLayoutAsideIcon");
@@ -14,8 +13,7 @@ var _InputLayoutAsideText = require("./InputLayoutAsideText");
 
 
 var InputLayoutAside = exports.InputLayoutAside = function InputLayoutAside(_ref) {var icon = _ref.icon,text = _ref.text,side = _ref.side;
-  var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
-  var asideClassName = (0, _InputLayout.getStylesLayout)(emotion).aside();
+  var asideClassName = _InputLayout.stylesLayout.aside();
 
   var _icon = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideIcon.InputLayoutAsideIcon, { key: "icon", icon: icon, side: side });
   var _text = /*#__PURE__*/_react.default.createElement(_InputLayoutAsideText.InputLayoutAsideText, { key: "text", text: text });

package/cjs/components/Input/InputLayout/InputLayoutAside.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Emotion","_InputLayout","_InputLayoutAsideIcon","_InputLayoutAsideText","InputLayoutAside","exports","_ref","icon","text","side","emotion","useContext","EmotionContext","asideClassName","getStylesLayout","aside","_icon","default","createElement","InputLayoutAsideIcon","key","_text","InputLayoutAsideText","child","className"],"sources":["InputLayoutAside.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { InputProps } from '../Input';\nimport { EmotionContext } from '../../../lib/theming/Emotion';\n\nimport { getStylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const emotion = useContext(EmotionContext);\n  const asideClassName = getStylesLayout(emotion).aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"],"mappings":"wKAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;;AAGA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;;;;;;;;AAQO,IAAMK,gBAAgE,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnEA,gBAAgEA,CAAAE,IAAA,EAA6B,KAAvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI,CAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EACjG,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,uBAAc,CAAC;EAC1C,IAAMC,cAAc,GAAG,IAAAC,4BAAe,EAACJ,OAAO,CAAC,CAACK,KAAK,CAAC,CAAC;;EAEvD,IAAMC,KAAK,gBAAGnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAAChB,qBAAA,CAAAiB,oBAAoB,IAACC,GAAG,EAAC,MAAM,EAACb,IAAI,EAAEA,IAAK,EAACE,IAAI,EAAEA,IAAK,EAAE,CAAC;EACzE,IAAMY,KAAK,gBAAGxB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,CAACf,qBAAA,CAAAmB,oBAAoB,IAACF,GAAG,EAAC,MAAM,EAACZ,IAAI,EAAEA,IAAK,EAAE,CAAC;;EAE7D,IAAMe,KAAK,GAAGd,IAAI,KAAK,MAAM,GAAG,CAACO,KAAK,EAAEK,KAAK,CAAC,GAAG,CAACA,KAAK,EAAEL,KAAK,CAAC;;EAE/D,oBAAOnB,MAAA,CAAAoB,OAAA,CAAAC,aAAA,WAAMM,SAAS,EAAEX,cAAe,IAAEU,KAAY,CAAC;AACxD,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_InputLayout","_InputLayoutAsideIcon","_InputLayoutAsideText","InputLayoutAside","exports","_ref","icon","text","side","asideClassName","stylesLayout","aside","_icon","default","createElement","InputLayoutAsideIcon","key","_text","InputLayoutAsideText","child","className"],"sources":["InputLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\n\nimport { stylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  text: InputProps['prefix'] | InputProps['suffix'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n  const asideClassName = stylesLayout.aside();\n\n  const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n  const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n  const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n  return <span className={asideClassName}>{child}</span>;\n};\n"],"mappings":"sKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;;AAIA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAH,OAAA;;;;;;;;AAQO,IAAMI,gBAAgE,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnEA,gBAAgEA,CAAAE,IAAA,EAA6B,KAAvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI,CAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EACjG,IAAMC,cAAc,GAAGC,yBAAY,CAACC,KAAK,CAAC,CAAC;;EAE3C,IAAMC,KAAK,gBAAGf,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,qBAAA,CAAAc,oBAAoB,IAACC,GAAG,EAAC,MAAM,EAACV,IAAI,EAAEA,IAAK,EAACE,IAAI,EAAEA,IAAK,EAAE,CAAC;EACzE,IAAMS,KAAK,gBAAGpB,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,qBAAA,CAAAgB,oBAAoB,IAACF,GAAG,EAAC,MAAM,EAACT,IAAI,EAAEA,IAAK,EAAE,CAAC;;EAE7D,IAAMY,KAAK,GAAGX,IAAI,KAAK,MAAM,GAAG,CAACI,KAAK,EAAEK,KAAK,CAAC,GAAG,CAACA,KAAK,EAAEL,KAAK,CAAC;;EAE/D,oBAAOf,MAAA,CAAAgB,OAAA,CAAAC,aAAA,WAAMM,SAAS,EAAEX,cAAe,IAAEU,KAAY,CAAC;AACxD,CAAC","ignoreList":[]}

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js

@@ -1,12 +1,12 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.InputLayoutAsideIcon = void 0;var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAsideIcon = void 0;var _react = _interopRequireDefault(require("react"));
 var _reactIs = require("react-is");
 
 var _utils = require("../../../lib/utils");
 
 var _Emotion = require("../../../lib/theming/Emotion");
-
 var _ThemeContext = require("../../../lib/theming/ThemeContext");
 
+
 var _InputLayoutContext = require("./InputLayoutContext");
 var _InputLayout = require("./InputLayout.styles");
 
@@ -14,10 +14,8 @@ var _InputLayout = require("./InputLayout.styles");
 
 
 
-
 var InputLayoutAsideIcon = exports.InputLayoutAsideIcon = function InputLayoutAsideIcon(_ref) {var _ref$icon = _ref.icon,icon = _ref$icon === void 0 ? null : _ref$icon,side = _ref.side;
-  var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
   var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled,size = _React$useContext.size;
 
   var sizes = {
@@ -45,15 +43,14 @@ var InputLayoutAsideIcon = exports.InputLayoutAsideIcon = function InputLayoutAs
     }
   }
 
-  var stylesLayout = (0, _InputLayout.getStylesLayout)(emotion);
   return _icon ? /*#__PURE__*/
   _react.default.createElement("span", {
     style: style,
-    className: emotion.cx(
-      stylesLayout.aside(),
-      stylesLayout.icon(theme),
-      focused && stylesLayout.iconFocus(theme),
-      disabled && stylesLayout.iconDisabled(theme)
+    className: (0, _Emotion.cx)(
+      _InputLayout.stylesLayout.aside(),
+      _InputLayout.stylesLayout.icon(theme),
+      focused && _InputLayout.stylesLayout.iconFocus(theme),
+      disabled && _InputLayout.stylesLayout.iconDisabled(theme)
     ) },
 
   _icon

package/cjs/components/Input/InputLayout/InputLayoutAsideIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactIs","_utils","_Emotion","_ThemeContext","_InputLayoutContext","_InputLayout","InputLayoutAsideIcon","exports","_ref","_ref$icon","icon","side","emotion","useContext","EmotionContext","theme","ThemeContext","_React$useContext","React","InputLayoutContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","Function","isElement","isKonturIcon","_icon$props$size","cloneElement","props","style","marginLeft","marginRight","stylesLayout","getStylesLayout","default","createElement","className","cx","aside","iconFocus","iconDisabled"],"sources":["InputLayoutAsideIcon.tsx"],"sourcesContent":["import React, { ReactElement, useContext } from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps } from '../Input';\nimport { EmotionContext } from '../../../lib/theming/Emotion';\nimport { SizeProp } from '../../../lib/types/props';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const emotion = useContext(EmotionContext);\n  const theme = useContext(ThemeContext);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon as ReactElement)) {\n    _icon = React.cloneElement(icon as ReactElement, { size: icon.props.size ?? sizes[size] });\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  const stylesLayout = getStylesLayout(emotion);\n  return _icon ? (\n    <span\n      style={style}\n      className={emotion.cx(\n        stylesLayout.aside(),\n        stylesLayout.icon(theme),\n        focused && stylesLayout.iconFocus(theme),\n        disabled && stylesLayout.iconDisabled(theme),\n      )}\n    >\n      {_icon}\n    </span>\n  ) : null;\n};\n"],"mappings":"4KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA;;AAEA,IAAAG,QAAA,GAAAH,OAAA;;AAEA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;;;;;;;AAOO,IAAMO,oBAAwE,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAA3EA,oBAAwEA,CAAAE,IAAA,EAA8B,KAAAC,SAAA,GAAAD,IAAA,CAAxBE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA,CAAEE,IAAI,GAAAH,IAAA,CAAJG,IAAI;EAC1G,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,uBAAc,CAAC;EAC1C,IAAMC,KAAK,GAAG,IAAAF,iBAAU,EAACG,0BAAY,CAAC;EACtC,IAAAC,iBAAA,GAAoCC,cAAK,CAACL,UAAU,CAACM,sCAAkB,CAAC,CAAhEC,OAAO,GAAAH,iBAAA,CAAPG,OAAO,CAAEC,QAAQ,GAAAJ,iBAAA,CAARI,QAAQ,CAAEC,IAAI,GAAAL,iBAAA,CAAJK,IAAI;;EAE/B,IAAMC,KAA+B,GAAG;IACtCC,KAAK,EAAEC,QAAQ,CAACV,KAAK,CAACW,kBAAkB,CAAC;IACzCC,MAAM,EAAEF,QAAQ,CAACV,KAAK,CAACa,mBAAmB,CAAC;IAC3CC,KAAK,EAAEJ,QAAQ,CAACV,KAAK,CAACe,kBAAkB;EAC1C,CAAC;EACD,IAAMC,IAA8B,GAAG;IACrCP,KAAK,EAAEC,QAAQ,CAACV,KAAK,CAACiB,iBAAiB,CAAC;IACxCL,MAAM,EAAEF,QAAQ,CAACV,KAAK,CAACkB,kBAAkB,CAAC;IAC1CJ,KAAK,EAAEJ,QAAQ,CAACV,KAAK,CAACmB,iBAAiB;EACzC,CAAC;;EAED,IAAIC,KAAK,GAAGzB,IAAI,YAAY0B,QAAQ,GAAG1B,IAAI,CAAC,CAAC,GAAGA,IAAI;EACpD,IAAI,IAAA2B,kBAAS,EAAC3B,IAAI,CAAC,IAAI,IAAA4B,mBAAY,EAAC5B,IAAoB,CAAC,EAAE,KAAA6B,gBAAA;IACzDJ,KAAK,gBAAGjB,cAAK,CAACsB,YAAY,CAAC9B,IAAI,EAAkB,EAAEY,IAAI,GAAAiB,gBAAA,GAAE7B,IAAI,CAAC+B,KAAK,CAACnB,IAAI,YAAAiB,gBAAA,GAAIhB,KAAK,CAACD,IAAI,CAAC,CAAC,CAAC,CAAC;EAC5F;;EAEA,IAAMoB,KAA0B,GAAG,CAAC,CAAC;EACrC,IAAI/B,IAAI,EAAE;IACR,IAAIA,IAAI,KAAK,OAAO,EAAE;MACpB+B,KAAK,CAACC,UAAU,GAAGZ,IAAI,CAACT,IAAI,CAAC;IAC/B,CAAC,MAAM;MACLoB,KAAK,CAACE,WAAW,GAAGb,IAAI,CAACT,IAAI,CAAC;IAChC;EACF;;EAEA,IAAMuB,YAAY,GAAG,IAAAC,4BAAe,EAAClC,OAAO,CAAC;EAC7C,OAAOuB,KAAK;EACVtC,MAAA,CAAAkD,OAAA,CAAAC,aAAA;IACEN,KAAK,EAAEA,KAAM;IACbO,SAAS,EAAErC,OAAO,CAACsC,EAAE;MACnBL,YAAY,CAACM,KAAK,CAAC,CAAC;MACpBN,YAAY,CAACnC,IAAI,CAACK,KAAK,CAAC;MACxBK,OAAO,IAAIyB,YAAY,CAACO,SAAS,CAACrC,KAAK,CAAC;MACxCM,QAAQ,IAAIwB,YAAY,CAACQ,YAAY,CAACtC,KAAK;IAC7C,CAAE;;EAEDoB;EACG,CAAC;EACL,IAAI;AACV,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactIs","_utils","_Emotion","_ThemeContext","_InputLayoutContext","_InputLayout","InputLayoutAsideIcon","exports","_ref","_ref$icon","icon","side","theme","React","useContext","ThemeContext","_React$useContext","InputLayoutContext","focused","disabled","size","sizes","small","parseInt","inputIconSizeSmall","medium","inputIconSizeMedium","large","inputIconSizeLarge","gaps","inputIconGapSmall","inputIconGapMedium","inputIconGapLarge","_icon","Function","isElement","isKonturIcon","_icon$props$size","cloneElement","props","style","marginLeft","marginRight","default","createElement","className","cx","stylesLayout","aside","iconFocus","iconDisabled"],"sources":["InputLayoutAsideIcon.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../../lib/utils';\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { SizeProp } from '../../../lib/types/props';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\nexport interface InputLayoutAsideIconProps {\n  icon: InputProps['leftIcon'] | InputProps['rightIcon'];\n  side: 'left' | 'right';\n}\n\nexport const InputLayoutAsideIcon: React.FunctionComponent<InputLayoutAsideIconProps> = ({ icon = null, side }) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled, size } = React.useContext(InputLayoutContext);\n\n  const sizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const gaps: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconGapSmall),\n    medium: parseInt(theme.inputIconGapMedium),\n    large: parseInt(theme.inputIconGapLarge),\n  };\n\n  let _icon = icon instanceof Function ? icon() : icon;\n  if (isElement(icon) && isKonturIcon(icon as ReactElement)) {\n    _icon = React.cloneElement(icon as ReactElement, { size: icon.props.size ?? sizes[size] });\n  }\n\n  const style: React.CSSProperties = {};\n  if (side) {\n    if (side === 'right') {\n      style.marginLeft = gaps[size];\n    } else {\n      style.marginRight = gaps[size];\n    }\n  }\n\n  return _icon ? (\n    <span\n      style={style}\n      className={cx(\n        stylesLayout.aside(),\n        stylesLayout.icon(theme),\n        focused && stylesLayout.iconFocus(theme),\n        disabled && stylesLayout.iconDisabled(theme),\n      )}\n    >\n      {_icon}\n    </span>\n  ) : null;\n};\n"],"mappings":"0KAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;;AAEA,IAAAE,MAAA,GAAAF,OAAA;;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;;;AAGA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;;;;;;AAMO,IAAMO,oBAAwE,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAA3EA,oBAAwEA,CAAAE,IAAA,EAA8B,KAAAC,SAAA,GAAAD,IAAA,CAAxBE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA,CAAEE,IAAI,GAAAH,IAAA,CAAJG,IAAI;EAC1G,IAAMC,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAAC,iBAAA,GAAoCH,cAAK,CAACC,UAAU,CAACG,sCAAkB,CAAC,CAAhEC,OAAO,GAAAF,iBAAA,CAAPE,OAAO,CAAEC,QAAQ,GAAAH,iBAAA,CAARG,QAAQ,CAAEC,IAAI,GAAAJ,iBAAA,CAAJI,IAAI;;EAE/B,IAAMC,KAA+B,GAAG;IACtCC,KAAK,EAAEC,QAAQ,CAACX,KAAK,CAACY,kBAAkB,CAAC;IACzCC,MAAM,EAAEF,QAAQ,CAACX,KAAK,CAACc,mBAAmB,CAAC;IAC3CC,KAAK,EAAEJ,QAAQ,CAACX,KAAK,CAACgB,kBAAkB;EAC1C,CAAC;EACD,IAAMC,IAA8B,GAAG;IACrCP,KAAK,EAAEC,QAAQ,CAACX,KAAK,CAACkB,iBAAiB,CAAC;IACxCL,MAAM,EAAEF,QAAQ,CAACX,KAAK,CAACmB,kBAAkB,CAAC;IAC1CJ,KAAK,EAAEJ,QAAQ,CAACX,KAAK,CAACoB,iBAAiB;EACzC,CAAC;;EAED,IAAIC,KAAK,GAAGvB,IAAI,YAAYwB,QAAQ,GAAGxB,IAAI,CAAC,CAAC,GAAGA,IAAI;EACpD,IAAI,IAAAyB,kBAAS,EAACzB,IAAI,CAAC,IAAI,IAAA0B,mBAAY,EAAC1B,IAAoB,CAAC,EAAE,KAAA2B,gBAAA;IACzDJ,KAAK,gBAAGpB,cAAK,CAACyB,YAAY,CAAC5B,IAAI,EAAkB,EAAEU,IAAI,GAAAiB,gBAAA,GAAE3B,IAAI,CAAC6B,KAAK,CAACnB,IAAI,YAAAiB,gBAAA,GAAIhB,KAAK,CAACD,IAAI,CAAC,CAAC,CAAC,CAAC;EAC5F;;EAEA,IAAMoB,KAA0B,GAAG,CAAC,CAAC;EACrC,IAAI7B,IAAI,EAAE;IACR,IAAIA,IAAI,KAAK,OAAO,EAAE;MACpB6B,KAAK,CAACC,UAAU,GAAGZ,IAAI,CAACT,IAAI,CAAC;IAC/B,CAAC,MAAM;MACLoB,KAAK,CAACE,WAAW,GAAGb,IAAI,CAACT,IAAI,CAAC;IAChC;EACF;;EAEA,OAAOa,KAAK;EACVpC,MAAA,CAAA8C,OAAA,CAAAC,aAAA;IACEJ,KAAK,EAAEA,KAAM;IACbK,SAAS,EAAE,IAAAC,WAAE;MACXC,yBAAY,CAACC,KAAK,CAAC,CAAC;MACpBD,yBAAY,CAACrC,IAAI,CAACE,KAAK,CAAC;MACxBM,OAAO,IAAI6B,yBAAY,CAACE,SAAS,CAACrC,KAAK,CAAC;MACxCO,QAAQ,IAAI4B,yBAAY,CAACG,YAAY,CAACtC,KAAK;IAC7C,CAAE;;EAEDqB;EACG,CAAC;EACL,IAAI;AACV,CAAC","ignoreList":[]}

package/cjs/components/Input/InputLayout/InputLayoutAsideText.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.InputLayoutAsideText = void 0;var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.InputLayoutAsideText = void 0;var _react = _interopRequireDefault(require("react"));
 
 
 var _Emotion = require("../../../lib/theming/Emotion");
@@ -12,17 +12,13 @@ var _InputLayout = require("./InputLayout.styles");
 
 
 var InputLayoutAsideText = exports.InputLayoutAsideText = function InputLayoutAsideText(_ref) {var _ref$text = _ref.text,text = _ref$text === void 0 ? null : _ref$text;
-  var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
   var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),disabled = _React$useContext.disabled;
 
-  var stylesLayout = (0, _InputLayout.getStylesLayout)(emotion);
-  var asideClassName = stylesLayout.aside();
+  var asideClassName = _InputLayout.stylesLayout.aside();
 
   return text ? /*#__PURE__*/
-  _react.default.createElement("span", {
-    className: emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme)) },
-
+  _react.default.createElement("span", { className: (0, _Emotion.cx)(asideClassName, _InputLayout.stylesLayout.text(theme), disabled && _InputLayout.stylesLayout.textDisabled(theme)) },
   text
   ) :
   null;

package/cjs/components/Input/InputLayout/InputLayoutAsideText.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Emotion","_ThemeContext","_InputLayoutContext","_InputLayout","InputLayoutAsideText","exports","_ref","_ref$text","text","emotion","useContext","EmotionContext","theme","ThemeContext","_React$useContext","React","InputLayoutContext","disabled","stylesLayout","getStylesLayout","asideClassName","aside","default","createElement","className","cx","textDisabled"],"sources":["InputLayoutAsideText.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { InputProps } from '../Input';\nimport { EmotionContext } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const emotion = useContext(EmotionContext);\n  const theme = useContext(ThemeContext);\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const stylesLayout = getStylesLayout(emotion);\n  const asideClassName = stylesLayout.aside();\n\n  return text ? (\n    <span\n      className={emotion.cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}\n    >\n      {text}\n    </span>\n  ) : null;\n};\n"],"mappings":"4KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;;;;;;AAMO,IAAMK,oBAAwE,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAA3EA,oBAAwEA,CAAAE,IAAA,EAAwB,KAAAC,SAAA,GAAAD,IAAA,CAAlBE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA;EACpG,IAAME,OAAO,GAAG,IAAAC,iBAAU,EAACC,uBAAc,CAAC;EAC1C,IAAMC,KAAK,GAAG,IAAAF,iBAAU,EAACG,0BAAY,CAAC;EACtC,IAAAC,iBAAA,GAAqBC,cAAK,CAACL,UAAU,CAACM,sCAAkB,CAAC,CAAjDC,QAAQ,GAAAH,iBAAA,CAARG,QAAQ;;EAEhB,IAAMC,YAAY,GAAG,IAAAC,4BAAe,EAACV,OAAO,CAAC;EAC7C,IAAMW,cAAc,GAAGF,YAAY,CAACG,KAAK,CAAC,CAAC;;EAE3C,OAAOb,IAAI;EACTX,MAAA,CAAAyB,OAAA,CAAAC,aAAA;IACEC,SAAS,EAAEf,OAAO,CAACgB,EAAE,CAACL,cAAc,EAAEF,YAAY,CAACV,IAAI,CAACI,KAAK,CAAC,EAAEK,QAAQ,IAAIC,YAAY,CAACQ,YAAY,CAACd,KAAK,CAAC,CAAE;;EAE7GJ;EACG,CAAC;EACL,IAAI;AACV,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Emotion","_ThemeContext","_InputLayoutContext","_InputLayout","InputLayoutAsideText","exports","_ref","_ref$text","text","theme","React","useContext","ThemeContext","_React$useContext","InputLayoutContext","disabled","asideClassName","stylesLayout","aside","default","createElement","className","cx","textDisabled"],"sources":["InputLayoutAsideText.tsx"],"sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\nimport { stylesLayout } from './InputLayout.styles';\n\nexport interface InputLayoutAsideTextProps {\n  text: InputProps['prefix'] | InputProps['suffix'];\n}\n\nexport const InputLayoutAsideText: React.FunctionComponent<InputLayoutAsideTextProps> = ({ text = null }) => {\n  const theme = React.useContext(ThemeContext);\n  const { disabled } = React.useContext(InputLayoutContext);\n\n  const asideClassName = stylesLayout.aside();\n\n  return text ? (\n    <span className={cx(asideClassName, stylesLayout.text(theme), disabled && stylesLayout.textDisabled(theme))}>\n      {text}\n    </span>\n  ) : null;\n};\n"],"mappings":"0KAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;;;;;;AAMO,IAAMK,oBAAwE,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAA3EA,oBAAwEA,CAAAE,IAAA,EAAwB,KAAAC,SAAA,GAAAD,IAAA,CAAlBE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA;EACpG,IAAME,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAAC,iBAAA,GAAqBH,cAAK,CAACC,UAAU,CAACG,sCAAkB,CAAC,CAAjDC,QAAQ,GAAAF,iBAAA,CAARE,QAAQ;;EAEhB,IAAMC,cAAc,GAAGC,yBAAY,CAACC,KAAK,CAAC,CAAC;;EAE3C,OAAOV,IAAI;EACTX,MAAA,CAAAsB,OAAA,CAAAC,aAAA,WAAMC,SAAS,EAAE,IAAAC,WAAE,EAACN,cAAc,EAAEC,yBAAY,CAACT,IAAI,CAACC,KAAK,CAAC,EAAEM,QAAQ,IAAIE,yBAAY,CAACM,YAAY,CAACd,KAAK,CAAC,CAAE;EACzGD;EACG,CAAC;EACL,IAAI;AACV,CAAC","ignoreList":[]}

package/cjs/components/Input/InputLayout/PolyfillPlaceholder.js

@@ -1,10 +1,10 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.PolyfillPlaceholder = void 0;var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PolyfillPlaceholder = void 0;var _react = _interopRequireDefault(require("react"));
 
 
 var _Emotion = require("../../../lib/theming/Emotion");
+var _ThemeContext = require("../../../lib/theming/ThemeContext");
 var _Input = require("../Input.styles");
 var _needsPolyfillPlaceholder = require("../../../lib/needsPolyfillPlaceholder");
-var _ThemeContext = require("../../../lib/theming/ThemeContext");
 
 var _InputLayoutContext = require("./InputLayoutContext");
 
@@ -23,19 +23,17 @@ var PolyfillPlaceholder = exports.PolyfillPlaceholder = function PolyfillPlaceho
 
 
 {var placeholder = _ref.children,align = _ref.align,value = _ref.value,defaultValue = _ref.defaultValue,isMaskVisible = _ref.isMaskVisible;
-  var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = _react.default.useContext(_ThemeContext.ThemeContext);
   var _React$useContext = _react.default.useContext(_InputLayoutContext.InputLayoutContext),focused = _React$useContext.focused,disabled = _React$useContext.disabled;
 
   var _placeholder = null;
-  var styles = (0, _Input.getStyles)(emotion);
 
-  if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {var _emotion$cx;
+  if (_needsPolyfillPlaceholder.needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {var _cx;
     _placeholder = /*#__PURE__*/
     _react.default.createElement("div", {
-      className: emotion.cx(styles.placeholder(theme), (_emotion$cx = {}, _emotion$cx[
-      styles.placeholderDisabled(theme)] = disabled, _emotion$cx[
-      styles.placeholderFocus(theme)] = focused, _emotion$cx)
+      className: (0, _Emotion.cx)(_Input.styles.placeholder(theme), (_cx = {}, _cx[
+      _Input.styles.placeholderDisabled(theme)] = disabled, _cx[
+      _Input.styles.placeholderFocus(theme)] = focused, _cx)
       ),
       style: { textAlign: align || 'inherit' } },
 

package/cjs/components/Input/InputLayout/PolyfillPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_Emotion","_Input","_needsPolyfillPlaceholder","_ThemeContext","_InputLayoutContext","PolyfillPlaceholder","exports","_ref","placeholder","children","align","value","defaultValue","isMaskVisible","emotion","useContext","EmotionContext","theme","ThemeContext","_React$useContext","React","InputLayoutContext","focused","disabled","_placeholder","styles","getStyles","needsPolyfillPlaceholder","_emotion$cx","default","createElement","className","cx","placeholderDisabled","placeholderFocus","style","textAlign"],"sources":["PolyfillPlaceholder.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { InputProps } from '../Input';\nimport { EmotionContext } from '../../../lib/theming/Emotion';\nimport { getStyles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const emotion = useContext(EmotionContext);\n  const theme = useContext(ThemeContext);\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n  const styles = getStyles(emotion);\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={emotion.cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"],"mappings":"2KAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;;;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,yBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,mBAAA,GAAAL,OAAA;;;;;;;;;;AAUO,IAAMM,mBAAyE,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAA5EA,mBAAyEA,CAAAE,IAAA;;;;;;AAMhF,KALMC,WAAW,GAAAD,IAAA,CAArBE,QAAQ,CACRC,KAAK,GAAAH,IAAA,CAALG,KAAK,CACLC,KAAK,GAAAJ,IAAA,CAALI,KAAK,CACLC,YAAY,GAAAL,IAAA,CAAZK,YAAY,CACZC,aAAa,GAAAN,IAAA,CAAbM,aAAa;EAEb,IAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACC,uBAAc,CAAC;EAC1C,IAAMC,KAAK,GAAG,IAAAF,iBAAU,EAACG,0BAAY,CAAC;EACtC,IAAAC,iBAAA,GAA8BC,cAAK,CAACL,UAAU,CAACM,sCAAkB,CAAC,CAA1DC,OAAO,GAAAH,iBAAA,CAAPG,OAAO,CAAEC,QAAQ,GAAAJ,iBAAA,CAARI,QAAQ;;EAEzB,IAAIC,YAAY,GAAG,IAAI;EACvB,IAAMC,MAAM,GAAG,IAAAC,gBAAS,EAACZ,OAAO,CAAC;;EAEjC,IAAIa,kDAAwB,IAAInB,WAAW,IAAI,CAACK,aAAa,IAAI,CAACF,KAAK,IAAI,CAACC,YAAY,EAAE,KAAAgB,WAAA;IACxFJ,YAAY;IACV3B,MAAA,CAAAgC,OAAA,CAAAC,aAAA;MACEC,SAAS,EAAEjB,OAAO,CAACkB,EAAE,CAACP,MAAM,CAACjB,WAAW,CAACS,KAAK,CAAC,GAAAW,WAAA,OAAAA,WAAA;MAC5CH,MAAM,CAACQ,mBAAmB,CAAChB,KAAK,CAAC,IAAGM,QAAQ,EAAAK,WAAA;MAC5CH,MAAM,CAACS,gBAAgB,CAACjB,KAAK,CAAC,IAAGK,OAAO,EAAAM,WAAA;MAC1C,CAAE;MACHO,KAAK,EAAE,EAAEC,SAAS,EAAE1B,KAAK,IAAI,SAAS,CAAC,CAAE;;IAExCF;IACE,CACN;;EACH;;EAEA,OAAOgB,YAAY;AACrB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Emotion","_ThemeContext","_Input","_needsPolyfillPlaceholder","_InputLayoutContext","PolyfillPlaceholder","exports","_ref","placeholder","children","align","value","defaultValue","isMaskVisible","theme","React","useContext","ThemeContext","_React$useContext","InputLayoutContext","focused","disabled","_placeholder","needsPolyfillPlaceholder","_cx","default","createElement","className","cx","styles","placeholderDisabled","placeholderFocus","style","textAlign"],"sources":["PolyfillPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { InputProps } from '../Input';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { styles } from '../Input.styles';\nimport { needsPolyfillPlaceholder } from '../../../lib/needsPolyfillPlaceholder';\n\nimport { InputLayoutContext } from './InputLayoutContext';\n\ntype PolyfillPlaceholder = Pick<InputProps, 'placeholder' | 'value' | 'defaultValue' | 'align'> & {\n  isMaskVisible: boolean;\n};\n\nexport interface InputLayoutPlaceholderProps extends PolyfillPlaceholder {\n  children: InputProps['placeholder'];\n}\n\nexport const PolyfillPlaceholder: React.FunctionComponent<InputLayoutPlaceholderProps> = ({\n  children: placeholder,\n  align,\n  value,\n  defaultValue,\n  isMaskVisible,\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const { focused, disabled } = React.useContext(InputLayoutContext);\n\n  let _placeholder = null;\n\n  if (needsPolyfillPlaceholder && placeholder && !isMaskVisible && !value && !defaultValue) {\n    _placeholder = (\n      <div\n        className={cx(styles.placeholder(theme), {\n          [styles.placeholderDisabled(theme)]: disabled,\n          [styles.placeholderFocus(theme)]: focused,\n        })}\n        style={{ textAlign: align || 'inherit' }}\n      >\n        {placeholder}\n      </div>\n    );\n  }\n\n  return _placeholder;\n};\n"],"mappings":"yKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;;AAGA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,yBAAA,GAAAJ,OAAA;;AAEA,IAAAK,mBAAA,GAAAL,OAAA;;;;;;;;;;AAUO,IAAMM,mBAAyE,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAA5EA,mBAAyEA,CAAAE,IAAA;;;;;;AAMhF,KALMC,WAAW,GAAAD,IAAA,CAArBE,QAAQ,CACRC,KAAK,GAAAH,IAAA,CAALG,KAAK,CACLC,KAAK,GAAAJ,IAAA,CAALI,KAAK,CACLC,YAAY,GAAAL,IAAA,CAAZK,YAAY,CACZC,aAAa,GAAAN,IAAA,CAAbM,aAAa;EAEb,IAAMC,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAAC,iBAAA,GAA8BH,cAAK,CAACC,UAAU,CAACG,sCAAkB,CAAC,CAA1DC,OAAO,GAAAF,iBAAA,CAAPE,OAAO,CAAEC,QAAQ,GAAAH,iBAAA,CAARG,QAAQ;;EAEzB,IAAIC,YAAY,GAAG,IAAI;;EAEvB,IAAIC,kDAAwB,IAAIf,WAAW,IAAI,CAACK,aAAa,IAAI,CAACF,KAAK,IAAI,CAACC,YAAY,EAAE,KAAAY,GAAA;IACxFF,YAAY;IACVzB,MAAA,CAAA4B,OAAA,CAAAC,aAAA;MACEC,SAAS,EAAE,IAAAC,WAAE,EAACC,aAAM,CAACrB,WAAW,CAACM,KAAK,CAAC,GAAAU,GAAA,OAAAA,GAAA;MACpCK,aAAM,CAACC,mBAAmB,CAAChB,KAAK,CAAC,IAAGO,QAAQ,EAAAG,GAAA;MAC5CK,aAAM,CAACE,gBAAgB,CAACjB,KAAK,CAAC,IAAGM,OAAO,EAAAI,GAAA;MAC1C,CAAE;MACHQ,KAAK,EAAE,EAAEC,SAAS,EAAEvB,KAAK,IAAI,SAAS,CAAC,CAAE;;IAExCF;IACE,CACN;;EACH;;EAEA,OAAOc,YAAY;AACrB,CAAC","ignoreList":[]}

package/cjs/components/Input/__creevey__/Input.creevey.mts

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const differentStatesTest = () => {
+  test('Plain', async (context) => {
+    const element = await context.webdriver.findElement({ css: '#input' });
+    await context.matchImage(await element.takeScreenshot(), 'Plain');
+  });
+
+  test('Focused', async (context) => {
+    const element = await context.webdriver.findElement({ css: '#input' });
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '#input input' }))
+      .pause(500)
+      .perform();
+    await context.matchImage(await element.takeScreenshot(), 'Focused');
+  });
+
+  test('With typed text', async (context) => {
+    const element = await context.webdriver.findElement({ css: '#input' });
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '#input input' }))
+      .sendKeys('Test...')
+      .pause(500)
+      .perform();
+    await context.matchImage(await element.takeScreenshot(), 'With typed text');
+  });
+
+  test('With long typed text', async (context) => {
+    const element = await context.webdriver.findElement({ css: '#input' });
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '#input input' }))
+      .sendKeys('Test...')
+      .sendKeys('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+      .pause(500)
+      .perform();
+    await context.matchImage(await element.takeScreenshot(), 'With long typed text');
+  });
+};
+
+const testMaskedInput = () => {
+  test('idle, focus, edit, blur', async (context) => {
+    const click = (css: string) => {
+      return context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css }));
+    };
+    const idle = await context.takeScreenshot();
+    await click('input').pause(500).perform();
+    const focused = await context.takeScreenshot();
+    await click('input').sendKeys('953').perform();
+    const edited = await context.takeScreenshot();
+    await click('body').perform();
+    const blured = await context.takeScreenshot();
+    await context.matchImages({ idle, focused, edited, blured });
+  });
+};
+
+kind('Input', () => {
+  story('Default', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    differentStatesTest();
+  });
+
+  story('WithMask', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    testMaskedInput();
+  });
+
+  story('WithMaskAndCustomUnmaskedValue', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ },
+      },
+    });
+
+    testMaskedInput();
+  });
+
+  story('SelectAllByProp', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('Plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+
+  story('SelectAllByButton', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('Plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Selected', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="select-all"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Selected');
+    });
+  });
+
+  story('MaxLength', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
+        flaky: {
+          in: ['chrome2022'],
+          tests: ['With long typed text'],
+        },
+      },
+    });
+    differentStatesTest();
+  });
+
+  story('UncontrolledInputWithPlaceholder', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('PlainAndTyped', async (context) => {
+      const plain = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .sendKeys('text')
+        .perform();
+      const typed = await context.takeScreenshot();
+      await context.matchImages({ plain, typed });
+    });
+  });
+
+  story('WithMaskAndSelectAllProp', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ } } });
+
+    test('PlainAndSelected', async (context) => {
+      const plain = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .pause(500)
+        .perform();
+      const selectAllHalfFilledInput = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .sendKeys('1111')
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .pause(500)
+        .perform();
+      const selectAllFilledInput = await context.takeScreenshot();
+      await context.matchImages({ plain, selectAllHalfFilledInput, selectAllFilledInput });
+    });
+  });
+
+  story('SearchTypeApi', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'tests only stable in chrome': { in: /^(?!\bchrome2022\b|\bchrome2022Dark\b)/ },
+      },
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+
+  story('InputTypeApi', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect logic": { in: /^(?!\b(chrome|firefox)(2022).*\b)/ },
+      },
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+  story('Type', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'no themes': { in: /^(?!\b(chrome2022)\b)/ } },
+    });
+  });
+  story('TypeApi', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'no themes': { in: /^(?!\b(chrome2022)\b)/ } },
+    });
+  });
+});

package/cjs/components/Input/__docs__/Input.mdx

@@ -0,0 +1,28 @@
+import * as InputStories from './Input.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={InputStories} />
+
+# Input
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/input/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A1602)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />