@telefonica/mistica 12.5.0 → 12.6.0

package/dist-es/navigation-bar.js

@@ -355,8 +355,6 @@ var BurgerMenuIcon = function(param) {
 };
 var NAVBAR_ZINDEX = 25;
 var BURGER_ZINDEX = 26;
-var DESKTOP_NAVBAR_HEIGHT = 80;
-var MOBILE_NAVBAR_HEIGHT = 56;
 var BURGER_MENU_ANIMATION_DURATION_MS = 300;
 var useStyles = createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
@@ -383,7 +381,7 @@ var useStyles = createUseStyles(function(theme) {
                 var isInverse = param.isInverse;
                 return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
             },
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             padding: "16px 0",
             borderBottomStyle: "solid",
             borderBottomWidth: function(param) {
@@ -400,11 +398,11 @@ var useStyles = createUseStyles(function(theme) {
                 var isMenuOpen = param.isMenuOpen, isInverse = param.isInverse;
                 return isMenuOpen || isInverse && !theme.isDarkMode ? "transparent" : theme.colors.divider;
             },
-            height: MOBILE_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerMobileHeight,
             padding: "8px 0"
         }),
         section: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             display: "flex",
             alignItems: "center",
             padding: "0 8px",
@@ -425,17 +423,17 @@ var useStyles = createUseStyles(function(theme) {
             }
         },
         spacer: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT
+            height: theme.dimensions.headerDesktopHeight
         }, theme.mq.tabletOrSmaller, {
-            height: MOBILE_NAVBAR_HEIGHT
+            height: theme.dimensions.headerMobileHeight
         }),
         burgerMenu: {
             zIndex: BURGER_ZINDEX,
             position: "fixed",
-            top: MOBILE_NAVBAR_HEIGHT,
+            top: theme.dimensions.headerMobileHeight,
             left: 0,
             right: 0,
-            height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
+            height: "calc(100vh - ".concat(theme.dimensions.headerMobileHeight, "px)"),
             overflowY: "auto",
             background: theme.colors.background,
             boxShadow: function(param) {

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "12.5.0";
+export var PACKAGE_VERSION = "12.6.0";

package/dist-es/text-field-base.js

@@ -104,8 +104,8 @@ import * as React from "react";
 import { createUseStyles } from "./jss";
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from "./text-field-components";
 import { Text3 } from "./text";
-import { isIos, isRunningAcceptanceTest, isFirefox } from "./utils/platform";
-import { useAriaId, useTheme, useScreenSize } from "./hooks";
+import { isIos, isRunningAcceptanceTest, isFirefox, isSafari } from "./utils/platform";
+import { useAriaId, useTheme, useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import classNames from "classnames";
 import { combineRefs } from "./utils/common";
 var commonInputStyles = function(theme) {
@@ -270,7 +270,10 @@ var useStyles = createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: "baseline",
+            alignSelf: function(param) {
+                var prefixAlignSelf = param.prefixAlignSelf;
+                return prefixAlignSelf;
+            },
             paddingTop: function(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -315,7 +318,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "fullWidth"
     ]);
     var id = useAriaId(idProp);
-    var _$ref3 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref3[0], setInputState = _$ref3[1];
+    var _$ref4 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref4[0], setInputState = _$ref4[1];
     var colors = useTheme().colors;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var _$ref1;
@@ -324,6 +327,18 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // this shrinkLabel override is a workaround because I was unable to find a way to hide date
     // and date-time native placeholders when the input is not required
     var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
+    var _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
+    useIsomorphicLayoutEffect(function() {
+        /**
+             * Safari check to workaround https://jira.tid.es/browse/WEB-648
+             * For some reason it is super hard to align the prefix text with the input text
+             * and get the same result in chrome and safari
+             *
+             * Using an effect to set the style to avoid problems with SSR
+             */ if (isSafari()) {
+            setPrefixAlignSelf("initial");
+        }
+    }, []);
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -334,7 +349,8 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         prefix: prefix,
         multiline: multiline,
         type: rest.type,
-        disabled: rest.disabled
+        disabled: rest.disabled,
+        prefixAlignSelf: prefixAlignSelf
     });
     React.useEffect(function() {
         if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
@@ -500,10 +516,10 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
         "getSuggestions",
         "id"
     ]);
-    var _$ref5 = _slicedToArray(React.useState([]), 2), suggestions = _$ref5[0], setSuggestions = _$ref5[1];
+    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
     var inputRef = React.useRef(null);
     var classes = useSuggestionsStyles();
-    var _$ref4 = useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
+    var _$ref5 = useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
     var id = useAriaId(idProp);
     var autoSuggestId = useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {

package/dist-es/text-link.js

@@ -54,6 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import { jsx as _jsx } from "react/jsx-runtime";
+// Specs: https://www.figma.com/file/koROdh3HpEPG2O8jG52Emh/Buttons-Component-Specs?node-id=0%3A1
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
@@ -69,7 +70,7 @@ var useStyles = createUseStyles(function(param) {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
-            display: "inline-block",
+            display: "inline",
             color: colors.textLink,
             wordBreak: "break-word",
             cursor: "pointer"
@@ -123,6 +124,7 @@ var TextLink = function(_param) {
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+        as: props.onPress ? "a" : undefined,
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),

package/dist-es/theme.js

@@ -204,7 +204,8 @@ export var getTexts = function(locale) {
     }
 };
 export var dimensions = {
-    headerMobileHeight: 56
+    headerMobileHeight: 56,
+    headerDesktopHeight: 80
 };
 export var mediaQueriesConfig = {
     tabletMinWidth: 768,

package/dist-es/tooltip.js

@@ -102,19 +102,27 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import classnames from "classnames";
+import { CSSTransition } from "react-transition-group";
 import { useAriaId, useScreenSize } from "./hooks";
 import { Portal } from "./portal";
 import Overlay from "./overlay";
+import { Text2 } from "./text";
 import * as key from "./utils/key-codes";
 import { createUseStyles } from "./jss";
+import Stack from "./stack";
 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() {};
 var useStyles = createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
@@ -126,7 +134,7 @@ var useStyles = 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: {
@@ -175,42 +183,142 @@ var useStyles = 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 = createUseStyles(function() {
+    return {
+        enter: {
+            transform: function(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(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(param) {
+                var position = param.position;
+                if (position === "top") return "translateY(-100%)";
+                if (position === "bottom") return "translateY(0)";
+                return "translateY(-50%)";
+            }
+        },
+        exit: {
+            transform: function(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")
+        },
+        "@keyframes fadeInBottom": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(0)"
+            }
         },
-        title: {
-            margin: 0,
-            marginBottom: 12,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@keyframes fadeInTop": {
+            from: {
+                opacity: 0
+            },
+            "40%": {
+                opacity: 1
+            },
+            to: {
+                opacity: 1,
+                transform: "translateY(-100%)"
+            }
         },
-        description: {
-            margin: 0,
-            color: theme.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
+        "@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(customWidth) {
     return customWidth ? customWidth : defaultWidthDesktop;
 };
-var EVENT_THROTTLE_TIME = process.env.NODE_ENV === "test" ? 0 : 200;
 var Tooltip = function(_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 = useScreenSize().isTabletOrSmaller;
     var ariaId = 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,
@@ -219,10 +327,16 @@ var Tooltip = function(_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() {
+        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() {
         if (isVisible) {
             setIsVisible(false);
@@ -235,23 +349,16 @@ var Tooltip = function(_param) {
         };
     });
     var handleClickOutside = function() {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
         setIsVisible(false);
     };
-    var toggleVisibility = function(e) {
-        if (Date.now() - lastChangeTime.current < EVENT_THROTTLE_TIME) {
-            return;
-        }
-        lastChangeTime.current = Date.now();
-        targetBoundingClientRect.current = e.currentTarget.getBoundingClientRect();
+    var toggleVisibility = function() {
+        if (!targetRef.current) return;
+        targetBoundingClientRect.current = targetRef.current.getBoundingClientRect();
         setIsVisible(!isVisible);
     };
-    var handleFocus = function(e) {
+    var handleFocus = function() {
         if (!isVisible) {
-            toggleVisibility(e);
+            toggleVisibility();
         }
     };
     var handleKeyDown = function(event) {
@@ -260,22 +367,19 @@ var Tooltip = function(_param) {
         }
     };
     var getContainerPosition = function(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
             },
@@ -286,10 +390,6 @@ var Tooltip = function(_param) {
         };
         return containerPos[position];
     };
-    var getPosition = function() {
-        var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop;
-        return isTabletOrSmaller && (position === "left" || position === "right") ? defaultPositionMobile : position;
-    };
     var getCustomStylesForMobile = function() {
         return isTabletOrSmaller ? {
             left: targetBoundingClientRect.current.left + targetBoundingClientRect.current.width / 2 - marginLeftRightMobile
@@ -298,7 +398,6 @@ var Tooltip = function(_param) {
     var getWidth = function() {
         return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(rest.width);
     };
-    var position1 = getPosition(rest.position);
     var width1 = getWidth();
     var classNameByPosition = {
         top: classes.arrowTop,
@@ -309,8 +408,38 @@ var Tooltip = function(_param) {
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
+                ref: targetRef,
                 className: classes.wrapper,
-                onPointerDown: toggleVisibility,
+                onPointerOver: function() {
+                    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
@@ -322,40 +451,67 @@ var Tooltip = function(_param) {
                 "aria-label": targetLabel,
                 children: target
             }),
-            isVisible && /*#__PURE__*/ _jsxs(Portal, {
+            /*#__PURE__*/ _jsxs(Portal, {
                 children: [
-                    /*#__PURE__*/ _jsx(Overlay, {
+                    isVisible && isTouchableDevice && /*#__PURE__*/ _jsx(Overlay, {
                         onPress: handleClickOutside
                     }),
-                    /*#__PURE__*/ _jsxs("div", {
-                        role: "tooltip",
-                        id: ariaId,
-                        className: classes.container,
-                        style: _objectSpread({
-                            width: width1
-                        }, getContainerPosition(position1, width1)),
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: classnames(classes.arrowWrapper, classNameByPosition[position1]),
-                                style: getCustomStylesForMobile(),
-                                children: /*#__PURE__*/ _jsx("div", {
-                                    className: classes.arrow
-                                })
-                            }),
-                            (title || description) && /*#__PURE__*/ _jsxs(_Fragment, {
-                                children: [
-                                    title && /*#__PURE__*/ _jsx("p", {
-                                        className: classes.title,
-                                        children: title
-                                    }),
-                                    description && /*#__PURE__*/ _jsx("p", {
-                                        className: classes.description,
-                                        children: description
+                    /*#__PURE__*/ _jsx(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__*/ _jsxs("div", {
+                            role: "tooltip",
+                            id: ariaId,
+                            className: classes.container,
+                            style: _objectSpread({
+                                width: width1
+                            }, getContainerPosition(position1, width1)),
+                            onPointerOver: function() {
+                                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__*/ _jsx("div", {
+                                    className: classnames(classes.arrowWrapper, classNameByPosition[position1]),
+                                    style: getCustomStylesForMobile(),
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        className: classes.arrow
                                     })
-                                ]
-                            }),
-                            children
-                        ]
+                                }),
+                                (title || description) && /*#__PURE__*/ _jsxs(Stack, {
+                                    space: 4,
+                                    children: [
+                                        title && /*#__PURE__*/ _jsx(Text2, {
+                                            medium: true,
+                                            children: title
+                                        }),
+                                        description && /*#__PURE__*/ _jsx(Text2, {
+                                            regular: true,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                extra || children
+                            ]
+                        })
                     })
                 ]
             })

package/dist-es/touchable.js

@@ -205,7 +205,12 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }));
     }
     if (props.onPress) {
-        return /*#__PURE__*/ _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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.5.0",
+    "version": "12.6.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -49,6 +49,7 @@
     "acceptanceTests": {
         "devServer": {
             "command": "yarn storybook-for-acceptance-tests",
+            "host": "0.0.0.0",
             "port": 6006
         },
         "ciServer": {