@telefonica/mistica 10.19.0 → 10.22.1

package/dist/skins/vivo.js

@@ -14,16 +14,21 @@ var palette = {
     vivoPurpleLight20: '#E0CCEB',
     vivoPurpleLight10: '#EFE5F4',
     vivoGreen: '#99CC33',
-    vivoGreenDark: '#33A14A',
-    vivoGreenLight40: '#D6EAAD',
+    vivoGreenDark: '#225C3D',
+    vivoGreenLight30: '#91AE9E',
+    vivoGreenLight10: '#EDF8E8',
     vivoBlue: '#00ABDB',
     orange: '#FF9900',
-    orangeDark: '#FA6324',
-    orangeLight: '#FFD699',
+    orangeDark: '#972A1D',
+    orangeLight10: '#FFEFE1',
+    orangeLight40: '#FFB84C',
     pink: '#EB3D7D',
     pepper: '#CC1F59',
     pepperDark: '#B71D63',
+    pepperDark80: '#8F2052',
+    pepperLight40: '#DB628B',
     pepperLight30: '#F7B1CB',
+    pepperLight10: '#FCE4EF',
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
@@ -127,7 +132,20 @@ var getVivoSkin = function getVivoSkin() {
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.vivoPurple
+            textAppBarSelected: palette.vivoPurple,
+            // TAGS
+            tagBackgroundSuccess: palette.vivoGreenLight10,
+            tagBackgroundWarning: palette.orangeLight10,
+            tagBackgroundError: palette.pepperLight10,
+            tagBackgroundPromo: palette.vivoPurpleLight10,
+            tagBackgroundActive: palette.vivoPurpleLight10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.vivoGreenDark,
+            textTagWarning: palette.orangeDark,
+            textTagError: palette.pepperDark80,
+            textTagPromo: palette.vivoPurple,
+            textTagActive: palette.vivoPurple,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -195,7 +213,20 @@ var getVivoSkin = function getVivoSkin() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.vivoGreenLight30,
+            textTagWarning: palette.orangeLight40,
+            textTagError: palette.pepperLight40,
+            textTagPromo: palette.vivoPurpleLight50,
+            textTagActive: palette.vivoPurpleLight50,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist/skins/vivo.js.flow

@@ -10,16 +10,21 @@ declare export var palette: {
   +vivoPurpleLight20: "#E0CCEB",
   +vivoPurpleLight10: "#EFE5F4",
   +vivoGreen: "#99CC33",
-  +vivoGreenDark: "#33A14A",
-  +vivoGreenLight40: "#D6EAAD",
+  +vivoGreenDark: "#225C3D",
+  +vivoGreenLight30: "#91AE9E",
+  +vivoGreenLight10: "#EDF8E8",
   +vivoBlue: "#00ABDB",
   +orange: "#FF9900",
-  +orangeDark: "#FA6324",
-  +orangeLight: "#FFD699",
+  +orangeDark: "#972A1D",
+  +orangeLight10: "#FFEFE1",
+  +orangeLight40: "#FFB84C",
   +pink: "#EB3D7D",
   +pepper: "#CC1F59",
   +pepperDark: "#B71D63",
+  +pepperDark80: "#8F2052",
+  +pepperLight40: "#DB628B",
   +pepperLight30: "#F7B1CB",
+  +pepperLight10: "#FCE4EF",
   +grey1: "#F6F6F6",
   +grey2: "#EEEEEE",
   +grey3: "#DDDDDD",

package/dist/tag.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
+import type { IconProps } from './utils/types';
+export declare type TagType = 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
 export declare type TagProps = {
+    type?: 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
     children: string;
-    color: string;
+    Icon?: React.FC<IconProps>;
+    /** @deprecated use type prop */
+    color?: string;
 };
 declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/tag.js

@@ -4,48 +4,157 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _box = _interopRequireDefault(require("./box"));
 var _hooks = require("./hooks");
 var _jss = require("./jss");
 var _text = require("./text");
 var _themeVariantContext = require("./theme-variant-context");
+var _css = require("./utils/css");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         tag: {
-            backgroundColor: function backgroundColor(param) {
-                var color = param.color;
-                return color;
-            },
-            padding: '2px 8px',
-            borderRadius: 2,
-            minWidth: 48,
             display: 'inline-flex',
+            flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'center'
+            borderRadius: 50,
+            justifyContent: 'center',
+            minWidth: 56,
+            padding: function padding(param) {
+                var hasIcon = param.hasIcon;
+                return "4px 12px 4px ".concat(hasIcon ? 8 : 12, "px");
+            },
+            // FIXME: remove this style and use an inline style for the icon once WEB-338 gets merged
+            '& svg': {
+                display: 'block'
+            }
         }
     };
 });
 var Tag = function Tag(param) {
-    var children = param.children, color = param.color;
+    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
-        color: color
+        hasIcon: !!Icon
     });
     var ref = (0, _hooks).useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
