@telefonica/mistica 10.25.0 → 10.28.0

package/dist-es/button.js

@@ -9,6 +9,8 @@ import { useForm } from './form-context';
 import { pxToRem } from './utils/css';
 import { Text, Text2, Text3 } from './text';
 import Box from './box';
+import { getTextFromChildren } from './utils/common';
+import { eventActions, eventCategories } from './utils/analytics';
 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];
@@ -308,13 +310,18 @@ var Button = function(props) {
             children: text
         });
     };
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: classnames(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: eventCategories.userInteraction,
+            action: "".concat(props.type, "_button_tapped"),
+            label: getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         'aria-controls': props['aria-controls'],
         'aria-expanded': props['aria-expanded'],
@@ -453,10 +460,15 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
 export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useButtonLinkStyles();
     var isInverse = useIsInverseVariant();
+    var _trackingEvent;
     var _obj;
     var commonProps = {
         className: classnames(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: eventCategories.userInteraction,
+            action: eventActions.linkTapped,
+            label: getTextFromChildren(props.children)
+        } : undefined,
         dataAttributes: props.dataAttributes,
         children: /*#__PURE__*/ _jsx(Text2, {
             medium: true,
@@ -502,18 +514,21 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "primary"
     })));
 };
 export var ButtonSecondary = function(props) {
     var classes = useSecondaryButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "secondary"
     })));
 };
 export var ButtonDanger = function(props) {
     var classes = useDangerButtonStyles();
     return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
-        classes: classes
+        classes: classes,
+        type: "danger"
     })));
 };

package/dist-es/callout.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Stack from './stack';
+import Inline from './inline';
+import Box from './box';
 import { useTheme } from './hooks';
 import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 import { createUseStyles } from './jss';
@@ -63,8 +65,8 @@ var Callout = function(param) {
         children: /*#__PURE__*/ _jsxs(ThemeVariant, {
             isInverse: false,
             children: [
-                icon && /*#__PURE__*/ _jsx("div", {
-                    className: classes.icon,
+                icon && /*#__PURE__*/ _jsx(Box, {
+                    paddingRight: 16,
                     children: icon
                 }),
                 /*#__PURE__*/ _jsx("div", {
@@ -72,18 +74,41 @@ var Callout = function(param) {
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         space: 16,
                         children: [
-                            /*#__PURE__*/ _jsxs(_Fragment, {
+                            /*#__PURE__*/ _jsxs(Inline, {
+                                fullWidth: true,
+                                alignItems: "flex-start",
+                                space: "between",
                                 children: [
-                                    /*#__PURE__*/ _jsx(Text3, {
-                                        as: "h2",
-                                        regular: true,
-                                        children: title
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        space: 4,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text3, {
+                                                as: "h2",
+                                                regular: true,
+                                                children: title
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text2, {
+                                                as: "p",
+                                                regular: true,
+                                                color: colors.textSecondary,
+                                                children: description
+                                            })
+                                        ]
                                     }),
-                                    /*#__PURE__*/ _jsx(Text2, {
-                                        as: "p",
-                                        regular: true,
-                                        color: colors.textSecondary,
-                                        children: description
+                                    onClose && /*#__PURE__*/ _jsx(IconButton, {
+                                        size: 40,
+                                        style: {
+                                            display: 'flex',
+                                            margin: '-8px -12px',
+                                            alignItems: 'center',
+                                            justifyContent: 'center'
+                                        },
+                                        onPress: onClose,
+                                        "aria-label": texts.closeButtonLabel,
+                                        children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                                            size: 24,
+                                            color: colors.neutralHigh
+                                        })
                                     })
                                 ]
                             }),
@@ -94,20 +119,6 @@ var Callout = function(param) {
                             })
                         ]
                     })
-                }),
-                onClose && /*#__PURE__*/ _jsx(IconButton, {
-                    size: 40,
-                    style: {
-                        display: 'flex',
-                        margin: '-8px -12px -8px 0',
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    },
-                    onPress: onClose,
-                    "aria-label": texts.closeButtonLabel,
-                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
-                        color: colors.neutralHigh
-                    })
                 })
             ]
         })

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) {
@@ -492,8 +500,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 +523,8 @@ var BaseCarousel = function(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight1
+        scrollRight1,
+        shouldAutoplay
     ]);
     var currentPageIndex = calcCurrentPageIndex(scrollLeft1, pagesScrollPositions);
     React.useEffect(function() {
@@ -721,8 +731,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 +754,8 @@ export var Slideshow = function(param) {
     }, [
         autoplay,
         goNext,
-        scrollRight2
+        scrollRight2,
+        shouldAutoplay
     ]);
     React.useEffect(function() {
         if (onPageChange) {

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/image.js

@@ -1,6 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { createUseStyles } from './jss';
+import { getPrefixedDataAttributes } from './utils/dom';
+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) {
+    for(var i = 1; i < arguments.length; 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]);
+        });
+    }
+    return target;
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -67,9 +96,10 @@ export var RATIO = {
     '4:3': 4 / 3
 };
 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({
@@ -89,13 +119,13 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     } else {
         width = '100%';
     }
-    return(/*#__PURE__*/ _jsx("img", {
+    return(/*#__PURE__*/ _jsx("img", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
         ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
-    }));
+    })));
 });
 export default Image;

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.25.0';
+export var PACKAGE_VERSION = '10.28.0';

package/dist-es/popover.js

@@ -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/skins/blau.js

