@telefonica/mistica 11.7.0 → 11.10.0

package/dist/index.js

@@ -380,10 +380,16 @@ Object.defineProperty(exports, "Placeholder", {
         return _placeholder.Placeholder;
     }
 });
-Object.defineProperty(exports, "AvatarPlaceholder", {
+Object.defineProperty(exports, "Title1", {
     enumerable: true,
     get: function() {
-        return _placeholder.AvatarPlaceholder;
+        return _title.Title1;
+    }
+});
+Object.defineProperty(exports, "Title2", {
+    enumerable: true,
+    get: function() {
+        return _title.Title2;
     }
 });
 Object.defineProperty(exports, "RowList", {
@@ -512,6 +518,12 @@ Object.defineProperty(exports, "Callout", {
         return _callout.default;
     }
 });
+Object.defineProperty(exports, "Avatar", {
+    enumerable: true,
+    get: function() {
+        return _avatar.default;
+    }
+});
 Object.defineProperty(exports, "useModalState", {
     enumerable: true,
     get: function() {
@@ -806,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() {
@@ -10769,6 +10793,7 @@ var _text = _interopRequireWildcard(require("./text"));
 var _tag = _interopRequireDefault(require("./tag"));
 var _sectionTitle = _interopRequireDefault(require("./section-title"));
 var _placeholder = require("./placeholder");
+var _title = require("./title");
 var _list = require("./list");
 var _switchComponent = _interopRequireDefault(require("./switch-component"));
 var _checkbox = _interopRequireDefault(require("./checkbox"));
@@ -10785,6 +10810,7 @@ var _menu = _interopRequireDefault(require("./menu"));
 var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _emptyStateCard = _interopRequireDefault(require("./empty-state-card"));
 var _callout = _interopRequireDefault(require("./callout"));
+var _avatar = _interopRequireDefault(require("./avatar"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
@@ -10818,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

@@ -73,7 +73,8 @@ declare export {
 declare export { default as Tag } from "./tag";
 export type { TagType } from "./tag";
 declare export { default as SectionTitle } from "./section-title";
-declare export { Placeholder, AvatarPlaceholder } from "./placeholder";
+declare export { Placeholder } from "./placeholder";
+declare export { Title1, Title2 } from "./title";
 declare export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
 declare export { default as Switch } from "./switch-component";
 declare export { default as Checkbox } from "./checkbox";
@@ -90,6 +91,7 @@ declare export { default as Menu } from "./menu";
 declare export { default as EmptyState } from "./empty-state";
 declare export { default as EmptyStateCard } from "./empty-state-card";
 declare export { default as Callout } from "./callout";
+declare export { default as Avatar } from "./avatar";
 declare export { useModalState } from "./modal-context-provider";
 declare export {
   NavigationBar,
@@ -144,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.7.0";
+var PACKAGE_VERSION = "11.10.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/password-field.js

@@ -9,8 +9,8 @@ var _formContext = require("./form-context");
 var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _iconButton = _interopRequireDefault(require("./icon-button"));
-var _iconVisibility = _interopRequireDefault(require("./icons/icon-visibility"));
-var _iconVisibilityOff = _interopRequireDefault(require("./icons/icon-visibility-off"));
+var _iconAccesibilityRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-accesibility-regular"));
+var _iconEyeRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-eye-regular"));
 var _jss = require("./jss");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -144,7 +144,7 @@ var usePasswordAdornmentStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         shadow: _defineProperty({}, theme.mq.supportsHover, {
             "&:hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.08)"
+                backgroundColor: theme.colors.backgroundAlternative
             }
         })
     };
@@ -155,10 +155,11 @@ var PasswordAdornment = function PasswordAdornment(param) {
     var classes = usePasswordAdornmentStyles();
     var style = {
         backgroundSize: "200%",
-        padding: 12,
-        margin: -12,
+        padding: 8,
+        margin: -8,
         borderRadius: "50%",
-        backgroundColor: undefined
+        backgroundColor: undefined,
+        transition: "background-color 0.2s ease-in-out"
     };
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
         "aria-label": texts.togglePasswordVisibilityLabel,
@@ -166,10 +167,10 @@ var PasswordAdornment = function PasswordAdornment(param) {
             setVisibility(!isVisible);
             focus();
         },
-        size: 48,
+        size: 40,
         className: classes.shadow,
         style: style,
-        children: isVisible ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconVisibilityOff.default, {}) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconVisibility.default, {})
+        children: isVisible ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconAccesibilityRegular.default, {}) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconEyeRegular.default, {})
     });
 };
 var PasswordField = function PasswordField(_param) {

package/dist/placeholder.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-declare type AvatarPlaceholderProps = {
-    size?: string | number;
-};
-export declare const AvatarPlaceholder: React.FC<AvatarPlaceholderProps>;
 declare type PlaceholderProps = {
     width?: string | number;
     height?: string | number;

package/dist/placeholder.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.Placeholder = exports.AvatarPlaceholder = void 0;
+exports.Placeholder = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _color = require("./utils/color");
@@ -28,18 +28,6 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
-var AvatarPlaceholder = function AvatarPlaceholder(param) {
-    var _size = param.size, size = _size === void 0 ? "100%" : _size;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        style: {
-            width: size,
-            height: size,
-            borderRadius: "50%",
-            background: "gray"
-        }
-    });
-};
-exports.AvatarPlaceholder = AvatarPlaceholder;
 var Placeholder = function Placeholder(param) {
     var _width = param.width, width = _width === void 0 ? "auto" : _width, _height = param.height, height = _height === void 0 ? 120 : _height;
     var colors = (0, _hooks).useTheme().colors;

package/dist/placeholder.js.flow

@@ -1,10 +1,6 @@
 // @flow
 
 import * as React from "react";
-declare type AvatarPlaceholderProps = {
-  size?: string | number,
-};
-declare export var AvatarPlaceholder: React.ComponentType<AvatarPlaceholderProps>;
 declare type PlaceholderProps = {
   width?: string | number,
   height?: string | number,

package/dist/section-title.d.ts

@@ -5,5 +5,8 @@ declare type Props = {
     right?: React.ReactNode;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
+/**
+ * @deprecated use Title1 instead
+ */
 declare const SectionTitle: React.FC<Props>;
 export default SectionTitle;

package/dist/section-title.js

@@ -61,7 +61,9 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         })
     };
 });
-var SectionTitle = function SectionTitle(param) {
+/**
+ * @deprecated use Title1 instead
+ */ var SectionTitle = function SectionTitle(param) {
     var children = param.children, id = param.id, right = param.right, _as = param.as, as = _as === void 0 ? "h3" : _as;
     var classes = useStyles();
     var theme = (0, _hooks).useTheme();

package/dist/section-title.js.flow

@@ -7,5 +7,8 @@ declare type Props = {
   right?: React.Node,
   as?: "h1" | "h2" | "h3" | "h4",
 };
+/**
+ * @deprecated use Title1 instead
+ */
 declare var SectionTitle: React.ComponentType<Props>;
 declare export default typeof SectionTitle;

package/dist/text-link.js

@@ -128,14 +128,26 @@ var TextLink = function TextLink(_param) {
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var formStatus = (0, _formContext).useForm().formStatus;
+    var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
+    var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
+        if (eventFormat === "google-analytics-4") {
+            return {
+                name: _analytics.eventNames.userInteraction,
+                component_type: "link",
+                component_copy: (0, _common).getTextFromChildren(children)
+            };
+        } else {
+            return {
+                category: _analytics.eventCategories.userInteraction,
+                action: _analytics.eventActions.linkTapped,
+                label: (0, _common).getTextFromChildren(children)
+            };
+        }
+    };
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
-        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
-            category: _analytics.eventCategories.userInteraction,
-            action: _analytics.eventActions.linkTapped,
-            label: (0, _common).getTextFromChildren(children)
-        } : undefined,
+        trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         disabled: disabled || formStatus === "sending",
         className: (0, _classnames).default(classes.textLink, className, (_obj = {}, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
         children: children

package/dist/text.js

@@ -133,8 +133,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var truncate = param.truncate;
-                return truncate === 1 || truncate === true ? "break-all" : "normal";
+                var wordBreak1 = param.wordBreak;
+                return wordBreak1 ? "break-all" : "normal";
+            },
+            "@supports (overflow-wrap: anywhere)": {
+                wordBreak: function wordBreak(param) {
+                    var truncate = param.truncate;
+                    return truncate === 1 || truncate === true ? "break-all" : "normal";
+                }
             },
             display: "box",
             boxOrient: "vertical",

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
@@ -206,7 +207,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             analytics: _objectSpread({
                 logEvent: function logEvent() {
                     return Promise.resolve();
-                }
+                },
+                eventFormat: "universal-analytics"
             }, theme.analytics),
             dimensions: _objectSpread({}, _theme.dimensions, theme.dimensions),
             mq: (0, _mediaQueries).createMediaQueries((_mediaQueries1 = theme.mediaQueries) !== null && _mediaQueries1 !== void 0 ? _mediaQueries1 : _theme.mediaQueriesConfig),
@@ -229,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,6 +90,7 @@ export declare type ThemeConfig = {
     texts?: Partial<ThemeTexts>;
     analytics?: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
+        eventFormat?: EventFormat;
     };
     dimensions?: {
         headerMobileHeight: number;
@@ -117,6 +119,7 @@ export declare type Theme = {
     texts: ThemeTexts;
     analytics: {
         logEvent: (trackingEvent: TrackingEvent) => Promise<void>;
+        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,6 +94,7 @@ export type ThemeConfig = {
   texts?: $Shape<ThemeTexts>,
   analytics?: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
+    eventFormat?: EventFormat,
   },
   dimensions?: {
     headerMobileHeight: number,
@@ -121,6 +123,7 @@ export type Theme = {
   texts: ThemeTexts,
   analytics: {
     logEvent: (trackingEvent: TrackingEvent) => Promise<void>,
+    eventFormat: EventFormat,
   },
   dimensions: {
     headerMobileHeight: number,

package/dist/title.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+declare type TitleProps = {
+    children: React.ReactNode;
+    id?: string;
+    right?: React.ReactNode;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+};
+export declare const Title1: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
+export declare const Title2: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
+export {};

package/dist/title.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.Title2 = exports.Title1 = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _text = require("./text");
+var _hooks = require("./hooks");
+var _inline = _interopRequireDefault(require("./inline"));
+var _box = _interopRequireDefault(require("./box"));
+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 TitleLayout = function TitleLayout(param) {
+    var title = param.title, right = param.right;
+    if (!right) {
+        return title;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_inline.default, {
+        space: "between",
+        alignItems: "baseline",
+        children: [
+            title,
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 16,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                    regular: true,
+                    children: right
+                })
+            })
+        ]
+    });
+};
+var Title1 = function Title1(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    var theme = (0, _hooks).useTheme();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(TitleLayout, {
+        title: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+            color: theme.colors.textSecondary,
+            transform: "uppercase",
+            medium: true,
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+exports.Title1 = Title1;
+var Title2 = function Title2(param) {
+    var children = param.children, _as = param.as, as = _as === void 0 ? "h3" : _as, id = param.id, right = param.right, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(TitleLayout, {
+        title: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text5, {
+            as: as,
+            id: id,
+            dataAttributes: dataAttributes,
+            children: children
+        }),
+        right: right
+    });
+};
+exports.Title2 = Title2;

package/dist/title.js.flow

@@ -0,0 +1,18 @@
+// @flow
+
+import * as React from "react";
+import type { DataAttributes } from "./utils/types";
+declare type TitleProps = {
+  children: React.Node,
+  id?: string,
+  right?: React.Node,
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+
+  /**
+   * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
+   */
+  dataAttributes?: DataAttributes,
+};
+declare export var Title1: (x: TitleProps) => React.Element<any>;
+declare export var Title2: (x: TitleProps) => React.Element<any>;
+declare export {};

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,6 +1,20 @@
+import * as React from 'react';
+import type { EventFormat } from '../theme';
 export declare const eventCategories: {
     readonly userInteraction: "user_interaction";
 };
 export declare const eventActions: {
     readonly linkTapped: "link_tapped";
 };
+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.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"
 };
@@ -11,3 +34,29 @@ var eventActions = {
     linkTapped: "link_tapped"
 };
 exports.eventActions = eventActions;
+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;