-    // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
-    var blackText = isDarkMode ? '#313235' : colors.textPrimary;
-    var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
-        className: classes.tag,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    if (!children) {
+        return null;
+    }
+    /**
+     * Legacy implementation
+     *
+     * @deprecated to be removed in the next major version
+     */ if (color) {
+        // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
+        var blackText = isDarkMode ? '#313235' : colors.textPrimary;
+        var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
             isInverse: false,
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-                color: textColor,
-                size: 12,
-                lineHeight: 16,
-                weight: "regular",
-                uppercase: true,
-                children: children
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                className: classes.tag,
+                style: {
+                    background: color
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
+            })
+        }));
+    }
+    var tagTypeToColors = {
+        promo: [
+            colors.textTagPromo,
+            colors.tagBackgroundPromo
+        ],
+        active: [
+            colors.textTagActive,
+            colors.tagBackgroundActive
+        ],
+        inactive: [
+            colors.textTagInactive,
+            colors.tagBackgroundInactive
+        ],
+        success: [
+            colors.textTagSuccess,
+            colors.tagBackgroundSuccess
+        ],
+        warning: [
+            colors.textTagWarning,
+            colors.tagBackgroundWarning
+        ],
+        error: [
+            colors.textTagError,
+            colors.tagBackgroundError
+        ]
+    };
+    var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];
+    var shouldUseInverseBackground = isInverse && !isDarkMode;
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("span", {
+        className: classes.tag,
+        style: {
+            background: shouldUseInverseBackground ? colors.inverse : backgroundColor
+        },
+        children: [
+            Icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
+                    color: textColor,
+                    size: (0, _css).pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                isInverse: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
             })
-        })
+        ]
     }));
 };
 var _default = Tag;

package/dist/tag.js.flow

@@ -1,9 +1,23 @@
 // @flow
 
 import * as React from "react";
+import type { IconProps } from "./utils/types";
+export type TagType =
+  | "promo"
+  | "active"
+  | "inactive"
+  | "success"
+  | "warning"
+  | "error";
 export type TagProps = {
+  type?: "promo" | "active" | "inactive" | "success" | "warning" | "error",
   children: string,
-  color: string,
+  Icon?: React.ComponentType<IconProps>,
+
+  /**
+   * @deprecated use type prop
+   */
+  color?: string,
 };
 declare var Tag: React.ComponentType<TagProps>;
 declare export default typeof Tag;

package/dist/text.d.ts

@@ -2,9 +2,13 @@ import * as React from 'react';
 declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
+    /** @deprecated use decoration prop */
     textDecoration?: 'underline' | 'line-through' | 'none';
+    decoration?: 'underline' | 'line-through' | 'inherit' | 'none';
+    transform?: 'uppercase' | 'capitalize' | 'lowercase' | 'inherit' | 'none';
     children?: React.ReactNode;
     truncate?: boolean | number;
+    /** @deprecated use transform */
     uppercase?: boolean;
     wordBreak?: boolean;
     id?: string;

package/dist/text.js

@@ -86,7 +86,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
         return 'initial';
     };
