@telefonica/mistica 12.5.0 → 12.6.0

package/dist/tooltip.js

@@ -6,11 +6,14 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTransitionGroup = require("react-transition-group");
 var _hooks = require("./hooks");
 var _portal = require("./portal");
 var _overlay = _interopRequireDefault(require("./overlay"));
+var _text = require("./text");
 var key = _interopRequireWildcard(require("./utils/key-codes"));
 var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -142,11 +145,16 @@ function _unsupportedIterableToArray(o, minLen) {
 var defaultPositionDesktop = "bottom";
 var defaultPositionMobile = "top";
 var arrowSize = 12;
-var distanceToTarget = 8 + arrowSize;
+var distanceToTarget = 4 + arrowSize;
 var marginLeftRightMobile = 16;
 var defaultWidthDesktop = 340;
 var arrowWrapperWidth = arrowSize * 2;
 var arrowWrapperHeight = arrowSize;
+var transitionDurationMs = 500;
+var animationMovement = 12;
+var animationTiming = "cubic-bezier(0.215, 0.61, 0.355, 1)";
+var defaultShowTooltipDelayMs = 500;
+var noOp = function noOp() {};
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
@@ -158,7 +166,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2
         },
         arrowTop: {
@@ -207,42 +215,142 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             left: 16,
             width: "auto",
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            padding: 16,
+            padding: 8,
             backgroundColor: theme.colors.backgroundContainer,
-            zIndex: 12,
-            border: "1px solid ".concat(theme.colors.divider),
+            zIndex: 50,
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
+        }
+    };
+});
+var useAnimationStyles = (0, _jss).createUseStyles(function() {
+    return {
+        enter: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(".concat(animationMovement, "px)");
+                }
+                if (position === "top") {
+                    return "translateY(calc(-100% - ".concat(animationMovement, "px))");
+                }
+                if (position === "right") {
+                    return "translateX(".concat(animationMovement, "px) translateY(-50%)");
+                }
+                if (position === "left") {
+                    return "translateX(-".concat(animationMovement, "px) translateY(-50%)");
+                }
+                return "translateY(-".concat(animationMovement, "px)");
+            }
+        },
+        enterActive: {
+            animationName: function animationName(param) {
+                var position = param.position;
+                if (position === "top") return "$fadeInTop";
+                if (position === "bottom") return "$fadeInBottom";
+                return "$fadeInX";
+            },
+            animationFillMode: "both",
+            animationDuration: "".concat(transitionDurationMs, "ms"),
+            animationTimingFunction: animationTiming
+        },
+        enterDone: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "top") return "translateY(-100%)";
+                if (position === "bottom") return "translateY(0)";
+                return "translateY(-50%)";
+            }
         },
-        title: {
-            margin: 0,
-            marginBottom: 12,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        exit: {
+            transform: function transform(param) {
+                var position = param.position;
+                if (position === "bottom") {
+                    return "translateY(0)";
+                }
+                if (position === "top") {
+                    return "translateY(-100%)";
+                }
+                if (position === "right") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                if (position === "left") {
+                    return "translateX(0px) translateY(-50%)";
+                }
+                return "translateY(0px)";
+            },
+            opacity: 1,
+            transition: "opacity 0.3s ".concat(animationTiming)
+        },
+        exitActive: {
+            animation: "$fadeOut 0.3s ".concat(animationTiming, " both")
         },
-        description: {
-            margin: 0,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
+        },
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
+        },
+        "@keyframes fadeInX": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateX(0) translateY(-50%)"
+            }
+        },
+        "@keyframes fadeOut": {
+            from: {
+                opacity: 1
+            },
+            to: {
+                opacity: 0
+            }
         }
     };
 });
 var getWidthDesktop = function getWidthDesktop(customWidth) {
     return customWidth ? customWidth : defaultWidthDesktop;
 };