@@ -94,8 +94,6 @@ export var getBlauSkin = function() {
             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-es/skins/o2-classic.js

@@ -107,8 +107,6 @@ export var getO2ClassicSkin = function() {
             controlError: palette.pepper,
             loadingBar: palette.o2Gem,
             loadingBarBackground: palette.o2GemLight30,
-            loadingBarBackgroundInverse: palette.o2GemLight30,
-            loadingBarInverse: palette.o2Gem,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2GemLight30,
             iosControlKnob: palette.white,
@@ -195,8 +193,6 @@ export var getO2ClassicSkin = function() {
             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-es/skins/o2.js

@@ -97,8 +97,6 @@ export var getO2Skin = function() {
             controlError: palette.pepper,
             loadingBar: palette.o2BluePrimary,
             loadingBarBackground: palette.grey1,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.o2BluePrimary,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
@@ -189,8 +187,6 @@ export var getO2Skin = function() {
             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-es/skins/telefonica.js

@@ -92,8 +92,6 @@ export var getTelefonicaSkin = function() {
             controlError: palette.coral,
             loadingBar: palette.telefonicaBlue30,
             loadingBarBackground: palette.telefonicaBlue70,
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -102,7 +100,7 @@ export var getTelefonicaSkin = function() {
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coral80,
+            badge: palette.coral70,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
@@ -182,8 +180,6 @@ export var getTelefonicaSkin = function() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlue70,
-            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,

package/dist-es/skins/vivo.js

@@ -91,8 +91,6 @@ export var getVivoSkin = function() {
             controlError: palette.pepper,
             loadingBar: palette.pink,
             loadingBarBackground: palette.pepperLight30,
-            loadingBarBackgroundInverse: palette.vivoPurpleLight50,
-            loadingBarInverse: palette.vivoPurple,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             iosControlKnob: palette.white,
@@ -183,8 +181,6 @@ export var getVivoSkin = function() {
             controlActivated: palette.vivoPurpleLight80,
             loadingBar: palette.vivoPurpleLight80,
             loadingBarBackground: palette.darkModeGrey6,
-            loadingBarBackgroundInverse: palette.grey1,
-            loadingBarInverse: palette.vivoPurpleLight80,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
             iosControlKnob: palette.grey2,

package/dist-es/tag.js

@@ -6,6 +6,7 @@ import { createUseStyles } from './jss';
 import { Text } from './text';
 import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 import { pxToRem } from './utils/css';
+import { getPrefixedDataAttributes } from './utils/dom';
 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];
@@ -14,6 +15,19 @@ function _arrayLikeToArray(arr, len) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
+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 _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -41,6 +55,21 @@ function _iterableToArrayLimit(arr, i) {
 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 _objectSpread(target) {
+    for(var i = 1; i < arguments.length; 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]);
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -74,7 +103,7 @@ var useStyles = createUseStyles(function() {
     };
 });
 var Tag = function(param) {
-    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
+    var Icon = param.Icon, children = param.children, dataAttributes = param.dataAttributes, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
         hasIcon: !!Icon
     });
@@ -137,7 +166,7 @@ var Tag = function(param) {
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor1 = _type1[0], backgroundColor = _type1[1];
     var shouldUseInverseBackground = isInverse && !isDarkMode;
-    return(/*#__PURE__*/ _jsxs("span", {
+    return(/*#__PURE__*/ _jsxs("span", _objectSpread({}, getPrefixedDataAttributes(dataAttributes), {
         className: classes.tag,
         style: {
             background: shouldUseInverseBackground ? colors.inverse : backgroundColor
@@ -162,6 +191,6 @@ var Tag = function(param) {
                 })
             })
         ]
-    }));
+    })));
 };
 export default Tag;

package/dist-es/text-link.js

@@ -5,6 +5,8 @@ import Touchable from './touchable';
 import classnames from 'classnames';
 import { useIsInverseVariant } from './theme-variant-context';
 import { useForm } from './form-context';
+import { getTextFromChildren } from './utils/common';
+import { eventActions, eventCategories } from './utils/analytics';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -94,8 +96,14 @@ var TextLink = function(_param) {
     var classes = useStyles();
     var isInverse = useIsInverseVariant();
     var formStatus = useForm().formStatus;
+    var _trackingEvent;
     var _obj;
     return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, props, {
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
+            category: eventCategories.userInteraction,
+            action: eventActions.linkTapped,
+            label: getTextFromChildren(children)
+        } : undefined,
         disabled: disabled || formStatus === 'sending',
         className: classnames(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist-es/text.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { createUseStyles } from './jss';
 import { useIsInverseVariant } from './theme-variant-context';
 import { pxToRem } from './utils/css';
+import { getPrefixedDataAttributes } from './utils/dom';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -116,7 +117,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 export var Text = function(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'];
+    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -137,12 +138,12 @@ export var Text = function(param) {
         return null;
     }
     var className = classnames(classes.text, _defineProperty({}, classes.truncate, !!truncate));
-    return(/*#__PURE__*/ React.createElement(as, {
+    return(/*#__PURE__*/ React.createElement(as, _objectSpread({
         className: className,
         id: id,
         role: role,
         'aria-level': ariaLevel
-    }, children));
+    }, getPrefixedDataAttributes(dataAttributes)), children));
 };
 var getRegularOrMediumWeight = function(props) {
     return props.regular && 'regular' || props.medium && 'medium';

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/utils/analytics.js

@@ -0,0 +1,6 @@
+export var eventCategories = {
+    userInteraction: 'user_interaction'
+};
+export var eventActions = {
+    linkTapped: 'link_tapped'
+};