@telefonica/mistica 11.2.1 → 11.4.1

package/dist-es/highlighted-card.js

@@ -1,15 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { createUseStyles } from './jss';
-import { useIsInverseVariant } from './theme-variant-context';
-import Box from './box';
-import Touchable from './touchable';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import { applyAlpha } from './utils/color';
-import { useTheme } from './hooks';
-import { Text4, Text2 } from './text';
-import IconButton from './icon-button';
-import { Boxed } from './boxed';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -65,53 +53,65 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import { useIsInverseVariant } from "./theme-variant-context";
+import Box from "./box";
+import Touchable from "./touchable";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import { applyAlpha } from "./utils/color";
+import { useTheme } from "./hooks";
+import { Text4, Text2 } from "./text";
+import IconButton from "./icon-button";
+import { Boxed } from "./boxed";
 var useStyles = createUseStyles(function(theme) {
     var _obj;
     return {
         container: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
             width: function(param) {
                 var width = param.width;
-                return width || '100%';
+                return width || "100%";
             },
             flexShrink: 0,
-            alignSelf: 'stretch'
+            alignSelf: "stretch"
         },
         imageContent: {
-            display: 'flex',
+            display: "flex",
             width: 100,
             minWidth: 100,
-            height: 'inherit'
+            height: "inherit"
         },
         dismissableContainer: {
-            position: 'relative',
-            display: 'flex',
+            position: "relative",
+            display: "flex",
             flexShrink: 0,
             width: function(param) {
                 var width = param.width;
-                return width || '100%';
+                return width || "100%";
             }
         },
         dismissableButton: {
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             right: 0,
             width: 48,
             height: 48,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
         },
         dismissableCircleContainer: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             width: 24,
             height: 24,
-            margin: '0 0 8px 8px',
-            borderRadius: '50%',
+            margin: "0 0 8px 8px",
+            borderRadius: "50%",
             backgroundColor: applyAlpha(theme.colors.background, 0.7)
         },
         textContainer: (_obj = {
@@ -128,13 +128,13 @@ var useStyles = createUseStyles(function(theme) {
                 var hasImage = param.hasImage;
                 return hasImage ? 24 : 56;
             }
-        }), _defineProperty(_obj, "display", 'flex'), _defineProperty(_obj, "flexDirection", 'column'), _defineProperty(_obj, "alignItems", 'flex-start'), _obj),
+        }), _defineProperty(_obj, "display", "flex"), _defineProperty(_obj, "flexDirection", "column"), _defineProperty(_obj, "alignItems", "flex-start"), _obj),
         touchableContainer: {
-            display: 'flex',
+            display: "flex",
             flexShrink: 0,
             width: function(param) {
                 var width = param.width;
-                return width || '100%';
+                return width || "100%";
             }
         }
     };
@@ -147,7 +147,7 @@ var Dismissable = function(param) {
         width: width
     });
     var ref = useTheme(), colors = ref.colors, texts = ref.texts;