-var EVENT_THROTTLE_TIME = process.env.NODE_ENV === "test" ? 0 : 200;
 var Tooltip = function Tooltip(_param) {
-    var children = _param.children, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, rest = _objectWithoutProperties(_param, [
+    var children = _param.children, extra = _param.extra, description = _param.description, target = _param.target, title = _param.title, targetLabel = _param.targetLabel, _delay = _param.delay, delay = _delay === void 0 ? true : _delay, rest = _objectWithoutProperties(_param, [
         "children",
+        "extra",
         "description",
         "target",
         "title",
-        "targetLabel"
+        "targetLabel",
+        "delay"
     ]);
     var ref = _slicedToArray(React.useState(false), 2), isVisible = ref[0], setIsVisible = ref[1];
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ariaId = (0, _hooks).useAriaId();
+    var isPointerOver = React.useRef(false);
+    var closeTooltipTimeoutId = React.useRef(null);
+    var showTooltipTimeoutId = React.useRef(null);
+    var targetRef = React.useRef(null);
     var targetBoundingClientRect = React.useRef({
         top: 0,
         right: 0,
@@ -251,10 +359,16 @@ var Tooltip = function Tooltip(_param) {
         width: 0,
         height: 0
     });
-    // This property is needed because safari is making a mess with the events (it has problems
-    // when the overlay layer appears and disappears). This way we ensure that events don't get handled twice
-    var lastChangeTime = React.useRef(0);
+    var getPosition = function getPosition() {
+        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
+        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
+    };
+    var position1 = getPosition(rest.position);
     var classes = useStyles();
+    var animationClasses = useAnimationStyles({
+        position: position1
+    });
+    var isTouchableDevice = typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false;
     var closeTooltip = function closeTooltip() {
         if (isVisible) {
             setIsVisible(false);
@@ -267,23 +381,16 @@ var Tooltip = function Tooltip(_param) {
         };
     });
     var handleClickOutside = function handleClickOutside() {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
         setIsVisible(false);
     };
-    var toggleVisibility = function toggleVisibility(e) {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
-        targetBoundingClientRect.current = e.currentTarget.getBoundingClientRect();
+    var toggleVisibility = function toggleVisibility() {
+        if (!targetRef.current) return;
+        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
         setIsVisible(!isVisible);
     };
-    var handleFocus = function handleFocus(e) {
+    var handleFocus = function handleFocus() {
         if (!isVisible) {
-            toggleVisibility(e);
+            toggleVisibility();
         }
     };
     var handleKeyDown = function handleKeyDown(event) {
@@ -292,22 +399,19 @@ var Tooltip = function Tooltip(_param) {
         }
     };
     var getContainerPosition = function getContainerPosition(position, width) {
+        if (typeof window === "undefined") {
+            return {};
+        }
         var containerPos = {
             right: {
                 left: targetBoundingClientRect.current.right + distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             left: {
                 left: targetBoundingClientRect.current.left - width - distanceToTarget,
-                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2,
-                transform: "translateY(-50%)",
-                WebKitTransform: "translateY(-50%)"
+                top: window.pageYOffset + targetBoundingClientRect.current.top + targetBoundingClientRect.current.height / 2
             },
             top: {
-                transform: "translateY(-100%)",
-                WebKitTransform: "translateY(-100%)",
                 top: window.pageYOffset + targetBoundingClientRect.current.top - distanceToTarget,
                 left: isTabletOrSmaller ? marginLeftRightMobile : window.pageXOffset + targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - width / 2
             },
@@ -318,10 +422,6 @@ var Tooltip = function Tooltip(_param) {
         };
         return containerPos[position];
     };
-    var getPosition = function getPosition() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
     var getCustomStylesForMobile = function getCustomStylesForMobile() {
         return isTabletOrSmaller ? {
             left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
@@ -330,7 +430,6 @@ var Tooltip = function Tooltip(_param) {
     var getWidth = function getWidth() {
         return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
     };
-    var position1 = getPosition(rest.position);
     var width1 = getWidth();
     var classNameByPosition = {
         top: classes.arrowTop,
@@ -341,8 +440,38 @@ var Tooltip = function Tooltip(_param) {
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                ref: targetRef,
                 className: classes.wrapper,
-                onPointerDown: toggleVisibility,
+                onPointerOver: function onPointerOver() {
+                    if (closeTooltipTimeoutId.current) {
+                        clearTimeout(closeTooltipTimeoutId.current);
+                        closeTooltipTimeoutId.current = null;
+                    }
+                    if (isPointerOver.current) return;
+                    isPointerOver.current = true;
+                    if (delay) {
+                        showTooltipTimeoutId.current = setTimeout(function() {
+                            showTooltipTimeoutId.current = null;
+                            toggleVisibility();
+                        }, defaultShowTooltipDelayMs);
+                    } else {
+                        toggleVisibility();
+                    }
+                },
+                onPointerLeave: isTouchableDevice ? noOp : function() {
+                    if (showTooltipTimeoutId.current) {
+                        clearTimeout(showTooltipTimeoutId.current);
+                        showTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        return;
+                    }
+                    closeTooltipTimeoutId.current = setTimeout(function() {
+                        if (!isPointerOver.current) return;
+                        closeTooltipTimeoutId.current = null;
+                        isPointerOver.current = false;
+                        toggleVisibility();
+                    }, 100);
+                },
                 onFocus: handleFocus,
                 onKeyDown: handleKeyDown,
                 "touch-action": "auto" // Prop needed for Pointer Events Polyfill to work properly
@@ -354,40 +483,67 @@ var Tooltip = function Tooltip(_param) {
                 "aria-label": targetLabel,
                 children: target
             }),
-            isVisible && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_portal.Portal, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
+                    isVisible && isTouchableDevice && /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                         onPress: handleClickOutside
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-                        role: "tooltip",
-                        id: ariaId,
-                        className: classes.container,
-                        style: _objectSpread({
-                            width: width1
-                        }, getContainerPosition(position1, width1)),
-                        children: [
-                            /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
-                                style: getCustomStylesForMobile(),
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                                    className: classes.arrow
-                                })
-                            }),
-                            (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
-                                children: [
-                                    title && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.title,
-                                        children: title
-                                    }),
-                                    description && /*#__PURE__*/ (0, _jsxRuntime).jsx("p", {
-                                        className: classes.description,
-                                        children: description
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactTransitionGroup.CSSTransition, {
+                        in: isVisible,
+                        timeout: transitionDurationMs,
+                        classNames: {
+                            enter: animationClasses.enter,
+                            enterActive: animationClasses.enterActive,
+                            enterDone: animationClasses.enterDone,
+                            exit: animationClasses.exit,
+                            exitActive: animationClasses.exitActive
+                        },
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+                            role: "tooltip",
+                            id: ariaId,
+                            className: classes.container,
+                            style: _objectSpread({
+                                width: width1
+                            }, getContainerPosition(position1, width1)),
+                            onPointerOver: function onPointerOver() {
+                                if (closeTooltipTimeoutId.current) {
+                                    clearTimeout(closeTooltipTimeoutId.current);
+                                    closeTooltipTimeoutId.current = null;
+                                }
+                            },
+                            onPointerLeave: isTouchableDevice ? noOp : function() {
+                                closeTooltipTimeoutId.current = setTimeout(function() {
+                                    if (!isPointerOver.current) return;
+                                    closeTooltipTimeoutId.current = null;
+                                    isPointerOver.current = false;
+                                    toggleVisibility();
+                                }, 100);
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                    className: (0, _classnames).default(classes.arrowWrapper, classNameByPosition[position1]),
+                                    style: getCustomStylesForMobile(),
+                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                                        className: classes.arrow
                                     })
-                                ]
-                            }),
-                            children
-                        ]
+                                }),
+                                (title || description) && /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+                                    space: 4,
+                                    children: [
+                                        title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            medium: true,
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                                            regular: true,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                extra || children
+                            ]
+                        })
                     })
                 ]
             })

