@pedidopago/ui 1.2.5 → 1.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAkGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IA6DxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAoB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAyB3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAoGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}

package/dist/components/Table/styles.js

@@ -17,7 +17,28 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var StyledTable = _styled.default.table(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral6, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.primary.focus, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: hsla(156, 13%, 92%, 0.5);\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n        &:nth-child(even) {\n          background: hsla(150, 16%, 97%, 0.75);\n        }\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], theme.colors.primary.focus, {
+    dark: theme.colors.neutral.neutral6,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], theme.colors.neutral.neutral5);
 });
 
 exports.StyledTable = StyledTable;
@@ -28,7 +49,22 @@ exports.SelectedHeader = SelectedHeader;
 
 var ActionsButton = _styled.default.button(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral5, theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white, theme.transition.speed, theme.colors.neutral.black, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral3, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode], theme.colors.neutral.neutral5, {
+    dark: theme.colors.neutral.black,
+    light: theme.colors.neutral.white
+  }[theme.colorMode], theme.transition.speed, theme.colors.neutral.black, {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral3
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral5,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode], {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral2
+  }[theme.colorMode]);
 });
 
 exports.ActionsButton = ActionsButton;
@@ -47,8 +83,9 @@ exports.VerticalPointsButton = VerticalPointsButton;
 
 var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);\n  right: ", "px;\n  top: ", "px;\n  padding: 10px;\n\n  z-index: ", ";\n"])), function (props) {
   return props.isOpen ? 'block' : 'none';
-}, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral5 : props.theme.colors.neutral.white;
+}, function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.neutral.white;
 }, function (props) {
   return props.posRight ? props.posRight : 0;
 }, function (props) {
@@ -59,12 +96,20 @@ var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject
 
 exports.MenuItemContainer = MenuItemContainer;
 
-var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    dark: theme.colors.neutral.white,
+    light: theme.colors.neutral.black
+  }[theme.colorMode];
 }, function (props) {
   return props.theme.transition.speed;
-}, function (props) {
-  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral4 : props.theme.colors.neutral.neutral1;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    dark: theme.colors.neutral.neutral4,
+    light: theme.colors.neutral.neutral1
+  }[theme.colorMode];
 });
 
 exports.MenuItemContent = MenuItemContent;

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

@@ -8,6 +8,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     size?: string | undefined;
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;
@@ -294,6 +295,7 @@ export declare const Text: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;
@@ -582,6 +584,7 @@ export declare const Close: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: {
         fontSizes: {
+            tiny: string;
             xxxs: string;
             xxs: string;
             xs: string;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoBnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GASjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA2BjB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yGAoBnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAGN,OAAO;2GASjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qHA2BjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CA2E1B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CAyE1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

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;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAsF5B,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,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _framerMotion = require("framer-motion");
+
 var _react = require("react");
 
-var _theme = require("../../shared/theme");
+var _TooltipLabel = require("./components/TooltipLabel");
 
 var _styles = require("./styles");
 
-var _componenteTeste = require("./componenteTeste");
-
 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; }
 
@@ -41,100 +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,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? 'Testin' : _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);
-
-  var _useTheme = (0, _theme.useTheme)(),
-      theme = _useTheme.theme;
+      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 tooltipInitialValues = _objectSpread({}, tooltip);
-
-    var container = componentDiv.current;
-
-    if (tooltip !== null && container !== null) {
-      var tooltipDimensions = tooltip.getBoundingClientRect();
-      tooltip.style = _objectSpread({}, tooltipInitialValues.style);
-
-      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';
-      } 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';
-        tooltip.style.left = container.offsetWidth / 2 - tooltip.offsetWidth / 2 + '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 () {
-    positionTooltip();
-  }, [showTooltip]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.TooltipComponentWrapper, {
-    position: position,
-    backgroundColor: backgroundColor,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipTarget, {
+  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');
+    }
+  }
+
+  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 || /*#__PURE__*/(0, _jsxRuntime.jsx)(_componenteTeste.ComponentTeste, {})
-    }), 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,
-      isLabelString: typeof label === 'string' && label.length > 0,
-      width: width,
-      maxWidth: maxWidth,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.TooltipWrapper, {
-        labelColor: labelColor,
-        children: label || /*#__PURE__*/(0, _jsxRuntime.jsx)(_componenteTeste.TesteComponent, {
-          theme: theme
-        })
-      })
+      children: props.children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.AnimatePresence, {
+      children: showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel.TooltipLabel, _objectSpread({
+        tooltipPositions: tooltipPositions,
+        handleRepositionTooltip: handleRepositionTooltip
+      }, props))
     })]
   });
 };