@pedidopago/ui 1.3.1 → 1.3.4

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"}

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

@@ -8,11 +8,11 @@ export declare const StyledText: import("@emotion/styled").StyledComponent<{
     color?: import("../..").GlobalColorsProps | (string & {}) | undefined;
     fontSize?: number | "display" | "tiny" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "giant" | undefined;
     fontWeight?: "400" | "700" | "100" | "200" | "300" | "500" | "600" | "800" | "900" | "bold" | "normal" | undefined;
-    fontStyle?: "inherit" | "initial" | "normal" | "italic" | "oblique" | undefined;
+    fontStyle?: "inherit" | "initial" | "italic" | "normal" | "oblique" | undefined;
     lineHeight?: string | number | undefined;
     textAlign?: "center" | "end" | "start" | undefined;
     textTransform?: "none" | "capitalize" | "lowercase" | "uppercase" | undefined;
-    textDecoration?: "none" | "line-through" | "underline" | undefined;
+    textDecoration?: "none" | "underline" | "line-through" | undefined;
     letterSpacing?: string | number | undefined;
     children?: import("react").ReactNode;
 } & {

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { default as Grid } from './components/Grid';
 export { default as Icon } from './components/Icon';
 export { type IconName } from './components/Icon/types';
 export { default as IconItem } from './components/IconItem';
+export { ReactPortal } from './components/ReactPortal';
 export { default as Label } from './components/Label';
 export { default as List } from './components/List';
 export { Modal } from './components/Modal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -17,6 +17,7 @@ var _exportNames = {
   Grid: true,
   Icon: true,
   IconItem: true,
+  ReactPortal: true,
   Label: true,
   List: true,
   Modal: true,
@@ -195,6 +196,12 @@ Object.defineProperty(exports, "Rating", {
     return _Rating.default;
   }
 });
+Object.defineProperty(exports, "ReactPortal", {
+  enumerable: true,
+  get: function get() {
+    return _ReactPortal.ReactPortal;
+  }
+});
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
@@ -312,6 +319,8 @@ var _Icon = _interopRequireDefault(require("./components/Icon"));
 
 var _IconItem = _interopRequireDefault(require("./components/IconItem"));
 
+var _ReactPortal = require("./components/ReactPortal");
+
 var _Label = _interopRequireDefault(require("./components/Label"));
 
 var _List = _interopRequireDefault(require("./components/List"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedidopago/ui",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "description": "Quick build beatiful Pedido Pago apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -91,6 +91,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/react-dom": "^18.0.4",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
     "chromatic": "^5.9.2",