glints-aries 4.1.80 → 4.1.81

package/es/@next/Menu/MenuStyle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MenuProps } from './Menu';
 export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
-export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
+export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, hoverOpenDelay, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
     zIndex: 500;
 }, "zIndex">;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Skeleton/components/SkeletonText/SkeletonText.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/es/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -3,19 +3,19 @@ import styled, { css } from 'styled-components';
 import * as Breakpoints from '../../../utilities/breakpoints';
 import { space4 } from '../../../utilities/spacing';
 import { SkeletonShimmer } from '../../SkeletonStyle';
-var headline1 = css(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
-var headline2 = css(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
-var headline3 = css(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
-var headline4 = css(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
-var headline5 = css(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
-var headline6 = css(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
-var subtitle1 = css(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
-var subtitle2 = css(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
-var body1 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
-var body2 = css(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
-var button = css(["height:14px;"]);
-var caption = css(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
-var overline = css(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
+var headline1 = css(["height:45px;@media (max-width:", "){height:35px;}"], Breakpoints.large);
+var headline2 = css(["height:40px;@media (max-width:", "){height:30px;}"], Breakpoints.large);
+var headline3 = css(["height:36.4px;@media (max-width:", "){height:28.6px;}"], Breakpoints.large);
+var headline4 = css(["height:31.2px;@media (max-width:", "){height:26px;}"], Breakpoints.large);
+var headline5 = css(["height:28px;@media (max-width:", "){height:25.2px;}"], Breakpoints.large);
+var headline6 = css(["height:25.2px;@media (max-width:", "){height:22.4px;}"], Breakpoints.large);
+var subtitle1 = css(["height:24px;"]);
+var subtitle2 = css(["height:19.5px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = css(["height:21px;"]);
+var body2 = css(["height:21px;@media (max-width:", "){height:19.6px;}"], Breakpoints.large);
+var button = css(["height:21px;@media (max-width:", "){height:19.6px;}"], Breakpoints.large);
+var caption = css(["height:16.8px;"]);
+var overline = css(["height:15.4px;"]);
 var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
 export var StyledSkeletonText = styled.li.withConfig({
   displayName: "SkeletonTextStyle__StyledSkeletonText",

package/es/@next/Tooltip/Tooltip.d.ts

@@ -13,6 +13,8 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     /** if clickable it true, onClick will be called when tooltip is clicked */
     onClick?: () => void;
     tooltipClassName?: string;
+    /** delay before showing a hover-triggered tooltip */
+    hoverOpenDelay?: number;
 }
-export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, hoverOpenDelay, ...props }: TooltipProps) => JSX.Element;
 export {};

package/es/@next/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "content", "preferredPosition", "zIndex", "clickable", "timeout", "onClick", "tooltipClassName"];
+var _excluded = ["children", "content", "preferredPosition", "zIndex", "clickable", "timeout", "onClick", "tooltipClassName", "hoverOpenDelay"];
 import React, { useEffect, useRef, useState } from 'react';
 import { Portal } from '../Portal/Portal';
 import { Typography } from '../Typography';
@@ -64,6 +64,8 @@ export var Tooltip = function Tooltip(_ref) {
     timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
     onClick = _ref.onClick,
     tooltipClassName = _ref.tooltipClassName,
+    _ref$hoverOpenDelay = _ref.hoverOpenDelay,
+    hoverOpenDelay = _ref$hoverOpenDelay === void 0 ? 300 : _ref$hoverOpenDelay,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var tooltipRef = useRef(null);
   var elRef = useRef(null);
@@ -123,11 +125,25 @@ export var Tooltip = function Tooltip(_ref) {
     as: "div",
     variant: "subtitle2"
   }, content) : content;
+  var hoverTimeoutRef = useRef(null);
   var handleMouseEnter = function handleMouseEnter() {
-    if (!clickable) setIsActive(true);
+    if (clickable || hoverTimeoutRef.current) return;
+    if (hoverOpenDelay <= 0) {
+      setIsActive(true);
+      return;
+    }
+    hoverTimeoutRef.current = setTimeout(function () {
+      hoverTimeoutRef.current = null;
+      setIsActive(true);
+    }, hoverOpenDelay);
   };
   var handleMouseLeave = function handleMouseLeave() {
     if (!clickable) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+        return;
+      }
       setIsActive(false);
       handleAnimation();
     }
@@ -142,6 +158,12 @@ export var Tooltip = function Tooltip(_ref) {
   var _useState4 = useState(false),
     animate = _useState4[0],
     setAnimate = _useState4[1];
+  useEffect(function () {
+    return function () {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
   var handleAnimation = function handleAnimation() {
     // if you click during the tooltip's lifespan, it should reset the timeout
     if (timeoutRef.current) {

package/es/@next/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/es/@next/Typography/TypographyStyles.js

@@ -2,19 +2,19 @@ var _variantCssMapping;
 import styled, { css } from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { NotoSans, Poppins } from '../utilities/fonts';
-export var headline1 = css(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], Poppins, Breakpoints.large);
-export var headline2 = css(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], Poppins, Breakpoints.large);
-export var headline3 = css(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], Poppins, Breakpoints.large);
-export var headline4 = css(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], Poppins, Breakpoints.large);
-export var headline5 = css(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
-export var headline6 = css(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], NotoSans, Breakpoints.large);
-export var subtitle1 = css(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], NotoSans, Breakpoints.large);
-export var subtitle2 = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], NotoSans, Breakpoints.large);
-export var body1 = css(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], NotoSans, Breakpoints.large);
-export var body2 = css(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], NotoSans, Breakpoints.large);
-export var button = css(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){font-weight:600;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
-export var caption = css(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], NotoSans, Breakpoints.large);
-export var overline = css(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
+export var headline1 = css(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:125%;letter-spacing:0;@media (max-width:", "){font-size:28px;}"], Poppins, Breakpoints.large);
+export var headline2 = css(["font-family:", ",sans-serif;font-weight:700;font-size:32px;line-height:125%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:125%;}"], Poppins, Breakpoints.large);
+export var headline3 = css(["font-family:", ",sans-serif;font-weight:700;font-size:28px;line-height:130%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:22px;line-height:130%;}"], Poppins, Breakpoints.large);
+export var headline4 = css(["font-family:", ",sans-serif;font-weight:700;font-size:24px;line-height:130%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;line-height:130%;}"], Poppins, Breakpoints.large);
+export var headline5 = css(["font-weight:700;font-size:20px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:18px;}"], Breakpoints.large);
+export var headline6 = css(["font-family:", ",sans-serif;font-weight:600;font-size:18px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:16px;letter-spacing:0.15px;}"], NotoSans, Breakpoints.large);
+export var subtitle1 = css(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], NotoSans, Breakpoints.large);
+export var subtitle2 = css(["font-family:", ",sans-serif;font-weight:400;font-size:13px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], NotoSans, Breakpoints.large);
+export var body1 = css(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], NotoSans, Breakpoints.large);
+export var body2 = css(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], NotoSans, Breakpoints.large);
+export var button = css(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){line-height:140%;letter-spacing:0.25px;}"], NotoSans, Breakpoints.large);
+export var caption = css(["font-family:", ",sans-serif;font-weight:600;font-size:12px;line-height:140%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], NotoSans, Breakpoints.large);
+export var overline = css(["font-family:", ",sans-serif;font-weight:500;font-size:11px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:11px;letter-spacing:0.2px;}"], NotoSans, Breakpoints.large);
 export var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
 export var StyledTypography = styled.p.withConfig({
   displayName: "TypographyStyles__StyledTypography",

package/es/Display/Tooltip/Tooltip.d.ts

@@ -9,6 +9,8 @@ export declare type Position = 'top' | 'right' | 'bottom' | 'left';
 interface BaseProps extends HTMLAttributes<HTMLHeadingElement> {
     classes?: Classes;
     position?: Position;
+    /** delay before showing the tooltip on hover */
+    hoverOpenDelay?: number;
 }
 export interface StringTooltip extends BaseProps {
     text: string;

package/es/Display/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["classes", "children", "text", "textAsString", "position"];
-import React, { useRef, useState, useCallback } from 'react';
+var _excluded = ["classes", "children", "text", "textAsString", "position", "hoverOpenDelay"];
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import { TooltipContainer, TooltipContent, TooltipMessage } from './TooltipStyle';
 export var Tooltip = function Tooltip(_ref) {
@@ -12,8 +12,11 @@ export var Tooltip = function Tooltip(_ref) {
     textAsString = _ref.textAsString,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'top' : _ref$position,
+    _ref$hoverOpenDelay = _ref.hoverOpenDelay,
+    hoverOpenDelay = _ref$hoverOpenDelay === void 0 ? 300 : _ref$hoverOpenDelay,
     defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var contentRef = useRef(null);
+  var hoverTimeoutRef = useRef(null);
   var _useState = useState(false),
     isShow = _useState[0],
     setIsShow = _useState[1];
@@ -23,6 +26,25 @@ export var Tooltip = function Tooltip(_ref) {
   var hideTooltip = function hideTooltip() {
     return setIsShow(false);
   };
+  var clearHoverTimeout = function clearHoverTimeout() {
+    if (!hoverTimeoutRef.current) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = null;
+  };
+  useEffect(function () {
+    return clearHoverTimeout;
+  }, []);
+  var showTooltipAfterDelay = function showTooltipAfterDelay() {
+    if (hoverTimeoutRef.current || isShow) return;
+    if (hoverOpenDelay <= 0) {
+      showTooltip();
+      return;
+    }
+    hoverTimeoutRef.current = setTimeout(function () {
+      hoverTimeoutRef.current = null;
+      showTooltip();
+    }, hoverOpenDelay);
+  };
   var hideTooltipIfTouchOutside = useCallback(function (event) {
     var hasTouchedOutsideOfTooltipContent = contentRef.current && !contentRef.current.contains(event.target);
     if (hasTouchedOutsideOfTooltipContent) {
@@ -47,8 +69,11 @@ export var Tooltip = function Tooltip(_ref) {
     // On mobile, it shows the tooltip on touch and hides the tooltip when the touch is released
     ,
     onTouchStart: handleTouchStart,
-    onMouseOver: showTooltip,
-    onMouseLeave: hideTooltip
+    onMouseOver: showTooltipAfterDelay,
+    onMouseLeave: function onMouseLeave() {
+      clearHoverTimeout();
+      hideTooltip();
+    }
   }, defaultProps), isShow && /*#__PURE__*/React.createElement(TooltipContent, {
     ref: contentRef,
     className: classNames('aries-tooltip-content', classes.content),

package/lib/@next/Menu/MenuStyle.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MenuProps } from './Menu';
 export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
-export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
+export declare const StyledTooltip: import("styled-components").StyledComponent<({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, hoverOpenDelay, ...props }: import("../Tooltip/Tooltip").TooltipProps) => JSX.Element, any, {
     zIndex: 500;
 }, "zIndex">;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Skeleton/components/SkeletonText/SkeletonText.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/lib/@next/Skeleton/components/SkeletonText/SkeletonTextStyle.js

@@ -9,19 +9,19 @@ var _SkeletonStyle = require("../../SkeletonStyle");
 var _variantHeightMapping;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-var headline1 = (0, _styledComponents.css)(["height:84px;@media (max-width:", "){height:36px;}"], Breakpoints.large);
-var headline2 = (0, _styledComponents.css)(["height:75px;@media (max-width:", "){height:32px;}"], Breakpoints.large);
-var headline3 = (0, _styledComponents.css)(["height:54px;@media (max-width:", "){height:28px;}"], Breakpoints.large);
-var headline4 = (0, _styledComponents.css)(["height:42px;@media (max-width:", "){height:24px;}"], Breakpoints.large);
-var headline5 = (0, _styledComponents.css)(["height:39px;@media (max-width:", "){height:20px;}"], Breakpoints.large);
-var headline6 = (0, _styledComponents.css)(["height:36px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
-var subtitle1 = (0, _styledComponents.css)(["height:32px;@media (max-width:", "){height:16px;}"], Breakpoints.large);
-var subtitle2 = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
-var body1 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
-var body2 = (0, _styledComponents.css)(["height:24px;@media (max-width:", "){height:21px;}"], Breakpoints.large);
-var button = (0, _styledComponents.css)(["height:14px;"]);
-var caption = (0, _styledComponents.css)(["height:20px;@media (max-width:", "){height:17px;}"], Breakpoints.large);
-var overline = (0, _styledComponents.css)(["height:17px;@media (max-width:", "){height:14px;}"], Breakpoints.large);
+var headline1 = (0, _styledComponents.css)(["height:45px;@media (max-width:", "){height:35px;}"], Breakpoints.large);
+var headline2 = (0, _styledComponents.css)(["height:40px;@media (max-width:", "){height:30px;}"], Breakpoints.large);
+var headline3 = (0, _styledComponents.css)(["height:36.4px;@media (max-width:", "){height:28.6px;}"], Breakpoints.large);
+var headline4 = (0, _styledComponents.css)(["height:31.2px;@media (max-width:", "){height:26px;}"], Breakpoints.large);
+var headline5 = (0, _styledComponents.css)(["height:28px;@media (max-width:", "){height:25.2px;}"], Breakpoints.large);
+var headline6 = (0, _styledComponents.css)(["height:25.2px;@media (max-width:", "){height:22.4px;}"], Breakpoints.large);
+var subtitle1 = (0, _styledComponents.css)(["height:24px;"]);
+var subtitle2 = (0, _styledComponents.css)(["height:19.5px;@media (max-width:", "){height:18px;}"], Breakpoints.large);
+var body1 = (0, _styledComponents.css)(["height:21px;"]);
+var body2 = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:19.6px;}"], Breakpoints.large);
+var button = (0, _styledComponents.css)(["height:21px;@media (max-width:", "){height:19.6px;}"], Breakpoints.large);
+var caption = (0, _styledComponents.css)(["height:16.8px;"]);
+var overline = (0, _styledComponents.css)(["height:15.4px;"]);
 var variantHeightMapping = (_variantHeightMapping = {}, _variantHeightMapping['headline1'] = headline1, _variantHeightMapping['headline2'] = headline2, _variantHeightMapping['headline3'] = headline3, _variantHeightMapping['headline4'] = headline4, _variantHeightMapping['headline5'] = headline5, _variantHeightMapping['headline6'] = headline6, _variantHeightMapping['subtitle1'] = subtitle1, _variantHeightMapping['subtitle2'] = subtitle2, _variantHeightMapping['body1'] = body1, _variantHeightMapping['body2'] = body2, _variantHeightMapping['button'] = button, _variantHeightMapping['caption'] = caption, _variantHeightMapping['overline'] = overline, _variantHeightMapping);
 var StyledSkeletonText = _styledComponents["default"].li.withConfig({
   displayName: "SkeletonTextStyle__StyledSkeletonText",

package/lib/@next/Tooltip/Tooltip.d.ts

@@ -13,6 +13,8 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     /** if clickable it true, onClick will be called when tooltip is clicked */
     onClick?: () => void;
     tooltipClassName?: string;
+    /** delay before showing a hover-triggered tooltip */
+    hoverOpenDelay?: number;
 }
-export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, ...props }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ children, content, preferredPosition, zIndex, clickable, timeout, onClick, tooltipClassName, hoverOpenDelay, ...props }: TooltipProps) => JSX.Element;
 export {};

package/lib/@next/Tooltip/Tooltip.js

@@ -12,7 +12,7 @@ var _positionResolver = require("./positionResolver");
 var _positionResolverHelper = require("./positionResolverHelper");
 var _TooltipStyle = require("./TooltipStyle");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["children", "content", "preferredPosition", "zIndex", "clickable", "timeout", "onClick", "tooltipClassName"];
+var _excluded = ["children", "content", "preferredPosition", "zIndex", "clickable", "timeout", "onClick", "tooltipClassName", "hoverOpenDelay"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var topPositions = ['top-center', 'top-left', 'top-right'];
@@ -71,6 +71,8 @@ var Tooltip = function Tooltip(_ref) {
     timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
     onClick = _ref.onClick,
     tooltipClassName = _ref.tooltipClassName,
+    _ref$hoverOpenDelay = _ref.hoverOpenDelay,
+    hoverOpenDelay = _ref$hoverOpenDelay === void 0 ? 300 : _ref$hoverOpenDelay,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var tooltipRef = (0, _react.useRef)(null);
   var elRef = (0, _react.useRef)(null);
@@ -130,11 +132,25 @@ var Tooltip = function Tooltip(_ref) {
     as: "div",
     variant: "subtitle2"
   }, content) : content;
+  var hoverTimeoutRef = (0, _react.useRef)(null);
   var handleMouseEnter = function handleMouseEnter() {
-    if (!clickable) setIsActive(true);
+    if (clickable || hoverTimeoutRef.current) return;
+    if (hoverOpenDelay <= 0) {
+      setIsActive(true);
+      return;
+    }
+    hoverTimeoutRef.current = setTimeout(function () {
+      hoverTimeoutRef.current = null;
+      setIsActive(true);
+    }, hoverOpenDelay);
   };
   var handleMouseLeave = function handleMouseLeave() {
     if (!clickable) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+        return;
+      }
       setIsActive(false);
       handleAnimation();
     }
@@ -149,6 +165,12 @@ var Tooltip = function Tooltip(_ref) {
   var _useState4 = (0, _react.useState)(false),
     animate = _useState4[0],
     setAnimate = _useState4[1];
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
   var handleAnimation = function handleAnimation() {
     // if you click during the tooltip's lifespan, it should reset the timeout
     if (timeoutRef.current) {

package/lib/@next/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/@next/Typography/TypographyStyles.js

@@ -8,31 +8,31 @@ var _fonts = require("../utilities/fonts");
 var _variantCssMapping;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-var headline1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:60px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-size:36px;}"], _fonts.Poppins, Breakpoints.large);
+var headline1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:125%;letter-spacing:0;@media (max-width:", "){font-size:28px;}"], _fonts.Poppins, Breakpoints.large);
 exports.headline1 = headline1;
-var headline2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:50px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:32px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
+var headline2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:32px;line-height:125%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:125%;}"], _fonts.Poppins, Breakpoints.large);
 exports.headline2 = headline2;
-var headline3 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:36px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:28px;line-height:140%;}"], _fonts.Poppins, Breakpoints.large);
+var headline3 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:28px;line-height:130%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:22px;line-height:130%;}"], _fonts.Poppins, Breakpoints.large);
 exports.headline3 = headline3;
-var headline4 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:30px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:24px;line-height:150%;}"], _fonts.Poppins, Breakpoints.large);
+var headline4 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:24px;line-height:130%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;line-height:130%;}"], _fonts.Poppins, Breakpoints.large);
 exports.headline4 = headline4;
-var headline5 = (0, _styledComponents.css)(["font-weight:700;font-size:26px;line-height:normal;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:20px;}"], Breakpoints.large);
+var headline5 = (0, _styledComponents.css)(["font-weight:700;font-size:20px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:600;font-size:18px;}"], Breakpoints.large);
 exports.headline5 = headline5;
-var headline6 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:24px;line-height:150%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:18px;letter-spacing:0.15px;}"], _fonts.NotoSans, Breakpoints.large);
+var headline6 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:18px;line-height:140%;letter-spacing:0;@media (max-width:", "){font-weight:700;font-size:16px;letter-spacing:0.15px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.headline6 = headline6;
-var subtitle1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:20px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], _fonts.NotoSans, Breakpoints.large);
+var subtitle1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.15px;@media (max-width:", "){font-size:16px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.subtitle1 = subtitle1;
-var subtitle2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
+var subtitle2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:13px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
 exports.subtitle2 = subtitle2;
-var body1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], _fonts.NotoSans, Breakpoints.large);
+var body1 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:400;font-size:14px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.body1 = body1;
-var body2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:16px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
+var body2 = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:14px;line-height:140%;letter-spacing:0;}"], _fonts.NotoSans, Breakpoints.large);
 exports.body2 = body2;
-var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:700;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){font-weight:600;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
+var button = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.75px;@media (max-width:", "){line-height:140%;letter-spacing:0.25px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.button = button;
-var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:14px;line-height:150%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], _fonts.NotoSans, Breakpoints.large);
+var caption = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:600;font-size:12px;line-height:140%;letter-spacing:0.25px;@media (max-width:", "){font-size:12px;letter-spacing:0px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.caption = caption;
-var overline = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:500;font-size:12px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:10px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
+var overline = (0, _styledComponents.css)(["font-family:", ",sans-serif;font-weight:500;font-size:11px;line-height:140%;letter-spacing:1.5px;@media (max-width:", "){font-size:11px;letter-spacing:0.2px;}"], _fonts.NotoSans, Breakpoints.large);
 exports.overline = overline;
 var variantCssMapping = (_variantCssMapping = {}, _variantCssMapping['headline1'] = headline1, _variantCssMapping['headline2'] = headline2, _variantCssMapping['headline3'] = headline3, _variantCssMapping['headline4'] = headline4, _variantCssMapping['headline5'] = headline5, _variantCssMapping['headline6'] = headline6, _variantCssMapping['subtitle1'] = subtitle1, _variantCssMapping['subtitle2'] = subtitle2, _variantCssMapping['body1'] = body1, _variantCssMapping['body2'] = body2, _variantCssMapping['button'] = button, _variantCssMapping['caption'] = caption, _variantCssMapping['overline'] = overline, _variantCssMapping);
 exports.variantCssMapping = variantCssMapping;

package/lib/Display/Tooltip/Tooltip.d.ts

@@ -9,6 +9,8 @@ export declare type Position = 'top' | 'right' | 'bottom' | 'left';
 interface BaseProps extends HTMLAttributes<HTMLHeadingElement> {
     classes?: Classes;
     position?: Position;
+    /** delay before showing the tooltip on hover */
+    hoverOpenDelay?: number;
 }
 export interface StringTooltip extends BaseProps {
     text: string;

package/lib/Display/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TooltipStyle = require("./TooltipStyle");
-var _excluded = ["classes", "children", "text", "textAsString", "position"];
+var _excluded = ["classes", "children", "text", "textAsString", "position", "hoverOpenDelay"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 var Tooltip = function Tooltip(_ref) {
@@ -19,8 +19,11 @@ var Tooltip = function Tooltip(_ref) {
     textAsString = _ref.textAsString,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'top' : _ref$position,
+    _ref$hoverOpenDelay = _ref.hoverOpenDelay,
+    hoverOpenDelay = _ref$hoverOpenDelay === void 0 ? 300 : _ref$hoverOpenDelay,
     defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var contentRef = (0, _react.useRef)(null);
+  var hoverTimeoutRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     isShow = _useState[0],
     setIsShow = _useState[1];
@@ -30,6 +33,25 @@ var Tooltip = function Tooltip(_ref) {
   var hideTooltip = function hideTooltip() {
     return setIsShow(false);
   };
+  var clearHoverTimeout = function clearHoverTimeout() {
+    if (!hoverTimeoutRef.current) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = null;
+  };
+  (0, _react.useEffect)(function () {
+    return clearHoverTimeout;
+  }, []);
+  var showTooltipAfterDelay = function showTooltipAfterDelay() {
+    if (hoverTimeoutRef.current || isShow) return;
+    if (hoverOpenDelay <= 0) {
+      showTooltip();
+      return;
+    }
+    hoverTimeoutRef.current = setTimeout(function () {
+      hoverTimeoutRef.current = null;
+      showTooltip();
+    }, hoverOpenDelay);
+  };
   var hideTooltipIfTouchOutside = (0, _react.useCallback)(function (event) {
     var hasTouchedOutsideOfTooltipContent = contentRef.current && !contentRef.current.contains(event.target);
     if (hasTouchedOutsideOfTooltipContent) {
@@ -54,8 +76,11 @@ var Tooltip = function Tooltip(_ref) {
     // On mobile, it shows the tooltip on touch and hides the tooltip when the touch is released
     ,
     onTouchStart: handleTouchStart,
-    onMouseOver: showTooltip,
-    onMouseLeave: hideTooltip
+    onMouseOver: showTooltipAfterDelay,
+    onMouseLeave: function onMouseLeave() {
+      clearHoverTimeout();
+      hideTooltip();
+    }
   }, defaultProps), isShow && /*#__PURE__*/_react["default"].createElement(_TooltipStyle.TooltipContent, {
     ref: contentRef,
     className: (0, _classnames["default"])('aries-tooltip-content', classes.content),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.1.80",
+  "version": "4.1.81",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",