@skbkontur/react-ui 0.0.0-b08da15166 → 0.0.0-b5a1896fa9

package/components/Group/Group/Group.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 
 var _class, _class2, _temp;
 
@@ -10,6 +10,9 @@ import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { isInputLike } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
 import { styles } from "../Group.styles";
 
 var getFirstChild = function getFirstChild(children) {
@@ -29,19 +32,19 @@ var getLastChild = function getLastChild(children) {
   return children == null ? void 0 : children[numberOfChildren - 1];
 };
 
-var getButtonCorners = function getButtonCorners(child, firstChild, lastChild) {
-  if (firstChild === lastChild) {
+export var getButtonCorners = function getButtonCorners(isFirstChild, isLastChild) {
+  if (isFirstChild && isLastChild) {
     return {};
   }
 
-  if (child === firstChild) {
+  if (isFirstChild) {
     return {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0
     };
   }
 
-  if (child === lastChild) {
+  if (isLastChild) {
     return {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0
@@ -53,17 +56,31 @@ var getButtonCorners = function getButtonCorners(child, firstChild, lastChild) {
   };
 };
 
-var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild, isInputLikeToo) {
+  if (isInputLikeToo === void 0) {
+    isInputLikeToo = false;
+  }
+
+  var corners = getButtonCorners(child === firstChild, child === lastChild);
+
   if (isButton(child)) {
-    var corners = getButtonCorners(child, firstChild, lastChild);
     return /*#__PURE__*/React.cloneElement(child, {
-      corners: corners
+      corners: _extends({}, corners, child.props.corners)
+    });
+  }
+
+  if (isInputLikeToo && isInputLike(child)) {
+    return /*#__PURE__*/React.cloneElement(child, {
+      corners: _extends({}, corners, child.props.corners)
     });
   }
 
   return child;
 };
 
+export var GroupDataTids = {
+  root: 'Group__root'
+};
 export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Group, _React$Component);
 
@@ -76,6 +93,15 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
   _proto.render = function render() {
     var _this = this;
 
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this.theme = theme;
+      return _this.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this2 = this;
+
     var style = {
       width: this.props.width
     };
@@ -85,6 +111,7 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement("span", {
+      "data-tid": GroupDataTids.root,
       className: styles.root(),
       style: style
     }, React.Children.map(childrenArray, function (child) {
@@ -95,10 +122,10 @@ export var Group = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_
       }
 
       var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-      var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+      var modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(_this2.theme));
       var isFirstChild = child === firstChild;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this.props.width && (isIE11 || isEdge)), _cx))
+        className: cx((_cx = {}, _cx[styles.fixed()] = !isWidthInPercent, _cx[styles.stretch()] = isWidthInPercent, _cx[styles.stretchFallback()] = Boolean(isWidthInPercent && _this2.props.width && (isIE11 || isEdge)), _cx))
       }, /*#__PURE__*/React.createElement("div", {
         className: cx((_cx2 = {}, _cx2[styles.item()] = true, _cx2[styles.itemFirst()] = isFirstChild, _cx2))
       }, modifiedChild));

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","child","firstChild","lastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","corners","cloneElement","Group","render","style","width","props","childrenArray","toArray","setRootNode","root","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","isFirstChild","fixed","stretch","stretchFallback","item","itemFirst","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 { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\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\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nconst getButtonCorners = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n): React.CSSProperties => {\n  if (firstChild === lastChild) {\n    return {};\n  }\n\n  if (child === firstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (child === lastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  if (isButton(child)) {\n    const corners = getButtonCorners(child, firstChild, lastChild);\n\n    return React.cloneElement(child, { corners });\n  }\n\n  return child;\n};\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\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    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (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\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\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\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","isInputLike","ThemeContext","isTheme2022","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","isInputLikeToo","corners","cloneElement","props","GroupDataTids","root","Group","render","theme","renderMain","style","width","childrenArray","toArray","setRootNode","map","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","item","itemFirst","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 { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (\n  child: React.ReactNode,\n  firstChild: React.ReactNode,\n  lastChild: React.ReactNode,\n  isInputLikeToo = false,\n) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLikeToo && isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (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\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild, isTheme2022(this.theme));\n\n            const isFirstChild = child === firstChild;\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\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/Group/Group.d.ts

@@ -4,11 +4,17 @@ import { CommonProps } from '../../internal/CommonWrapper';
 export interface GroupProps extends CommonProps {
     width?: React.CSSProperties['width'];
 }
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
 export declare class Group extends React.Component<GroupProps> {
     static __KONTUR_REACT_UI__: string;
     private setRootNode;
+    private theme;
     static propTypes: {
         width: PropTypes.Requireable<string | number>;
     };
     render(): JSX.Element;
+    renderMain(): JSX.Element;
 }

package/components/Hint/Hint/Hint.js

@@ -6,20 +6,20 @@ var _class, _class2, _temp;
 import React from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { Popup } from "../../../internal/Popup";
+import { DUMMY_LOCATION, Popup } from "../../../internal/Popup";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 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
 /**
- * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
- */
-
-export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+* Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
+*/
+var Hint = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(Hint, _React$PureComponent);
 
   function Hint() {
@@ -30,8 +30,10 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Hint.defaultProps);
     _this.state = {
-      opened: _this.props.manual ? !!_this.props.opened : false
+      opened: _this.getProps().manual ? !!_this.getProps().opened : false,
+      position: DUMMY_LOCATION.position
     };
     _this.timer = null;
     _this.popupRef = /*#__PURE__*/React.createRef();
@@ -44,12 +46,12 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
 
     _this.getPositions = function () {
       return Positions.filter(function (x) {
-        return x.startsWith(_this.props.pos);
+        return x.startsWith(_this.getProps().pos);
       });
     };
 
     _this.handleMouseEnter = function (e) {
-      if (!_this.props.manual && !_this.timer) {
+      if (!_this.getProps().manual && !_this.timer) {
         _this.timer = window.setTimeout(_this.open, 400);
       }
 
@@ -59,7 +61,7 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
     };
 
     _this.handleMouseLeave = function (e) {
-      if (!_this.props.manual && _this.timer) {
+      if (!_this.getProps().manual && _this.timer) {
         clearTimeout(_this.timer);
         _this.timer = null;
 
@@ -73,12 +75,6 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       }
     };
 
-    _this.close = function () {
-      _this.setState({
-        opened: false
-      });
-    };
-
     _this.open = function () {
       _this.setState({
         opened: true
@@ -91,7 +87,11 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
   var _proto = Hint.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (!this.props.manual) {
+    var _this$getProps = this.getProps(),
+        opened = _this$getProps.opened,
+        manual = _this$getProps.manual;
+
+    if (!manual) {
       return;
     }
 
@@ -100,9 +100,9 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       this.timer = null;
     }
 
-    if (this.props.opened !== prevProps.opened) {
+    if (opened !== prevProps.opened) {
       this.setState({
-        opened: !!this.props.opened
+        opened: !!opened
       });
     }
   };
@@ -126,21 +126,17 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
           popupBorder: theme.hintBorder,
           popupBorderRadius: theme.hintBorderRadius
         }, _this2.theme)
-      }, _this2.isMobileLayout ? _this2.renderMobile() : _this2.renderMain());
+      }, _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() {
+    var _this3 = this;
+
+    var _this$getProps2 = this.getProps(),
+        disableAnimations = _this$getProps2.disableAnimations,
+        useWrapper = _this$getProps2.useWrapper;
+
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement(Popup, {
@@ -150,11 +146,17 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       positions: this.getPositions(),
       backgroundColor: this.theme.hintBgColor,
       borderColor: HINT_BORDER_COLOR,
-      disableAnimations: this.props.disableAnimations,
+      onPositionChange: function onPositionChange(position) {
+        return _this3.setState({
+          position: position
+        });
+      },
+      disableAnimations: disableAnimations,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
-      useWrapper: this.props.useWrapper,
-      ref: this.popupRef
+      useWrapper: useWrapper,
+      ref: this.popupRef,
+      withoutMobile: true
     }, this.renderContent()));
   };
 
@@ -165,14 +167,15 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
       return null;
     }
 
-    var _this$props = this.props,
-        pos = _this$props.pos,
-        maxWidth = _this$props.maxWidth;
-    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));
+    var _this$getProps3 = this.getProps(),
+        maxWidth = _this$getProps3.maxWidth;
+
+    var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
+    var className = cx((_cx = {}, _cx[styles.content(this.theme)] = true, _cx[styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position), _cx));
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       style: {
-        maxWidth: this.isMobileLayout ? '100%' : maxWidth
+        maxWidth: maxWidth
       }
     }, this.props.text);
   };
