@telefonica/mistica 11.2.0 → 11.4.0

package/dist-es/navigation-bar.js

@@ -1,26 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import * as React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import classnames from 'classnames';
-import ResponsiveLayout from './responsive-layout';
-import Inline from './inline';
-import Box from './box';
-import Touchable from './touchable';
-import { Text2, Text3 } from './text';
-import { useScreenSize, useTheme, useAriaId } from './hooks';
-import { createUseStyles } from './jss';
-import IconMenuRegular from './generated/mistica-icons/icon-menu-regular';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
-import IconButton from './icon-button';
-import NegativeBox from './negative-box';
-import { Row, RowList } from './list';
-import { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
-import FocusTrap from './focus-trap';
-import { Portal } from './portal';
-import GridLayout from './grid-layout';
-import { useSetModalState } from './modal-context-provider';
 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];
@@ -122,12 +99,35 @@ 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 { createElement as _createElement } from "react";
+import * as React from "react";
+import { CSSTransition } from "react-transition-group";
+import classnames from "classnames";
+import ResponsiveLayout from "./responsive-layout";
+import Inline from "./inline";
+import Box from "./box";
+import Touchable from "./touchable";
+import { Text2, Text3 } from "./text";
+import { useScreenSize, useTheme, useAriaId } from "./hooks";
+import { createUseStyles } from "./jss";
+import IconMenuRegular from "./generated/mistica-icons/icon-menu-regular";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import IconChevronLeftRegular from "./generated/mistica-icons/icon-chevron-left-regular";
+import IconButton from "./icon-button";
+import NegativeBox from "./negative-box";
+import { Row, RowList } from "./list";
+import { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";
+import FocusTrap from "./focus-trap";
+import { Portal } from "./portal";
+import GridLayout from "./grid-layout";
+import { useSetModalState } from "./modal-context-provider";
 var MovistarLogo = function(param) {
     var size = param.size;
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
     var isInverse = useIsInverseVariant();
     var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-    return(/*#__PURE__*/ _jsx("svg", {
+    return /*#__PURE__*/ _jsx("svg", {
         width: size,
         height: size,
         viewBox: "0 0 40 40",
@@ -143,14 +143,14 @@ var MovistarLogo = function(param) {
                 })
             })
         })
-    }));
+    });
 };
 var VivoLogo = function(param) {
     var size = param.size;
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
     var isInverse = useIsInverseVariant();
     var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-    return(/*#__PURE__*/ _jsx("svg", {
+    return /*#__PURE__*/ _jsx("svg", {
         height: size,
         viewBox: "0 0 96 40",
         role: "presentation",
@@ -190,14 +190,14 @@ var VivoLogo = function(param) {
                 })
             ]
         })
-    }));
+    });
 };
 var O2Logo = function(param) {
     var size = param.size;
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
     var isInverse = useIsInverseVariant();
     var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-    return(/*#__PURE__*/ _jsx("svg", {
+    return /*#__PURE__*/ _jsx("svg", {
         width: size,
         height: size,
         viewBox: "0 0 40 40",
@@ -213,14 +213,14 @@ var O2Logo = function(param) {
                 })
             })
         })
-    }));
+    });
 };
 var TelefonicaLogo = function(param) {
     var size = param.size;
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
     var isInverse = useIsInverseVariant();
     var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-    return(/*#__PURE__*/ _jsx("svg", {
+    return /*#__PURE__*/ _jsx("svg", {
         height: size,
         viewBox: "0 0 125 48",
         role: "presentation",
@@ -239,14 +239,14 @@ var TelefonicaLogo = function(param) {
                 })
             ]
         })
-    }));
+    });
 };
 var BlauLogo = function(param) {
     var size = param.size;
     var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
     var isInverse = useIsInverseVariant();
     var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-    return(/*#__PURE__*/ _jsx("svg", {
+    return /*#__PURE__*/ _jsx("svg", {
         height: size,
         viewBox: "0 0 100 44",
         role: "presentation",
@@ -264,7 +264,7 @@ var BlauLogo = function(param) {
                 })
             ]
         })
-    }));
+    });
 };
 export var NavigationBarLogo = function(param) {
     var size = param.size;
@@ -272,27 +272,27 @@ export var NavigationBarLogo = function(param) {
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     size = size !== null && size !== void 0 ? size : isTabletOrSmaller ? 40 : 48;
     switch(skinName){
-        case 'Movistar':
-            return(/*#__PURE__*/ _jsx(MovistarLogo, {
+        case "Movistar":
+            return /*#__PURE__*/ _jsx(MovistarLogo, {
                 size: size
-            }));
-        case 'Vivo':
-            return(/*#__PURE__*/ _jsx(VivoLogo, {
+            });
+        case "Vivo":
+            return /*#__PURE__*/ _jsx(VivoLogo, {
                 size: size
-            }));
-        case 'O2':
-        case 'O2-classic':
-            return(/*#__PURE__*/ _jsx(O2Logo, {
+            });
+        case "O2":
+        case "O2-classic":
+            return /*#__PURE__*/ _jsx(O2Logo, {
                 size: size
-            }));
-        case 'Telefonica':
-            return(/*#__PURE__*/ _jsx(TelefonicaLogo, {
+            });
+        case "Telefonica":
+            return /*#__PURE__*/ _jsx(TelefonicaLogo, {
                 size: size
-            }));
-        case 'Blau':
-            return(/*#__PURE__*/ _jsx(BlauLogo, {
+            });
+        case "Blau":
+            return /*#__PURE__*/ _jsx(BlauLogo, {
                 size: size
-            }));
+            });
         default:
             return null;
     }
@@ -300,43 +300,43 @@ export var NavigationBarLogo = function(param) {
 var useBurgerStyles = createUseStyles(function() {
     return {
         burgerIconContainer: {
-            position: 'relative',
+            position: "relative",
             width: 24,
             height: 24,
-            '& > *': {
-                position: 'absolute',
+            "& > *": {
+                position: "absolute",
                 opacity: 1,
-                transform: 'rotate(0) scale(1)',
-                transition: 'transform 300ms, opacity 100ms'
+                transform: "rotate(0) scale(1)",
+                transition: "transform 300ms, opacity 100ms"
             }
         },
         iconCloseHidden: {
             opacity: 0,
-            transform: 'rotate(-45deg) scale(0.9)'
+            transform: "rotate(-45deg) scale(0.9)"
         },
         iconMenuHidden: {
             opacity: 0,
-            transform: 'rotate(0deg) scale(0.7)'
+            transform: "rotate(0deg) scale(0.7)"
         }
     };
 });
 var BurgerMenuIcon = function(param) {
     var isOpen = param.isOpen;
     var classes = useBurgerStyles();
-    return(/*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classes.burgerIconContainer,
         role: "presentation",
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: isOpen ? '' : classes.iconCloseHidden,
+                className: isOpen ? "" : classes.iconCloseHidden,
                 children: /*#__PURE__*/ _jsx(IconCloseRegular, {})
             }),
             /*#__PURE__*/ _jsx("div", {
-                className: isOpen ? classes.iconMenuHidden : '',
+                className: isOpen ? classes.iconMenuHidden : "",
                 children: /*#__PURE__*/ _jsx(IconMenuRegular, {})
             })
         ]
-    }));
+    });
 };
 var NAVBAR_ZINDEX = 25;
 var BURGER_ZINDEX = 26;
