@telefonica/mistica 11.2.1 → 11.4.1

package/dist/aria-id-getter-context.js

@@ -26,7 +26,7 @@ function _interopRequireWildcard(obj) {
     }
 }
 var AriaIdGetterContext = /*#__PURE__*/ React.createContext(function() {
-    return '';
+    return "";
 });
 var _default = AriaIdGetterContext;
 exports.default = _default;

package/dist/badge.js

@@ -49,26 +49,26 @@ function _defineProperty(obj, key, value) {
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         container: {
-            position: 'relative',
-            display: 'inline-block'
+            position: "relative",
+            display: "inline-block"
         },
         badge: {
             position: function position(param) {
                 var hasChildren = param.hasChildren;
-                return hasChildren ? 'absolute' : 'static';
+                return hasChildren ? "absolute" : "static";
             },
             top: -2,
             right: -6,
             width: 8,
             height: 8,
             background: theme.colors.badge,
-            borderRadius: '50%',
+            borderRadius: "50%",
             boxShadow: "0px 0px 0px 1.5px ".concat(theme.colors.borderLight)
         },
         badgeNumber: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             top: -8,
             right: -9,
             width: 18,
@@ -100,14 +100,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         hasChildren: hasChildren
     });
     if (children && value === 0) {
-        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
             children: children
-        }));
+        });
     }
     if (value === 0) {
         return null;
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         className: classes.container,
         children: [
             value ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
@@ -115,13 +115,13 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 "aria-hidden": "true" // otherwise OSX VoiceOver reads this number
                 ,
                 className: (0, _classnames).default(classes.badge, classes.badgeNumber, _defineProperty({}, classes.badgeBigNumber, value > 9)),
-                children: value > 9 ? '+9' : value
+                children: value > 9 ? "+9" : value
             }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.badge
             }),
             children
         ]
-    }));
+    });
 };
 var _default = Badge;
 exports.default = _default;

package/dist/box.js

@@ -76,18 +76,18 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Box = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var className = param.className, children = param.children, width = param.width, _padding = param.padding, padding = _padding === void 0 ? 0 : _padding, _paddingX = param.paddingX, paddingX = _paddingX === void 0 ? padding : _paddingX, _paddingY = param.paddingY, paddingY = _paddingY === void 0 ? padding : _paddingY, _paddingTop = param.paddingTop, paddingTop = _paddingTop === void 0 ? paddingY : _paddingTop, _paddingBottom = param.paddingBottom, paddingBottom = _paddingBottom === void 0 ? paddingY : _paddingBottom, _paddingLeft = param.paddingLeft, paddingLeft = _paddingLeft === void 0 ? paddingX : _paddingLeft, _paddingRight = param.paddingRight, paddingRight = _paddingRight === void 0 ? paddingX : _paddingRight, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
+    var className = param.className, children = param.children, width = param.width, _padding = param.padding, padding = _padding === void 0 ? 0 : _padding, _paddingX = param.paddingX, paddingX = _paddingX === void 0 ? padding : _paddingX, _paddingY = param.paddingY, paddingY = _paddingY === void 0 ? padding : _paddingY, _paddingTop = param.paddingTop, paddingTop = _paddingTop === void 0 ? paddingY : _paddingTop, _paddingBottom = param.paddingBottom, paddingBottom = _paddingBottom === void 0 ? paddingY : _paddingBottom, _paddingLeft = param.paddingLeft, paddingLeft = _paddingLeft === void 0 ? paddingX : _paddingLeft, _paddingRight = param.paddingRight, paddingRight = _paddingRight === void 0 ? paddingX : _paddingRight, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"];
     var classes = useStyles({
         padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
         width: width
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         className: (0, _classnames).default(className, classes.box),
         role: role,
         "aria-label": ariaLabel,
         ref: ref,
         children: children
-    })));
+    }));
 });
 var _default = Box;
 exports.default = _default;

package/dist/box.js.flow

@@ -36,8 +36,5 @@ declare type Props = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare var Box: React.ComponentType<{
-  ...Props,
-  ref?: React.Ref<HTMLDivElement>,
-}>;
+declare var Box: React.AbstractComponent<Props, HTMLDivElement>;
 declare export default typeof Box;

package/dist/boxed.js

@@ -78,23 +78,23 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
                     return "1px solid ".concat(colors.backgroundContainer);
                 }
                 if (isInverseInside) {
-                    return 'none';
+                    return "none";
                 }
                 return "1px solid ".concat(colors.border);
             },
             borderRadius: 4,
-            overflow: 'hidden'
+            overflow: "hidden"
         }
     };
 });
 var Boxed = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var children = param.children, tmp = param.isInverse, isInverseInside = tmp === void 0 ? false : tmp, className = param.className, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param['aria-label'];
+    var children = param.children, tmp = param.isInverse, isInverseInside = tmp === void 0 ? false : tmp, className = param.className, role = param.role, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"];
     var isInverseOutside = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverseOutside: isInverseOutside,
         isInverseInside: isInverseInside
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         ref: ref,
         className: (0, _classnames).default(className, classes.boxed),
         role: role
