@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/Toaster/Toast/Toast.js

@@ -9,109 +9,121 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _Flexbox = _interopRequireDefault(require("../../Flexbox"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
+
+var _Button = _interopRequireDefault(require("../../Button"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+var icons = {
+  info: 'info-circle',
+  warning: 'alert',
+  success: 'check-circle',
+  error: 'x-circle',
+  promote: null
+};
+var colorTextClasses = {
+  info: 'textInfo',
+  promote: 'textPromote',
+  warning: 'textWarning',
+  success: 'textSuccess',
+  error: 'textError'
+};
+var colorLinkClasses = {
+  info: 'linkInfo',
+  promote: 'linkPromote',
+  warning: 'linkWarning',
+  success: 'linkSuccess',
+  error: 'linkError'
+};
+
 var Toast = function Toast(_ref) {
   var classes = _ref.classes,
       theme = _ref.theme,
       title = _ref.title,
       description = _ref.description,
       action = _ref.action,
-      hasIcon = _ref.hasIcon,
       closing = _ref.closing,
       onClose = _ref.onClose,
       pauseTimer = _ref.pauseTimer,
-      resumeTimer = _ref.resumeTimer;
-
-  var getIconData = function getIconData() {
-    switch (theme) {
-      case 'success':
-        return {
-          icon: 'check-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'error':
-        return {
-          icon: 'x-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'info':
-        return {
-          icon: 'info-circle',
-          color: _colors["default"].bgWhite
-        };
-
-      case 'warning':
-        return {
-          icon: 'alert',
-          color: _colors["default"].grey900
-        };
-    }
-  };
-
-  var textColor = theme === 'warning' ? {} : {
-    white: true
-  };
-  var iconData = hasIcon ? getIconData() : null;
+      resumeTimer = _ref.resumeTimer,
+      closeIcon = _ref.closeIcon,
+      testId = _ref.testId;
 
   var onActionClick = function onActionClick(action) {
     action.onClick();
     onClose();
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : ''),
-    onMouseEnter: pauseTimer,
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "".concat(classes.toast, " ").concat(classes[theme]).concat(closing ? " ".concat(classes.closing) : '')
+  }, !closeIcon && {
+    onMouseEnter: pauseTimer
+  }, !closeIcon && {
     onMouseLeave: resumeTimer
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
-    className: classes.content
+    justifyContent: "between"
   }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
-    alignItems: "center"
-  }, hasIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: iconData.icon,
-    colors: [iconData.color],
-    className: classes.icon
-  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    alignItems: "center",
+    alignSelf: "center",
     flex: "1"
-  }, title && /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
-    subheading: true
-  }, textColor), title), description && /*#__PURE__*/_react["default"].createElement(_Text["default"], textColor, description))), action && /*#__PURE__*/_react["default"].createElement("button", {
-    className: classes.action,
+  }, theme !== 'promote' && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icons[theme],
+    className: classes.icon,
+    colors: [theme === 'info' ? _colors["default"].icon.brand["default"] : _colors["default"].icon[theme]]
+  }), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    flex: "1",
+    className: classes.content,
+    alignSelf: description ? 'start' : 'center',
+    justifyContent: "between"
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    direction: "col"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "".concat(classes.title, " ").concat(classes[colorTextClasses[theme]])
+  }, title), description && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "".concat(classes.description, " ").concat(classes[colorTextClasses[theme]])
+  }, description)), action ? /*#__PURE__*/_react["default"].createElement("a", _extends({
+    className: "".concat(classes.actionText, " ").concat(classes[colorLinkClasses[theme]]),
     onClick: function onClick() {
       return onActionClick(action);
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    alignItems: "center",
-    className: classes.actionWrap
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({}, textColor, {
-    strong: true,
-    className: classes.actionText
-  }), action.label)))));
+  }, testId && {
+    'data-testid': "".concat(testId, "__link")
+  }), action.label) : null)), !action && closeIcon ? /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    onClick: onClose,
+    className: classes.closeIcon,
+    icon: "x",
+    size: "md",
+    theme: theme === 'promote' ? 'ghostWhite' : 'ghostGrey'
+  }, testId && {
+    testId: "".concat(testId, "__close-icon")
+  })) : null));
 };
 
 Toast.propTypes = {
   classes: _propTypes["default"].object.isRequired,
   theme: _propTypes["default"].oneOf(['success', 'error', 'info', 'warning']),
-  title: _propTypes["default"].string,
+  title: _propTypes["default"].string.isRequired,
   description: _propTypes["default"].string,
   action: _propTypes["default"].object,
-  hasIcon: _propTypes["default"].bool,
-  onClose: _propTypes["default"].func.isRequired
+  closing: _propTypes["default"].bool,
+  pauseTimer: _propTypes["default"].func,
+  resumeTimer: _propTypes["default"].func,
+  onClose: _propTypes["default"].func.isRequired,
+  closeIcon: _propTypes["default"].bool,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string
 };
 var _default = Toast;
 exports["default"] = _default;

