@pedidopago/ui 1.3.0 → 1.3.3

package/dist/components/Toast/components/Toast.js

@@ -23,12 +23,12 @@ var Toast = function Toast(_ref) {
   var type = _ref.type,
       close = _ref.close,
       duration = _ref.duration,
-      message = _ref.message,
+      content = _ref.content,
+      icon = _ref.icon,
       id = _ref.toastId,
-      buttonTitle = _ref.buttonTitle,
-      onButtonClick = _ref.onButtonClick,
       title = _ref.title,
-      position = _ref.position;
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'top-right' : _ref$position;
   (0, _react.useEffect)(function () {
     var timer = setTimeout(function () {
       close(id);
@@ -73,12 +73,11 @@ var Toast = function Toast(_ref) {
     className: "pp-toast-".concat(position),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledToastComponent, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        message: message,
+        content: content,
         title: title,
+        icon: icon,
         variant: "closable",
         type: type,
-        buttonTitle: buttonTitle,
-        onButtonClick: onButtonClick,
         onClose: handleCloseButtonClick
       })
     })

package/dist/components/Toast/contexts/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/contexts/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,YAAY,6CAA0C,CAAC;AAEpE,QAAA,MAAM,aAAa,EAAE,EAiCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/contexts/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,YAAY,6CAA0C,CAAC;AAEpE,QAAA,MAAM,aAAa,EAAE,EAmCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Toast/contexts/ToastProvider.js

@@ -53,9 +53,11 @@ var ToastProvider = function ToastProvider(_ref) {
   var addToast = function addToast(options) {
     var toastOptions = {
       config: _objectSpread(_objectSpread({}, options), {}, {
+        icon: options.icon || 'info',
         duration: options.duration || 5000,
         type: options.type || 'default',
-        position: options.position || 'bottom'
+        position: options.position || 'bottom',
+        onClose: options.onClose || undefined
       }),
       id: Math.random().toString(36).substring(2, 9)
     };

package/dist/components/Toast/toast.test.js

@@ -28,7 +28,7 @@ describe('Toast', function () {
   it('should it render the toast on the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success'
     });
     container.getByText('Show toast').click();
@@ -37,7 +37,7 @@ describe('Toast', function () {
   it('should it render the toast on position top of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top'
     });
@@ -47,7 +47,7 @@ describe('Toast', function () {
   it('should it render the toast on position top-left of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top-left'
     });
@@ -57,7 +57,7 @@ describe('Toast', function () {
   it('should it render the toast on position top-right of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top-right'
     });
@@ -67,7 +67,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom'
     });
@@ -77,7 +77,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom-left of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom-left'
     });
@@ -87,7 +87,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom-right of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom-right'
     });
@@ -99,7 +99,7 @@ describe('Toast', function () {
 
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success'
     });
     container.getByText('Show toast').click();
@@ -114,7 +114,7 @@ describe('Toast', function () {
     var onClose = jest.fn();
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       onClose: onClose
     });
@@ -128,7 +128,7 @@ describe('Toast', function () {
     var onClose = jest.fn();
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       onClose: onClose
     });

package/dist/components/Toast/types.d.ts

@@ -1,28 +1,21 @@
+import { ReactNode } from 'react';
+import { IconName } from '../Icon/types';
 export declare type IToastConfig = {
     title: string;
-    message: string;
+    content: ReactNode;
     position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
     type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
     duration?: number;
-    onClose?: (id: string) => void;
-};
-export declare type IToastConfigOnList = {
-    title: string;
-    message: string;
-    position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-    type: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
-    duration: number;
+    icon?: IconName;
     onClose?: (id: string) => void;
 };
 export declare type IToastList = {
     id: string;
-    config: IToastConfigOnList;
+    config: Required<Omit<IToastConfig, 'onClose'>> & {
+        onClose?: (id: string) => void;
+    };
 };
-export declare type Toast = IToastConfigOnList & {
+export declare type Toast = IToastConfig & {
     toastId: string;
     close: (id: string) => void;
 };

package/dist/components/Toast/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/types.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACxF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACvF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF,oBAAY,KAAK,GAAG,kBAAkB,GAAG;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACxF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,GAAG;QAChD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,oBAAY,KAAK,GAAG,YAAY,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC"}

package/dist/components/Tooltip/components/TooltipLabel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TooltipLabelProps } from '../types';
+export declare function TooltipLabel({ tooltipPositions, handleRepositionTooltip, animationDuration, ...rest }: TooltipLabelProps): JSX.Element;
+//# sourceMappingURL=TooltipLabel.d.ts.map

package/dist/components/Tooltip/components/TooltipLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/components/TooltipLabel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,YAAY,CAAC,EAC3B,gBAAgB,EAChB,uBAAuB,EACvB,iBAAuB,EACvB,GAAG,IAAI,EACR,EAAE,iBAAiB,eAgCnB"}

package/dist/components/Tooltip/components/TooltipLabel.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipLabel = TooltipLabel;
+
+var _react = require("react");
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["tooltipPositions", "handleRepositionTooltip", "animationDuration"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function TooltipLabel(_ref) {
+  var tooltipPositions = _ref.tooltipPositions,
+      handleRepositionTooltip = _ref.handleRepositionTooltip,
+      _ref$animationDuratio = _ref.animationDuration,
+      animationDuration = _ref$animationDuratio === void 0 ? 0.2 : _ref$animationDuratio,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var labelRef = (0, _react.useRef)(null);
+  var animations = {
+    enter: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (labelRef.current) {
+      handleRepositionTooltip(labelRef.current);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledTooltipLabel, _objectSpread(_objectSpread({
+    ref: labelRef,
+    initial: animations.exit,
+    animate: animations.enter,
+    exit: animations.exit,
+    transition: {
+      duration: animationDuration
+    },
+    style: tooltipPositions
+  }, rest), {}, {
+    children: rest.label
+  }));
+}

package/dist/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IInputProps } from './types';
-declare const Tooltip: FC<IInputProps>;
+import { TooltipProps } from './types';
+declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAoF5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuF7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tooltip/index.js

@@ -5,13 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _framerMotion = require("framer-motion");
+
 var _react = require("react");
 
+var _TooltipLabel = require("./components/TooltipLabel");
+
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["position", "maxWidth", "label", "labelColor", "animationDuration", "backgroundColor", "width", "children"];
+var _excluded = ["position", "offset"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -31,94 +41,101 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Tooltip = function Tooltip(_ref) {
   var _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'top' : _ref$position,
-      _ref$maxWidth = _ref.maxWidth,
-      maxWidth = _ref$maxWidth === void 0 ? '280px' : _ref$maxWidth,
-      label = _ref.label,
-      labelColor = _ref.labelColor,
-      _ref$animationDuratio = _ref.animationDuration,
-      animationDuration = _ref$animationDuratio === void 0 ? 0.2 : _ref$animationDuratio,
-      backgroundColor = _ref.backgroundColor,
-      width = _ref.width,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      position = _ref$position === void 0 ? 'bottom' : _ref$position,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 10 : _ref$offset,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       showTooltip = _useState2[0],
       setShowTooltip = _useState2[1];
 
-  var motionDiv = (0, _react.useRef)(null);
-  var componentDiv = (0, _react.useRef)(null);
-
-  function positionTooltip() {
-    var tooltip = motionDiv.current;
-    var container = componentDiv.current;
-
-    if (tooltip !== null && container !== null) {
-      var tooltipDimensions = tooltip.getBoundingClientRect();
-
-      if (window.innerWidth < 500 && (tooltipDimensions.x < 0 || tooltipDimensions.x > window.innerWidth)) {
-        tooltip.style.top = container.offsetHeight + 5 + 'px';
-        tooltip.style.left = '0px';
-        tooltip.style.right = '0px';
-        tooltip.style.width = 'max-content';
-      } else if (tooltipDimensions.x < 0 && tooltipDimensions.y < 0) {
-        tooltip.style.top = container.offsetHeight + 5 + 'px';
-        tooltip.style.left = '0px';
-      } else if (tooltipDimensions.x < 0) {
-        tooltip.style.left = container.offsetWidth + 5 + 'px';
-        tooltip.style.width = 'max-content';
-        tooltip.style.height = 'max-content';
-      } else if (tooltipDimensions.y < 0 || tooltipDimensions.x > window.innerWidth) {
-        tooltip.style.height = 'max-content';
-        tooltip.style.top = container.offsetHeight + 5 + 'px';
+  var _useState3 = (0, _react.useState)({
+    top: 0,
+    left: 0,
+    transform: ''
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      tooltipPositions = _useState4[0],
+      setTooltipPositions = _useState4[1];
+
+  var tooltipContentRef = (0, _react.useRef)(null);
+
+  function refreshTooltipPosition(newPosition) {
+    if (tooltipContentRef.current) {
+      var tooltipContentRect = tooltipContentRef.current.getBoundingClientRect();
+
+      switch (newPosition) {
+        case 'top':
+          setTooltipPositions({
+            top: tooltipContentRect.top - tooltipContentRect.height - offset,
+            left: tooltipContentRect.left + tooltipContentRect.width / 2,
+            transform: 'translate(-50%, -50%)'
+          });
+          break;
+
+        case 'bottom':
+          setTooltipPositions({
+            top: tooltipContentRect.top + tooltipContentRect.height + offset,
+            left: tooltipContentRect.left + tooltipContentRect.width / 2,
+            transform: 'translateX(-50%)'
+          });
+          break;
+
+        case 'left':
+          setTooltipPositions({
+            top: tooltipContentRect.top + tooltipContentRect.height / 2,
+            left: tooltipContentRect.left - offset,
+            transform: 'translate(-100%, -50%)'
+          });
+          break;
+
+        case 'right':
+          setTooltipPositions({
+            top: tooltipContentRect.top + tooltipContentRect.height / 2,
+            left: tooltipContentRect.left + tooltipContentRect.width + offset,
+            transform: 'translateY(-50%)'
+          });
+          break;
       }
     }
   }
 
-  (0, _react.useEffect)(function () {
-    if (showTooltip) {
-      positionTooltip();
+  function handleRepositionTooltip(element) {
+    var elementRect = element.getBoundingClientRect();
+    var top = elementRect.top,
+        left = elementRect.left,
+        width = elementRect.width,
+        height = elementRect.height;
+
+    if (left < 0) {
+      refreshTooltipPosition('right');
+    } else if (left + width > window.innerWidth) {
+      refreshTooltipPosition('left');
+    } else if (top < 0) {
+      refreshTooltipPosition('bottom');
+    } else if (top + height > window.innerHeight) {
+      refreshTooltipPosition('top');
     }
-  }, [showTooltip]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TooltipComponentWrapper, {
-    position: position,
-    backgroundColor: backgroundColor,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipTarget, {
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
+      ref: tooltipContentRef,
       onMouseEnter: function onMouseEnter() {
-        return setShowTooltip(true);
+        refreshTooltipPosition(position);
+        setShowTooltip(true);
       },
       onMouseLeave: function onMouseLeave() {
-        return setShowTooltip(false);
-      },
-      "data-testid": "tooltip-target",
-      ref: componentDiv,
-      children: children
-    }), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MotionDiv, {
-      initial: {
-        opacity: 0
-      },
-      animate: {
-        opacity: 1
-      },
-      exit: {
-        opacity: 0
-      },
-      transition: {
-        duration: animationDuration
+        setShowTooltip(false);
       },
-      className: "TooltipArea",
-      "data-testid": "tooltip-area",
-      ref: motionDiv,
-      position: position,
-      backgroundColor: backgroundColor,
-      width: width,
-      maxWidth: maxWidth,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
-        labelColor: labelColor,
-        children: label
-      })
+      children: props.children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+      children: showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel.TooltipLabel, _objectSpread({
+        tooltipPositions: tooltipPositions,
+        handleRepositionTooltip: handleRepositionTooltip
+      }, props))
     })]
   });
 };

package/dist/components/Tooltip/styles.d.ts

@@ -1,27 +1,19 @@
 /// <reference types="react" />
-import { IStyleProps } from './types';
-export declare const TooltipComponentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TooltipTarget: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MotionDiv: import("@emotion/styled").StyledComponent<{
+import { TooltipProps } from './types';
+export declare const StyledTooltipLabel: import("@emotion/styled").StyledComponent<{
     slot?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
     translate?: "no" | "yes" | undefined;
+    id?: string | undefined;
     hidden?: boolean | undefined;
     className?: string | undefined;
-    id?: string | undefined;
     lang?: string | undefined;
     role?: import("react").AriaRole | undefined;
     tabIndex?: number | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "both" | "list" | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
     "aria-busy"?: (boolean | "false" | "true") | undefined;
     "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
     "aria-colcount"?: number | undefined;
@@ -262,9 +254,9 @@ export declare const MotionDiv: import("@emotion/styled").StyledComponent<{
     is?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & IStyleProps, {}, {}>;
+} & TooltipProps, {}, {}>;
 export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Tooltip/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAKtC,eAAO,MAAM,uBAAuB;;;uHAmBnC,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAAe,CAAC;AAI1C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAerB,CAAC;AAEF,eAAO,MAAM,cAAc;;;uHAS1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiB7B,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC"}

package/dist/components/Tooltip/styles.js

@@ -3,49 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TooltipWrapper = exports.TooltipTarget = exports.TooltipComponentWrapper = exports.MotionDiv = void 0;
+exports.TooltipWrapper = exports.StyledTooltipLabel = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _util = require("./util");
-
 var _framerMotion = require("framer-motion");
 
-var _react = require("@emotion/react");
+var _getColorValue = require("../../utils/getColorValue");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TooltipComponentWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  position: relative;\n\n  ", "\n\n  .TooltipArea {\n    &::after {\n      display: none;\n      content: '';\n      position: absolute;\n      background-color: ", ";\n      width: 16px;\n      height: 20px;\n      z-index: -1;\n    }\n  }\n"])), _util.FlexPositionController, function (_ref) {
-  var backgroundColor = _ref.backgroundColor,
-      theme = _ref.theme;
-  return backgroundColor || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.black);
+var StyledTooltipLabel = (0, _styled.default)(_framerMotion.motion.div)(function (props) {
+  var parsedBgColor = (0, _getColorValue.getColorValue)(props.bgColor || 'neutral.black', props.theme);
+  var parsedLabelColor = (0, _getColorValue.getColorValue)(props.labelColor || 'neutral.white', props.theme);
+  return "\n    font-family: inherit;\n    font-size: ".concat(props.theme.fontSizes.xxs, ";\n    font-weight: 400;\n    max-width: ", "".concat(props.maxWidth || 260, "px"), ";\n    border-radius: 8px;\n    padding: 12px;\n    color: ").concat(parsedLabelColor, ";\n    background-color: ").concat(parsedBgColor, ";\n    position: fixed;\n    pointer-events: none;\n    z-index: ").concat(props.theme.zIndex.level48, ";\n  ");
 });
+exports.StyledTooltipLabel = StyledTooltipLabel;
 
-exports.TooltipComponentWrapper = TooltipComponentWrapper;
-
-var TooltipTarget = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""]))); // MOTION.DIV class= TooltipArea
-
-
-exports.TooltipTarget = TooltipTarget;
-var MotionDiv = (0, _styled.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref2) {
-  var _ref2$position = _ref2.position,
-      position = _ref2$position === void 0 ? 'right' : _ref2$position,
-      backgroundColor = _ref2.backgroundColor,
-      width = _ref2.width,
-      maxWidth = _ref2.maxWidth,
-      theme = _ref2.theme;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      display: flex;\n      position: absolute;\n      background-color: ", ";\n      justify-content: inherit;\n      align-items: inherit;\n      width: ", ";\n      max-width: ", ";\n      border-radius: ", ";\n      ", ";\n    "])), backgroundColor || (theme.colorMode === 'dark' ? theme.colors.neutral.white : theme.colors.neutral.neutral5), width, maxWidth, theme.borderRadius.default, (0, _util.TooltipAreaPositionController)(position));
-});
-exports.MotionDiv = MotionDiv;
-
-var TooltipWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  height: inherit;\n  overflow: hidden;\n\n  color: ", ";\n  padding: 10px;\n"])), function (_ref3) {
-  var labelColor = _ref3.labelColor,
-      theme = _ref3.theme;
-  return labelColor || (theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white);
-});
+var TooltipWrapper = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n"])));
 
 exports.TooltipWrapper = TooltipWrapper;

