@telefonica/mistica 11.1.0 → 11.3.0

package/dist-es/button-layout.js

@@ -1,10 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-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 _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -76,13 +69,20 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+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";
 var buttonLayoutSpacing = 16;
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return _obj = {
         margins: {
-            margin: '16px 0',
-            padding: '0 16px'
+            margin: "16px 0",
+            padding: "0 16px"
         }
     }, _defineProperty(_obj, theme.mq.desktopOrBigger, {
         margins: {
@@ -90,35 +90,35 @@ var useStyles = createUseStyles(function(theme) {
             margin: 16
         }
     }), _defineProperty(_obj, "container", {
-        display: 'flex',
+        display: "flex",
         justifyContent: function(param) {
             var align = param.align, childrenCount = param.childrenCount, isTabletOrSmaller = param.isTabletOrSmaller;
-            if (align === 'center' || align === 'full-width' && isTabletOrSmaller) {
-                return 'center';
+            if (align === "center" || align === "full-width" && isTabletOrSmaller) {
+                return "center";
             }
             if (childrenCount > 1 && isTabletOrSmaller) {
-                return 'center';
+                return "center";
             }
-            if (align === 'right') {
-                return 'flex-end';
+            if (align === "right") {
+                return "flex-end";
             }
-            return 'flex-start';
+            return "flex-start";
         },
-        flexWrap: 'wrap-reverse',
+        flexWrap: "wrap-reverse",
         margin: -buttonLayoutSpacing / 2,
-        '&:empty': {
+        "&:empty": {
             margin: 0
         },
-        '& > *:not($link)': {
+        "& > *:not($link)": {
             width: function(param) {
                 var buttonWidth = param.buttonWidth, isTabletOrSmaller = param.isTabletOrSmaller, align = param.align;
                 if (!buttonWidth) {
-                    return 'auto';
+                    return "auto";
                 }
                 if (!isTabletOrSmaller) {
                     return buttonWidth;
                 }
-                if (align === 'full-width') {
+                if (align === "full-width") {
                     return "calc(100% - ".concat(buttonLayoutSpacing, "px)");
                 }
                 return "calc(50% - ".concat(buttonLayoutSpacing, "px)");
@@ -131,9 +131,9 @@ var useStyles = createUseStyles(function(theme) {
         }
     }), _defineProperty(_obj, "link", {
         margin: buttonLayoutSpacing / 2,
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'inherit'
+        display: "flex",
+        width: "100%",
+        justifyContent: "inherit"
     }), _defineProperty(_obj, "linkAlignment", {
         marginLeft: buttonLayoutSpacing / 2 - 6
     }), _obj;
@@ -181,7 +181,7 @@ var buttonsRange = [
     ButtonPrimary
 ];
 var ButtonLayout = function(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? 'full-width' : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -190,7 +190,7 @@ var ButtonLayout = function(param1) {
     }), 2), buttonStatus = ref[0], setButtonStatus = ref[1];
     var updateButtonStatus = function(param) {
         var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
-        if (process.env.NODE_ENV !== 'test') {
+        if (process.env.NODE_ENV !== "test") {
             setButtonStatus({
                 isMeasuring: isMeasuring,
                 buttonWidth: buttonWidth
@@ -210,13 +210,13 @@ var ButtonLayout = function(param1) {
                 if (wrapperElRef.current) {
                     var _Math;
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
-                        /*
+                        return(/*
                         We are using offsetWidth instead of getBoundingClientRect().width because
                         getBoundingClientRect returns the scaled size when the element has some CSS transform applied.
 
                         getBoundingClientRect returns a float (eg: 268.65625) and offsetWidth an integer (eg: 268)
                         The `+1` is important, it rounds up the size to avoid unwanted text truncation with ellipsis.
-                        */ return el.classList.contains(classes.link) ? 0 : el.offsetWidth + 1;
+                        */ el.classList.contains(classes.link) ? 0 : el.offsetWidth + 1);
                     });
                     var maxChildWidth = Math.ceil((_Math = Math).max.apply(_Math, _toConsumableArray(childrenWidths).concat([
                         BUTTON_MIN_WIDTH
@@ -256,13 +256,13 @@ var ButtonLayout = function(param1) {
      * wait until everything loads (including hidden tabs), after a while, open Account tab (Mis productos) and the button appears
      * with ellipsis, even it has enough space.
      */ React.useEffect(function() {
-        window.addEventListener('resize', calcLayout);
-        window.addEventListener('focus', calcLayout);
-        document.addEventListener('visibilitychange', calcLayout);
+        window.addEventListener("resize", calcLayout);
+        window.addEventListener("focus", calcLayout);
+        document.addEventListener("visibilitychange", calcLayout);
         return function() {
-            window.removeEventListener('resize', calcLayout);
-            window.removeEventListener('focus', calcLayout);
-            document.removeEventListener('visibilitychange', calcLayout);
+            window.removeEventListener("resize", calcLayout);
+            window.removeEventListener("focus", calcLayout);
+            document.removeEventListener("visibilitychange", calcLayout);
         };
     }, [
         calcLayout
@@ -272,7 +272,7 @@ var ButtonLayout = function(param1) {
         var range2 = buttonsRange.indexOf(b2.type);
         return range1 - range2;
     });
-    var needsLinkAlignment = !isTabletOrSmaller && align === 'left';
+    var needsLinkAlignment = !isTabletOrSmaller && align === "left";
     var content = /*#__PURE__*/ _jsxs("div", {
         ref: wrapperElRef,
         className: classes.container,

package/dist-es/button.js

@@ -1,16 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import classnames from 'classnames';
-import Spinner from './spinner';
-import Touchable from './touchable';
-import { createUseStyles } from './jss';
-import { useIsInverseVariant } from './theme-variant-context';
-import { useForm } from './form-context';
-import { pxToRem } from './utils/css';
-import { Text, Text2, Text3 } from './text';
-import Box from './box';
-import { getTextFromChildren } from './utils/common';
-import { eventActions, eventCategories } from './utils/analytics';
 function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -85,8 +72,21 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import classnames from "classnames";
+import Spinner from "./spinner";
+import Touchable from "./touchable";
+import { createUseStyles } from "./jss";
+import { useIsInverseVariant } from "./theme-variant-context";
+import { useForm } from "./form-context";
+import { pxToRem } from "./utils/css";
+import { Text, Text2, Text3 } from "./text";
+import Box from "./box";
+import { getTextFromChildren } from "./utils/common";
+import { eventActions, eventCategories } from "./utils/analytics";
 export var BUTTON_MIN_WIDTH = 136;
-var transitionTiming = '0.3s cubic-bezier(0.77, 0, 0.175, 1)';
+var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
 var SPINNER_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
@@ -96,40 +96,40 @@ var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
 var commonClasses = function() {
     return {
         button: {
-            display: 'inline-block',
-            position: 'relative',
-            width: 'auto',
+            display: "inline-block",
+            position: "relative",
+            width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: 'center',
+            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
-            overflow: 'hidden',
-            '&:hover:not([disabled])': {
+            overflow: "hidden",
+            "&:hover:not([disabled])": {
                 transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming, ", border-color ").concat(transitionTiming)
             }
         },
         loadingFiller: {
-            display: 'block',
+            display: "block",
             height: 0,
             opacity: 0,
-            overflow: 'hidden'
+            overflow: "hidden"
         },
         small: {
             minWidth: 104
         },
         loadingContent: {
-            display: 'inline-flex',
-            position: 'absolute',
+            display: "inline-flex",
+            position: "absolute",
             top: 0,
             bottom: 0,
             left: X_PADDING_PX,
             right: X_PADDING_PX,
-            justifyContent: 'center',
-            alignItems: 'center',
+            justifyContent: "center",
+            alignItems: "center",
             opacity: 0,
-            transform: 'translateY(2rem)',
+            transform: "translateY(2rem)",
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
-            '$small &': {
+            "$small &": {
                 left: X_SMALL_PADDING_PX,
                 right: X_SMALL_PADDING_PX
             }
@@ -138,22 +138,22 @@ var commonClasses = function() {
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
-            '$small &': {
+            "$small &": {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
-            '& svg': {
+            "& svg": {
                 marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: 'bottom',
-                height: '100%'
+                verticalAlign: "bottom",
+                height: "100%"
             }
         },
         isLoading: {
-            '& $textContent': {
-                transform: 'translateY(-2rem)',
+            "& $textContent": {
+                transform: "translateY(-2rem)",
                 opacity: 0
             },
-            '& $loadingContent': {
-                transform: 'translateY(0)',
+            "& $loadingContent": {
+                transform: "translateY(0)",
                 opacity: 1
             }
         }
@@ -167,10 +167,10 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
         light: {
             color: theme.colors.textButtonPrimary,
             backgroundColor: theme.colors.buttonPrimaryBackground,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
+            "&[disabled]:not($isLoading)": disabledStyle,
             // Next media queries were added in each button style, because a pair of bugs in mobile devices (related to: https://jira.tuenti.io/jira/browse/APPS-1882):
             // - When tapping on a button that takes you to next screen and then go back to the previous one, button still have the focus styles
             // - Same behavior if you do long press on the button
@@ -178,9 +178,9 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     // Revert hover background in touch devices
                     backgroundColor: theme.colors.buttonPrimaryBackground
                 }
@@ -189,15 +189,15 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
             backgroundColor: theme.colors.buttonPrimaryBackgroundInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': {
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": {
                 color: theme.colors.textButtonPrimaryInverseSelected,
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     color: theme.colors.textButtonPrimaryInverse,
                     backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
                 }
@@ -208,7 +208,7 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
 var buttonSecondaryLightStyle = function(theme) {
     return {
         color: theme.colors.textButtonSecondary,
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         borderColor: theme.colors.buttonSecondaryBackground
     };
 };
@@ -221,24 +221,24 @@ var buttonSecondaryHoverLightStyle = function(theme) {
 var useSecondaryButtonStyles = createUseStyles(function(theme) {
     return _objectSpread({}, commonClasses(), {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
-            '&:enabled:active': _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                '@media (pointer: coarse)': _objectSpread({}, buttonSecondaryLightStyle(theme))
+            "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
+                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
             })
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
             color: theme.colors.textButtonSecondaryInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': disabledStyle,
-            '&:hover:not([disabled])': {
+            "&[disabled]:not($isLoading)": disabledStyle,
+            "&:hover:not([disabled])": {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected,
-                '@media (pointer: coarse)': {
+                "@media (pointer: coarse)": {
                     borderColor: theme.colors.buttonSecondaryBorderInverse,
                     color: theme.colors.textButtonSecondaryInverse
                 }
@@ -250,15 +250,15 @@ var dangerButtonStyles = function(theme) {
     return {
         color: theme.colors.textButtonPrimary,
         backgroundColor: theme.colors.buttonDangerBackground,
-        '&:enabled:active': {
+        "&:enabled:active": {
             backgroundColor: theme.colors.buttonDangerBackgroundSelected
         },
-        '&[disabled]:not($isLoading)': {
+        "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        '&:hover:not([disabled])': {
+        "&:hover:not([disabled])": {
             backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            '@media (pointer: coarse)': {
+            "@media (pointer: coarse)": {
                 // Revert hover background in touch devices
                 backgroundColor: theme.colors.buttonDangerBackground
             }
@@ -276,7 +276,7 @@ var Button = function(props) {
     var isInverse = useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
     var isSubmitButton = !!props.submit;
-    var isFormSending = formStatus === 'sending';
+    var isFormSending = formStatus === "sending";
     var showSpinner = props.showSpinner || isFormSending && isSubmitButton;
     // This state is needed to not render the spinner when hidden (because it causes high CPU usage
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
@@ -315,7 +315,7 @@ var Button = function(props) {
     var commonProps = {
         className: classnames(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
-            cursor: props.fake ? 'pointer' : undefined
+            cursor: props.fake ? "pointer" : undefined
         }, props.style),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? {
             category: eventCategories.userInteraction,
@@ -323,8 +323,8 @@ var Button = function(props) {
             label: getTextFromChildren(props.children)
         } : undefined,
         dataAttributes: props.dataAttributes,
-        'aria-controls': props['aria-controls'],
-        'aria-expanded': props['aria-expanded'],
+        "aria-controls": props["aria-controls"],
+        "aria-expanded": props["aria-expanded"],
         tabIndex: props.tabIndex,
         children: /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
@@ -358,7 +358,7 @@ var Button = function(props) {
                             size: spinnerSizeRem
                         }) : /*#__PURE__*/ _jsx("div", {
                             style: {
-                                display: 'inline-block',
+                                display: "inline-block",
                                 width: spinnerSizeRem,
                                 height: spinnerSizeRem
                             }
@@ -372,50 +372,50 @@ var Button = function(props) {
             ]
         }),
         disabled: props.disabled || showSpinner || isFormSending,
-        role: 'button'
+        role: "button"
     };
-    if (process.env.NODE_ENV !== 'production') {
-        if (props.to === '' || props.href === '') {
-            throw Error('to or href props are empty strings');
+    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({
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({
             maybe: true
         }, commonProps, {
             role: "presentation",
             "aria-hidden": "true"
-        })));
+        }));
     }
     if (props.submit) {
         // using empty onPress handler so it gets rendered as a button
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({
             type: "submit",
             formId: formId,
             onPress: function() {}
-        }, commonProps)));
+        }, commonProps));
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             onPress: props.onPress
-        })));
+        }));
     }
-    if (props.to || props.to === '') {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+    if (props.to || props.to === "") {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
-        })));
+        }));
     }
-    if (props.href || props.href === '') {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+    if (props.href || props.href === "") {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             href: props.href,
             newTab: props.newTab,
             loadOnTop: props.loadOnTop
-        })));
+        }));
     }
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== "production") {
         // this cannot happen
-        throw Error('Bad button props');
+        throw Error("Bad button props");
     }
     return null;
 };
@@ -423,33 +423,33 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
     var padding = 6;
     return {
         link: {
-            display: 'inline-block',
-            width: 'auto',
+            display: "inline-block",
+            width: "auto",
             padding: padding,
             fontWeight: 500,
             borderRadius: 4,
-            overflow: 'hidden',
+            overflow: "hidden",
             transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming),
             color: theme.colors.textLink,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                '@media (pointer: coarse)': {
-                    backgroundColor: 'initial'
+                "@media (pointer: coarse)": {
+                    backgroundColor: "initial"
                 }
             }
         },
         inverse: {
             color: theme.colors.textLinkInverse,
-            '&:enabled:active': {
+            "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover:not([disabled])': {
+            "&:hover:not([disabled])": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                '@media (pointer: coarse)': {
-                    backgroundColor: 'initial'
+                "@media (pointer: coarse)": {
+                    backgroundColor: "initial"
                 }
             }
         },
@@ -478,58 +478,58 @@ 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 (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({
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
             onPress: props.onPress
-        })));
+        }));
     }
-    if (props.to || props.to === '') {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
+    if (props.to || props.to === "") {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView
-        })));
+        }));
     }
-    if (props.href || props.href === '') {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({
+    if (props.href || props.href === "") {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({
             ref: ref
         }, commonProps, {
             href: props.href,
             newTab: props.newTab
-        })));
+        }));
     }
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== "production") {
         // this cannot happen
-        throw Error('Bad button props');
+        throw Error("Bad button props");
     }
     return null;
 });
 export var ButtonPrimary = function(props) {
     var classes = usePrimaryButtonStyles();
-    return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "primary"
-    })));
+    }));
 };
 export var ButtonSecondary = function(props) {
     var classes = useSecondaryButtonStyles();
-    return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "secondary"
-    })));
+    }));
 };
 export var ButtonDanger = function(props) {
     var classes = useDangerButtonStyles();
-    return(/*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+    return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
         classes: classes,
         type: "danger"
-    })));
+    }));
 };