-    return(/*#__PURE__*/ _jsxs("section", {
+    return /*#__PURE__*/ _jsxs("section", {
         className: classes.dismissableContainer,
         children: [
             children,
@@ -156,7 +156,7 @@ var Dismissable = function(param) {
                 onPress: onClose,
                 "aria-label": texts.closeButtonLabel,
                 style: {
-                    display: 'flex',
+                    display: "flex",
                     width: 48,
                     height: 48
                 },
@@ -168,7 +168,7 @@ var Dismissable = function(param) {
                 })
             })
         ]
-    }));
+    });
 };
 var Content = function(props) {
     var title = props.title, description = props.description, imageUrl = props.imageUrl, imageFit = props.imageFit;
@@ -187,9 +187,9 @@ var Content = function(props) {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 // don't create another region when the Content is inside a Dismissable wrapper
-                role: props['aria-label'] ? 'region' : undefined,
+                role: props["aria-label"] ? "region" : undefined,
                 className: classes.textContainer,
-                "aria-label": props['aria-label'],
+                "aria-label": props["aria-label"],
                 children: [
                     /*#__PURE__*/ _jsx(Text4, {
                         regular: true,
@@ -220,8 +220,8 @@ var Content = function(props) {
                 className: classes.imageContent,
                 style: {
                     background: "url(".concat(imageUrl, ") no-repeat"),
-                    backgroundSize: imageFit === 'fit' ? 'contain' : 'cover',
-                    backgroundPosition: imageFit === 'fit' ? 'bottom right' : 'center right'
+                    backgroundSize: imageFit === "fit" ? "contain" : "cover",
+                    backgroundPosition: imageFit === "fit" ? "bottom right" : "center right"
                 }
             })
         ]
@@ -230,36 +230,36 @@ var Content = function(props) {
         return content;
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ _jsx(Touchable, {
+        return /*#__PURE__*/ _jsx(Touchable, {
             onPress: props.onPress,
             trackingEvent: props.trackingEvent,
             className: classes.touchableContainer,
             children: content
-        }));
+        });
     }
     if (props.to) {
-        return(/*#__PURE__*/ _jsx(Touchable, {
+        return /*#__PURE__*/ _jsx(Touchable, {
             to: props.to,
             trackingEvent: props.trackingEvent,
             fullPageOnWebView: props.fullPageOnWebView,
             className: classes.touchableContainer,
             children: content
-        }));
+        });
     }
     if (props.href) {
-        return(/*#__PURE__*/ _jsx(Touchable, {
+        return /*#__PURE__*/ _jsx(Touchable, {
             trackingEvent: props.trackingEvent,
             href: props.href,
             newTab: props.newTab,
             className: classes.touchableContainer,
             children: content
-        }));
+        });
     }
     return content;
 };
 var HighlightedCard = function(_param) {
-    var ariaLabel = _param['aria-label'], props = _objectWithoutProperties(_param, [
-        'aria-label'
+    var ariaLabel = _param["aria-label"], props = _objectWithoutProperties(_param, [
+        "aria-label"
     ]);
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : props.title;
     return props.onClose ? /*#__PURE__*/ _jsx(Dismissable, {

package/dist-es/hooks.js

@@ -1,8 +1,3 @@
-import * as React from 'react';
-import ThemeContext from './theme-context';
-import ScreenSizeContext from './screen-size-context';
-import AriaIdGetterContext from './aria-id-getter-context';
-import { listenResize } from './utils/dom';
 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];
@@ -49,6 +44,11 @@ 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 * as React from "react";
+import ThemeContext from "./theme-context";
+import ScreenSizeContext from "./screen-size-context";
+import AriaIdGetterContext from "./aria-id-getter-context";
+import { listenResize } from "./utils/dom";
 export var useTheme = function() {
     var theme = React.useContext(ThemeContext);
     if (!theme) {
@@ -59,7 +59,7 @@ export var useTheme = function() {
 export var useDisableBodyScroll = function(disable) {
     React.useEffect(function() {
         if (disable) {
-            var bodyStyles = '';
+            var bodyStyles = "";
             var bodyScrollTop = 0;
             var disableBodyDepth = 0;
             var scrollContainer = document.scrollingElement || document.documentElement;
@@ -72,12 +72,12 @@ export var useDisableBodyScroll = function(disable) {
                 var ref1;
                 bodyScrollTop = (ref1 = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && ref1 !== void 0 ? ref1 : 0;
                 var _cssText;
-                bodyStyles = (_cssText = (ref = document.body) === null || ref === void 0 ? void 0 : ref.style.cssText) !== null && _cssText !== void 0 ? _cssText : '';
+                bodyStyles = (_cssText = (ref = document.body) === null || ref === void 0 ? void 0 : ref.style.cssText) !== null && _cssText !== void 0 ? _cssText : "";
                 if (document.body) {
                     var ref2;
                     var hasScrollbar = window.innerWidth > ((ref2 = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientWidth) !== null && ref2 !== void 0 ? ref2 : window.innerWidth);
                     // if the scrollbar is visible, we don't want to hide it because content will be resized
-                    var overflowY = hasScrollbar ? 'scroll' : 'hidden';
+                    var overflowY = hasScrollbar ? "scroll" : "hidden";
                     document.body.style.cssText = "overflow:hidden;overflow-y:".concat(overflowY, ";position:fixed;top:").concat(-bodyScrollTop, "px;left:0px;right:0px;bottom:0px");
                 }
             };
@@ -143,18 +143,18 @@ export var useAriaId = function(id) {
     return React.useRef(id || getAriaId()).current;
 };
 export var useWindowSize = function() {
-    var ref = _slicedToArray(React.useState(typeof window !== 'undefined' ? window.innerHeight : 1200 // Best guess
+    var ref = _slicedToArray(React.useState(typeof window !== "undefined" ? window.innerHeight : 1200 // Best guess
     ), 2), windowHeight = ref[0], setWindowHeight = ref[1];
-    var ref6 = _slicedToArray(React.useState(typeof window !== 'undefined' ? window.innerWidth : 800 // Best guess
+    var ref6 = _slicedToArray(React.useState(typeof window !== "undefined" ? window.innerWidth : 800 // Best guess
     ), 2), windowWidth = ref6[0], setWindowWidth = ref6[1];
     React.useEffect(function() {
         var handleResize = function() {
             setWindowHeight(window.innerHeight);
             setWindowWidth(window.innerWidth);
         };
-        window.addEventListener('resize', handleResize);
+        window.addEventListener("resize", handleResize);
         return function() {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener("resize", handleResize);
         };
     }, []);
     // do not create new result instances if values don't change
@@ -179,14 +179,14 @@ export var useWindowWidth = function() {
 // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect in the browser
-export var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 export var useIsInViewport = function(ref, defaultValue, options) {
-    var ref7 = _slicedToArray(React.useState(defaultValue), 2), isInViewport = ref7[0], setIsInViewport = ref7[1];
+    var _$ref = _slicedToArray(React.useState(defaultValue), 2), isInViewport = _$ref[0], setIsInViewport = _$ref[1];
     React.useEffect(function() {
         if (!ref.current) {
             return;
         }
-        if (typeof window.IntersectionObserver === 'undefined') {
+        if (typeof window.IntersectionObserver === "undefined") {
             return function() {};
         }
         var observer = new IntersectionObserver(function(entries) {

package/dist-es/iban-field.js

@@ -1,11 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useRifm } from 'rifm';
-import { useFieldProps } from './form-context';
-import { TextFieldBaseAutosuggest } from './text-field-base';
-import { createChangeEvent } from './utils/dom';
-import { combineRefs } from './utils/common';
-import { useTheme } from './hooks';
 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];
@@ -107,6 +99,14 @@ 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 } from "react/jsx-runtime";
+import * as React from "react";
+import { useRifm } from "rifm";
+import { useFieldProps } from "./form-context";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
+import { createChangeEvent } from "./utils/dom";
+import { combineRefs } from "./utils/common";
+import { useTheme } from "./hooks";
 var ibanLengthByCountry = {
     ES: 24,
     GB: 22,
@@ -133,14 +133,14 @@ var isValidIbanChecksum = function(iban) {
     // move first 4 digits to the end
     var tmp = iban.substr(4) + iban.substr(0, 4);
     // replace all letters A-Z to numbers from 10 to 35
-    var charCodeOfA = 'A'.charCodeAt(0);
+    var charCodeOfA = "A".charCodeAt(0);
     tmp = Array.from(tmp).map(function(char) {
         if (Number.isNaN(Number(char))) {
             var charCode = char.charCodeAt(0);
             return String(10 + charCode - charCodeOfA);
         }
         return char;
-    }).join('');
+    }).join("");
     // Iban is valid if tmp % 97 === 1
     return mod(tmp, 97) === 1;
 };
@@ -164,9 +164,9 @@ var isValidIban = function(iban) {
 };
 var formatIban = function(number) {
     var ref;
-    var sanitizedNumber = number.replace(/[^\dA-Za-z]/g, '');
+    var sanitizedNumber = number.replace(/[^\dA-Za-z]/g, "");
     var ref1;
-    return (ref1 = (ref = sanitizedNumber.match(/.{1,4}/g)) === null || ref === void 0 ? void 0 : ref.join(' ')) !== null && ref1 !== void 0 ? ref1 : sanitizedNumber;
+    return (ref1 = (ref = sanitizedNumber.match(/.{1,4}/g)) === null || ref === void 0 ? void 0 : ref.join(" ")) !== null && ref1 !== void 0 ? ref1 : sanitizedNumber;
 };
 var getInputMaxLength = function(currentValue) {
     var countryCode = currentValue.substr(0, 2);
@@ -189,9 +189,9 @@ var IbanInput = function(_param) {
         "defaultValue",
         "onChange"
     ]);
-    var ref3 = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''), 2), selfValue = ref3[0], setSelfValue = ref3[1];
+    var ref3 = _slicedToArray(React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""), 2), selfValue = ref3[0], setSelfValue = ref3[1];
     var ref2 = React.useRef(null);
-    var isControlledByParent = typeof value !== 'undefined';
+    var isControlledByParent = typeof value !== "undefined";
     var controlledValue = isControlledByParent ? value : selfValue;
     var handleChangeValue = React.useCallback(function(newFormattedValue) {
         if (!isControlledByParent) {
@@ -213,14 +213,14 @@ var IbanInput = function(_param) {
         },
         accept: /[\dA-Za-z]+/g
     });
-    return(/*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
+    return /*#__PURE__*/ _jsx("input", _objectSpread({}, other, {
         maxLength: getInputMaxLength(rifm.value),
         value: rifm.value,
         onChange: function(e) {
             var ref;
             var newValue = e.target.value;
             var prevValue = rifm.value;
-            if (newValue.length - prevValue.length > 1 && ((ref = e.nativeEvent) === null || ref === void 0 ? void 0 : ref.inputType) === 'insertText') {
+            if (newValue.length - prevValue.length > 1 && ((ref = e.nativeEvent) === null || ref === void 0 ? void 0 : ref.inputType) === "insertText") {
                 // Google Android virtual keyboard (GBoard) have some buggy behavior with autosuggestions
                 // and some times repeats the previously inserted caracters. If we detect that, revert
                 // the input value to the previous one
@@ -230,7 +230,7 @@ var IbanInput = function(_param) {
         },
         type: "text",
         ref: combineRefs(inputRef, ref2)
-    })));
+    }));
 };
 var IbanField = function(_param) {
     var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, customValidate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value1 = _param.value, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
@@ -249,7 +249,7 @@ var IbanField = function(_param) {
     var texts = useTheme().texts;
     var validate = function(value, rawValue) {
         if (!value) {
-            return optional ? '' : texts.formFieldErrorIsMandatory;
+            return optional ? "" : texts.formFieldErrorIsMandatory;
         }
         if (!isValidIban(value)) {
             return texts.formIbanError;
@@ -257,7 +257,7 @@ var IbanField = function(_param) {
         return customValidate === null || customValidate === void 0 ? void 0 : customValidate(value, rawValue);
     };
     var processValue = function(s) {
-        return s.replace(/[^\dA-Za-z]/g, '');
+        return s.replace(/[^\dA-Za-z]/g, "");
     };
     var fieldProps = useFieldProps({
         name: name,
@@ -273,8 +273,8 @@ var IbanField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({}, rest, fieldProps, {
         inputComponent: IbanInput
-    })));
+    }));
 };
 export default IbanField;

package/dist-es/icon-button.js

@@ -1,6 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import Touchable from './touchable';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -29,20 +26,23 @@ function _objectSpread(target) {
     }
     return target;
 }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import Touchable from "./touchable";
 var ICON_SIZE_1 = 24;
 var getButtonStyle = function(backgroundUrl, size, backgroundColor, iconSize, disabled) {
-    var normalizedIconSize = iconSize ? "".concat(iconSize, "px ").concat(iconSize, "px") : '100% 100%';
+    var normalizedIconSize = iconSize ? "".concat(iconSize, "px ").concat(iconSize, "px") : "100% 100%";
     return {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        textAlign: 'center',
+        display: "inline-block",
+        verticalAlign: "middle",
+        textAlign: "center",
         backgroundColor: backgroundColor,
-        backgroundImage: backgroundUrl ? "url(".concat(backgroundUrl, ")") : '',
-        backgroundPosition: '50% 50%',
+        backgroundImage: backgroundUrl ? "url(".concat(backgroundUrl, ")") : "",
+        backgroundPosition: "50% 50%",
         backgroundSize: normalizedIconSize,
-        backgroundRepeat: 'no-repeat',
+        backgroundRepeat: "no-repeat",
         border: 0,
-        cursor: disabled ? 'default' : 'pointer',
+        cursor: disabled ? "default" : "pointer",
         height: size,
         width: size
     };
@@ -61,42 +61,42 @@ var getButtonStyle = function(backgroundUrl, size, backgroundColor, iconSize, di
  *     </IconButton />
  *
  */ var IconButton = function(props) {
-    var icon = props.icon, children = props.children, _backgroundColor = props.backgroundColor, backgroundColor = _backgroundColor === void 0 ? 'transparent' : _backgroundColor, iconSize = props.iconSize, _size = props.size, size = _size === void 0 ? ICON_SIZE_1 : _size;
+    var icon = props.icon, children = props.children, _backgroundColor = props.backgroundColor, backgroundColor = _backgroundColor === void 0 ? "transparent" : _backgroundColor, iconSize = props.iconSize, _size = props.size, size = _size === void 0 ? ICON_SIZE_1 : _size;
     var commonProps = {
-        className: props.className || '',
+        className: props.className || "",
         disabled: props.disabled,
         style: _objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled), props.style),
         trackingEvent: props.trackingEvent,
-        'aria-live': props['aria-live'],
+        "aria-live": props["aria-live"],
         dataAttributes: props.dataAttributes
     };
     if (props.href) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             href: props.href,
             newTab: props.newTab,
-            "aria-label": props['aria-label'],
+            "aria-label": props["aria-label"],
             children: !icon && React.Children.only(children)
-        })));
+        }));
     }
     if (props.to) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             to: props.to,
             fullPageOnWebView: props.fullPageOnWebView,
             replace: props.replace,
-            "aria-label": props['aria-label'],
+            "aria-label": props["aria-label"],
             children: !icon && React.Children.only(children)
-        })));
+        }));
     }
     if (props.onPress) {
-        return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+        return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             onPress: props.onPress,
-            "aria-label": props['aria-label'],
+            "aria-label": props["aria-label"],
             children: !icon && React.Children.only(children)
-        })));
+        }));
     }
-    return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
+    return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
         maybe: true,
         children: !icon && React.Children.only(children)
-    })));
+    }));
 };
 export default IconButton;