package/dist/tooltip.js.flow

@@ -4,12 +4,14 @@ import * as React from "react";
 declare type Position = "top" | "bottom" | "left" | "right";
 declare type Props = {
   children?: React.Node,
+  extra?: React.Node,
   description?: string,
   target: React.Node,
   title?: string,
   position?: Position,
   width?: number,
   targetLabel: string,
+  delay?: boolean,
 };
 declare var Tooltip: React.ComponentType<Props>;
 declare export default typeof Tooltip;

package/dist/touchable.d.ts

@@ -21,6 +21,7 @@ interface CommonProps {
     role?: string;
     type?: 'button' | 'submit';
     tabIndex?: number;
+    as?: 'a';
 }
 export interface PropsHref extends CommonProps {
     href: string;

package/dist/touchable.js

@@ -237,7 +237,12 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }));
     }
     if (props.onPress) {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsx("button", _objectSpread({}, commonProps, {
+        var _as;
+        var elementType = (_as = props.as) !== null && _as !== void 0 ? _as : "button";
+        var _role;
+        var role = (_role = commonProps.role) !== null && _role !== void 0 ? _role : props.as === "a" ? "button" : undefined;
+        return /*#__PURE__*/ React.createElement(elementType, _objectSpread({}, commonProps, {
+            role: role,
             // this "form" attribute is useful when the form's submit button
             // is located outside the <form> element, for example if you use
             // a ButtonFixedFooter layout inside a form with the submit

package/dist/touchable.js.flow

@@ -26,6 +26,7 @@ declare type CommonProps = {
   role?: string,
   type?: "button" | "submit",
   tabIndex?: number,
+  as?: "a",
 };
 export type PropsHref = {
   ...$Exact<CommonProps>,

package/dist-es/dialog.js

@@ -137,11 +137,12 @@ import { isWebViewBridgeAvailable, nativeConfirm, nativeAlert } from "@tef-novum
 import ThemeContext from "./theme-context";
 import { useTheme, useScreenSize } from "./hooks";
 import ButtonLayout from "./button-layout";
-import { Text5, Text3 } from "./text";
+import { Text5, Text4, Text3 } from "./text";
 import { ESC } from "./utils/key-codes";
 import Box from "./box";
 import { isOldChrome, isRunningAcceptanceTest } from "./utils/platform";
 import { useSetModalState } from "./modal-context-provider";
+import { pxToRem } from "./utils/css";
 import Stack from "./stack";
 var animationsSupported = function(platformOverrides) {
     return !isOldChrome(platformOverrides) && process.env.NODE_ENV !== "test" && !isRunningAcceptanceTest(platformOverrides);
@@ -233,7 +234,10 @@ var useDialogStyles = createUseStyles(function(theme) {
         dialogContainer: {
             width: "calc(100vw - 48px)",
             margin: "auto",
-            padding: "48px 24px 24px"
+            padding: function(param) {
+                var isDialog = param.isDialog;
+                return isDialog ? "40px 24px 24px" : 24;
+            }
         }
     });
 });
@@ -241,9 +245,8 @@ var Dialog = function(props) {
     var ref = useTheme(), texts = ref.texts, colors = ref.colors;
     var className = props.className, title = props.title, message = props.message, icon = props.icon, extra = props.extra, _cancelText = props.cancelText, cancelText = _cancelText === void 0 ? texts.dialogCancelButton : _cancelText, _acceptText = props.acceptText, acceptText = _acceptText === void 0 ? texts.dialogAcceptButton : _acceptText, handleCancel = props.onCancel, handleAccept = props.onAccept, _showCancel = props.showCancel, showCancel = _showCancel === void 0 ? false : _showCancel, _destructive = props.destructive, destructive = _destructive === void 0 ? false : _destructive;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var withSecondaryButton = showCancel && !!handleCancel;
     var classes = useDialogStyles({
-        withSecondaryButton: withSecondaryButton
+        isDialog: !!props.forceWeb
     });
     var mainButtonProps = {
         onPress: handleAccept ? handleAccept : function() {},
@@ -257,15 +260,29 @@ var Dialog = function(props) {
         children: [
             icon && /*#__PURE__*/ _jsx(Box, {
                 paddingBottom: 24,
-                children: icon
+                children: /*#__PURE__*/ React.cloneElement(icon, {
+                    size: pxToRem(isTabletOrSmaller ? 40 : 64)
+                })
             }),
             title && /*#__PURE__*/ _jsx(Box, {
                 paddingBottom: 16,
-                children: /*#__PURE__*/ _jsx(Text5, {
+                children: props.forceWeb ? /*#__PURE__*/ _jsx(Text5, {
+                    as: "h2",
+                    children: title
+                }) : /*#__PURE__*/ _jsx(Text4, {
+                    regular: true,
                     as: "h2",
                     children: title
                 })
             }),
+            props.subtitle && /*#__PURE__*/ _jsx(Box, {
+                paddingBottom: 16,
+                children: /*#__PURE__*/ _jsx(Text4, {
+                    regular: true,
+                    as: "h2",
+                    children: props.subtitle
+                })
+            }),
             /*#__PURE__*/ _jsx("div", {
                 className: classes.dialogContent,
                 children: /*#__PURE__*/ _jsxs(Stack, {
@@ -273,7 +290,7 @@ var Dialog = function(props) {
                     children: [
                         /*#__PURE__*/ _jsx(Text3, {
                             color: colors.textSecondary,
-                            light: true,
+                            regular: true,
                             children: message
                         }),
                         extra
@@ -283,6 +300,7 @@ var Dialog = function(props) {
             /*#__PURE__*/ _jsx(Box, {
                 paddingTop: isTabletOrSmaller ? 24 : 32,
                 children: /*#__PURE__*/ _jsxs(ButtonLayout, {
+                    link: props.forceWeb ? props.link : undefined,
                     children: [
                         destructive ? /*#__PURE__*/ _jsx(ButtonDanger, _objectSpread({
                             tabIndex: 1
@@ -396,10 +414,13 @@ var ModalDialog = function(props) {
     ]);
     var handleClose = props.showCancel ? handleCancel : handleAccept;
     var handleOverlayPress = React.useCallback(function(event) {
-        handleClose();
-        event.stopPropagation();
+        if (props.showClose) {
+            handleClose();
+            event.stopPropagation();
+        }
     }, [
-        handleClose
+        handleClose,
+        props.showClose
     ]);
     var handleKeyDown = React.useCallback(function(event) {
         if (event.keyCode === ESC) {
@@ -473,7 +494,7 @@ var ModalDialog = function(props) {
                                 closed: isClosing
                             }),
                             children: [
-                                /*#__PURE__*/ _jsx("div", {
+                                props.showClose && /*#__PURE__*/ _jsx("div", {
                                     className: classes.modalCloseButtonContainer,
                                     children: /*#__PURE__*/ _jsx(IconButton, {
                                         onPress: handleClose,
@@ -611,13 +632,14 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
 }(React.Component);
 export { DialogRoot as default };
 var showDialog = function(param) {
-    var showCancel = param.showCancel, forceWeb = param.forceWeb;
+    var showCancel = param.showCancel, showClose = param.showClose, forceWeb = param.forceWeb;
     return function(props) {
         if (!dialogInstance) {
             throw Error("Tried to show a dialog but the DialogRoot component was not mounted (mount <ThemeContextProvider>)");
         }
         dialogInstance.show(_objectSpread({
             showCancel: showCancel,
+            showClose: showClose,
             forceWeb: forceWeb
         }, props));
     };
@@ -626,17 +648,20 @@ var showDialog = function(param) {
  * Shows alert dialog with supplied props
  */ export var alert = showDialog({
     showCancel: false,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 /**
  * Shows confirm dialog with supplied props
  */ export var confirm = showDialog({
     showCancel: true,
-    forceWeb: false
+    forceWeb: false,
+    showClose: false
 });
 /**
  * Shows dialog with supplied props
  */ export var dialog = showDialog({
     showCancel: false,
-    forceWeb: true
+    forceWeb: true,
+    showClose: true
 });

package/dist-es/index.js

@@ -90,6 +90,7 @@ export { default as IconSuccessVivo } from "./icons/icon-success-vivo";
 export { SkeletonCircle, SkeletonRow, SkeletonLine, SkeletonRectangle, SkeletonText } from "./skeletons";
 export { default as Circle } from "./circle";
 export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport } from "./hooks";
+export { pxToRem } from "./utils/css";
 export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 export { useDocumentVisibility } from "./utils/document-visibility";
 export { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";