@@ -347,56 +347,56 @@ var useStyles = createUseStyles(function(theme) {
     var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
     return {
         topFixed: {
-            position: 'fixed',
+            position: "fixed",
             top: 0,
             left: 0,
             right: 0,
             zIndex: NAVBAR_ZINDEX
         },
         notFixedPadding: {
-            width: '100%',
+            width: "100%",
             padding: function(param) {
                 var paddingX = param.paddingX;
                 return "0 ".concat(paddingX, "px");
             }
         },
         navbar: _defineProperty({
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
+            width: "100%",
+            display: "flex",
+            alignItems: "center",
             background: function(param) {
                 var isInverse = param.isInverse;
                 return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
             },
             height: DESKTOP_NAVBAR_HEIGHT,
-            padding: '16px 0',
-            borderBottomStyle: 'solid',
+            padding: "16px 0",
+            borderBottomStyle: "solid",
             borderBottomWidth: function(param) {
                 var withBorder = param.withBorder;
                 return withBorder ? 1 : 0;
             },
             borderColor: function(param) {
                 var isInverse = param.isInverse;
-                return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
+                return isInverse && !theme.isDarkMode ? "transparent" : theme.colors.divider;
             }
         }, theme.mq.tabletOrSmaller, {
-            transition: 'border-color 300ms',
+            transition: "border-color 300ms",
             borderColor: function(param) {
                 var isMenuOpen = param.isMenuOpen, isInverse = param.isInverse;
-                return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
+                return isMenuOpen || isInverse && !theme.isDarkMode ? "transparent" : theme.colors.divider;
             },
             height: MOBILE_NAVBAR_HEIGHT,
-            padding: '8px 0'
+            padding: "8px 0"
         }),
         section: _defineProperty({
             height: DESKTOP_NAVBAR_HEIGHT,
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 8px',
+            display: "flex",
+            alignItems: "center",
+            padding: "0 8px",
             borderBottom: "2px solid transparent",
-            transition: 'border-color 300ms ease-in-out'
+            transition: "border-color 300ms ease-in-out"
         }, theme.mq.supportsHover, {
-            '&:hover span': {
+            "&:hover span": {
                 color: function(param) {
                     var isInverse = param.isInverse;
                     return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
@@ -416,30 +416,30 @@ var useStyles = createUseStyles(function(theme) {
         }),
         burgerMenu: {
             zIndex: BURGER_ZINDEX,
-            position: 'fixed',
+            position: "fixed",
             top: MOBILE_NAVBAR_HEIGHT,
             left: 0,
             right: 0,
             height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
-            overflowY: 'auto',
+            overflowY: "auto",
             background: theme.colors.background,
             boxShadow: function(param) {
                 var menuTransitionState = param.menuTransitionState;
-                return menuTransitionState !== 'closed' ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(shadowAlpha, ")") : 'none';
+                return menuTransitionState !== "closed" ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(shadowAlpha, ")") : "none";
             },
             transition: "transform ".concat(BURGER_MENU_ANIMATION_DURATION_MS, "ms ease-out")
         },
         burgerMenuEnter: {
-            transform: 'translate(-100vw)'
+            transform: "translate(-100vw)"
         },
         burgerMenuEnterActive: {
-            transform: 'translate(0)'
+            transform: "translate(0)"
         },
         burgerMenuExit: {
-            transform: 'translate(0)'
+            transform: "translate(0)"
         },
         burgerMenuExitActive: {
-            transform: 'translate(-100vw)'
+            transform: "translate(-100vw)"
         },
         iconButton: _defineProperty({
             color: function(param) {
@@ -447,7 +447,7 @@ var useStyles = createUseStyles(function(theme) {
                 return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
             }
         }, theme.mq.supportsHover, {
-            '&:hover': {
+            "&:hover": {
                 color: function(param) {
                     var isInverse = param.isInverse;
                     return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
@@ -460,7 +460,7 @@ var MainNavigationBar = function(param) {
     var sections = param.sections, selectedIndex = param.selectedIndex, right = param.right, logo = param.logo, _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, _topFixed = param.topFixed, topFixed = _topFixed === void 0 ? true : _topFixed;
     var texts = useTheme().texts;
     var ref = _slicedToArray(React.useState(false), 2), isMenuOpen = ref[0], setIsMenuOpen = ref[1];
-    var ref1 = _slicedToArray(React.useState('closed'), 2), menuTransitionState = ref1[0], setMenuTransitionState = ref1[1];
+    var ref1 = _slicedToArray(React.useState("closed"), 2), menuTransitionState = ref1[0], setMenuTransitionState = ref1[1];
     var menuId = useAriaId();
     var classes = useStyles({
         isMenuOpen: isMenuOpen,
@@ -484,8 +484,8 @@ var MainNavigationBar = function(param) {
                 isModalOpen: false
             });
         };
-        var disableFocusTrap = menuTransitionState !== 'open';
-        return(/*#__PURE__*/ _jsxs(_Fragment, {
+        var disableFocusTrap = menuTransitionState !== "open";
+        return /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(FocusTrap, {
                     disabled: disableFocusTrap,
@@ -536,16 +536,16 @@ var MainNavigationBar = function(param) {
                         group: "burger-menu-lock",
                         children: /*#__PURE__*/ _jsx(CSSTransition, {
                             onEntering: function() {
-                                setMenuTransitionState('opening');
+                                setMenuTransitionState("opening");
                             },
                             onEntered: function() {
-                                setMenuTransitionState('open');
+                                setMenuTransitionState("open");
                             },
                             onExiting: function() {
-                                setMenuTransitionState('closing');
+                                setMenuTransitionState("closing");
                             },
                             onExited: function() {
-                                setMenuTransitionState('closed');
+                                setMenuTransitionState("closed");
                             },
                             in: isMenuOpen,
                             timeout: BURGER_MENU_ANIMATION_DURATION_MS,
@@ -567,7 +567,7 @@ var MainNavigationBar = function(param) {
                                     children: /*#__PURE__*/ _jsx(NegativeBox, {
                                         children: /*#__PURE__*/ _jsx(RowList, {
                                             children: sections.map(function(section, index) {
-                                                /*#__PURE__*/ return _jsx(Row, _objectSpread({}, section), index);
+                                                return /*#__PURE__*/ _jsx(Row, _objectSpread({}, section), index);
                                             })
                                         })
                                     })
@@ -577,9 +577,9 @@ var MainNavigationBar = function(param) {
                     })
                 })
             ]
-        }));
+        });
     }
-    return(/*#__PURE__*/ _jsxs(ThemeVariant, {
+    return /*#__PURE__*/ _jsxs(ThemeVariant, {
         isInverse: isInverse,
         children: [
             /*#__PURE__*/ _jsx("header", {
@@ -603,11 +603,10 @@ var MainNavigationBar = function(param) {
                                                 ]);
                                                 return _createElement(Touchable, _objectSpread({}, touchableProps, {
                                                     key: idx,
-                                                    className: classnames(classes.section, _defineProperty({}, classes.selectedSection, idx === selectedIndex)),
-                                                    children: /*#__PURE__*/ _jsx(Text3, {
-                                                        regular: true,
-                                                        children: title
-                                                    })
+                                                    className: classnames(classes.section, _defineProperty({}, classes.selectedSection, idx === selectedIndex))
+                                                }), /*#__PURE__*/ _jsx(Text3, {
+                                                    regular: true,
+                                                    children: title
                                                 }));
                                             })
                                         })
@@ -623,7 +622,7 @@ var MainNavigationBar = function(param) {
                 className: classes.spacer
             })
         ]
-    }));
+    });
 };
 export { MainNavigationBar };
 export var NavigationBar = function(param) {
@@ -663,7 +662,7 @@ export var NavigationBar = function(param) {
             })
         ]
     });
-    return(/*#__PURE__*/ _jsxs(ThemeVariant, {
+    return /*#__PURE__*/ _jsxs(ThemeVariant, {
         isInverse: isInverse,
         children: [
             /*#__PURE__*/ _jsx("header", {
@@ -679,7 +678,7 @@ export var NavigationBar = function(param) {
                 className: classes.spacer
             })
         ]
-    }));
+    });
 };
 export var FunnelNavigationBar = function(param) {
     var logo = param.logo, right = param.right, _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, _topFixed = param.topFixed, topFixed = _topFixed === void 0 ? true : _topFixed;
@@ -687,7 +686,7 @@ export var FunnelNavigationBar = function(param) {
         isInverse: isInverse,
         withBorder: true
     });
-    return(/*#__PURE__*/ _jsxs(ThemeVariant, {
+    return /*#__PURE__*/ _jsxs(ThemeVariant, {
         isInverse: isInverse,
         children: [
             /*#__PURE__*/ _jsx("header", {
@@ -710,7 +709,7 @@ export var FunnelNavigationBar = function(param) {
                 className: classes.spacer
             })
         ]
-    }));
+    });
 };
 var useNavigationBarActionGroupStyles = createUseStyles(function() {
     return {
@@ -724,33 +723,33 @@ var useNavigationBarActionGroupStyles = createUseStyles(function() {
 export var NavigationBarActionGroup = function(param) {
     var children = param.children;
     var classes = useNavigationBarActionGroupStyles();
-    return(/*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: classes.lineHeightFix,
         children: /*#__PURE__*/ _jsx(Inline, {
             space: 24,
             alignItems: "center",
             children: children
         })
-    }));
+    });
 };
 var useNavigationBarActionStyles = createUseStyles(function(theme) {
     return {
         touchable: _defineProperty({
             lineHeight: 0,
-            '& svg': {
+            "& svg": {
                 color: function(param) {
                     var isInverse = param.isInverse;
                     return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
                 }
             }
         }, theme.mq.supportsHover, {
-            '&:hover span': {
+            "&:hover span": {
                 color: function(param) {
                     var isInverse = param.isInverse;
                     return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
                 }
             },
-            '&:hover svg': {
+            "&:hover svg": {
                 color: function(param) {
                     var isInverse = param.isInverse;
                     return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
@@ -767,18 +766,18 @@ var NavigationBarAction = function(_param) {
     var classes = useNavigationBarActionStyles({
         isInverse: isInverse
     });
-    return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, touchableProps, {
+    return /*#__PURE__*/ _jsx(Touchable, _objectSpread({}, touchableProps, {
         className: classes.touchable,
         children: /*#__PURE__*/ _jsx(Inline, {
             space: 16,
             alignItems: "center",
             children: React.Children.map(children, function(child) {
-                return typeof child === 'string' ? /*#__PURE__*/ _jsx(Text2, {
+                return typeof child === "string" ? /*#__PURE__*/ _jsx(Text2, {
                     regular: true,
                     children: child
                 }) : child;
             })
         })
-    })));
+    }));
 };
 export { NavigationBarAction };

package/dist-es/navigation-breadcrumbs.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Text1 } from './text';
-import { useTheme } from './hooks';
-var BREADCRUMB_SEPARATOR = ' / ';
+import * as React from "react";
+import { Text1 } from "./text";
+import { useTheme } from "./hooks";
+var BREADCRUMB_SEPARATOR = " / ";
 var NavigationBreadcrumbs = function(param1) {
     var title1 = param1.title, breadcrumbs = param1.breadcrumbs;
     var theme = useTheme();
     var Link = theme.Link;
-    return(/*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         children: [
             breadcrumbs.map(function(param, index) {
                 var title = param.title, url = param.url;
-                /*#__PURE__*/ return _jsxs(React.Fragment, {
+                return /*#__PURE__*/ _jsxs(React.Fragment, {
                     children: [
                         /*#__PURE__*/ _jsx(Link, {
                             style: {
-                                textDecoration: 'none'
+                                textDecoration: "none"
                             },
                             to: url,
                             children: /*#__PURE__*/ _jsx(Text1, {
@@ -36,6 +36,6 @@ var NavigationBreadcrumbs = function(param1) {
                 children: title1
             })
         ]
-    }));
+    });
 };
 export default NavigationBreadcrumbs;

package/dist-es/negative-box.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { createUseStyles } from './jss';
+import * as React from "react";
+import { createUseStyles } from "./jss";
 var useStyles = createUseStyles(function() {
     return {
         negativeBox: {
@@ -23,9 +23,9 @@ var NegativeBox = function(param) {
         marginLeft: marginLeft,
         marginRight: marginRight
     });
-    return(/*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", {
         className: classes.negativeBox,
         children: children
-    }));
+    });
 };
 export default NegativeBox;