@@ -185,4 +188,4 @@ export var Hint = responsiveLayout(_class = rootNode(_class = (_temp = _class2 =
   maxWidth: 200,
   disableAnimations: isTestEnv,
   useWrapper: false
-}, _temp)) || _class) || _class;
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","rootNode","styles","HINT_BORDER_COLOR","Positions","Hint","state","opened","props","manual","timer","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","setRootNode","hintBgColor","disableAnimations","useWrapper","text","maxWidth","className","content","contentCenter","mobileContent","PureComponent","__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, PopupPositionsType } 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/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\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   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `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: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\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: PopupPositionsType[] = [\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\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\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  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    if (!this.props.manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (this.props.opened !== prevProps.opened) {\n      this.setState({ opened: !!this.props.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 rootNodeRef={this.setRootNode} {...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          ref={this.popupRef}\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<HTMLElement> => {\n    return this.popupRef.current?.anchorElement;\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 = (): PopupPositionsType[] => {\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"]}
+{"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","timer","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__"],"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 { DUMMY_LOCATION, Popup, PopupPositionsType } 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 { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\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   * В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `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?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;\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  position: PopupPositionsType;\n}\n\nconst Positions: PopupPositionsType[] = [\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\ntype DefaultProps = Required<\n  Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>\n>;\n\n/**\n * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n\n  public static defaultProps: DefaultProps = {\n    pos: 'top',\n    manual: false,\n    opened: false,\n    maxWidth: 200,\n    disableAnimations: isTestEnv,\n    useWrapper: false,\n  };\n\n  private getProps = createPropsGetter(Hint.defaultProps);\n\n  public state: HintState = {\n    opened: this.getProps().manual ? !!this.getProps().opened : false,\n    position: DUMMY_LOCATION.position,\n  };\n\n  private timer: Nullable<number> = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    if (opened !== prevProps.opened) {\n      this.setState({ opened: !!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.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { disableAnimations, useWrapper } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...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          onPositionChange={(position) => this.setState({ position })}\n          disableAnimations={disableAnimations}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          useWrapper={useWrapper}\n          ref={this.popupRef}\n          withoutMobile\n        >\n          {this.renderContent()}\n        </Popup>\n      </CommonWrapper>\n    );\n  }\n\n  public getAnchorElement = (): Nullable<Element> => {\n    return this.popupRef.current?.anchorElement;\n  };\n\n  private renderContent() {\n    if (!this.props.text) {\n      return null;\n    }\n\n    const { maxWidth } = this.getProps();\n    const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n    const className = cx({\n      [styles.content(this.theme)]: true,\n      [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n    });\n    return (\n      <div className={className} style={{ maxWidth }}>\n        {this.props.text}\n      </div>\n    );\n  }\n\n  private getPositions = (): PopupPositionsType[] => {\n    return Positions.filter((x) => x.startsWith(this.getProps().pos));\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().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.getProps().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 open = () => {\n    this.setState({ opened: true });\n  };\n}\n"]}

package/components/Hint/Hint.d.ts

@@ -35,7 +35,7 @@ export interface HintProps extends CommonProps {
      *
      * **Допустимые значения**: `"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' | PopupPositionsType;
+    pos?: 'top' | 'right' | 'bottom' | 'left' | PopupPositionsType;
     /**
      * Текст подсказки.
      */
@@ -43,31 +43,26 @@ export interface HintProps extends CommonProps {
     /**
      * Отключает анимацию.
      */
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /**
      * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
      *
      * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
      */
-    useWrapper: boolean;
+    useWrapper?: boolean;
 }
 export interface HintState {
     opened: boolean;
+    position: PopupPositionsType;
 }
+declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
 /**
  * Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.
  */
 export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
-    private isMobileLayout;
-    static defaultProps: {
-        pos: string;
-        manual: boolean;
-        opened: boolean;
-        maxWidth: number;
-        disableAnimations: boolean;
-        useWrapper: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: HintState;
     private timer;
     private theme;
@@ -76,13 +71,12 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
-    getAnchorElement: () => Nullable<HTMLElement>;
+    getAnchorElement: () => Nullable<Element>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
-    private close;
     private open;
 }
+export {};

package/components/Hint/Hint.md

@@ -4,6 +4,20 @@
 <Hint text="Подсказка">Базовая</Hint>
 ```
 
+Пример подсказки с иконкой.
+
+```jsx harmony
+<Hint text="Редактирование">
+  <svg width="16" height="16" viewBox="0 0 16 16">
+    <path
+      fillRule="evenodd"
+      d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+</Hint>
+```
+
 Пример подсказки, всегда всплывающей слева.
 
 ```jsx harmony
@@ -40,3 +54,32 @@ const [isOpen, setIsOpen] = React.useState(false);
 ```jsx harmony
 <Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
 ```
+
+### Использование встроеной и кастомной обёртки
+
+Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`. 
+
+Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
+В подобных случаях следуют использовать проп `useWrapper`:
+
+```jsx harmony
+<Hint useWrapper text="Подсказа всё равно отображается">
+  <button disabled>native button</button>
+</Hint>
+```
+
+Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
+В таких случаях стоит использовать собственную обётку:
+
+```jsx harmony
+<>
+  <Hint useWrapper text="Подсказа">
+    <button disabled style={{ height: 40 }}>useWrapper prop</button>
+  </Hint>
+  <Hint text="Подсказа">
+    <span style={{ display: 'inline-block' }}>
+      <button disabled style={{ height: 40 }}>custom wrapper</button>
+    </span>
+  </Hint>
+</>
+```

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

@@ -1,16 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 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);
   },
-  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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
 });

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","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"]}
+{"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","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;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBgC,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  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n});\n"]}

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

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