package/build/Toaster/Toast/styles.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
 
-var _shadows = _interopRequireDefault(require("../../subatomic/shadows"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
 
 var _grid = _interopRequireDefault(require("../../subatomic/grid"));
 
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _styles = require("../../Text/styles");
 
-var _toast, _icon, _action;
+var _toast;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -33,16 +37,18 @@ var _default = {
     }
   },
   toast: (_toast = {
-    borderRadius: _spacing["default"].radius,
-    boxShadow: _shadows["default"].lvl5,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    boxShadow: _shadows["default"]['elevation-elevation-5'],
+    padding: _spacing["default"]['size-3'],
     pointerEvents: 'auto',
     zIndex: 1001,
     animation: 'slideToasterIn 0.3s ease-out',
-    transition: '0.3s all ease-out'
+    transition: '0.3s all ease-out',
+    outlineOffset: '-1px'
   }, _defineProperty(_toast, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
     maxWidth: 480,
-    padding: _spacing["default"].small
+    minWidth: 400,
+    padding: _spacing["default"]['size-4']
   }), _defineProperty(_toast, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
     width: '100%'
   }), _toast),
@@ -51,54 +57,120 @@ var _default = {
     opacity: 0
   },
   success: {
-    background: _colors["default"].success
+    backgroundColor: _colors["default"].alert.success.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.success.border)
   },
   error: {
-    background: _colors["default"].error
+    backgroundColor: _colors["default"].alert.error.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.error.border)
   },
   warning: {
-    background: _colors["default"].warning
+    backgroundColor: _colors["default"].alert.warning.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.warning.border)
   },
   info: {
-    background: _colors["default"].info
+    backgroundColor: _colors["default"].alert.info.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.info.border)
+  },
+  promote: {
+    backgroundColor: _colors["default"].alert.neutral.bg,
+    outline: "1px solid ".concat(_colors["default"].alert.neutral.border)
+  },
+  textInfo: {
+    color: _colors["default"].text.indigo.primary
+  },
+  textWarning: {
+    color: _colors["default"].text.warning
+  },
+  textSuccess: {
+    color: _colors["default"].text.success
+  },
+  textError: {
+    color: _colors["default"].text.error
+  },
+  textPromote: {
+    color: _colors["default"].text.white.primary
+  },
+  linkInfo: {
+    color: _colors["default"].text.indigo.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.brand.bg.hover, ", ").concat(_colors["default"].link.brand.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.brand.bg.active, ", ").concat(_colors["default"].link.brand.bg.active, ")")
+    }
+  },
+  linkWarning: {
+    color: _colors["default"].text.warning,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.warning.bg.hover, ", ").concat(_colors["default"].link.warning.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.warning.bg.active, ", ").concat(_colors["default"].link.warning.bg.active, ")")
+    }
+  },
+  linkSuccess: {
+    color: _colors["default"].text.success,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.success.bg.hover, ", ").concat(_colors["default"].link.success.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.success.bg.active, ", ").concat(_colors["default"].link.success.bg.active, ")")
+    }
   },
-  content: _defineProperty({}, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+  linkError: {
+    color: _colors["default"].text.error,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.error.bg.hover, ", ").concat(_colors["default"].link.error.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.error.bg.active, ", ").concat(_colors["default"].link.error.bg.active, ")")
+    }
+  },
+  linkPromote: {
+    color: _colors["default"].text.white.primary,
+    backgroundRepeat: 'no-repeat',
+    background: "linear-gradient(".concat(_colors["default"].link.white.bg.hover, ", ").concat(_colors["default"].link.white.bg.hover, ")"),
+    '&:active': {
+      background: "linear-gradient(".concat(_colors["default"].link.white.bg.active, ", ").concat(_colors["default"].link.white.bg.active, ")")
+    }
+  },
+  title: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-default']),
+    margin: 0
+  },
+  description: {
+    font: (0, _styles.parseFontValue)(_fonts["default"]['alert-description']),
+    margin: [_spacing["default"]['size-1'], 0, 0]
+  },
+  content: _defineProperty({
     flexDirection: 'column'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    flexDirection: 'row'
   }),