package/dist/components/Tooltip/types.d.ts

@@ -1,24 +1,22 @@
 import { ReactNode } from 'react';
-import { ExtendThemeProps } from '../../shared/theme';
-export declare type positionType = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
-export declare type IStyleProps = {
-    width?: string;
-    maxWidth?: string;
+import { GlobalColorsProps } from '../../shared/theme';
+export declare type positionType = 'top' | 'right' | 'bottom' | 'left';
+export declare type TooltipProps = {
     position?: positionType;
-    backgroundColor?: string;
-    labelColor?: string;
-    isTooltipExpanded?: boolean;
-    isLabelString?: boolean;
-    theme?: ExtendThemeProps;
-};
-export declare type IInputProps = {
-    width?: string;
-    maxWidth?: string;
-    position?: positionType;
-    backgroundColor?: string;
-    label?: ReactNode;
-    labelColor?: string;
-    children?: ReactNode;
+    children: React.ReactNode;
+    label: ReactNode;
+    labelColor?: GlobalColorsProps | (string & {});
+    bgColor?: GlobalColorsProps | (string & {});
+    maxWidth?: number;
+    offset?: number;
     animationDuration?: number;
 };
+export declare type TooltipLabelProps = TooltipProps & {
+    tooltipPositions: {
+        top: number;
+        left: number;
+        transform: string;
+    };
+    handleRepositionTooltip: (element: HTMLDivElement) => void;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,oBAAY,YAAY,GACpB,WAAW,GACX,KAAK,GACL,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF,oBAAY,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,oBAAY,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE/D,oBAAY,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,oBAAY,iBAAiB,GAAG,YAAY,GAAG;IAC7C,gBAAgB,EAAE;QAChB,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,uBAAuB,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5D,CAAC"}