@@ -104,6 +104,6 @@ var Boxed = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             isInverse: isInverseInside,
             children: children
         })
-    })));
+    }));
 });
 exports.Boxed = Boxed;

package/dist/boxed.js.flow

@@ -14,8 +14,5 @@ declare type Props = {
   dataAttributes?: DataAttributes,
   "aria-label"?: string,
 };
-declare export var Boxed: React.ComponentType<{
-  ...Props,
-  ref?: React.Ref<HTMLDivElement>,
-}>;
+declare export var Boxed: React.AbstractComponent<Props, HTMLDivElement>;
 declare export {};

package/dist/button-fixed-footer-layout.js

@@ -37,10 +37,10 @@ function _interopRequireWildcard(obj) {
     }
 }
 var ButtonFixedFooterLayout = function ButtonFixedFooterLayout(param) {
-    var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, button = param.button, secondaryButton = param.secondaryButton, link = param.link, children = param.children, _desktopButtonAlign = param.desktopButtonAlign, desktopButtonAlign = _desktopButtonAlign === void 0 ? 'left' : _desktopButtonAlign, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, onChangeFooterHeight = param.onChangeFooterHeight;
+    var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, button = param.button, secondaryButton = param.secondaryButton, link = param.link, children = param.children, _desktopButtonAlign = param.desktopButtonAlign, desktopButtonAlign = _desktopButtonAlign === void 0 ? "left" : _desktopButtonAlign, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, onChangeFooterHeight = param.onChangeFooterHeight;
     var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller, isTablet = ref.isTablet;
     var hasButton = !!button || !!secondaryButton;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_fixedFooterLayout.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_fixedFooterLayout.default, {
         onChangeFooterHeight: onChangeFooterHeight,
         isFooterVisible: hasButton && isFooterVisible,
         footerBgColor: footerBgColor,
@@ -49,7 +49,7 @@ var ButtonFixedFooterLayout = function ButtonFixedFooterLayout(param) {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingY: isTablet ? 32 : isTabletOrSmaller ? 16 : 0,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_buttonLayout.default, {
-                    align: isTabletOrSmaller ? 'full-width' : desktopButtonAlign,
+                    align: isTabletOrSmaller ? "full-width" : desktopButtonAlign,
                     link: link,
                     children: [
                         button,
@@ -59,7 +59,7 @@ var ButtonFixedFooterLayout = function ButtonFixedFooterLayout(param) {
             })
         }),
         children: children
-    }));
+    });
 };
 var _default = ButtonFixedFooterLayout;
 exports.default = _default;

package/dist/button-group.js

@@ -38,10 +38,10 @@ var buttonLinkPadding = 6;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         inline: {
-            display: 'inline-flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            alignItems: 'center'
+            display: "inline-flex",
+            flexDirection: "row",
+            flexWrap: "wrap",
+            alignItems: "center"
         },
         container: {
             marginTop: -buttonLayoutSpacing,
@@ -49,7 +49,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
         },
         buttons: {
             marginLeft: buttonLinkPadding,
-            '& > div': {
+            "& > div": {
                 marginTop: buttonLayoutSpacing,
                 marginLeft: buttonLayoutSpacing
             }
@@ -59,7 +59,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             marginLeft: buttonLayoutSpacing,
             width: function width(param) {
                 var bothButtons = param.bothButtons;
-                return bothButtons ? '100%' : 'auto';
+                return bothButtons ? "100%" : "auto";
             }
         }
     };

package/dist/button-layout.js

@@ -112,8 +112,8 @@ var useStyles = (0, _jss).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: {
@@ -121,35 +121,35 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             margin: 16
         }
     }), _defineProperty(_obj, "container", {
-        display: 'flex',
+        display: "flex",
         justifyContent: function justifyContent(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 width(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)");
@@ -162,9 +162,9 @@ var useStyles = (0, _jss).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;
@@ -212,7 +212,7 @@ var buttonsRange = [
     _button.ButtonPrimary
 ];
 var ButtonLayout = function ButtonLayout(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 = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -221,7 +221,7 @@ var ButtonLayout = function ButtonLayout(param1) {
     }), 2), buttonStatus = ref[0], setButtonStatus = ref[1];
     var updateButtonStatus = function updateButtonStatus(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
@@ -241,13 +241,13 @@ var ButtonLayout = function ButtonLayout(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.BUTTON_MIN_WIDTH
@@ -287,13 +287,13 @@ var ButtonLayout = function ButtonLayout(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
@@ -303,7 +303,7 @@ var ButtonLayout = function ButtonLayout(param1) {
         var range2 = buttonsRange.indexOf(b2.type);
         return range1 - range2;
     });
-    var needsLinkAlignment = !isTabletOrSmaller && align === 'left';
+    var needsLinkAlignment = !isTabletOrSmaller && align === "left";
     var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
         ref: wrapperElRef,
         className: classes.container,