-  icon: (_icon = {
-    marginRight: _spacing["default"].small,
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small
-  }, _defineProperty(_icon, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    width: _iconSizes["default"].base,
-    height: _iconSizes["default"].base
-  }), _defineProperty(_icon, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    display: 'none'
-  }), _icon),
-  action: (_action = {
-    marginTop: _spacing["default"].xTiny,
-    cursor: 'pointer',
-    background: 'none',
-    border: 'none'
-  }, _defineProperty(_action, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    margin: -_spacing["default"].small,
-    marginLeft: _spacing["default"].small,
-    padding: [0, _spacing["default"].small],
-    borderRadius: [0, _spacing["default"].radius, _spacing["default"].radius, 0],
-    borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
-    transition: '0.3s all',
-    '&:hover': {
-      background: 'rgba(255, 255, 255, 0.15)'
-    }
-  }), _defineProperty(_action, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    alignSelf: 'flex-end'
-  }), _action),
+  icon: {
+    marginRight: _spacing["default"]['size-2'],
+    alignSelf: 'start'
+  },
   actionWrap: {
     height: '100%'
   },
-  actionText: {
-    textTransform: 'uppercase',
-    whiteSpace: 'nowrap'
+  actionText: _defineProperty({
+    font: (0, _styles.parseFontValue)(_fonts["default"]['link-small-strong']),
+    whiteSpace: 'nowrap',
+    textDecoration: 'underline',
+    cursor: 'pointer',
+    alignSelf: 'start',
+    transition: 'all ease-out 150ms',
+    backgroundSize: '0%',
+    '&:hover': {
+      backgroundSize: '100%',
+      cursor: 'pointer'
+    },
+    margin: [_spacing["default"]['size-2'], 0, 0]
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    margin: [0, 0, 0, _spacing["default"]['size-4']],
+    alignSelf: 'center'
+  }),
+  closeIcon: {
+    marginLeft: _spacing["default"]['size-4'],
+    alignSelf: 'center'
   }
 };
 exports["default"] = _default;

package/build/Toaster/Toaster.js

@@ -78,7 +78,7 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
         toast: toast,
         toastId: toastId
       }, function () {
-        _this.addTimer();
+        if (!toast.closeIcon) _this.addTimer();
       });
     });
 