-    var _color, _textDecoration;
+    var _color, _decoration;
     return {
         text: _defineProperty({
             lineHeight: function lineHeight(param) {
@@ -94,8 +94,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return (0, _css).pxToRem(desktopLineHeight);
             },
             textTransform: function textTransform(param) {
-                var uppercase = param.uppercase;
-                return uppercase ? 'uppercase' : 'inherit';
+                var uppercase = param.uppercase, transform = param.transform;
+                if (uppercase) {
+                    return 'uppercase';
+                }
+                if (transform) {
+                    return transform;
+                }
+                return 'inherit';
             },
             fontSize: function fontSize(param) {
                 var desktopSize = param.desktopSize;
@@ -110,7 +116,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return isInverse ? (_color = inverseColorsMap[color1]) !== null && _color !== void 0 ? _color : color1 : color1;
             },
             textDecoration: function textDecoration(p) {
-                return (_textDecoration = p.textDecoration) !== null && _textDecoration !== void 0 ? _textDecoration : 'inherit';
+                return (_decoration = p.decoration) !== null && _decoration !== void 0 ? _decoration : 'inherit';
             },
             letterSpacing: function letterSpacing(param) {
                 var letterSpacing1 = param.letterSpacing;
@@ -146,7 +152,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Text = function Text(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, truncate = param.truncate, uppercase = param.uppercase, 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'];
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -156,8 +162,9 @@ var Text = function Text(param) {
         desktopLineHeight: desktopLineHeight,
         weight: weight,
         color: color,
-        textDecoration: textDecoration,
+        decoration: decoration,
         uppercase: uppercase,
+        transform: transform,
         wordBreak: wordBreak,
         letterSpacing: letterSpacing,
         truncate: truncate

package/dist/text.js.flow

@@ -4,9 +4,19 @@ import * as React from "react";
 declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
+
+  /**
+   * @deprecated use decoration prop
+   */
   textDecoration?: "underline" | "line-through" | "none",
+  decoration?: "underline" | "line-through" | "inherit" | "none",
+  transform?: "uppercase" | "capitalize" | "lowercase" | "inherit" | "none",
   children?: React.Node,
   truncate?: boolean | number,
+
+  /**
+   * @deprecated use transform
+   */
   uppercase?: boolean,
   wordBreak?: boolean,
   id?: string,

package/dist/theme-context-provider.js

@@ -148,6 +148,11 @@ var generateId = function() {
     // in frontend, use the same generator for all JssProvider renders, this way we avoid classname collisions
     return (0, _jss).createGenerateId();
 }();
+var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
+    return function(href) {
+        return href;
+    };
+};
 var ThemeContextProvider = function ThemeContextProvider(param) {
     var theme = param.theme, children = param.children;
     var classNamePrefix = React.useMemo(// we'll have missmatches when rendering client side. The disadvantage of this is that we can only have one instance of
@@ -173,7 +178,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             platform: (0, _platform).getPlatform(),
             insideNovumNativeApp: (0, _platform).isInsideNovumNativeApp()
         }, theme.platformOverrides);
-        var _mediaQueries1, _Link;
+        var _mediaQueries1, _Link, _useHrefDecorator;
         return {
             skinName: theme.skin.name,
             i18n: theme.i18n,
@@ -191,7 +196,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             colors: colors,
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
-            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios'
+            isIos: (0, _platform).getPlatform(platformOverrides) === 'ios',
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
         };
     }, [
         theme,

package/dist/theme.d.ts

@@ -98,6 +98,7 @@ export declare type ThemeConfig = {
         desktopOrTabletMinHeight: number;
     };
     Link?: LinkComponent;
+    useHrefDecorator?: () => (href: string) => string;
     enableTabFocus?: boolean;
 };
 export declare type Theme = {
@@ -132,5 +133,6 @@ export declare type Theme = {
     Link: LinkComponent;
     isDarkMode: boolean;
     isIos: boolean;
+    useHrefDecorator: () => (href: string) => string;
 };
 export {};

package/dist/theme.js.flow

@@ -102,6 +102,7 @@ export type ThemeConfig = {
     desktopOrTabletMinHeight: number,
   },
   Link?: LinkComponent,
+  useHrefDecorator?: () => (href: string) => string,
   enableTabFocus?: boolean,
 };
 export type Theme = {
@@ -136,6 +137,7 @@ export type Theme = {
   Link: LinkComponent,
   isDarkMode: boolean,
   isIos: boolean,
+  useHrefDecorator: () => (href: string) => string,
 };
 declare export {};
 

package/dist/touchable.js

@@ -114,7 +114,8 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
-    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
+    var ref1 = (0, _hooks).useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link, useHrefDecorator = ref1.useHrefDecorator;
+    var hrefDecorator = useHrefDecorator();
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -150,7 +151,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     };
     var getHref = function getHref() {
         if (props.href) {
-            return props.href;
+            return hrefDecorator(props.href);
         }
         if (props.to && props.fullPageOnWebView) {
             if (typeof props.to === 'string') {

package/dist-es/button-layout.js

@@ -4,6 +4,7 @@ import { createUseStyles } from './jss';
 import { useScreenSize, useIsomorphicLayoutEffect } from './hooks';
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from './button';
 import classNames from 'classnames';
+import debounce from 'lodash/debounce';
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
@@ -174,28 +175,29 @@ var buttonsRange = [
 var ButtonLayout = function(param) {
     var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var ref = useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(true), 2), isMeasuring = ref1[0], setIsMeasuring = ref1[1];
     var childrenCount = React.Children.count(children);
-    var ref2 = _slicedToArray(React.useState(0), 2), buttonWidth = ref2[0], setButtonWidth = ref2[1];
-    var updateButtonWidth = function(buttonWidth) {
+    var ref1 = _slicedToArray(React.useState({
+        isMeasuring: true,
+        buttonWidth: 0
+    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    var updateButtonStatus = function(param) {
+        var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
-            setButtonWidth(buttonWidth);
-        }
-    };
-    var updateIsMeasuring = function(isMeasuring) {
-        if (process.env.NODE_ENV !== 'test') {
-            setIsMeasuring(isMeasuring);
+            setButtonStatus({
+                isMeasuring: isMeasuring,
+                buttonWidth: buttonWidth
+            });
         }
     };
     var classes = useStyles({
-        buttonWidth: buttonWidth,
+        buttonWidth: buttonStatus.buttonWidth,
         isTabletOrSmaller: isTabletOrSmaller,
         align: align,
         childrenCount: childrenCount
     });
     var wrapperElRef = React.useRef(null);
     useIsomorphicLayoutEffect(function() {
-        if (isMeasuring) {
+        if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
@@ -210,8 +212,10 @@ var ButtonLayout = function(param) {
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         BUTTON_MIN_WIDTH
                     ])));
-                    updateButtonWidth(maxChildWidth);
-                    updateIsMeasuring(false);
+                    updateButtonStatus({
+                        isMeasuring: false,
+                        buttonWidth: maxChildWidth
+                    });
                 }
             });
             return function() {
@@ -222,11 +226,20 @@ var ButtonLayout = function(param) {
         };
     }, [
         classes.link,
-        isMeasuring
+        buttonStatus
     ]);
-    var calcLayout = React.useCallback(function() {
-        updateButtonWidth(0);
-        updateIsMeasuring(true);
+    /**
+     * Multiple calls to calcLayout are debounced to workaround an issue that can be reproduced in chrome when pressing
+     * the button during a focus/visibility change. For example, pressing the button having the focus on the devTools.
+     */ var calcLayout = React.useMemo(function() {
+        return debounce(function() {
+            updateButtonStatus({
+                isMeasuring: true,
+                buttonWidth: 0
+            });
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/button.js

@@ -361,6 +361,11 @@ var Button = function(props) {
         disabled: props.disabled || showSpinner || isFormSending,
         role: 'button'
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.fake) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             maybe: true
@@ -384,22 +389,25 @@ var Button = function(props) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var padding = 6;
@@ -456,6 +464,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             children: props.children
         })
     };
+    if (process.env.NODE_ENV !== 'production') {
+        if (props.to === '' || props.href === '') {
+            throw Error('to or href props are empty strings');
+        }
+    }
     if (props.onPress) {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
@@ -463,7 +476,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onPress: props.onPress
         })));
     }
-    if (props.to) {
+    if (props.to || props.to === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -471,7 +484,7 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             fullPageOnWebView: props.fullPageOnWebView
         })));
     }
-    if (props.href) {
+    if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
@@ -479,8 +492,11 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             newTab: props.newTab
         })));
     }
-    // this cannot happen
-    throw Error('Bad button props');
+    if (process.env.NODE_ENV !== 'production') {
+        // this cannot happen
+        throw Error('Bad button props');
+    }
+    return null;
 });
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();