@telefonica/mistica 11.9.0 → 11.10.2

package/dist/button.js

@@ -306,7 +306,7 @@ var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
     });
 });
 var Button = function Button(props) {
-    var analytics = (0, _hooks).useTheme().analytics;
+    var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
     var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
@@ -346,7 +346,7 @@ var Button = function Button(props) {
         });
     };
     var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
-        if (analytics.eventFormat === "google-analytics-4") {
+        if (eventFormat === "google-analytics-4") {
             return {
                 name: _analytics.eventNames.userInteraction,
                 component_type: "".concat(props.type, "_button"),

package/dist/index.d.ts

@@ -89,7 +89,8 @@ 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, useIsInViewport, } from './hooks';
-export type { ThemeConfig, ColorScheme } from './theme';
+export type { ThemeConfig, ColorScheme, EventFormat } from './theme';
+export { TrackingConfig, useTrackingConfig } from './utils/analytics';
 export { useDocumentVisibility } from './utils/document-visibility';
 export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 export type { Skin, KnownSkinName, SkinName } from './skins/types';

package/dist/index.js

@@ -818,6 +818,18 @@ Object.defineProperty(exports, "useIsInViewport", {
         return _hooks.useIsInViewport;
     }
 });
+Object.defineProperty(exports, "TrackingConfig", {
+    enumerable: true,
+    get: function() {
+        return _analytics.TrackingConfig;
+    }
+});
+Object.defineProperty(exports, "useTrackingConfig", {
+    enumerable: true,
+    get: function() {
+        return _analytics.useTrackingConfig;
+    }
+});
 Object.defineProperty(exports, "useDocumentVisibility", {
     enumerable: true,
     get: function() {
@@ -10832,6 +10844,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 _analytics = require("./utils/analytics");
 var _documentVisibility = require("./utils/document-visibility");
 var _themeVariantContext = require("./theme-variant-context");
 var _constants = require("./skins/constants");

package/dist/index.js.flow

@@ -146,7 +146,8 @@ declare export {
   useWindowWidth,
   useIsInViewport,
 } from "./hooks";
-export type { ThemeConfig, ColorScheme } from "./theme";
+export type { ThemeConfig, ColorScheme, EventFormat } from "./theme";
+declare export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 declare export { useDocumentVisibility } from "./utils/document-visibility";
 declare export {
   ThemeVariant,

package/dist/package-version.js

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

package/dist/select.js

@@ -232,7 +232,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: "6px 16px",
+            padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {

package/dist/text-link.js

@@ -12,7 +12,6 @@ var _themeVariantContext = require("./theme-variant-context");
 var _formContext = require("./form-context");
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
-var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -129,9 +128,9 @@ var TextLink = function TextLink(_param) {
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var formStatus = (0, _formContext).useForm().formStatus;
-    var analytics = (0, _hooks).useTheme().analytics;
+    var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
     var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
-        if (analytics.eventFormat === "google-analytics-4") {
+        if (eventFormat === "google-analytics-4") {
             return {
                 name: _analytics.eventNames.userInteraction,
                 component_type: "link",

package/dist/text.js

@@ -117,6 +117,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var wordBreak = param.wordBreak;
                 return wordBreak ? "anywhere" : "inherit";
             },
+            "@supports not (overflow-wrap: anywhere)": {
+                wordBreak: function wordBreak(param) {
+                    var wordBreak1 = param.wordBreak;
+                    return wordBreak1 ? "break-all" : "inherit";
+                }
+            },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
         }, theme.mq.tabletOrSmaller, {
@@ -133,8 +139,8 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var wordBreak1 = param.wordBreak;
-                return wordBreak1 ? "break-all" : "normal";
+                var wordBreak2 = param.wordBreak;
+                return wordBreak2 ? "break-all" : "normal";
             },
             "@supports (overflow-wrap: anywhere)": {
                 wordBreak: function wordBreak(param) {

package/dist/theme-context-provider.js

@@ -22,6 +22,7 @@ var _tabFocus = _interopRequireDefault(require("./tab-focus"));
 var _modalContextProvider = _interopRequireDefault(require("./modal-context-provider"));
 var _documentVisibility = require("./utils/document-visibility");
 var _aspectRatioSupport = require("./utils/aspect-ratio-support");
+var _analytics = require("./utils/analytics");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -230,13 +231,16 @@ 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(_aspectRatioSupport.AspectRatioSupportProvider, {
-                        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
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_analytics.TrackingConfig, {
+                        eventFormat: contextTheme.analytics.eventFormat,
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_aspectRatioSupport.AspectRatioSupportProvider, {
+                            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/theme.d.ts

@@ -74,6 +74,7 @@ declare type LinkComponent = React.ComponentType<{
 }>;
 export declare const AnchorLink: LinkComponent;
 export declare type ColorScheme = 'dark' | 'light' | 'auto';
+export declare type EventFormat = 'universal-analytics' | 'google-analytics-4';
 export declare type ThemeConfig = {
     skin: Readonly<Skin>;
     colorScheme?: ColorScheme;
@@ -89,7 +90,7 @@ export declare type ThemeConfig = {
     texts?: Partial<ThemeTexts>;
     analytics?: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
-        eventFormat?: 'universal-analytics' | 'google-analytics-4';
+        eventFormat?: EventFormat;
     };
     dimensions?: {
         headerMobileHeight: number;
@@ -118,7 +119,7 @@ export declare type Theme = {
     texts: ThemeTexts;
     analytics: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
-        eventFormat: 'universal-analytics' | 'google-analytics-4';
+        eventFormat: EventFormat;
     };
     dimensions: {
         headerMobileHeight: number;

package/dist/theme.js.flow

@@ -78,6 +78,7 @@ declare type LinkComponent = React.ComponentType<{
 }>;
 declare export var AnchorLink: LinkComponent;
 export type ColorScheme = "dark" | "light" | "auto";
+export type EventFormat = "universal-analytics" | "google-analytics-4";
 export type ThemeConfig = {
   skin: $ReadOnly<Skin>,
   colorScheme?: ColorScheme,
@@ -93,7 +94,7 @@ export type ThemeConfig = {
   texts?: $Shape<ThemeTexts>,
   analytics?: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
-    eventFormat?: "universal-analytics" | "google-analytics-4",
+    eventFormat?: EventFormat,
   },
   dimensions?: {
     headerMobileHeight: number,
@@ -122,7 +123,7 @@ export type Theme = {
   texts: ThemeTexts,
   analytics: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
-    eventFormat: "universal-analytics" | "google-analytics-4",
+    eventFormat: EventFormat,
   },
   dimensions: {
     headerMobileHeight: number,

package/dist/utils/__tests__/analytics-test.js

@@ -0,0 +1,74 @@
+"use strict";
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _themeContextProvider = _interopRequireDefault(require("../../theme-context-provider"));
+var _react = require("@testing-library/react");
+var _testUtils = require("../../__tests__/test-utils");
+var _analytics = require("../analytics");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+    }
+}
+var PrintEventFormat = function PrintEventFormat(param) {
+    var prefix = param.prefix;
+    var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+        children: "".concat(prefix, ": ").concat(eventFormat)
+    });
+};
+test("TrackingConfig context providers", function() {
+    (0, _react).render(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeContextProvider.default, {
+        theme: (0, _testUtils).makeTheme({
+            analytics: {
+                logEvent: function logEvent() {
+                    return Promise.resolve();
+                },
+                eventFormat: "google-analytics-4"
+            }
+        }),
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(PrintEventFormat, {
+                prefix: "test1"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsxs(_analytics.TrackingConfig, {
+                eventFormat: "universal-analytics",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(PrintEventFormat, {
+                        prefix: "test2"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_analytics.TrackingConfig, {
+                        eventFormat: "google-analytics-4",
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(PrintEventFormat, {
+                            prefix: "test3"
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+    expect(_react.screen.getByText("test1: google-analytics-4")).toBeInTheDocument();
+    expect(_react.screen.getByText("test2: universal-analytics")).toBeInTheDocument();
+    expect(_react.screen.getByText("test3: google-analytics-4")).toBeInTheDocument();
+});

package/dist/utils/analytics.d.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import type { EventFormat } from '../theme';
 export declare const eventCategories: {
     readonly userInteraction: "user_interaction";
 };
@@ -7,3 +9,12 @@ export declare const eventActions: {
 export declare const eventNames: {
     readonly userInteraction: "user_interaction";
 };
+declare type TrackingConfigProps = {
+    children: React.ReactNode;
+    eventFormat: EventFormat;
+};
+export declare const TrackingConfig: ({ children, eventFormat }: TrackingConfigProps) => JSX.Element;
+export declare const useTrackingConfig: () => {
+    eventFormat: EventFormat;
+};
+export {};

package/dist/utils/analytics.js

@@ -2,7 +2,30 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.eventNames = exports.eventActions = exports.eventCategories = void 0;
+exports.useTrackingConfig = exports.TrackingConfig = exports.eventNames = exports.eventActions = exports.eventCategories = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+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;
+    }
+}
 var eventCategories = {
     userInteraction: "user_interaction"
 };
@@ -15,3 +38,25 @@ var eventNames = {
     userInteraction: "user_interaction"
 };
 exports.eventNames = eventNames;
+var TrackingContext = /*#__PURE__*/ React.createContext({
+    eventFormat: "universal-analytics"
+});
+var TrackingConfig = function TrackingConfig(param) {
+    var children = param.children, eventFormat = param.eventFormat;
+    var value = React.useMemo(function() {
+        return {
+            eventFormat: eventFormat
+        };
+    }, [
+        eventFormat
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(TrackingContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+exports.TrackingConfig = TrackingConfig;
+var useTrackingConfig = function useTrackingConfig() {
+    return React.useContext(TrackingContext);
+};
+exports.useTrackingConfig = useTrackingConfig;

package/dist/utils/analytics.js.flow

@@ -1,5 +1,7 @@
 // @flow
 
+import * as React from "react";
+import type { EventFormat } from "../theme";
 declare export var eventCategories: {
   +userInteraction: "user_interaction",
 };
@@ -9,3 +11,12 @@ declare export var eventActions: {
 declare export var eventNames: {
   +userInteraction: "user_interaction",
 };
+declare type TrackingConfigProps = {
+  children: React.Node,
+  eventFormat: EventFormat,
+};
+declare export var TrackingConfig: (x: TrackingConfigProps) => React.Node;
+declare export var useTrackingConfig: () => {
+  eventFormat: EventFormat,
+};
+declare export {};

package/dist-es/button.js

@@ -84,7 +84,7 @@ import { pxToRem } from "./utils/css";
 import { Text, Text2, Text3 } from "./text";
 import Box from "./box";
 import { getTextFromChildren } from "./utils/common";
-import { eventActions, eventCategories, eventNames } from "./utils/analytics";
+import { eventActions, eventCategories, eventNames, useTrackingConfig } from "./utils/analytics";
 import { useTheme } from "./hooks";
 export var BUTTON_MIN_WIDTH = 136;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
@@ -273,7 +273,7 @@ var useDangerButtonStyles = createUseStyles(function(theme) {
     });
 });
 var Button = function(props) {
-    var analytics = useTheme().analytics;
+    var eventFormat = useTrackingConfig().eventFormat;
     var ref = useForm(), formStatus = ref.formStatus, formId = ref.formId;
     var isInverse = useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
@@ -313,7 +313,7 @@ var Button = function(props) {
         });
     };
     var createDefaultTrackingEvent = function() {
-        if (analytics.eventFormat === "google-analytics-4") {
+        if (eventFormat === "google-analytics-4") {
             return {
                 name: eventNames.userInteraction,
                 component_type: "".concat(props.type, "_button"),

package/dist-es/index.js

@@ -90,6 +90,7 @@ 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, useIsInViewport } from "./hooks";
+export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 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";

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 = "11.9.0";
+export var PACKAGE_VERSION = "11.10.2";

package/dist-es/select.js

@@ -200,7 +200,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: "6px 16px",
+            padding: "8px 16px",
             height: 48,
             transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {

package/dist-es/text-link.js

@@ -61,8 +61,7 @@ import classnames from "classnames";
 import { useIsInverseVariant } from "./theme-variant-context";
 import { useForm } from "./form-context";
 import { getTextFromChildren } from "./utils/common";
-import { eventActions, eventCategories, eventNames } from "./utils/analytics";
-import { useTheme } from "./hooks";
+import { eventActions, eventCategories, eventNames, useTrackingConfig } from "./utils/analytics";
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return {
@@ -97,9 +96,9 @@ var TextLink = function(_param) {
     var classes = useStyles();
     var isInverse = useIsInverseVariant();
     var formStatus = useForm().formStatus;
-    var analytics = useTheme().analytics;
+    var eventFormat = useTrackingConfig().eventFormat;
     var createDefaultTrackingEvent = function() {
-        if (analytics.eventFormat === "google-analytics-4") {
+        if (eventFormat === "google-analytics-4") {
             return {
                 name: eventNames.userInteraction,
                 component_type: "link",

package/dist-es/text.js

@@ -85,6 +85,12 @@ var useStyles = createUseStyles(function(theme) {
                 var wordBreak = param.wordBreak;
                 return wordBreak ? "anywhere" : "inherit";
             },
+            "@supports not (overflow-wrap: anywhere)": {
+                wordBreak: function(param) {
+                    var wordBreak = param.wordBreak;
+                    return wordBreak ? "break-all" : "inherit";
+                }
+            },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
         }, theme.mq.tabletOrSmaller, {

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

@@ -91,6 +91,7 @@ import TabFocus from "./tab-focus";
 import ModalContextProvider from "./modal-context-provider";
 import { DocumentVisibilityProvider } from "./utils/document-visibility";
 import { AspectRatioSupportProvider } from "./utils/aspect-ratio-support";
+import { TrackingConfig } from "./utils/analytics";
 var darkModeMedia = "(prefers-color-scheme: dark)";
 export var useIsOsDarkModeEnabled = function() {
     var ref = _slicedToArray(React.useState(false), 2), isDarkMode = ref[0], setIsDarkMode = ref[1];
@@ -197,13 +198,16 @@ var ThemeContextProvider = function(param) {
             children: /*#__PURE__*/ _jsx(ModalContextProvider, {
                 children: /*#__PURE__*/ _jsx(ThemeContext.Provider, {
                     value: contextTheme,
-                    children: /*#__PURE__*/ _jsx(AspectRatioSupportProvider, {
-                        children: /*#__PURE__*/ _jsx(DocumentVisibilityProvider, {
-                            children: /*#__PURE__*/ _jsx(AriaIdGetterContext.Provider, {
-                                value: getAriaId,
-                                children: /*#__PURE__*/ _jsx(ScreenSizeContextProvider, {
-                                    children: /*#__PURE__*/ _jsx(DialogRoot, {
-                                        children: children
+                    children: /*#__PURE__*/ _jsx(TrackingConfig, {
+                        eventFormat: contextTheme.analytics.eventFormat,
+                        children: /*#__PURE__*/ _jsx(AspectRatioSupportProvider, {
+                            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/__tests__/analytics-test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import ThemeContextProvider from "../../theme-context-provider";
+import { render, screen } from "@testing-library/react";
+import { makeTheme } from "../../__tests__/test-utils";
+import { TrackingConfig, useTrackingConfig } from "../analytics";
+var PrintEventFormat = function(param) {
+    var prefix = param.prefix;
+    var eventFormat = useTrackingConfig().eventFormat;
+    return /*#__PURE__*/ _jsx("div", {
+        children: "".concat(prefix, ": ").concat(eventFormat)
+    });
+};
+test("TrackingConfig context providers", function() {
+    render(/*#__PURE__*/ _jsxs(ThemeContextProvider, {
+        theme: makeTheme({
+            analytics: {
+                logEvent: function() {
+                    return Promise.resolve();
+                },
+                eventFormat: "google-analytics-4"
+            }
+        }),
+        children: [
+            /*#__PURE__*/ _jsx(PrintEventFormat, {
+                prefix: "test1"
+            }),
+            /*#__PURE__*/ _jsxs(TrackingConfig, {
+                eventFormat: "universal-analytics",
+                children: [
+                    /*#__PURE__*/ _jsx(PrintEventFormat, {
+                        prefix: "test2"
+                    }),
+                    /*#__PURE__*/ _jsx(TrackingConfig, {
+                        eventFormat: "google-analytics-4",
+                        children: /*#__PURE__*/ _jsx(PrintEventFormat, {
+                            prefix: "test3"
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+    expect(screen.getByText("test1: google-analytics-4")).toBeInTheDocument();
+    expect(screen.getByText("test2: universal-analytics")).toBeInTheDocument();
+    expect(screen.getByText("test3: google-analytics-4")).toBeInTheDocument();
+});

package/dist-es/utils/analytics.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 // Universal Analytics (legacy)
 export var eventCategories = {
     userInteraction: "user_interaction"
@@ -9,3 +11,23 @@ export var eventActions = {
 export var eventNames = {
     userInteraction: "user_interaction"
 };
+var TrackingContext = /*#__PURE__*/ React.createContext({
+    eventFormat: "universal-analytics"
+});
+export var TrackingConfig = function(param) {
+    var children = param.children, eventFormat = param.eventFormat;
+    var value = React.useMemo(function() {
+        return {
+            eventFormat: eventFormat
+        };
+    }, [
+        eventFormat
+    ]);
+    return /*#__PURE__*/ _jsx(TrackingContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+export var useTrackingConfig = function() {
+    return React.useContext(TrackingContext);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "11.9.0",
+    "version": "11.10.2",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -107,7 +107,7 @@
         "jimp": "^0.16.1",
         "lint-staged": "^12.3.7",
         "node-fetch": "^2.6.7",
-        "playroom": "^0.27.9",
+        "playroom": "^0.28.0",
         "prettier": "^2.6.1",
         "pretty-bytes": "^5.6.0",
         "prop-types": "^15.8.1",
@@ -123,7 +123,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.5.0",
+        "@tef-novum/webview-bridge": "^3.8.0",
         "@telefonica/libphonenumber": "^2.8.1",
         "classnames": "^2.3.1",
         "jss": "^10.9.0",