@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/components/Group/Group/Group.js

@@ -1,12 +1,12 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { isIE11, isEdge } from "../../../lib/client";
 import { Corners } from "../../Button/Corners";
 import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Group.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Group.styles";
 export var Group = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
@@ -31,17 +31,17 @@ export var Group = /*#__PURE__*/function (_React$Component) {
       }
     });
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.root(),
+      className: styles.root(),
       style: style
     }, React.Children.map(this.props.children, function (child) {
-      var _cn, _cn2;
+      var _cx, _cx2;
 
       if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
         return null;
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var itemCss = cn((_cn = {}, _cn[jsStyles.item()] = true, _cn[jsStyles.itemFirst()] = child === first, _cn));
+      var itemCss = cx((_cx = {}, _cx[styles.item()] = true, _cx[styles.itemFirst()] = child === first, _cx));
       var corners = 0;
 
       if (child !== first) {
@@ -59,7 +59,7 @@ export var Group = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: cn((_cn2 = {}, _cn2[jsStyles.fixed()] = !isWidthInPercent, _cn2[jsStyles.stretch()] = isWidthInPercent, _cn2[jsStyles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cn2))
+        className: cx((_cx2 = {}, _cx2[styles.fixed()] = !isWidthInPercent, _cx2[styles.stretch()] = isWidthInPercent, _cx2[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx2))
       }, /*#__PURE__*/React.createElement("div", {
         className: itemCss
       }, child));

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","cn","isIE11","isEdge","Corners","isButton","CommonWrapper","jsStyles","Group","render","style","width","props","first","last","Children","forEach","children","child","isValidElement","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,kBAA/B;AACA,SAASC,OAAT,QAAwB,mBAAxB;;AAEA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,aAAT,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,gBAAzB;;;;;;;;;;;AAWA,WAAaC,KAAb;;;;;;;AAOSC,EAAAA,MAPT,GAOE,kBAAgB;AACd,QAAMC,KAA0B,GAAG;AACjCC,MAAAA,KAAK,EAAE,KAAKC,KAAL,CAAWD,KADe,EAAnC;;;AAIA,QAAIE,KAAwC,GAAG,IAA/C;AACA,QAAIC,IAAuC,GAAG,IAA9C;;AAEAf,IAAAA,KAAK,CAACgB,QAAN,CAAeC,OAAf,CAAuB,KAAKJ,KAAL,CAAWK,QAAlC,EAA4C,UAAAC,KAAK,EAAI;AACnD,UAAIA,KAAK,iBAAInB,KAAK,CAACoB,cAAN,CAAqBD,KAArB,CAAb,EAA0C;AACxCL,QAAAA,KAAK,GAAGA,KAAK,IAAIK,KAAjB;AACAJ,QAAAA,IAAI,GAAGI,KAAP;AACD;AACF,KALD;;AAOA;AACE,0BAAC,aAAD,EAAmB,KAAKN,KAAxB;AACE,oCAAM,SAAS,EAAEL,QAAQ,CAACa,IAAT,EAAjB,EAAkC,KAAK,EAAEV,KAAzC;AACGX,MAAAA,KAAK,CAACgB,QAAN,CAAeM,GAAf,CAAmB,KAAKT,KAAL,CAAWK,QAA9B,EAAwC,UAAAC,KAAK,EAAI;AAChD,YAAI,CAACA,KAAD,IAAU,eAACnB,KAAK,CAACoB,cAAN,CAAsCD,KAAtC,CAAf,EAA6D;AAC3D,iBAAO,IAAP;AACD;;AAED,YAAMI,gBAAgB,GAAGC,OAAO,CAACL,KAAK,CAACN,KAAN,CAAYD,KAAZ,IAAqBO,KAAK,CAACN,KAAN,CAAYD,KAAZ,CAAkBa,QAAlB,GAA6BC,QAA7B,CAAsC,GAAtC,CAAtB,CAAhC;AACA,YAAMC,OAAO,GAAGzB,EAAE;AACfM,QAAAA,QAAQ,CAACoB,IAAT,EADe,IACG,IADH;AAEfpB,QAAAA,QAAQ,CAACqB,SAAT,EAFe,IAEQV,KAAK,KAAKL,KAFlB,OAAlB;;;AAKA,YAAIgB,OAAO,GAAG,CAAd;AACA,YAAIX,KAAK,KAAKL,KAAd,EAAqB;AACnBgB,UAAAA,OAAO,IAAIzB,OAAO,CAAC0B,QAAR,GAAmB1B,OAAO,CAAC2B,WAAtC;AACD;AACD,YAAIb,KAAK,KAAKJ,IAAd,EAAoB;AAClBe,UAAAA,OAAO,IAAIzB,OAAO,CAAC4B,SAAR,GAAoB5B,OAAO,CAAC6B,YAAvC;AACD;;AAED,YAAI5B,QAAQ,CAACa,KAAD,CAAZ,EAAqB;AACnBA,UAAAA,KAAK,gBAAGnB,KAAK,CAACmC,YAAN,CAAmBhB,KAAnB,EAA0B,EAAEW,OAAO,EAAPA,OAAF,EAA1B,CAAR;AACD;;AAED;AACE;AACE,YAAA,SAAS,EAAE5B,EAAE;AACVM,YAAAA,QAAQ,CAAC4B,KAAT,EADU,IACS,CAACb,gBADV;AAEVf,YAAAA,QAAQ,CAAC6B,OAAT,EAFU,IAEWd,gBAFX;AAGVf,YAAAA,QAAQ,CAAC8B,eAAT,EAHU,IAGmBd,OAAO,CAACD,gBAAgB,IAAI,KAAI,CAACV,KAAL,CAAWD,KAA/B,KAAyCT,MAAM,IAAIC,MAAnD,CAAD,CAH1B,QADf;;;AAOE,uCAAK,SAAS,EAAEuB,OAAhB,IAA0BR,KAA1B,CAPF,CADF;;;AAWD,OAlCA,CADH,CADF,CADF;;;;AAyCD,GA/DH,gBAA2BnB,KAAK,CAACuC,SAAjC,EAAa9B,K,CACG+B,mB,GAAsB,O,CADzB/B,K,CAGGgC,S,GAAY,EACxB7B,KAAK,EAAEX,SAAS,CAACyC,SAAV,CAAoB,CAACzC,SAAS,CAAC0C,MAAX,EAAmB1C,SAAS,CAAC2C,MAA7B,CAApB,CADiB,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isIE11, isEdge } from '../../lib/client';\r\nimport { Corners } from '../Button/Corners';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isButton } from '../Button';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Group.styles';\r\n\r\nexport interface GroupProps extends CommonProps {\r\n  width?: React.CSSProperties['width'];\r\n}\r\n\r\ninterface GroupChildProps {\r\n  width?: React.CSSProperties['width'];\r\n  corners?: number;\r\n}\r\n\r\nexport class Group extends React.Component<GroupProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Group';\r\n\r\n  public static propTypes = {\r\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\r\n  };\r\n\r\n  public render() {\r\n    const style: React.CSSProperties = {\r\n      width: this.props.width,\r\n    };\r\n\r\n    let first: Nullable<React.ReactElement<any>> = null;\r\n    let last: Nullable<React.ReactElement<any>> = null;\r\n\r\n    React.Children.forEach(this.props.children, child => {\r\n      if (child && React.isValidElement(child)) {\r\n        first = first || child;\r\n        last = child;\r\n      }\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <span className={jsStyles.root()} style={style}>\r\n          {React.Children.map(this.props.children, child => {\r\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\r\n              return null;\r\n            }\r\n\r\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\r\n            const itemCss = cn({\r\n              [jsStyles.item()]: true,\r\n              [jsStyles.itemFirst()]: child === first,\r\n            });\r\n\r\n            let corners = 0;\r\n            if (child !== first) {\r\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\r\n            }\r\n            if (child !== last) {\r\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\r\n            }\r\n\r\n            if (isButton(child)) {\r\n              child = React.cloneElement(child, { corners });\r\n            }\r\n\r\n            return (\r\n              <div\r\n                className={cn({\r\n                  [jsStyles.fixed()]: !isWidthInPercent,\r\n                  [jsStyles.stretch()]: isWidthInPercent,\r\n                  [jsStyles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\r\n                })}\r\n              >\r\n                <div className={itemCss}>{child}</div>\r\n              </div>\r\n            );\r\n          })}\r\n        </span>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","Corners","isButton","CommonWrapper","cx","styles","Group","render","style","width","props","first","last","Children","forEach","children","child","isValidElement","root","map","isWidthInPercent","Boolean","toString","includes","itemCss","item","itemFirst","corners","TOP_LEFT","BOTTOM_LEFT","TOP_RIGHT","BOTTOM_RIGHT","cloneElement","fixed","stretch","stretchFallback","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","number","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { Corners } from '../Button/Corners';\nimport { Nullable } from '../../typings/utility-types';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    let first: Nullable<React.ReactElement<any>> = null;\n    let last: Nullable<React.ReactElement<any>> = null;\n\n    React.Children.forEach(this.props.children, (child) => {\n      if (child && React.isValidElement(child)) {\n        first = first || child;\n        last = child;\n      }\n    });\n\n    return (\n      <CommonWrapper {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(this.props.children, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n            const itemCss = cx({\n              [styles.item()]: true,\n              [styles.itemFirst()]: child === first,\n            });\n\n            let corners = 0;\n            if (child !== first) {\n              corners |= Corners.TOP_LEFT | Corners.BOTTOM_LEFT;\n            }\n            if (child !== last) {\n              corners |= Corners.TOP_RIGHT | Corners.BOTTOM_RIGHT;\n            }\n\n            if (isButton(child)) {\n              child = React.cloneElement(child, { corners });\n            }\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div className={itemCss}>{child}</div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group.md

@@ -1,18 +1,18 @@
-```jsx harmony
-import FunctionIcon from '@skbkontur/react-icons/Function';
-import SearchIcon from '@skbkontur/react-icons/Search';
-import { Button, Input } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('Foo');
-
-<Group width={300}>
-  <Button>
-    <FunctionIcon />
-  </Button>
-  <Input value={value} width="100%" onValueChange={setValue} />
-  <Button>
-    <SearchIcon />
-  </Button>
-  <Button>Bar</Button>
-</Group>;
-```
+```jsx harmony
+import FunctionIcon from '@skbkontur/react-icons/Function';
+import SearchIcon from '@skbkontur/react-icons/Search';
+import { Button, Input } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Foo');
+
+<Group width={300}>
+  <Button>
+    <FunctionIcon />
+  </Button>
+  <Input value={value} width="100%" onValueChange={setValue} />
+  <Button>
+    <SearchIcon />
+  </Button>
+  <Button>Bar</Button>
+</Group>;
+```

package/components/Group/Group.styles/Group.styles.js

@@ -3,9 +3,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      line-height: normal;\n    "])));
   },
   fixed: function fixed() {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      flex-shrink: 0;\n      display: inline-block;\n    "])));
@@ -22,5 +22,4 @@ var styles = {
   itemFirst: function itemFirst() {
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-left: 0;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Group/Group.styles/Group.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst","jsStyles"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOH,GAAP;;;AAGD,GALY;;AAObI,EAAAA,KAPa,mBAOL;AACN,WAAOJ,GAAP;;;;AAID,GAZY;;AAcbK,EAAAA,OAda,qBAcH;AACR,WAAOL,GAAP;;;;AAID,GAnBY;;AAqBbM,EAAAA,eArBa,6BAqBK;AAChB,WAAON,GAAP;;;AAGD,GAzBY;;AA2BbO,EAAAA,IA3Ba,kBA2BN;AACL,WAAOP,GAAP;;;AAGD,GA/BY;;AAiCbQ,EAAAA,SAjCa,uBAiCD;AACV,WAAOR,GAAP;;;AAGD,GArCY,EAAf;;;AAwCA,OAAO,IAAMS,QAAQ,GAAGR,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      display: inline-flex;\r\n    `;\r\n  },\r\n\r\n  fixed() {\r\n    return css`\r\n      flex-shrink: 0;\r\n      display: inline-block;\r\n    `;\r\n  },\r\n\r\n  stretch() {\r\n    return css`\r\n      flex-grow: 1;\r\n      flex-shrink: 1;\r\n    `;\r\n  },\r\n\r\n  stretchFallback() {\r\n    return css`\r\n      flex-basis: 100%;\r\n    `;\r\n  },\r\n\r\n  item() {\r\n    return css`\r\n      margin-left: -1px;\r\n    `;\r\n  },\r\n\r\n  itemFirst() {\r\n    return css`\r\n      margin-left: 0;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Group.styles.ts"],"names":["css","memoizeStyle","styles","root","fixed","stretch","stretchFallback","item","itemFirst"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;AAID,GAbgC;;AAejCK,EAAAA,OAfiC,qBAevB;AACR,WAAOL,GAAP;;;;AAID,GApBgC;;AAsBjCM,EAAAA,eAtBiC,6BAsBf;AAChB,WAAON,GAAP;;;AAGD,GA1BgC;;AA4BjCO,EAAAA,IA5BiC,kBA4B1B;AACL,WAAOP,GAAP;;;AAGD,GAhCgC;;AAkCjCQ,EAAAA,SAlCiC,uBAkCrB;AACV,WAAOR,GAAP;;;AAGD,GAtCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  stretchFallback() {\n    return css`\n      flex-basis: 100%;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n});\n"]}

package/components/Group/Group.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
     fixed(): string;
     stretch(): string;

package/components/Group/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Group';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAd","sourcesContent":["export * from './Group';\n"]}

package/components/Hint/Hint/Hint.js

@@ -1,16 +1,23 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Hint.styles";
-var HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../Hint.styles";
 var HINT_BORDER_COLOR = 'transparent';
 var Positions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
-export var Hint = /*#__PURE__*/function (_React$Component) {
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
+
+export var Hint = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Hint, _React$Component);
 
   function Hint() {
@@ -21,6 +28,7 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.isMobileLayout = void 0;
     _this.state = {
       opened: _this.props.manual ? !!_this.props.opened : false
     };
@@ -58,6 +66,12 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
       }
     };
 
+    _this.close = function () {
+      _this.setState({
+        opened: false
+      });
+    };
+
     _this.open = function () {
       _this.setState({
         opened: true
@@ -74,6 +88,11 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
       return;
     }
 
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+
     if (nextProps.opened !== this.props.opened) {
       this.setState({
         opened: !!nextProps.opened
@@ -100,17 +119,27 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
           popupBorder: theme.hintBorder,
           popupBorderRadius: theme.hintBorderRadius
         }, _this2.theme)
-      }, _this2.renderMain());
+      }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());
     });
   };
 
+  _proto.renderMobile = function renderMobile() {
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(Popup, {
+      opened: this.state.opened,
+      anchorElement: this.props.children,
+      positions: [],
+      onClick: !this.props.manual ? this.open : undefined,
+      mobileOnCloseRequest: !this.props.manual ? this.close : undefined
+    }, this.renderContent()));
+  };
+
   _proto.renderMain = function renderMain() {
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(Popup, {
       hasPin: true,
       opened: this.state.opened,
       anchorElement: this.props.children,
       positions: this.getPositions(),
-      backgroundColor: HINT_BACKGROUND_COLOR,
+      backgroundColor: this.theme.hintBgColor,
       borderColor: HINT_BORDER_COLOR,
       disableAnimations: this.props.disableAnimations,
       onMouseEnter: this.handleMouseEnter,
@@ -120,7 +149,7 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderContent = function renderContent() {
-    var _cn;
+    var _cx;
 
     if (!this.props.text) {
       return null;
@@ -129,23 +158,21 @@ export var Hint = /*#__PURE__*/function (_React$Component) {
     var _this$props = this.props,
         pos = _this$props.pos,
         maxWidth = _this$props.maxWidth;
-    var className = cn((_cn = {}, _cn[jsStyles.content(this.theme)] = true, _cn[jsStyles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cn));
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = pos === 'top' || pos === 'bottom', _cx[styles.mobileContent(this.theme)] = this.isMobileLayout, _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: maxWidth
+        maxWidth: this.isMobileLayout ? '100%' : maxWidth
       }
     }, this.props.text);
   };
 
   return Hint;
-}(React.Component);
-Hint.__KONTUR_REACT_UI__ = 'Hint';
-Hint.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Hint', _class2.defaultProps = {
   pos: 'top',
   manual: false,
   opened: false,
   maxWidth: 200,
   disableAnimations: isTestEnv,
   useWrapper: false
-};
+}, _temp)) || _class;

package/components/Hint/Hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","cn","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","jsStyles","HINT_BACKGROUND_COLOR","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","children","disableAnimations","useWrapper","renderContent","text","maxWidth","className","content","contentCenter","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { Popup, PopupPosition } from '../../internal/Popup';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { MouseEventType } from '../../typings/event-types';\r\nimport { isTestEnv } from '../../lib/currentEnvironment';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Hint.styles';\r\n\r\nconst HINT_BACKGROUND_COLOR = 'rgba(51, 51, 51, 0.8)';\r\nconst HINT_BORDER_COLOR = 'transparent';\r\n\r\nexport interface HintProps extends CommonProps {\r\n  children?: React.ReactNode;\r\n  manual?: boolean;\r\n  maxWidth?: React.CSSProperties['maxWidth'];\r\n  onMouseEnter?: (event: MouseEventType) => void;\r\n  onMouseLeave?: (event: MouseEventType) => void;\r\n  opened?: boolean;\r\n  pos:\r\n    | 'top'\r\n    | 'right'\r\n    | 'bottom'\r\n    | 'left'\r\n    | 'top left'\r\n    | 'top center'\r\n    | 'top right'\r\n    | 'bottom left'\r\n    | 'bottom center'\r\n    | 'bottom right'\r\n    | 'left top'\r\n    | 'left middle'\r\n    | 'left bottom'\r\n    | 'right top'\r\n    | 'right middle'\r\n    | 'right bottom';\r\n  text: React.ReactNode;\r\n  disableAnimations: boolean;\r\n  useWrapper: boolean;\r\n}\r\n\r\nexport interface HintState {\r\n  opened: boolean;\r\n}\r\n\r\nconst Positions: PopupPosition[] = [\r\n  'top center',\r\n  'top left',\r\n  'top right',\r\n  'bottom center',\r\n  'bottom left',\r\n  'bottom right',\r\n  'left middle',\r\n  'left top',\r\n  'left bottom',\r\n  'right middle',\r\n  'right top',\r\n  'right bottom',\r\n];\r\n\r\nexport class Hint extends React.Component<HintProps, HintState> {\r\n  public static __KONTUR_REACT_UI__ = 'Hint';\r\n\r\n  public static defaultProps = {\r\n    pos: 'top',\r\n    manual: false,\r\n    opened: false,\r\n    maxWidth: 200,\r\n    disableAnimations: isTestEnv,\r\n    useWrapper: false,\r\n  };\r\n\r\n  public state: HintState = {\r\n    opened: this.props.manual ? !!this.props.opened : false,\r\n  };\r\n\r\n  private timer: Nullable<number> = null;\r\n  private theme!: Theme;\r\n\r\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\r\n    if (!nextProps.manual) {\r\n      return;\r\n    }\r\n\r\n    if (nextProps.opened !== this.props.opened) {\r\n      this.setState({ opened: !!nextProps.opened });\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupPinOffset: theme.hintPinOffset,\r\n                  popupMargin: theme.hintMargin,\r\n                  popupBorder: theme.hintBorder,\r\n                  popupBorderRadius: theme.hintBorderRadius,\r\n                },\r\n                this.theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public renderMain() {\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <Popup\r\n          hasPin\r\n          opened={this.state.opened}\r\n          anchorElement={this.props.children}\r\n          positions={this.getPositions()}\r\n          backgroundColor={HINT_BACKGROUND_COLOR}\r\n          borderColor={HINT_BORDER_COLOR}\r\n          disableAnimations={this.props.disableAnimations}\r\n          onMouseEnter={this.handleMouseEnter}\r\n          onMouseLeave={this.handleMouseLeave}\r\n          useWrapper={this.props.useWrapper}\r\n        >\r\n          {this.renderContent()}\r\n        </Popup>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderContent() {\r\n    if (!this.props.text) {\r\n      return null;\r\n    }\r\n\r\n    const { pos, maxWidth } = this.props;\r\n    const className = cn({\r\n      [jsStyles.content(this.theme)]: true,\r\n      [jsStyles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\r\n    });\r\n    return (\r\n      <div className={className} style={{ maxWidth }}>\r\n        {this.props.text}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private getPositions = (): PopupPosition[] => {\r\n    return Positions.filter(x => x.startsWith(this.props.pos));\r\n  };\r\n\r\n  private handleMouseEnter = (e: MouseEventType) => {\r\n    if (!this.props.manual && !this.timer) {\r\n      this.timer = window.setTimeout(this.open, 400);\r\n    }\r\n\r\n    if (this.props.onMouseEnter) {\r\n      this.props.onMouseEnter(e);\r\n    }\r\n  };\r\n\r\n  private handleMouseLeave = (e: MouseEventType) => {\r\n    if (!this.props.manual && this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n      this.setState({ opened: false });\r\n    }\r\n\r\n    if (this.props.onMouseLeave) {\r\n      this.props.onMouseLeave(e);\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.setState({ opened: true });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","styles","HINT_BORDER_COLOR","Positions","Hint","isMobileLayout","state","opened","props","manual","timer","theme","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","UNSAFE_componentWillReceiveProps","nextProps","componentWillUnmount","render","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMobile","renderMain","children","undefined","renderContent","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","content","contentCenter","mobileContent","Component","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Popup, PopupPosition } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Переводит отображение подсказки в _\"ручной режим\"_.\n   *\n   * В _\"ручном режиме\"_ подcказку можно активировать только задав значение пропу `opened`.\n   */\n  manual?: boolean;\n  /**\n   * Задаёт максимальную ширину подсказки.\n   */\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: (event: MouseEventType) => void;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: (event: MouseEventType) => void;\n  /**\n   * Если `true` - подсказка будет открыта.\n   *\n   * _Примечание_: работает только при `manual=true`.\n   */\n  opened?: boolean;\n  /**\n   * Расположение подсказки относительно текста.\n   *\n   * **Допустимые значения**: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n   */\n  pos:\n    | 'top'\n    | 'right'\n    | 'bottom'\n    | 'left'\n    | 'top left'\n    | 'top center'\n    | 'top right'\n    | 'bottom left'\n    | 'bottom center'\n    | 'bottom right'\n    | 'left top'\n    | 'left middle'\n    | 'left bottom'\n    | 'right top'\n    | 'right middle'\n    | 'right bottom';\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Отключает анимацию.\n   */\n  disableAnimations: boolean;\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n   *\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.\n   */\n  useWrapper: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n}\n\nconst Positions: PopupPosition[] = [\n  'top center',\n  'top left',\n  'top right',\n  'bottom center',\n  'bottom left',\n  'bottom right',\n  'left middle',\n  'left top',\n  'left bottom',\n  'right middle',\n  'right top',\n  'right bottom',\n];\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\nexport class Hint extends React.Component<HintProps, HintState> {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  public state: HintState = {\n    opened: this.props.manual ? !!this.props.opened : false,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n\n  public UNSAFE_componentWillReceiveProps(nextProps: HintProps) {\n    if (!nextProps.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (nextProps.opened !== this.props.opened) {\n      this.setState({ opened: !!nextProps.opened });\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.hintPinOffset,\n                  popupMargin: theme.hintMargin,\n                  popupBorder: theme.hintBorder,\n                  popupBorderRadius: theme.hintBorderRadius,\n                },\n                this.theme,\n              )}\n            >\n              {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMobile() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={[]}\n          onClick={!this.props.manual ? this.open : undefined}\n          mobileOnCloseRequest={!this.props.manual ? this.close : undefined}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <CommonWrapper {...this.props}>\n        <Popup\n          hasPin\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          backgroundColor={this.theme.hintBgColor}\n          borderColor={HINT_BORDER_COLOR}\n          disableAnimations={this.props.disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={this.props.useWrapper}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { pos, maxWidth } = this.props;\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: pos === 'top' || pos === 'bottom',\n      [styles.mobileContent(this.theme)]: this.isMobileLayout,\n    });\n    return (\n      <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPosition[] => {\n    return Positions.filter((x) => x.startsWith(this.props.pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.props.manual && !this.timer) {\n      this.timer = window.setTimeout(this.open, 400);\n    }\n\n    if (this.props.onMouseEnter) {\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: MouseEventType) => {\n    if (!this.props.manual && this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n      this.setState({ opened: false });\n    }\n\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private close = () => {\n    this.setState({ opened: false });\n  };\n\n  private open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/components/Hint/Hint.d.ts

@@ -3,21 +3,60 @@ import { MouseEventType } from '../../typings/event-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface HintProps extends CommonProps {
     children?: React.ReactNode;
+    /**
+     * Переводит отображение подсказки в _"ручной режим"_.
+     *
+     * В _"ручном режиме"_ подcказку можно активировать только задав значение пропу `opened`.
+     */
     manual?: boolean;
+    /**
+     * Задаёт максимальную ширину подсказки.
+     */
     maxWidth?: React.CSSProperties['maxWidth'];
+    /**
+     * HTML-событие `mouseenter`.
+     */
     onMouseEnter?: (event: MouseEventType) => void;
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: (event: MouseEventType) => void;
+    /**
+     * Если `true` - подсказка будет открыта.
+     *
+     * _Примечание_: работает только при `manual=true`.
+     */
     opened?: boolean;
+    /**
+     * Расположение подсказки относительно текста.
+     *
+     * **Допустимые значения**: `"top"`, `"right"`, `"bottom"`, `"left"`, `"top left"`, `"top center"`, `"top right"`, `"right top"`, `"right middle"`, `"right bottom"`, `"bottom left"`, `"bottom center"`, `"bottom right"`, `"left top"`, `"left middle"`, `"left bottom"`.
+     */
     pos: 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom' | 'right top' | 'right middle' | 'right bottom';
+    /**
+     * Текст подсказки.
+     */
     text: React.ReactNode;
+    /**
+     * Отключает анимацию.
+     */
     disableAnimations: boolean;
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
     useWrapper: boolean;
 }
 export interface HintState {
     opened: boolean;
 }
+/**
+ * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+ */
 export declare class Hint extends React.Component<HintProps, HintState> {
     static __KONTUR_REACT_UI__: string;
+    private isMobileLayout;
     static defaultProps: {
         pos: string;
         manual: boolean;
@@ -32,10 +71,12 @@ export declare class Hint extends React.Component<HintProps, HintState> {
     UNSAFE_componentWillReceiveProps(nextProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
+    private close;
     private open;
 }

package/components/Hint/Hint.md

@@ -1,3 +1,42 @@
-```jsx harmony
-<Hint text="World">Hello</Hint>
-```
+Базовый пример всплывающей подсказки.
+
+```jsx harmony
+<Hint text="Подсказка">Базовая</Hint>
+```
+
+Пример подсказки, всегда всплывающей слева.
+
+```jsx harmony
+<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
+```
+
+Пример всплывающей подсказки с ограниченной шириной.
+```jsx harmony
+<Hint
+  maxWidth="150px"
+  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
+  >
+  Очень непонятный элемент
+</Hint>
+```
+
+Пример всплывающей подсказки, открытие которой контролируется кнопкой.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const [isOpen, setIsOpen] = React.useState(false);
+
+<Gapped>
+  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
+  <Button onClick={() => setIsOpen(!isOpen)}>
+    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
+  </Button>
+</Gapped>
+```
+
+Пример подсказки, всплывающей без анимации.
+
+```jsx harmony
+<Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
+```

package/components/Hint/Hint.styles/Hint.styles.js

@@ -1,14 +1,16 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   content: function content(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", "\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
+  },
+  mobileContent: function mobileContent(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      max-width: 100%;\n      text-align: left;\n    "])), t.mobileHintColor);
   },
   contentCenter: function contentCenter(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Hint/Hint.styles/Hint.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign","jsStyles"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,OADa,mBACLC,CADK,EACK;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbY;;AAebC,EAAAA,aAfa,yBAeCP,CAfD,EAeW;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBY,EAAf;;;AAsBA,OAAO,IAAMC,QAAQ,GAAGZ,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  content(t: Theme) {\r\n    return css`\r\n      box-sizing: border-box;\r\n      color: ${t.hintColor};\r\n      font-size: ${t.hintFontSize};\r\n      line-height: ${t.hintLineHeight}\r\n      max-width: ${t.hintMaxWidth};\r\n      overflow-wrap: break-word;\r\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\r\n      word-break: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  contentCenter(t: Theme) {\r\n    return css`\r\n      text-align: ${t.hintTextAlign};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","mobileContent","mobileHintColor","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACQ,eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBT,CAvBmB,EAuBT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,aADlB;;AAGD,GA3BgC,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  mobileContent(t: Theme) {\n    return css`\n      color: ${t.mobileHintColor};\n      max-width: 100%;\n      text-align: left;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

package/components/Hint/Hint.styles.d.ts

@@ -1,5 +1,6 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     content(t: Theme): string;
+    mobileContent(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/components/Hint/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from './Hint';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from './Hint';\n"]}