@spaced-out/ui-design-system 0.0.3 → 0.0.5

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Avatar = require("../Avatar");
+var _Tooltip = require("../Tooltip");
+var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
+const AvatarGroup = _ref => {
+  let {
+    children,
+    size = 'medium',
+    borderColor = _color.colorBackgroundTertiary,
+    maxTooltipLines = 7,
+    placement = 'top',
+    maxAvatars = 5
+  } = _ref;
+  const childAvatarCount = React.Children.count(children);
+  const leftOverlap = {
+    small: _space.spaceXXSmall,
+    medium: `${parseInt(_space.spaceSmall) / 2}px`,
+    large: _space.spaceXSmall
+  };
+  let colorIndex = -1;
+  const avatarInGroup = (child, index, color) => /*#__PURE__*/React.cloneElement(child, {
+    size,
+    classNames: {
+      wrapper: _AvatarGroupModule.default.avatarInGroup
+    },
+    style: {
+      borderColor,
+      marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`
+    },
+    color
+  });
+  const childrenArray = React.Children.toArray(children);
+  const totalAvatarCount = childrenArray.length;
+  const plusAvatar = () => {
+    const nameList = [];
+    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+      const child = childrenArray[i];
+      const {
+        text
+      } = child.props;
+      if (text) {
+        nameList.push(text);
+      }
+    }
+    const NameListNode = () => /*#__PURE__*/React.createElement("span", null, nameList.map(name => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: name
+    }, name, /*#__PURE__*/React.createElement("br", null))));
+    return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+      body: /*#__PURE__*/React.createElement(NameListNode, null),
+      bodyMaxLines: maxTooltipLines,
+      placement: placement
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _AvatarGroupModule.default.plusAvatar
+    }, /*#__PURE__*/React.createElement(_Avatar.BaseAvatar, {
+      size: size,
+      color: "gray",
+      text: `+${childAvatarCount - maxAvatars + 1}`,
+      classNames: {
+        wrapper: _AvatarGroupModule.default.avatarInGroup
+      },
+      style: {
+        borderColor,
+        marginLeft: `-${leftOverlap[size]}`
+      }
+    })));
+  };
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    const {
+      imageSrc
+    } = child.props;
+    if (!imageSrc) {
+      colorIndex++;
+      if (colorIndex === COLOR_SEQUENCE.length) {
+        colorIndex = 0;
+      }
+    }
+    const color = COLOR_SEQUENCE[colorIndex];
+    if (childAvatarCount <= maxAvatars) {
+      return avatarInGroup(child, index, color);
+    } else {
+      if (index < maxAvatars - 1) {
+        return avatarInGroup(child, index, color);
+      } else if (index === maxAvatars) {
+        return plusAvatar();
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarGroupModule.default.avatarGroupContainer, {
+      [_AvatarGroupModule.default.largeSize]: size === 'large',
+      [_AvatarGroupModule.default.mediumSize]: size === 'medium',
+      [_AvatarGroupModule.default.smallSize]: size === 'small'
+    })
+  }, childrenWithProps);
+};
+exports.AvatarGroup = AvatarGroup;

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -0,0 +1,137 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {colorBackgroundTertiary} from '../../styles/variables/_color';
+import {
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall,
+} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import type {AvatarSize} from '../Avatar';
+import {BaseAvatar} from '../Avatar';
+import type {PlacementType} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './AvatarGroup.module.css';
+
+
+const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
+
+export type AvatarGroupProps = {
+  children?: React.Node,
+  size?: AvatarSize,
+  borderColor?: string,
+  maxTooltipLines?: number,
+  placement?: PlacementType,
+  maxAvatars?: number,
+};
+
+export const AvatarGroup = ({
+  children,
+  size = 'medium',
+  borderColor = colorBackgroundTertiary,
+  maxTooltipLines = 7,
+  placement = 'top',
+  maxAvatars = 5,
+}: AvatarGroupProps): React.Node => {
+  const childAvatarCount = React.Children.count(children);
+
+  const leftOverlap = {
+    small: spaceXXSmall,
+    medium: `${parseInt(spaceSmall) / 2}px`,
+    large: spaceXSmall,
+  };
+
+  let colorIndex = -1;
+
+  const avatarInGroup = (child, index, color) =>
+    React.cloneElement(child, {
+      size,
+      classNames: {wrapper: css.avatarInGroup},
+      style: {
+        borderColor,
+        marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
+      },
+      color,
+    });
+
+  const childrenArray = React.Children.toArray(children);
+  const totalAvatarCount = childrenArray.length;
+  const plusAvatar = () => {
+    const nameList = [];
+
+    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+      const child = childrenArray[i];
+      const {text} = child.props;
+      if (text) {
+        nameList.push(text);
+      }
+    }
+
+    const NameListNode = () => (
+      <span>
+        {nameList.map((name) => (
+          <React.Fragment key={name}>
+            {name}
+            <br />
+          </React.Fragment>
+        ))}
+      </span>
+    );
+    return (
+      <Tooltip
+        body={<NameListNode />}
+        bodyMaxLines={maxTooltipLines}
+        placement={placement}
+      >
+        <div className={css.plusAvatar}>
+          <BaseAvatar
+            size={size}
+            color="gray"
+            text={`+${childAvatarCount - maxAvatars + 1}`}
+            classNames={{wrapper: css.avatarInGroup}}
+            style={{
+              borderColor,
+              marginLeft: `-${leftOverlap[size]}`,
+            }}
+          />
+        </div>
+      </Tooltip>
+    );
+  };
+
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    const {imageSrc} = child.props;
+    if (!imageSrc) {
+      colorIndex++;
+      if (colorIndex === COLOR_SEQUENCE.length) {
+        colorIndex = 0;
+      }
+    }
+
+    const color = COLOR_SEQUENCE[colorIndex];
+    if (childAvatarCount <= maxAvatars) {
+      return avatarInGroup(child, index, color);
+    } else {
+      if (index < maxAvatars - 1) {
+        return avatarInGroup(child, index, color);
+      } else if (index === maxAvatars) {
+        return plusAvatar();
+      }
+    }
+  });
+
+  return (
+    <div
+      className={classify(css.avatarGroupContainer, {
+        [css.largeSize]: size === 'large',
+        [css.mediumSize]: size === 'medium',
+        [css.smallSize]: size === 'small',
+      })}
+    >
+      {childrenWithProps}
+    </div>
+  );
+};

package/lib/components/AvatarGroup/AvatarGroup.module.css

@@ -0,0 +1,35 @@
+@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (borderWidthTertiary) from '../../styles/variables/_border.css';
+@value ( size34, size42, size60) from '../../styles/variables/_size.css';
+
+.avatarGroupContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.avatarGroupContainer.largeSize {
+  height: size60;
+}
+
+.avatarGroupContainer.mediumSize {
+  height: size42;
+}
+
+.avatarGroupContainer.smallSize {
+  height: size34;
+}
+
+.avatarInGroup {
+  display: flex;
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+}
+
+.nameList {
+  display: flex;
+  flex-direction: column;
+}
+
+.plusAvatar {
+  display: flex;
+  cursor: pointer;
+}

package/lib/components/AvatarGroup/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AvatarGroup = require("./AvatarGroup");
+Object.keys(_AvatarGroup).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AvatarGroup[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AvatarGroup[key];
+    }
+  });
+});

package/lib/components/AvatarGroup/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './AvatarGroup';

package/lib/components/Badge/Badge.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = exports.BADGE_COLOR = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text/Text");
+var _BadgeModule = _interopRequireDefault(require("./Badge.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BADGE_COLOR = Object.freeze({
+  gray: _color.colorGrayLightest,
+  red: _color.colorDangerLightest,
+  orange: _color.colorWarningLightest,
+  green: _color.colorSuccessLightest,
+  blue: _color.colorInformationLightest,
+  indigo: _color.colorNeutralLightest
+});
+exports.BADGE_COLOR = BADGE_COLOR;
+const Badge = _ref => {
+  let {
+    classNames,
+    text,
+    fill = 'gray'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Badge",
+    className: (0, _classify.default)(_BadgeModule.default.badgeWrapper, {
+      [_BadgeModule.default.fixedWidth]: text.length <= 2
+    }, classNames?.wrapper),
+    style: {
+      backgroundColor: BADGE_COLOR[fill]
+    }
+  }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, null, text));
+};
+exports.Badge = Badge;

package/lib/components/Badge/Badge.js.flow

@@ -0,0 +1,58 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  colorDangerLightest,
+  colorGrayLightest,
+  colorInformationLightest,
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorWarningLightest,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import {ButtonTextSmall} from '../Text/Text';
+
+import css from './Badge.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const BADGE_COLOR = Object.freeze({
+  gray: colorGrayLightest,
+  red: colorDangerLightest,
+  orange: colorWarningLightest,
+  green: colorSuccessLightest,
+  blue: colorInformationLightest,
+  indigo: colorNeutralLightest,
+});
+
+export type BadgeColorType = $Keys<typeof BADGE_COLOR>;
+
+export type BadgeProps = {
+  classNames?: ClassNames,
+  text: string,
+  fill?: BadgeColorType,
+};
+
+export const Badge = ({
+  classNames,
+  text,
+  fill = 'gray',
+}: BadgeProps): React.Node => (
+  <div
+    data-testid="Badge"
+    className={classify(
+      css.badgeWrapper,
+      {
+        [css.fixedWidth]: text.length <= 2,
+      },
+      classNames?.wrapper,
+    )}
+    style={{
+      backgroundColor: BADGE_COLOR[fill],
+    }}
+  >
+    <ButtonTextSmall>{text}</ButtonTextSmall>
+  </div>
+);

package/lib/components/Badge/Badge.module.css

@@ -0,0 +1,17 @@
+@value (size22, size100) from '../../styles/variables/_size.css';
+@value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';
+
+.badgeWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: size100;
+  height: size22;
+  padding: spaceNone spaceXSmall;
+}
+
+.fixedWidth {
+  padding: initial;
+  width: size22;
+  height: size22;
+}

package/lib/components/Badge/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.Badge;
+  }
+});
+var _Badge = require("./Badge");

package/lib/components/Badge/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {BadgeProps} from './Badge';
+export {Badge} from './Badge';

package/lib/components/Card/Card.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PADDING_SIZES = exports.Card = void 0;
+var React = _interopRequireWildcard(require("react"));
+var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _CardModule = _interopRequireDefault(require("./Card.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+exports.PADDING_SIZES = PADDING_SIZES;
+const getPaddingValue = size => {
+  const spaceKey = 'space' + (0, _string.capitalize)(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+const Card = _ref => {
+  let {
+    children,
+    classNames,
+    paddingTop = 'medium',
+    paddingRight = 'medium',
+    paddingBottom = 'medium',
+    paddingLeft = 'medium'
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Card",
+    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
+    style: {
+      paddingTop: getPaddingValue(paddingTop),
+      paddingRight: getPaddingValue(paddingRight),
+      paddingBottom: getPaddingValue(paddingBottom),
+      paddingLeft: getPaddingValue(paddingLeft)
+    }
+  }, children);
+};
+exports.Card = Card;

package/lib/components/Card/Card.js.flow

@@ -0,0 +1,56 @@
+// @flow strict
+
+import * as React from 'react';
+
+import * as SPACES from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {capitalize} from '../../utils/string';
+
+import css from './Card.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const PADDING_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+});
+
+export type PaddingSizeType = $Values<typeof PADDING_SIZES>;
+
+export type CardProps = {
+  classNames?: ClassNames,
+  children: React.Node,
+  paddingTop?: PaddingSizeType,
+  paddingRight?: PaddingSizeType,
+  paddingBottom?: PaddingSizeType,
+  paddingLeft?: PaddingSizeType,
+};
+
+const getPaddingValue = (size: PaddingSizeType): string => {
+  const spaceKey = 'space' + capitalize(size);
+  return SPACES[spaceKey] || SPACES['spaceNone'];
+};
+
+export const Card = ({
+  children,
+  classNames,
+  paddingTop = 'medium',
+  paddingRight = 'medium',
+  paddingBottom = 'medium',
+  paddingLeft = 'medium',
+}: CardProps): React.Node => (
+  <div
+    data-testid="Card"
+    className={classify(css.cardWrapper, classNames?.wrapper)}
+    style={{
+      paddingTop: getPaddingValue(paddingTop),
+      paddingRight: getPaddingValue(paddingRight),
+      paddingBottom: getPaddingValue(paddingBottom),
+      paddingLeft: getPaddingValue(paddingLeft),
+    }}
+  >
+    {children}
+  </div>
+);

package/lib/components/Card/Card.module.css

@@ -0,0 +1,9 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+
+.cardWrapper {
+  display: flex;
+  composes: borderPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+}

package/lib/components/Card/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.Card;
+  }
+});
+var _Card = require("./Card");

package/lib/components/Card/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {CardProps} from './Card';
+export {Card} from './Card';

package/lib/components/CircularLoader/CircularLoader.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CircularLoader = void 0;
 var React = _interopRequireWildcard(require("react"));
-var COLORS = _interopRequireWildcard(require("../../styles/variables/_color.js"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _CircularLoaderModule = _interopRequireDefault(require("./CircularLoader.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/CircularLoader/CircularLoader.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import * as COLORS from '../../styles/variables/_color.js';
+import * as COLORS from '../../styles/variables/_color';
 import classify from '../../utils/classify';
 
 import css from './CircularLoader.module.css';

package/lib/components/Tooltip/Tooltip.js

@@ -22,7 +22,9 @@ const Tooltip = _ref => {
     children,
     title,
     body,
-    placement = 'top'
+    placement = 'top',
+    bodyMaxLines = 2,
+    titleMaxLines = 1
   } = _ref;
   const [open, setOpen] = React.useState(false);
   const {
@@ -53,20 +55,20 @@ const Tooltip = _ref => {
     ...children.props
   })), open && /*#__PURE__*/React.createElement("div", _extends({
     ref: floating,
-    className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.wrapper),
+    className: (0, _classify.classify)(_TooltipModule.default.tooltip, classNames?.tooltip),
     style: {
       position: strategy,
       top: y ?? _space.spaceNone,
       left: x ?? _space.spaceNone
     }
-  }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+  }, getFloatingProps()), !!title && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    line: titleMaxLines
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: "inversePrimary"
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: 1
-  }, title)), !!body && /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+  }, title)), !!body && /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    line: bodyMaxLines
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     color: !title ? 'inversePrimary' : 'inverseSecondary'
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, {
-    line: 2
   }, body))));
 };
 exports.Tooltip = Tooltip;