@telefonica/mistica 10.26.0 → 10.28.1

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [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)
+
+
+### Bug Fixes
+
+* **playroom:** dark mode in Blau & Telefonica ios ([#423](https://github.com/Telefonica/mistica-web/issues/423)) ([a630625](https://github.com/Telefonica/mistica-web/commit/a630625379cdb486abd916ad05c0d3fd4974e5cd))
+* **skins:** remove deprecated constants ([#418](https://github.com/Telefonica/mistica-web/issues/418)) ([822960f](https://github.com/Telefonica/mistica-web/commit/822960f2ecf629b4e5de0ac3224e2026332c0f14))
+* **Telefonica skin:** change badge color ([#424](https://github.com/Telefonica/mistica-web/issues/424)) ([0976c24](https://github.com/Telefonica/mistica-web/commit/0976c246f295d4be61426d33ff93b65c9bae0598))
+
+
+### Features
+
+* **Button:** default tracking events ([#425](https://github.com/Telefonica/mistica-web/issues/425)) ([5fc2576](https://github.com/Telefonica/mistica-web/commit/5fc25768f71cd8a0318b47266511694e6024e49e))
+* **Image, Text, Video, Tag:** add dataAttributes prop ([#429](https://github.com/Telefonica/mistica-web/issues/429)) ([730a0db](https://github.com/Telefonica/mistica-web/commit/730a0dbb80abe9a47260b21e29fe1cbf2c9cc206))
+
 # [10.26.0](https://github.com/Telefonica/mistica-web/compare/v10.25.0...v10.26.0) (2022-02-23)
 
 

package/dist/button.d.ts

@@ -11,6 +11,7 @@ interface CommonProps {
     loadingText?: string;
     disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-controls'?: string;
@@ -58,6 +59,7 @@ export declare type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButton
 interface ButtonLinkCommonProps {
     children: React.ReactNode;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
+    trackEvent?: boolean;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     aligned?: boolean;

package/dist/button.js

@@ -14,6 +14,8 @@ var _formContext = require("./form-context");
 var _css = require("./utils/css");
 var _text = require("./text");
 var _box = _interopRequireDefault(require("./box"));
+var _common = require("./utils/common");
+var _analytics = require("./utils/analytics");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -341,13 +343,18 @@ var Button = function Button(props) {
             children: text
         });
     };
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? 'pointer' : undefined
         }, props.style),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: _analytics.eventCategories.userInteraction,
+            action: "".concat(props.type, "_button_tapped"),
+            label: (0, _common).getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
@@ -486,10 +493,15 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
 var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
-        trackingEvent: props.trackingEvent,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: _analytics.eventCategories.userInteraction,
+            action: _analytics.eventActions.linkTapped,
+            label: (0, _common).getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
             medium: true,
@@ -536,21 +548,24 @@ exports.ButtonLink = ButtonLink;
 var ButtonPrimary = function ButtonPrimary(props) {
     var classes = usePrimaryButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "primary"
     })));
 };
 exports.ButtonPrimary = ButtonPrimary;
 var ButtonSecondary = function ButtonSecondary(props) {
     var classes = useSecondaryButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "secondary"
     })));
 };
 exports.ButtonSecondary = ButtonSecondary;
 var ButtonDanger = function ButtonDanger(props) {
     var classes = useDangerButtonStyles();
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "danger"
     })));
 };
 exports.ButtonDanger = ButtonDanger;

package/dist/button.js.flow

@@ -18,6 +18,7 @@ declare type CommonProps = {
   loadingText?: string,
   disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+  trackEvent?: boolean,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
@@ -58,6 +59,7 @@ export type ButtonProps =
 declare type ButtonLinkCommonProps = {
   children: React.Node,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
+  trackEvent?: boolean,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"

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/image.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { DataAttributes } from './utils/types';
 export declare const useDisableBorderRadius: () => boolean;
 export declare const DisableBorderRadiusProvider: React.FC;
 export declare type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
@@ -19,6 +20,7 @@ export declare type ImageProps = {
     /** defaults to empty string */
     alt?: string;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 /** @deprecated */
 declare type DeprecatedImageProps = {
@@ -31,6 +33,7 @@ declare type DeprecatedImageProps = {
     /** defaults to empty string */
     alt?: string;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Image: React.ForwardRefExoticComponent<(ImageProps | DeprecatedImageProps) & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/image.js

@@ -6,6 +6,7 @@ exports.default = exports.RATIO = exports.DisableBorderRadiusProvider = exports.
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+var _dom = require("./utils/dom");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -27,6 +28,35 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -96,9 +126,10 @@ var RATIO = {
 };
 exports.RATIO = RATIO;
 var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
-    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, dataAttributes = _param.dataAttributes, props = _objectWithoutProperties(_param, [
         "aspectRatio",
-        "alt"
+        "alt",
+        "dataAttributes"
     ]);
     var noBorderRadius = useDisableBorderRadius();
     var classes = useStyles({
@@ -118,14 +149,14 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
-    }));
+    })));
 });
 var _default = Image;
 exports.default = _default;

package/dist/image.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 declare export var useDisableBorderRadius: () => boolean;
 declare export var DisableBorderRadiusProvider: React.ComponentType<{}>;
 export type AspectRatio = "1:1" | "16:9" | "7:10" | "4:3";
@@ -25,6 +26,7 @@ export type ImageProps = {
   * defaults to empty string
   */
  alt?: string,
+ dataAttributes?: DataAttributes,
 };
 /**
  * @deprecated
@@ -41,6 +43,7 @@ declare type DeprecatedImageProps = {
   * defaults to empty string
   */
  alt?: string,
+ dataAttributes?: DataAttributes,
 };
 declare var Image: React.ComponentType<{
   ...ImageProps | DeprecatedImageProps,

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.26.0';
+var PACKAGE_VERSION = '10.28.1';
 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/skins/blau.js

@@ -98,8 +98,6 @@ var getBlauSkin = function getBlauSkin() {
             controlError: palette.blauRed,
             loadingBar: palette.blauBlueSecondary,
             loadingBarBackground: palette.blauBlueSecondary10,
-            loadingBarInverse: palette.blauBlueSecondary,
-            loadingBarBackgroundInverse: palette.blauBlueSecondary10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
             iosControlKnob: palette.white,

package/dist/skins/o2-classic.js

@@ -111,8 +111,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             controlError: palette.pepper,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.o2GemLight30,
-            loadingBarBackgroundInverse: palette.o2GemLight30,
-            loadingBarInverse: palette.o2Gem,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.white,
@@ -199,8 +197,6 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             controlActivated: palette.o2Gem,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.darkModeGrey,
-            loadingBarInverse: palette.o2SkyBlue,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.grey2,

package/dist/skins/o2.js

@@ -101,8 +101,6 @@ var getO2Skin = function getO2Skin() {
             controlError: palette.pepper,
             loadingBar: palette.o2BluePrimary,
             loadingBarBackground: palette.grey1,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
@@ -193,8 +191,6 @@ var getO2Skin = function getO2Skin() {
             controlActivated: palette.o2BluePrimary30,
             loadingBar: palette.darkModeO2BluePrimary,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.darkModeO2BluePrimary,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2BlueLight30,
             iosControlKnob: palette.grey2,

package/dist/skins/telefonica.js

@@ -96,8 +96,6 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlError: palette.coral,
             loadingBar: palette.telefonicaBlue30,
             loadingBarBackground: palette.telefonicaBlue70,
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -106,7 +104,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coral80,
+            badge: palette.coral70,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
@@ -186,8 +184,6 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,