@@ -164,8 +164,9 @@ var Toaster = /*#__PURE__*/function (_React$Component) {
         title: toast.title,
         theme: toast.type,
         action: toast.action,
-        hasIcon: toast.hasIcon,
+        closeIcon: toast.closeIcon,
         closing: toast.closing,
+        testId: toast.testId,
         onClose: function onClose() {
           return _this2.onClose(toast);
         },

package/build/Toaster/Toaster.test.js

@@ -104,11 +104,14 @@ describe("Toaster", function () {
 
     _functions.toaster.success({
       title: 'Title',
-      action: action
+      action: action,
+      testId: "toaster-test"
     });
 
     wrapper.update();
-    wrapper.find('button').simulate('click');
+    wrapper.find({
+      "data-testid": 'toaster-test__link'
+    }).simulate('click');
     expect(action.onClick).toHaveBeenCalled();
     setTimeout(function () {
       wrapper.update();

package/build/Toaster/__snapshots__/Toaster.test.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-12 Toast-content-0-1-7\\"><div class=\\"Flexbox-flex-0-1-12 Flexbox-acenter-0-1-29\\"><div class=\\"\\" style=\\"flex: 1;\\"><p class=\\"Text-text-0-1-44 Text-h5-0-1-50 Text-whitePrimary-0-1-70\\">Title</p></div></div></div></div></div>"`;
+exports[`Toaster launches a toast 1`] = `"<div class=\\"container\\"><div class=\\"Toast-toast-0-1-1 Toast-success-0-1-3\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-acenter-0-1-42 Flexbox-scenter-0-1-54\\" style=\\"flex: 1;\\"><svg class=\\"Icon-icon-0-1-60 Icon-icon-0-1-57 undefined__check-circle Toast-icon-0-1-21\\" width=\\"24\\" height=\\"24\\" fill=\\"#38d373\\" style=\\"transition: 0.3s all;\\"><use xlink:href=\\"undefined#undefined__check-circle\\"></use></svg><div class=\\"Flexbox-flex-0-1-25 Flexbox-jbetween-0-1-37 Flexbox-scenter-0-1-54 Toast-content-0-1-20\\" style=\\"flex: 1;\\"><div class=\\"Flexbox-flex-0-1-25 Flexbox-col-0-1-29\\"><p class=\\"Toast-title-0-1-18 Toast-textSuccess-0-1-10\\">Title</p></div></div></div></div></div></div>"`;
 
 exports[`Toaster matches the snapshot 1`] = `"<div class=\\"container\\"></div>"`;

package/build/Toaster/functions.js

@@ -29,6 +29,10 @@ var toaster = {
     value.type = 'warning';
     this.addToast(value);
   },
+  promote: function promote(value) {
+    value.type = 'promote';
+    this.addToast(value);
+  },
   close: function close() {
     if (this.closeListener && !(0, _isEmpty["default"])(this.toast)) this.closeListener(this.toast);
   },

package/build/Toaster/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _container;
 
@@ -21,9 +21,9 @@ var _default = {
     zIndex: 1001,
     bottom: 0,
     left: 0,
-    padding: _spacing["default"].small
+    padding: _spacing["default"]['size-4']
   }, _defineProperty(_container, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
-    padding: _spacing["default"].medium
+    padding: _spacing["default"]['size-6']
   }), _defineProperty(_container, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
     width: '100vw'
   }), _defineProperty(_container, "pointerEvents", 'none'), _container)

package/build/Tooltip/Tooltip.js

@@ -15,9 +15,13 @@ var _react2 = require("@floating-ui/react");
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
 var _hooks = require("./hooks");
 
-var _colorsArrow;
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colorsArrow, _borderColors;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -46,8 +50,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var infoLight = _colors["default"].infoLight,
-    white = _colors["default"].white,
-    grey900 = _colors["default"].grey900,
     info = _colors["default"].info;
 var themes = {
   DARK: 'dark',
@@ -55,7 +57,20 @@ var themes = {
   INFO: 'info',
   PURPLE: 'purple'
 };
-var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, grey900), _defineProperty(_colorsArrow, themes.LIGHT, white), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
+var colorsArrow = (_colorsArrow = {}, _defineProperty(_colorsArrow, themes.DARK, _colors2["default"].bg.neutral), _defineProperty(_colorsArrow, themes.INFO, infoLight), _defineProperty(_colorsArrow, themes.LIGHT, _colors2["default"].bg.surface["default"]), _defineProperty(_colorsArrow, themes.PURPLE, info), _colorsArrow);
+var borderColors = (_borderColors = {}, _defineProperty(_borderColors, themes.DARK, {
+  bg: 'black',
+  border: 'rgba(0, 0, 0, 0.8)'
+}), _defineProperty(_borderColors, themes.LIGHT, {
+  bg: _colors2["default"].border["default"].subtle,
+  border: _colors2["default"].border["default"].subtle
+}), _defineProperty(_borderColors, themes.INFO, {
+  bg: infoLight,
+  border: infoLight
+}), _defineProperty(_borderColors, themes.PURPLE, {
+  bg: info,
+  border: info
+}), _borderColors);
 /** Tooltip component to display messages within a container. */
 
 function Tooltip(_ref) {
@@ -63,7 +78,8 @@ function Tooltip(_ref) {
       openProp = _ref.open,
       children = _ref.children,
       text = _ref.text,
-      theme = _ref.theme,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'purple' : _ref$theme,
       _ref$openOnHover = _ref.openOnHover,
       openOnHover = _ref$openOnHover === void 0 ? false : _ref$openOnHover,
       _ref$closeDelay = _ref.closeDelay,
@@ -79,10 +95,11 @@ function Tooltip(_ref) {
       _ref$fit = _ref.fit,
       fit = _ref$fit === void 0 ? false : _ref$fit,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 220 : _ref$width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      icon = _ref.icon;
   var arrowRef = (0, _react.useRef)(null);
 
   var _useOpenTooltipState = (0, _hooks.useOpenTooltipState)(openProp, onChange, closeDelay),
@@ -91,23 +108,43 @@ function Tooltip(_ref) {
       setOpen = _useOpenTooltipState2[1];
 
   var getMiddlewares = (0, _react.useMemo)(function () {
-    var middlewares = [(0, _react2.offset)(16)];
+    var middlewares = [(0, _react2.offset)(function (_ref2) {
+      var rects = _ref2.rects;
+
+      if (placement === 'top-start' || placement === 'bottom-start') {
+        return {
+          crossAxis: rects.reference.width / 2 - 18,
+          mainAxis: 16
+        };
+      } else if (placement === 'top-end' || placement === 'bottom-end') {
+        return {
+          crossAxis: -(rects.reference.width / 2) + 18,
+          mainAxis: 16
+        };
+      }
+
+      return {
+        mainAxis: 16
+      };
+    })];
     showArrow && middlewares.push((0, _react2.arrow)({
-      element: arrowRef,
-      padding: 16
+      element: arrowRef
     }));
     var sizeMiddleware = (0, _react2.size)({
-      apply: function apply(_ref2) {
-        var elements = _ref2.elements,
-            rects = _ref2.rects,
-            availableWidth = _ref2.availableWidth;
+      apply: function apply(_ref3) {
+        var elements = _ref3.elements,
+            rects = _ref3.rects,
+            availableWidth = _ref3.availableWidth;
         var styles = {};
 
         if (fit) {
           styles.width = "".concat(rects.reference.width, "px");
         } else {
           styles.maxWidth = "".concat(availableWidth, "px");
-          if (width) styles.width = typeof width === 'string' ? width : "".concat(width, "px");else styles.width = '';
+
+          if (width) {
+            styles.width = typeof width === 'string' ? width : "".concat(width, "px");
+          } else styles.width = '';
         }
 
         Object.assign(elements.floating.style, styles);
@@ -116,7 +153,7 @@ function Tooltip(_ref) {
     sizeMiddleware.name = "size-".concat(fit, "-").concat(width);
     middlewares.push(sizeMiddleware);
     return middlewares;
-  }, [showArrow, fit, width]);
+  }, [showArrow, fit, width, placement]);
 
   var _useFloating = (0, _react2.useFloating)({
     open: open,
@@ -144,20 +181,33 @@ function Tooltip(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
     ref: refs.setReference
   }, getReferenceProps(), {
-    className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') && className.activator)
+    className: "".concat(classes.activator, " ").concat(className.hasOwnProperty('activator') ? className.activator : '')
   }), children), /*#__PURE__*/_react["default"].createElement(_react2.FloatingPortal, null, open && /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') && className.tooltip, " ").concat(classes[theme] || classes.purple),
+    className: "".concat(classes.tooltip, " ").concat(className.hasOwnProperty('tooltip') ? className.tooltip : '', " ").concat(classes[theme] || classes.purple),
     ref: refs.setFloating,
     style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
       zIndex: zIndex,
       position: strategy
     })
-  }, getFloatingProps()), text, showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
+  }, getFloatingProps()), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.content
+  }, icon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: icon,
+    width: 12,
+    height: 12
+  }), /*#__PURE__*/_react["default"].createElement("p", {
+    className: classes.text
+  }, text)), showArrow && /*#__PURE__*/_react["default"].createElement(_react2.FloatingArrow, {
+    style: {
+      transform: 'translateY(1px)'
+    },
     ref: arrowRef,
     context: context,
     fill: colorsArrow[theme] || colorsArrow[themes.PURPLE],
-    width: 14,
-    height: 10
+    strokeWidth: 1,
+    stroke: borderColors[theme].border,
+    width: 20,
+    d: "M0 20C0 20 2.06906 19.9829 5.91817 15.4092C7.49986 13.5236 8.97939 12.3809 10.0002 12.3809C11.0202 12.3809 12.481 13.6451 14.0814 15.5472C17.952 20.1437 20 20 20 20H0Z"
   }))));
 }
 
@@ -204,7 +254,8 @@ Tooltip.propTypes = {
   strategy: _propTypes["default"].oneOf(['absolute', 'fixed']),
 
   /** Callback fired when the Tooltip show state changes. */
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  icon: _propTypes["default"].string
 };
 var _default = Tooltip;
 exports["default"] = _default;