@telefonica/mistica 12.5.0 → 12.7.0

package/dist/index.js

@@ -854,6 +854,12 @@ Object.defineProperty(exports, "useIsInViewport", {
         return _hooks.useIsInViewport;
     }
 });
+Object.defineProperty(exports, "pxToRem", {
+    enumerable: true,
+    get: function() {
+        return _css.pxToRem;
+    }
+});
 Object.defineProperty(exports, "TrackingConfig", {
     enumerable: true,
     get: function() {
@@ -9884,6 +9890,24 @@ Object.defineProperty(exports, "IconTkRegular", {
         return _iconTkRegular.default;
     }
 });
+Object.defineProperty(exports, "IconTokensFilled", {
+    enumerable: true,
+    get: function() {
+        return _iconTokensFilled.default;
+    }
+});
+Object.defineProperty(exports, "IconTokensLight", {
+    enumerable: true,
+    get: function() {
+        return _iconTokensLight.default;
+    }
+});
+Object.defineProperty(exports, "IconTokensRegular", {
+    enumerable: true,
+    get: function() {
+        return _iconTokensRegular.default;
+    }
+});
 Object.defineProperty(exports, "IconTongueFilled", {
     enumerable: true,
     get: function() {
@@ -10868,6 +10892,7 @@ var _iconSuccessVivo = _interopRequireDefault(require("./icons/icon-success-vivo
 var _skeletons = require("./skeletons");
 var _circle = _interopRequireDefault(require("./circle"));
 var _hooks = require("./hooks");
+var _css = require("./utils/css");
 var _analytics = require("./utils/analytics");
 var _documentVisibility = require("./utils/document-visibility");
 var _themeVariantContext = require("./theme-variant-context");
@@ -12360,6 +12385,9 @@ var _iconTipsAndTricksRegular = _interopRequireDefault(require("./generated/mist
 var _iconTkFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-tk-filled"));
 var _iconTkLight = _interopRequireDefault(require("./generated/mistica-icons/icon-tk-light"));
 var _iconTkRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-tk-regular"));
+var _iconTokensFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-tokens-filled"));
+var _iconTokensLight = _interopRequireDefault(require("./generated/mistica-icons/icon-tokens-light"));
+var _iconTokensRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-tokens-regular"));
 var _iconTongueFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-tongue-filled"));
 var _iconTongueLight = _interopRequireDefault(require("./generated/mistica-icons/icon-tongue-light"));
 var _iconTongueRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-tongue-regular"));

package/dist/index.js.flow

@@ -154,6 +154,7 @@ declare export {
   useIsInViewport,
 } from "./hooks";
 export type { ThemeConfig, ColorScheme, EventFormat } from "./theme";
+declare export { pxToRem } from "./utils/css";
 declare export { TrackingConfig, useTrackingConfig } from "./utils/analytics";
 declare export { useDocumentVisibility } from "./utils/document-visibility";
 declare export {
@@ -1666,6 +1667,9 @@ declare export { default as IconTipsAndTricksRegular } from "./generated/mistica
 declare export { default as IconTkFilled } from "./generated/mistica-icons/icon-tk-filled";
 declare export { default as IconTkLight } from "./generated/mistica-icons/icon-tk-light";
 declare export { default as IconTkRegular } from "./generated/mistica-icons/icon-tk-regular";
+declare export { default as IconTokensFilled } from "./generated/mistica-icons/icon-tokens-filled";
+declare export { default as IconTokensLight } from "./generated/mistica-icons/icon-tokens-light";
+declare export { default as IconTokensRegular } from "./generated/mistica-icons/icon-tokens-regular";
 declare export { default as IconTongueFilled } from "./generated/mistica-icons/icon-tongue-filled";
 declare export { default as IconTongueLight } from "./generated/mistica-icons/icon-tongue-light";
 declare export { default as IconTongueRegular } from "./generated/mistica-icons/icon-tongue-regular";

package/dist/navigation-bar.js

@@ -387,8 +387,6 @@ var BurgerMenuIcon = function BurgerMenuIcon(param) {
 };
 var NAVBAR_ZINDEX = 25;
 var BURGER_ZINDEX = 26;
-var DESKTOP_NAVBAR_HEIGHT = 80;
-var MOBILE_NAVBAR_HEIGHT = 56;
 var BURGER_MENU_ANIMATION_DURATION_MS = 300;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
@@ -415,7 +413,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var isInverse = param.isInverse;
                 return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
             },
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             padding: "16px 0",
             borderBottomStyle: "solid",
             borderBottomWidth: function borderBottomWidth(param) {
@@ -432,11 +430,11 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 var isMenuOpen = param.isMenuOpen, isInverse = param.isInverse;
                 return isMenuOpen || isInverse && !theme.isDarkMode ? "transparent" : theme.colors.divider;
             },
-            height: MOBILE_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerMobileHeight,
             padding: "8px 0"
         }),
         section: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT,
+            height: theme.dimensions.headerDesktopHeight,
             display: "flex",
             alignItems: "center",
             padding: "0 8px",
@@ -457,17 +455,17 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             }
         },
         spacer: _defineProperty({
-            height: DESKTOP_NAVBAR_HEIGHT
+            height: theme.dimensions.headerDesktopHeight
         }, theme.mq.tabletOrSmaller, {
-            height: MOBILE_NAVBAR_HEIGHT
+            height: theme.dimensions.headerMobileHeight
         }),
         burgerMenu: {
             zIndex: BURGER_ZINDEX,
             position: "fixed",
-            top: MOBILE_NAVBAR_HEIGHT,
+            top: theme.dimensions.headerMobileHeight,
             left: 0,
             right: 0,
-            height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
+            height: "calc(100vh - ".concat(theme.dimensions.headerMobileHeight, "px)"),
             overflowY: "auto",
             background: theme.colors.background,
             boxShadow: function boxShadow(param) {

package/dist/package-version.js

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

package/dist/skeletons.d.ts

@@ -14,8 +14,11 @@ declare type SkeletonCircleProps = Omit<SkeletonLineProps, 'width'> & {
 export declare const SkeletonCircle: ({ ariaLabel, size, dataAttributes }: SkeletonCircleProps) => JSX.Element;
 declare type SkeletonRowProps = SkeletonLineProps;
 export declare const SkeletonRow: ({ width, ariaLabel, dataAttributes }: SkeletonRowProps) => JSX.Element;
-declare type SkeletonRectangleProps = SkeletonLineProps & {
-    height: number | string;
+declare type SkeletonRectangleProps = {
+    ariaLabel?: string;
+    dataAttributes?: DataAttributes;
+    width?: number | string;
+    height?: number | string;
 };
 export declare const SkeletonRectangle: ({ width, height, ariaLabel, dataAttributes, }: SkeletonRectangleProps) => JSX.Element;
 export {};

package/dist/skeletons.js

@@ -8,7 +8,6 @@ var React = _interopRequireWildcard(require("react"));
 var _skeletonBase = _interopRequireDefault(require("./skeleton-base"));
 var _jss = require("./jss");
 var _stack = _interopRequireDefault(require("./stack"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -69,6 +68,8 @@ var transition = "1.5s linear";
 var useAnimation = (0, _jss).createUseStyles(function() {
     return {
         animation: {
+            width: "100%",
+            height: "100%",
             animation: "$pulse ".concat(transition, " infinite")
         },
         "@keyframes pulse": {
@@ -84,75 +85,52 @@ var useAnimation = (0, _jss).createUseStyles(function() {
         }
     };
 });
-var useSkeletonStyles = (0, _jss).createUseStyles(function() {
-    return {
-        wrap: {
-            borderRadius: 8,
-            height: function height(param) {
-                var _height = param.height, height1 = _height === void 0 ? 8 : _height;
-                return height1;
-            },
-            width: function width(param) {
-                var _width = param.width, width1 = _width === void 0 ? "100%" : _width;
-                return width1;
-            }
-        }
-    };
-});
-var SkeletonLine = function SkeletonLine(param) {
-    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+var SkeletonAnimation = function SkeletonAnimation(param) {
+    var children = param.children, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
     var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width
-    });
     return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        className: animationClasses.animation,
         role: "status",
+        "aria-busy": true,
         "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
         "aria-label": ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {})
+        children: children
+    }));
+};
+var SkeletonLine = function SkeletonLine(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            width: width
+        })
     }));
 };
 exports.SkeletonLine = SkeletonLine;
 var SkeletonText = function SkeletonText(param) {
     var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        height: "fit-content"
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, _objectSpread({
-        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
-        space: 16,
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                width: "75%"
-            })
-        ]
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
+            space: 16,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    width: "75%"
+                })
+            ]
+        })
     }));
 };
 exports.SkeletonText = SkeletonText;
 var SkeletonCircle = function SkeletonCircle(param) {
     var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: size,
-        height: size
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
             height: size,
@@ -181,47 +159,32 @@ var useSkeletonRowStyles = (0, _jss).createUseStyles(function() {
 });
 var SkeletonRow = function SkeletonRow(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
     var rowClass = useSkeletonRowStyles();
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap, rowClass.row),
-        role: "status",
-        "aria-hidden": ariaLabel === undefined,
-        "aria-busy": ariaLabel !== undefined,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                height: 40,
-                width: 40,
-                radius: "50%",
-                className: rowClass.circle
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
-                width: width,
-                className: rowClass.line
-            })
-        ]
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+            className: rowClass.row,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    height: 40,
+                    width: 40,
+                    radius: "50%",
+                    className: rowClass.circle
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                    width: width,
+                    className: rowClass.line
+                })
+            ]
+        })
     }));
 };
 exports.SkeletonRow = SkeletonRow;
 var SkeletonRectangle = function SkeletonRectangle(param) {
     var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
-    var animationClasses = useAnimation();
-    var styleClass = useSkeletonStyles({
-        width: width,
-        height: "100%"
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
-        role: "status",
-        "aria-hidden": true,
-        "aria-busy": true,
-        "aria-label": ariaLabel
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SkeletonAnimation, _objectSpread({
+        ariaLabel: ariaLabel
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
             height: height,

package/dist/skeletons.js.flow

@@ -20,10 +20,10 @@ declare export var SkeletonCircle: (x: SkeletonCircleProps) => React.Node;
 declare type SkeletonRowProps = SkeletonLineProps;
 declare export var SkeletonRow: (x: SkeletonRowProps) => React.Node;
 declare type SkeletonRectangleProps = {
-  ...SkeletonLineProps,
-  ...{
-    height: number | string,
-  },
+  ariaLabel?: string,
+  dataAttributes?: DataAttributes,
+  width?: number | string,
+  height?: number | string,
 };
 declare export var SkeletonRectangle: (x: SkeletonRectangleProps) => React.Node;
 declare export {};

package/dist/skins/o2.js

@@ -73,7 +73,7 @@ var getO2Skin = function getO2Skin() {
             buttonDangerBackground: palette.pepper,
             buttonDangerBackgroundSelected: palette.pepper60,
             buttonDangerBackgroundHover: palette.pepper60,
-            buttonLinkBackgroundSelected: palette.o2BluePrimary15,
+            buttonLinkBackgroundSelected: palette.o2BluePrimary10,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.o2BluePrimary,
             buttonPrimaryBackgroundInverse: palette.white,

package/dist/text-field-base.d.ts

@@ -26,7 +26,6 @@ export interface CommonFormFieldProps {
     defaultValue?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     children?: void;
-    readOnly?: boolean;
 }
 interface TextFieldBaseProps {
     id?: string;

package/dist/text-field-base.js

@@ -205,6 +205,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         textArea: _objectSpread((_obj = {
             resize: "none",
+            padding: 0,
             marginTop: function marginTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -302,7 +303,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             position: "absolute"
         },
         prefix: (_obj2 = {
-            alignSelf: "baseline",
+            alignSelf: function alignSelf(param) {
+                var prefixAlignSelf = param.prefixAlignSelf;
+                return prefixAlignSelf;
+            },
             paddingTop: function paddingTop(param) {
                 var hasLabel = param.hasLabel;
                 return hasLabel ? 28 : 16;
@@ -347,7 +351,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         "fullWidth"
     ]);
     var id = (0, _hooks).useAriaId(idProp);
-    var _$ref3 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref3[0], setInputState = _$ref3[1];
+    var _$ref4 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? "filled" : "default"), 2), inputState = _$ref4[0], setInputState = _$ref4[1];
     var colors = (0, _hooks).useTheme().colors;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var _$ref1;
@@ -356,6 +360,18 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     // this shrinkLabel override is a workaround because I was unable to find a way to hide date
     // and date-time native placeholders when the input is not required
     var shrinkLabel = shrinkLabelProp || (rest.type === "date" || rest.type === "datetime-local" || rest.type === "month") && !rest.required;
+    var _$ref3 = _slicedToArray(React.useState("baseline"), 2), prefixAlignSelf = _$ref3[0], setPrefixAlignSelf = _$ref3[1];
+    (0, _hooks).useIsomorphicLayoutEffect(function() {
+        /**
+             * Safari check to workaround https://jira.tid.es/browse/WEB-648
+             * For some reason it is super hard to align the prefix text with the input text
+             * and get the same result in chrome and safari
+             *
+             * Using an effect to set the style to avoid problems with SSR
+             */ if ((0, _platform).isSafari()) {
+            setPrefixAlignSelf("initial");
+        }
+    }, []);
     var classes = useStyles({
         inputState: inputState,
         error: error,
@@ -366,7 +382,8 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         prefix: prefix,
         multiline: multiline,
         type: rest.type,
-        disabled: rest.disabled
+        disabled: rest.disabled,
+        prefixAlignSelf: prefixAlignSelf
     });
     React.useEffect(function() {
         if (inputState !== "focused" && (value === null || value === void 0 ? void 0 : value.length)) {
@@ -425,6 +442,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
         multiline: multiline,
         fullWidth: fullWidth,
         fieldRef: fieldRef,
+        readOnly: rest.readOnly,
         children: [
             startIcon && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.startIcon,
@@ -534,10 +552,10 @@ var TextFieldBaseAutosuggest = /*#__PURE__*/ React.forwardRef(function(_param, r
         "getSuggestions",
         "id"
     ]);
-    var _$ref5 = _slicedToArray(React.useState([]), 2), suggestions = _$ref5[0], setSuggestions = _$ref5[1];
+    var _$ref6 = _slicedToArray(React.useState([]), 2), suggestions = _$ref6[0], setSuggestions = _$ref6[1];
     var inputRef = React.useRef(null);
     var classes = useSuggestionsStyles();
-    var _$ref4 = (0, _hooks).useTheme(), platformOverrides = _$ref4.platformOverrides, texts = _$ref4.texts;
+    var _$ref5 = (0, _hooks).useTheme(), platformOverrides = _$ref5.platformOverrides, texts = _$ref5.texts;
     var id = (0, _hooks).useAriaId(idProp);
     var autoSuggestId = (0, _hooks).useAriaId();
     if (getSuggestions && (props.value === undefined || props.defaultValue !== undefined)) {

package/dist/text-field-base.js.flow

@@ -52,7 +52,6 @@ export type CommonFormFieldProps = {
   value?: string,
   defaultValue?: string,
   onChange?: (event: SyntheticEvent<HTMLInputElement>) => void,
-  readOnly?: boolean,
 };
 declare type TextFieldBaseProps = {
   id?: string,

package/dist/text-field-components.d.ts

@@ -29,6 +29,7 @@ declare type FieldContainerProps = {
     className?: string;
     fieldRef?: React.RefObject<HTMLDivElement>;
     fullWidth?: boolean;
+    readOnly?: boolean;
 };
 export declare const FieldContainer: React.FC<FieldContainerProps>;
 export {};

package/dist/text-field-components.js

@@ -297,15 +297,19 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", theme.colors.backgroundContainer), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "position", "relative"), _defineProperty(_obj1, "backgroundColor", function(param) {
+            var readOnly = param.readOnly;
+            return readOnly ? theme.colors.neutralLow : theme.colors.backgroundContainer;
+        }), _obj1)
     };
 });
 var FieldContainer = function FieldContainer(param) {
-    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth;
+    var multiline = param.multiline, disabled = param.disabled, children = param.children, helperText = param.helperText, className = param.className, fieldRef = param.fieldRef, fullWidth = param.fullWidth, readOnly = param.readOnly;
     var classes = useFieldContainerStyles({
         multiline: multiline,
         fullWidth: fullWidth,
-        disabled: disabled
+        disabled: disabled,
+        readOnly: readOnly
     });
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: classes.fieldContainer,

package/dist/text-field-components.js.flow

@@ -30,6 +30,7 @@ declare type FieldContainerProps = {
   className?: string,
   fieldRef?: React.Ref<"div">,
   fullWidth?: boolean,
+  readOnly?: boolean,
 };
 declare export var FieldContainer: React.ComponentType<FieldContainerProps>;
 declare export {};

package/dist/text-link.js

@@ -101,7 +101,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
-            display: "inline-block",
+            display: "inline",
             color: colors.textLink,
             wordBreak: "break-word",
             cursor: "pointer"
@@ -155,6 +155,7 @@ var TextLink = function TextLink(_param) {
     var _trackingEvent;
     var _obj;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({}, props, {
+        as: props.onPress ? "a" : 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)),

package/dist/theme.d.ts

@@ -40,6 +40,7 @@ declare const TEXTS_ES: {
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {
     headerMobileHeight: number;
+    headerDesktopHeight: number;
 };
 export declare const mediaQueriesConfig: {
     tabletMinWidth: number;
@@ -124,6 +125,7 @@ export declare type Theme = {
     };
     dimensions: {
         headerMobileHeight: number;
+        headerDesktopHeight: number;
     };
     mq: MediaQueries;
     colors: Colors;

package/dist/theme.js

@@ -232,7 +232,8 @@ var getTexts = function getTexts(locale) {
 };
 exports.getTexts = getTexts;
 var dimensions = {
-    headerMobileHeight: 56
+    headerMobileHeight: 56,
+    headerDesktopHeight: 80
 };
 exports.dimensions = dimensions;
 var mediaQueriesConfig = {

package/dist/theme.js.flow

@@ -42,6 +42,7 @@ declare var TEXTS_ES: {
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {
   headerMobileHeight: number,
+  headerDesktopHeight: number,
 };
 declare export var mediaQueriesConfig: {
   tabletMinWidth: number,
@@ -128,6 +129,7 @@ export type Theme = {
   },
   dimensions: {
     headerMobileHeight: number,
+    headerDesktopHeight: number,
   },
   mq: MediaQueries,
   colors: Colors,

package/dist/tooltip.d.ts

@@ -2,12 +2,14 @@ import * as React from 'react';
 declare type Position = 'top' | 'bottom' | 'left' | 'right';
 declare type Props = {
     children?: React.ReactNode;
+    extra?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
     title?: string;
     position?: Position;
     width?: number;
     targetLabel: string;
+    delay?: boolean;
 };
 declare const Tooltip: React.FC<Props>;
 export default Tooltip;