@telefonica/mistica 10.27.0 → 10.29.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [10.29.0](https://github.com/Telefonica/mistica-web/compare/v10.28.1...v10.29.0) (2022-03-15)
+
+
+### Features
+
+* **Touchable:** Added loadOnTop prop ([#440](https://github.com/Telefonica/mistica-web/issues/440)) ([884940f](https://github.com/Telefonica/mistica-web/commit/884940fc1b924fef8f398af1c71313068c0e7ad7))
+
+## [10.28.1](https://github.com/Telefonica/mistica-web/compare/v10.28.0...v10.28.1) (2022-03-09)
+
+
+### Bug Fixes
+
+* **Carousel:** undefined is not an object error in iOS 14 ([#439](https://github.com/Telefonica/mistica-web/issues/439)) ([ef1cf63](https://github.com/Telefonica/mistica-web/commit/ef1cf63a1e7b9009cab28a0bb23b3dd6540defbb))
+* **FixedFooterLayout:** shadow style ([#437](https://github.com/Telefonica/mistica-web/issues/437)) ([d9d9641](https://github.com/Telefonica/mistica-web/commit/d9d9641b101484f8e1d3e5bf9476821cdef517e3))
+* **Popover:** arrow border radius ([#435](https://github.com/Telefonica/mistica-web/issues/435)) ([42eb25e](https://github.com/Telefonica/mistica-web/commit/42eb25ea9e071a38a3b44c1934aef949cfc7c9a5))
+* **Popover:** text styles ([#436](https://github.com/Telefonica/mistica-web/issues/436)) ([4c156cb](https://github.com/Telefonica/mistica-web/commit/4c156cbebae937175a66cf3afb5abfca8051cfd0))
+* **select:** issue with cropped text ([#426](https://github.com/Telefonica/mistica-web/issues/426)) ([2c6e027](https://github.com/Telefonica/mistica-web/commit/2c6e027f643b3458359e6866bc6d9a10afb1e5b4))
+* **Slideshow:** scroll snap stop on android ([#434](https://github.com/Telefonica/mistica-web/issues/434)) ([4ccb6a6](https://github.com/Telefonica/mistica-web/commit/4ccb6a6822a936ae185470bf8bf01bb4224a6626))
+
+# [10.28.0](https://github.com/Telefonica/mistica-web/compare/v10.27.0...v10.28.0) (2022-03-01)
+
+
+### Bug Fixes
+
+* **popover:** Fix size in iOS when rendered offscreen ([#431](https://github.com/Telefonica/mistica-web/issues/431)) ([9cb3a29](https://github.com/Telefonica/mistica-web/commit/9cb3a290ea2b6c434c715bb7c18bca9678c5a006))
+
+
+### Features
+
+* **Carousel:** autoplay only move when carousel is visible ([#430](https://github.com/Telefonica/mistica-web/issues/430)) ([fa74b04](https://github.com/Telefonica/mistica-web/commit/fa74b04e1d6171809ea8a5c1522cb0622b9dfc01))
+
 # [10.27.0](https://github.com/Telefonica/mistica-web/compare/v10.26.0...v10.27.0) (2022-02-25)
 
 

package/dist/button.d.ts

@@ -36,6 +36,7 @@ export interface OnPressButtonProps extends CommonProps {
 export interface HrefButtonProps extends CommonProps {
     href: string;
     newTab?: boolean;
+    loadOnTop?: boolean;
     submit?: undefined;
     fake?: undefined;
     onPress?: undefined;

package/dist/button.js

@@ -442,7 +442,8 @@ var Button = function Button(props) {
     if (props.href || props.href === '') {
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, commonProps, {
             href: props.href,
-            newTab: props.newTab
+            newTab: props.newTab,
+            loadOnTop: props.loadOnTop
         })));
     }
     if (process.env.NODE_ENV !== 'production') {

package/dist/button.js.flow

@@ -41,6 +41,7 @@ export type HrefButtonProps = {
   ...$Exact<CommonProps>,
   href: string,
   newTab?: boolean,
+  loadOnTop?: boolean,
 };
 export type FakeButtonProps = {
   ...$Exact<CommonProps>,

package/dist/carousel.js

@@ -18,6 +18,8 @@ var _themeVariantContext = require("./theme-variant-context");
 var _color = require("./utils/color");
 var _image = require("./image");
 var _dom = require("./utils/dom");
+var _platform = require("./utils/platform");
+var _documentVisibility = require("./utils/document-visibility");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -131,6 +133,11 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+var useShouldAutoplay = function useShouldAutoplay(autoplay, ref) {
+    var isDocumentVisible = (0, _documentVisibility).useDocumentVisibility();
+    var isInViewport = (0, _hooks).useIsInViewport(ref, false);
+    return isInViewport && isDocumentVisible && !!autoplay;
+};
 var useBulletsStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         bullet: _defineProperty({
@@ -268,6 +275,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             }
         })),
         item: (_obj2 = {
+            scrollSnapStop: (0, _platform).isAndroid(theme.platformOverrides) ? 'always' : 'normal',
             scrollSnapAlign: 'start',
             flexShrink: 0,
             width: function width(param) {
@@ -448,12 +456,24 @@ var BaseCarousel = function BaseCarousel(param) {
             };
             var calcItemScrollPositions = function calcItemScrollPositions() {
                 var maxScroll = carouselEl.scrollWidth - carouselEl.clientWidth;
+                var getItemScrollMargin = function getItemScrollMargin(itemIndex) {
+                    if (centered) {
+                        return 0;
+                    }
+                    if (itemIndex === 0) {
+                        return 0;
+                    }
+                    if (isDesktopOrBigger) {
+                        return -gap;
+                    }
+                    return mobilePageOffsetConfig.prev;
+                };
                 setItemScrollPositions(Array.from(carouselEl.querySelectorAll('[data-item]')).map(function(itemEl, idx) {
                     if (idx === items.length - 1) {
                         return maxScroll;
                     }
                     var offsetLeft = itemEl.offsetLeft;
-                    var scrollMargin = Number(getComputedStyle(itemEl).scrollMargin.replace('px', ''));
+                    var scrollMargin = getItemScrollMargin(idx);
                     var scrollPosition = centered && !isDesktopOrBigger ? offsetLeft - itemEl.clientWidth / 2 : offsetLeft;
                     return Math.min(scrollPosition - scrollMargin - carouselEl.offsetLeft, maxScroll);
                 }));
@@ -525,8 +545,9 @@ var BaseCarousel = function BaseCarousel(param) {
     }, [
         scrollPositions
     ]);
+    var shouldAutoplay = useShouldAutoplay(!!autoplay, carouselRef);
     React.useEffect(function() {
-        if (autoplay) {
+        if (shouldAutoplay && autoplay) {
             var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
             var loop = typeof autoplay === 'object' && autoplay.loop;
             var interval = setInterval(function() {
@@ -547,7 +568,8 @@ var BaseCarousel = function BaseCarousel(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight1
+        scrollRight1,
+        shouldAutoplay
     ]);
     var currentPageIndex = calcCurrentPageIndex(scrollLeft1, pagesScrollPositions);
     React.useEffect(function() {
@@ -672,6 +694,7 @@ var useSlideshowStyles = (0, _jss).createUseStyles(function(theme) {
         })),
         item: {
             width: '100%',
+            scrollSnapStop: (0, _platform).isAndroid(theme.platformOverrides) ? 'always' : 'normal',
             scrollSnapAlign: 'start',
             flexShrink: 0
         },
@@ -756,8 +779,9 @@ var Slideshow = function Slideshow(param) {
     }, [
         items.length
     ]);
+    var shouldAutoplay = useShouldAutoplay(!!autoplay, carouselRef);
     React.useEffect(function() {
-        if (autoplay) {
+        if (shouldAutoplay && autoplay) {
             var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
             var loop = typeof autoplay === 'object' && autoplay.loop;
             var interval = setInterval(function() {
@@ -778,7 +802,8 @@ var Slideshow = function Slideshow(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight2
+        scrollRight2,
+        shouldAutoplay
     ]);
     React.useEffect(function() {
         if (onPageChange) {

package/dist/fixed-footer-layout.js

@@ -134,7 +134,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             zIndex: 1
         },
         shadow: {
-            boxShadow: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
+            boxShadow: '0 -3px 8px 0 rgba(0, 0, 0, 0.15)'
         }
     });
 });

package/dist/hooks.d.ts

@@ -17,3 +17,10 @@ export declare const useWindowSize: () => {
 export declare const useWindowHeight: () => number;
 export declare const useWindowWidth: () => number;
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+declare type IntersectionObserverOptions = {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+export declare const useIsInViewport: (ref: React.RefObject<HTMLElement>, defaultValue: boolean, options?: IntersectionObserverOptions | undefined) => boolean;
+export {};

package/dist/hooks.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.useIsomorphicLayoutEffect = exports.useWindowWidth = exports.useWindowHeight = exports.useWindowSize = exports.useAriaId = exports.useElementDimensions = exports.useScreenSize = exports.useDisableBodyScroll = exports.useTheme = void 0;
+exports.useIsInViewport = exports.useIsomorphicLayoutEffect = exports.useWindowWidth = exports.useWindowHeight = exports.useWindowSize = exports.useAriaId = exports.useElementDimensions = exports.useScreenSize = exports.useDisableBodyScroll = exports.useTheme = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _themeContext = _interopRequireDefault(require("./theme-context"));
 var _screenSizeContext = _interopRequireDefault(require("./screen-size-context"));
@@ -217,3 +217,32 @@ var useWindowWidth = function useWindowWidth() {
 exports.useWindowWidth = useWindowWidth;
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+var useIsInViewport = function useIsInViewport(ref, defaultValue, options) {
+    var ref7 = _slicedToArray(React.useState(defaultValue), 2), isInViewport = ref7[0], setIsInViewport = ref7[1];
+    React.useEffect(function() {
+        if (!ref.current) {
+            return;
+        }
+        if (typeof window.IntersectionObserver === 'undefined') {
+            return function() {};
+        }
+        var observer = new IntersectionObserver(function(entries) {
+            setIsInViewport(entries[0].isIntersecting);
+        }, {
+            root: options === null || options === void 0 ? void 0 : options.root,
+            rootMargin: options === null || options === void 0 ? void 0 : options.rootMargin,
+            threshold: options === null || options === void 0 ? void 0 : options.threshold
+        });
+        observer.observe(ref.current);
+        return function() {
+            observer.disconnect();
+        };
+    }, [
+        ref,
+        options === null || options === void 0 ? void 0 : options.root,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold
+    ]);
+    return isInViewport;
+};
+exports.useIsInViewport = useIsInViewport;

package/dist/hooks.js.flow

@@ -19,3 +19,14 @@ declare export var useWindowSize: () => {
 declare export var useWindowHeight: () => number;
 declare export var useWindowWidth: () => number;
 declare export var useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+declare type IntersectionObserverOptions = {
+  root?: Element | Document | null,
+  rootMargin?: string,
+  threshold?: number | Array<number>,
+};
+declare export var useIsInViewport: (
+  ref: React.Ref<HTMLElement>,
+  defaultValue: boolean,
+  options?: IntersectionObserverOptions | void
+) => boolean;
+declare export {};

package/dist/index.d.ts

@@ -87,8 +87,9 @@ export { default as IconError } from './icons/icon-error';
 export { default as IconSuccess } from './icons/icon-success';
 export { default as IconSuccessVivo } from './icons/icon-success-vivo';
 export { default as Circle } from './circle';
-export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, } from './hooks';
+export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport, } from './hooks';
 export type { ThemeConfig, ColorScheme } from './theme';
+export { useDocumentVisibility } from './utils/document-visibility';
 export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 export type { Skin, SkinName } from './skins/types';
 export { VIVO_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN, } from './skins/constants';

package/dist/index.js

@@ -818,6 +818,18 @@ Object.defineProperty(exports, "useWindowWidth", {
         return _hooks.useWindowWidth;
     }
 });
+Object.defineProperty(exports, "useIsInViewport", {
+    enumerable: true,
+    get: function() {
+        return _hooks.useIsInViewport;
+    }
+});
+Object.defineProperty(exports, "useDocumentVisibility", {
+    enumerable: true,
+    get: function() {
+        return _documentVisibility.useDocumentVisibility;
+    }
+});
 Object.defineProperty(exports, "ThemeVariant", {
     enumerable: true,
     get: function() {
@@ -8366,6 +8378,7 @@ var _iconSuccess = _interopRequireDefault(require("./icons/icon-success"));
 var _iconSuccessVivo = _interopRequireDefault(require("./icons/icon-success-vivo"));
 var _circle = _interopRequireDefault(require("./circle"));
 var _hooks = require("./hooks");
+var _documentVisibility = require("./utils/document-visibility");
 var _themeVariantContext = require("./theme-variant-context");
 var _constants = require("./skins/constants");
 var _utils = require("./skins/utils");

package/dist/index.js.flow

@@ -143,8 +143,10 @@ declare export {
   useWindowSize,
   useWindowHeight,
   useWindowWidth,
+  useIsInViewport,
 } from "./hooks";
 export type { ThemeConfig, ColorScheme } from "./theme";
+declare export { useDocumentVisibility } from "./utils/document-visibility";
 declare export {
   ThemeVariant,
   useIsInverseVariant,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.27.0';
+var PACKAGE_VERSION = '10.29.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/popover.js

@@ -132,7 +132,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             left: '50%',
             transform: 'translate(-50%, -50%) rotate(45deg)',
             border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 4,
+            borderRadius: 2,
             boxShadow: function boxShadow(param) {
                 var position = param.position;
                 return position === 'bottom' ? 'initial' : "0 0 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")");
@@ -160,7 +160,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         title: {
             marginBottom: 4,
             color: theme.colors.textPrimary,
-            fontWeight: 500,
+            fontWeight: 400,
             lineHeight: 1.5,
             fontSize: 16
         },
@@ -186,7 +186,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             marginRight: 0
         },
         text: {
-            color: theme.colors.textPrimary,
+            color: theme.colors.textSecondary,
             textAlign: 'left',
             lineHeight: 1.42857142,
             fontSize: 14
@@ -204,8 +204,9 @@ var getPosition = function getPosition() {
     var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop, isTabletOrSmaller = arguments.length > 1 ? arguments[1] : void 0;
     return isTabletOrSmaller && (position === 'left' || position === 'right') ? defaultPositionMobile : position;
 };
-var getWidth = function getWidth(isTabletOrSmaller, width) {
-    return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(width);
+var getWidth = function getWidth(isTabletOrSmaller, isIos, width) {
+    // in iOS, when the webview is rendered offscreen (eg. acccount tab), window.innerWidth value is wrong, it returns strange values like 0 or 80.
+    return isTabletOrSmaller ? (isIos ? window.screen.width : window.innerWidth) - marginLeftRightMobile * 2 : getWidthDesktop(width);
 };
 var getPositionStyles = function getPositionStyles(position, width, targetPosition, isTabletOrSmaller) {
     var containerStylesByPos = {
@@ -278,12 +279,12 @@ var getTargetPosition = function getTargetPosition(targetWrapper) {
 };
 var Popover = function Popover(param) {
     var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
-    var ref = (0, _hooks).useTheme(), texts = ref.texts, colors = ref.colors;
+    var ref = (0, _hooks).useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
     var targetWrapperRef = React.useRef(null);
     position = getPosition(position, isTabletOrSmaller);
-    var innerWidth = getWidth(isTabletOrSmaller, width);
+    var innerWidth = getWidth(isTabletOrSmaller, isIos, width);
     var classes = useStyles({
         position: position
     });

package/dist/select.js

@@ -175,6 +175,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var label = param.label;
                 return label ? 27 : 17;
             },
+            lineHeight: '20px',
             fontSize: 16,
             color: theme.colors.textPrimary,
             opacity: function opacity(param) {

package/dist/theme-context-provider.js

@@ -21,6 +21,7 @@ var _hooks = require("./hooks");
 var _tabFocus = _interopRequireDefault(require("./tab-focus"));
 var _portal = require("./portal");
 var _modalContextProvider = _interopRequireDefault(require("./modal-context-provider"));
+var _documentVisibility = require("./utils/document-visibility");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -229,11 +230,13 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_modalContextProvider.default, {
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeContext.default.Provider, {
                         value: contextTheme,
-                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
-                            value: getAriaId,
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
-                                    children: children
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_documentVisibility.DocumentVisibilityProvider, {
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
+                                value: getAriaId,
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
+                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
+                                        children: children
+                                    })
                                 })
                             })
                         })

package/dist/touchable.d.ts

@@ -27,6 +27,7 @@ interface CommonProps {
 export interface PropsHref extends CommonProps {
     href: string;
     newTab?: boolean;
+    loadOnTop?: boolean;
     to?: undefined;
     onPress?: undefined;
 }
@@ -47,6 +48,7 @@ export interface PropsMaybeHref extends CommonProps {
     maybe: true;
     href?: string;
     newTab?: boolean;
+    loadOnTop?: boolean;
     to?: undefined;
     onPress?: undefined;
 }

package/dist/touchable.js

@@ -68,9 +68,11 @@ function _objectSpread(target) {
     return target;
 }
 var redirect = function redirect(url) {
-    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, loadOnTop = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     if (external) {
         window.open(url, '_blank');
+    } else if (loadOnTop) {
+        window.open(url, '_top');
     } else {
         document.location.href = url;
     }
@@ -141,6 +143,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes));
     var type = props.type ? props.type : 'button';
     var openNewTab = !!props.href && !!props.newTab;
+    var loadOnTop = !openNewTab && !!props.href && !!props.loadOnTop;
     var onPress = function onPress(event) {
         if (props.onPress) {
             props.onPress(event);
@@ -188,7 +191,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }
         event.preventDefault();
         trackOnce(function() {
-            return redirect(getHref(), openNewTab);
+            return redirect(getHref(), openNewTab, loadOnTop);
         });
     };
     var handleKeyDown = function handleKeyDown(event) {
@@ -204,7 +207,11 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
             href: props.disabled ? undefined : getHref(),
-            target: openNewTab ? '_blank' : undefined,
+            target: function() {
+                if (openNewTab) return '_blank';
+                if (loadOnTop) return '_top';
+                return undefined;
+            }(),
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,
             children: [

package/dist/touchable.js.flow

@@ -36,6 +36,7 @@ export type PropsHref = {
   ...$Exact<CommonProps>,
   href: string,
   newTab?: boolean,
+  loadOnTop?: boolean,
 };
 export type PropsOnPress = {
   ...$Exact<CommonProps>,
@@ -53,6 +54,7 @@ export type PropsMaybeHref = {
   maybe: true,
   href?: string,
   newTab?: boolean,
+  loadOnTop?: boolean,
 };
 export type PropsMaybeTo = {
   ...$Exact<CommonProps>,

package/dist/utils/document-visibility.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare type Props = {
+    hidden?: boolean;
+    children: React.ReactNode;
+};
+export declare const DocumentVisibilityProvider: React.FC<Props>;
+export declare const useDocumentVisibility: () => boolean;
+export {};

package/dist/utils/document-visibility.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.useDocumentVisibility = exports.DocumentVisibilityProvider = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../hooks");
+var _platform = require("./platform");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+var isDocumentVisible = function isDocumentVisible() {
+    return typeof document !== 'undefined' && document.visibilityState === 'visible';
+};
+var DocumentVisibilityContext = /*#__PURE__*/ React.createContext(true);
+var DocumentVisibilityProvider = function DocumentVisibilityProvider(param) {
+    var hidden = param.hidden, children = param.children;
+    var platformOverrides = (0, _hooks).useTheme().platformOverrides;
+    var ref = _slicedToArray(React.useState(!hidden), 2), visible = ref[0], setVisible = ref[1];
+    React.useEffect(function() {
+        var visibilitychangeCallback = function visibilitychangeCallback() {
+            setVisible(isDocumentVisible());
+        };
+        var focusCallback = function focusCallback() {
+            setVisible(true);
+        };
+        var blurCallback = function blurCallback() {
+            setVisible(false);
+        };
+        setVisible(isDocumentVisible());
+        document.addEventListener('visibilitychange', visibilitychangeCallback);
+        document.addEventListener('focus', focusCallback);
+        document.addEventListener('blur', blurCallback);
+        return function() {
+            document.removeEventListener('visibilitychange', visibilitychangeCallback);
+            document.removeEventListener('focus', focusCallback);
+            document.removeEventListener('blur', blurCallback);
+        };
+    }, []);
+    // Workaround for this bug: https://jira.tuenti.io/jira/browse/ACCOUNT-10938
+    // In Android, after ~10 minutes of inactivity, when a background webview receives focus (back navigation from another webview),
+    // visibility change event is not fired, this causes problems like the navigation bar not being updated
+    var isVisibleNow = isDocumentVisible();
+    if ((0, _platform).isAndroid(platformOverrides) && isVisibleNow !== visible) {
+        setVisible(isVisibleNow);
+    }
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(DocumentVisibilityContext.Provider, {
+        value: visible,
+        children: children
+    }));
+};
+exports.DocumentVisibilityProvider = DocumentVisibilityProvider;
+var useDocumentVisibility = function useDocumentVisibility() {
+    return React.useContext(DocumentVisibilityContext);
+};
+exports.useDocumentVisibility = useDocumentVisibility;

package/dist/utils/document-visibility.js.flow

@@ -0,0 +1,10 @@
+// @flow
+
+import * as React from "react";
+declare type Props = {
+  hidden?: boolean,
+  children: React.Node,
+};
+declare export var DocumentVisibilityProvider: React.ComponentType<Props>;
+declare export var useDocumentVisibility: () => boolean;
+declare export {};

package/dist-es/button.js

@@ -409,7 +409,8 @@ var Button = function(props) {
     if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             href: props.href,
-            newTab: props.newTab
+            newTab: props.newTab,
+            loadOnTop: props.loadOnTop
         })));
     }
     if (process.env.NODE_ENV !== 'production') {

package/dist-es/carousel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
 import IconChevronRightRegular from './generated/mistica-icons/icon-chevron-right-regular';
-import { useScreenSize, useTheme } from './hooks';
+import { useIsInViewport, useScreenSize, useTheme } from './hooks';
 import Inline from './inline';
 import { createUseStyles } from './jss';
 import Stack from './stack';
@@ -13,6 +13,8 @@ import { useIsInverseVariant, ThemeVariant } from './theme-variant-context';
 import { applyAlpha } from './utils/color';
 import { DisableBorderRadiusProvider } from './image';
 import { getPrefixedDataAttributes, listenResize } from './utils/dom';
+import { isAndroid } from './utils/platform';
+import { useDocumentVisibility } from './utils/document-visibility';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -99,6 +101,11 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+var useShouldAutoplay = function(autoplay, ref) {
+    var isDocumentVisible = useDocumentVisibility();
+    var isInViewport = useIsInViewport(ref, false);
+    return isInViewport && isDocumentVisible && !!autoplay;
+};
 var useBulletsStyles = createUseStyles(function(theme) {
     return {
         bullet: _defineProperty({
@@ -235,6 +242,7 @@ var useStyles = createUseStyles(function(theme) {
             }
         })),
         item: (_obj2 = {
+            scrollSnapStop: isAndroid(theme.platformOverrides) ? 'always' : 'normal',
             scrollSnapAlign: 'start',
             flexShrink: 0,
             width: function(param) {
@@ -415,12 +423,24 @@ var BaseCarousel = function(param) {
             };
             var calcItemScrollPositions = function() {
                 var maxScroll = carouselEl.scrollWidth - carouselEl.clientWidth;
+                var getItemScrollMargin = function(itemIndex) {
+                    if (centered) {
+                        return 0;
+                    }
+                    if (itemIndex === 0) {
+                        return 0;
+                    }
+                    if (isDesktopOrBigger) {
+                        return -gap;
+                    }
+                    return mobilePageOffsetConfig.prev;
+                };
                 setItemScrollPositions(Array.from(carouselEl.querySelectorAll('[data-item]')).map(function(itemEl, idx) {
                     if (idx === items.length - 1) {
                         return maxScroll;
                     }
                     var offsetLeft = itemEl.offsetLeft;
-                    var scrollMargin = Number(getComputedStyle(itemEl).scrollMargin.replace('px', ''));
+                    var scrollMargin = getItemScrollMargin(idx);
                     var scrollPosition = centered && !isDesktopOrBigger ? offsetLeft - itemEl.clientWidth / 2 : offsetLeft;
                     return Math.min(scrollPosition - scrollMargin - carouselEl.offsetLeft, maxScroll);
                 }));
@@ -492,8 +512,9 @@ var BaseCarousel = function(param) {
     }, [
         scrollPositions
     ]);
+    var shouldAutoplay = useShouldAutoplay(!!autoplay, carouselRef);
     React.useEffect(function() {
-        if (autoplay) {
+        if (shouldAutoplay && autoplay) {
             var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
             var loop = typeof autoplay === 'object' && autoplay.loop;
             var interval = setInterval(function() {
@@ -514,7 +535,8 @@ var BaseCarousel = function(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight1
+        scrollRight1,
+        shouldAutoplay
     ]);
     var currentPageIndex = calcCurrentPageIndex(scrollLeft1, pagesScrollPositions);
     React.useEffect(function() {
@@ -637,6 +659,7 @@ var useSlideshowStyles = createUseStyles(function(theme) {
         })),
         item: {
             width: '100%',
+            scrollSnapStop: isAndroid(theme.platformOverrides) ? 'always' : 'normal',
             scrollSnapAlign: 'start',
             flexShrink: 0
         },
@@ -721,8 +744,9 @@ export var Slideshow = function(param) {
     }, [
         items.length
     ]);
+    var shouldAutoplay = useShouldAutoplay(!!autoplay, carouselRef);
     React.useEffect(function() {
-        if (autoplay) {
+        if (shouldAutoplay && autoplay) {
             var time = typeof autoplay === 'boolean' ? DEFAULT_AUTOPLAY_TIME : autoplay.time;
             var loop = typeof autoplay === 'object' && autoplay.loop;
             var interval = setInterval(function() {
@@ -743,7 +767,8 @@ export var Slideshow = function(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight2
+        scrollRight2,
+        shouldAutoplay
     ]);
     React.useEffect(function() {
         if (onPageChange) {

package/dist-es/fixed-footer-layout.js

@@ -103,7 +103,7 @@ var useStyles = createUseStyles(function(theme) {
             zIndex: 1
         },
         shadow: {
-            boxShadow: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
+            boxShadow: '0 -3px 8px 0 rgba(0, 0, 0, 0.15)'
         }
     });
 });

package/dist-es/hooks.js

@@ -180,3 +180,31 @@ export var useWindowWidth = function() {
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect in the browser
 export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export var useIsInViewport = function(ref, defaultValue, options) {
+    var ref7 = _slicedToArray(React.useState(defaultValue), 2), isInViewport = ref7[0], setIsInViewport = ref7[1];
+    React.useEffect(function() {
+        if (!ref.current) {
+            return;
+        }
+        if (typeof window.IntersectionObserver === 'undefined') {
+            return function() {};
+        }
+        var observer = new IntersectionObserver(function(entries) {
+            setIsInViewport(entries[0].isIntersecting);
+        }, {
+            root: options === null || options === void 0 ? void 0 : options.root,
+            rootMargin: options === null || options === void 0 ? void 0 : options.rootMargin,
+            threshold: options === null || options === void 0 ? void 0 : options.threshold
+        });
+        observer.observe(ref.current);
+        return function() {
+            observer.disconnect();
+        };
+    }, [
+        ref,
+        options === null || options === void 0 ? void 0 : options.root,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold
+    ]);
+    return isInViewport;
+};

package/dist-es/index.js

@@ -91,7 +91,8 @@ export { default as IconError } from './icons/icon-error';
 export { default as IconSuccess } from './icons/icon-success';
 export { default as IconSuccessVivo } from './icons/icon-success-vivo';
 export { default as Circle } from './circle';
-export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth } from './hooks';
+export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport } from './hooks';
+export { useDocumentVisibility } from './utils/document-visibility';
 export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 export { VIVO_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN } from './skins/constants';
 export { getSkinByName } from './skins/utils';

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 = '10.27.0';
+export var PACKAGE_VERSION = '10.29.0';

package/dist-es/popover.js

@@ -100,7 +100,7 @@ var useStyles = createUseStyles(function(theme) {
             left: '50%',
             transform: 'translate(-50%, -50%) rotate(45deg)',
             border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 4,
+            borderRadius: 2,
             boxShadow: function(param) {
                 var position = param.position;
                 return position === 'bottom' ? 'initial' : "0 0 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")");
@@ -128,7 +128,7 @@ var useStyles = createUseStyles(function(theme) {
         title: {
             marginBottom: 4,
             color: theme.colors.textPrimary,
-            fontWeight: 500,
+            fontWeight: 400,
             lineHeight: 1.5,
             fontSize: 16
         },
@@ -154,7 +154,7 @@ var useStyles = createUseStyles(function(theme) {
             marginRight: 0
         },
         text: {
-            color: theme.colors.textPrimary,
+            color: theme.colors.textSecondary,
             textAlign: 'left',
             lineHeight: 1.42857142,
             fontSize: 14
@@ -172,8 +172,9 @@ var getPosition = function() {
     var position = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : defaultPositionDesktop, isTabletOrSmaller = arguments.length > 1 ? arguments[1] : void 0;
     return isTabletOrSmaller && (position === 'left' || position === 'right') ? defaultPositionMobile : position;
 };
-var getWidth = function(isTabletOrSmaller, width) {
-    return isTabletOrSmaller ? window.innerWidth - marginLeftRightMobile * 2 : getWidthDesktop(width);
+var getWidth = function(isTabletOrSmaller, isIos, width) {
+    // in iOS, when the webview is rendered offscreen (eg. acccount tab), window.innerWidth value is wrong, it returns strange values like 0 or 80.
+    return isTabletOrSmaller ? (isIos ? window.screen.width : window.innerWidth) - marginLeftRightMobile * 2 : getWidthDesktop(width);
 };
 var getPositionStyles = function(position, width, targetPosition, isTabletOrSmaller) {
     var containerStylesByPos = {
@@ -246,12 +247,12 @@ var getTargetPosition = function(targetWrapper) {
 };
 var Popover = function(param) {
     var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
-    var ref = useTheme(), texts = ref.texts, colors = ref.colors;
+    var ref = useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
     var targetWrapperRef = React.useRef(null);
     position = getPosition(position, isTabletOrSmaller);
-    var innerWidth = getWidth(isTabletOrSmaller, width);
+    var innerWidth = getWidth(isTabletOrSmaller, isIos, width);
     var classes = useStyles({
         position: position
     });

package/dist-es/select.js

@@ -143,6 +143,7 @@ var useStyles = createUseStyles(function(theme) {
                 var label = param.label;
                 return label ? 27 : 17;
             },
+            lineHeight: '20px',
             fontSize: 16,
             color: theme.colors.textPrimary,
             opacity: function(param) {

package/dist-es/theme-context-provider.js

@@ -16,6 +16,7 @@ import { useIsomorphicLayoutEffect } from './hooks';
 import TabFocus from './tab-focus';
 import { PortalNodesProvider } from './portal';
 import ModalContextProvider from './modal-context-provider';
+import { DocumentVisibilityProvider } from './utils/document-visibility';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -196,11 +197,13 @@ var ThemeContextProvider = function(param) {
                 children: /*#__PURE__*/ _jsx(ModalContextProvider, {
                     children: /*#__PURE__*/ _jsx(ThemeContext.Provider, {
                         value: contextTheme,
-                        children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
-                            value: getAriaId,
-                            children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
-                                children: /*#__PURE__*/ _jsx(DialogRoot, {
-                                    children: children
+                        children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
+                            children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
+                                value: getAriaId,
+                                children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
+                                    children: /*#__PURE__*/ _jsx(DialogRoot, {
+                                        children: children
+                                    })
                                 })
                             })
                         })

package/dist-es/touchable.js

@@ -36,9 +36,11 @@ function _objectSpread(target) {
     return target;
 }
 var redirect = function(url) {
-    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, loadOnTop = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     if (external) {
         window.open(url, '_blank');
+    } else if (loadOnTop) {
+        window.open(url, '_top');
     } else {
         document.location.href = url;
     }
@@ -109,6 +111,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     }, getPrefixedDataAttributes(props.dataAttributes));
     var type = props.type ? props.type : 'button';
     var openNewTab = !!props.href && !!props.newTab;
+    var loadOnTop = !openNewTab && !!props.href && !!props.loadOnTop;
     var onPress = function(event) {
         if (props.onPress) {
             props.onPress(event);
@@ -156,7 +159,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }
         event.preventDefault();
         trackOnce(function() {
-            return redirect(getHref(), openNewTab);
+            return redirect(getHref(), openNewTab, loadOnTop);
         });
     };
     var handleKeyDown = function(event) {
@@ -172,7 +175,11 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
             href: props.disabled ? undefined : getHref(),
-            target: openNewTab ? '_blank' : undefined,
+            target: function() {
+                if (openNewTab) return '_blank';
+                if (loadOnTop) return '_top';
+                return undefined;
+            }(),
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,
             children: [

package/dist-es/utils/document-visibility.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTheme } from '../hooks';
+import { isAndroid } from './platform';
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+var isDocumentVisible = function() {
+    return typeof document !== 'undefined' && document.visibilityState === 'visible';
+};
+var DocumentVisibilityContext = /*#__PURE__*/ React.createContext(true);
+export var DocumentVisibilityProvider = function(param) {
+    var hidden = param.hidden, children = param.children;
+    var platformOverrides = useTheme().platformOverrides;
+    var ref = _slicedToArray(React.useState(!hidden), 2), visible = ref[0], setVisible = ref[1];
+    React.useEffect(function() {
+        var visibilitychangeCallback = function() {
+            setVisible(isDocumentVisible());
+        };
+        var focusCallback = function() {
+            setVisible(true);
+        };
+        var blurCallback = function() {
+            setVisible(false);
+        };
+        setVisible(isDocumentVisible());
+        document.addEventListener('visibilitychange', visibilitychangeCallback);
+        document.addEventListener('focus', focusCallback);
+        document.addEventListener('blur', blurCallback);
+        return function() {
+            document.removeEventListener('visibilitychange', visibilitychangeCallback);
+            document.removeEventListener('focus', focusCallback);
+            document.removeEventListener('blur', blurCallback);
+        };
+    }, []);
+    // Workaround for this bug: https://jira.tuenti.io/jira/browse/ACCOUNT-10938
+    // In Android, after ~10 minutes of inactivity, when a background webview receives focus (back navigation from another webview),
+    // visibility change event is not fired, this causes problems like the navigation bar not being updated
+    var isVisibleNow = isDocumentVisible();
+    if (isAndroid(platformOverrides) && isVisibleNow !== visible) {
+        setVisible(isVisibleNow);
+    }
+    return(/*#__PURE__*/ _jsx(DocumentVisibilityContext.Provider, {
+        value: visible,
+        children: children
+    }));
+};
+export var useDocumentVisibility = function() {
+    return React.useContext(DocumentVisibilityContext);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.27.0",
+    "version": "10.29.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -21,6 +21,7 @@
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
+        "compile": "node scripts/compile.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf node_modules/.cache",
         "ci": "yarn lint && yarn prettier-check && yarn ts-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
         "prepublishOnly": "node scripts/prepublish-only.js",
@@ -108,6 +109,7 @@
         "node-fetch": "^2.6.1",
         "playroom": "^0.27.9",
         "prettier": "^2.5.1",
+        "pretty-bytes": "^5.6.0",
         "prop-types": "^15.7.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",