@telefonica/mistica 11.2.1 → 11.4.1

package/dist/skins/types.js.flow

@@ -1,19 +1,25 @@
 // @flow
 
 export type SkinVariant = "prominent";
-export type SkinName =
+export type KnownSkinName =
   | "Movistar"
   | "O2"
   | "O2-classic"
   | "Vivo"
   | "Telefonica"
   | "Blau";
-export type GetSkin = (variant?: SkinVariant) => Skin;
+export type SkinName = KnownSkinName | string;
+export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
 export type Skin = {
   name: SkinName,
   colors: Colors,
   darkModeColors?: $Shape<Colors>,
 };
+export type KnownSkin = {
+  name: KnownSkinName,
+  colors: Colors,
+  darkModeColors?: $Shape<Colors>,
+};
 export type Colors = {
   appBarBackground: string,
   background: string,

package/dist/skins/utils.d.ts

@@ -1,2 +1,2 @@
-import type { Skin, SkinName } from './types';
-export declare const getSkinByName: (name: SkinName, variant?: "prominent" | undefined) => Skin;
+import type { KnownSkin, KnownSkinName } from './types';
+export declare const getSkinByName: (name: KnownSkinName, variant?: "prominent" | undefined) => KnownSkin;

package/dist/skins/utils.js

@@ -27,7 +27,7 @@ var getSkinByName = function getSkinByName(name, variant) {
         default:
             {
                 var n = name;
-                throw Error('Unknown skin name: ' + n);
+                throw Error("Unknown skin name: " + n);
             }
     }
 };

package/dist/skins/utils.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
-import type { Skin, SkinName } from "./types";
+import type { KnownSkin, KnownSkinName } from "./types";
 declare export var getSkinByName: (
-  name: SkinName,
+  name: KnownSkinName,
   variant?: "prominent" | void
-) => Skin;
+) => KnownSkin;

package/dist/skins/vivo.d.ts

@@ -1,4 +1,4 @@
-import type { GetSkin } from './types';
+import type { GetKnownSkin } from './types';
 export declare const palette: {
     readonly vivoPurple: "#660099";
     readonly vivoPurpleDark: "#461E5F";
@@ -34,4 +34,4 @@ export declare const palette: {
     readonly darkModeGrey: "#242424";
     readonly darkModeGrey6: "#313235";
 };
-export declare const getVivoSkin: GetSkin;
+export declare const getVivoSkin: GetKnownSkin;

package/dist/skins/vivo.js

@@ -6,40 +6,40 @@ exports.getVivoSkin = exports.palette = void 0;
 var _color = require("../utils/color");
 var _constants = require("./constants");
 var palette = {
-    vivoPurple: '#660099',
-    vivoPurpleDark: '#461E5F',
-    vivoPurpleLight90: '#751AA3',
-    vivoPurpleLight80: '#8433AD',
-    vivoPurpleLight50: '#B280CC',
-    vivoPurpleLight20: '#E0CCEB',
-    vivoPurpleLight10: '#EFE5F4',
-    vivoGreen: '#99CC33',
-    vivoGreenDark: '#225C3D',
-    vivoGreenLight30: '#91AE9E',
-    vivoGreenLight10: '#EDF8E8',
-    vivoBlue: '#00ABDB',
-    orange: '#FF9900',
-    orangeDark: '#972A1D',
-    orangeLight10: '#FFEFE1',
-    orangeLight40: '#FFB84C',
-    pink: '#EB3D7D',
-    pepper: '#CC1F59',
-    pepperDark: '#B71D63',
-    pepperDark80: '#8F2052',
-    pepperLight40: '#DB628B',
-    pepperLight30: '#F7B1CB',
-    pepperLight10: '#FCE4EF',
-    grey1: '#F6F6F6',
-    grey2: '#EEEEEE',
-    grey3: '#DDDDDD',
-    grey4: '#999999',
-    grey5: '#666666',
-    grey6: '#000000',
-    white: '#FFFFFF',
+    vivoPurple: "#660099",
+    vivoPurpleDark: "#461E5F",
+    vivoPurpleLight90: "#751AA3",
+    vivoPurpleLight80: "#8433AD",
+    vivoPurpleLight50: "#B280CC",
+    vivoPurpleLight20: "#E0CCEB",
+    vivoPurpleLight10: "#EFE5F4",
+    vivoGreen: "#99CC33",
+    vivoGreenDark: "#225C3D",
+    vivoGreenLight30: "#91AE9E",
+    vivoGreenLight10: "#EDF8E8",
+    vivoBlue: "#00ABDB",
+    orange: "#FF9900",
+    orangeDark: "#972A1D",
+    orangeLight10: "#FFEFE1",
+    orangeLight40: "#FFB84C",
+    pink: "#EB3D7D",
+    pepper: "#CC1F59",
+    pepperDark: "#B71D63",
+    pepperDark80: "#8F2052",
+    pepperLight40: "#DB628B",
+    pepperLight30: "#F7B1CB",
+    pepperLight10: "#FCE4EF",
+    grey1: "#F6F6F6",
+    grey2: "#EEEEEE",
+    grey3: "#DDDDDD",
+    grey4: "#999999",
+    grey5: "#666666",
+    grey6: "#000000",
+    white: "#FFFFFF",
     // specific for dark mode:
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeGrey6: '#313235'
+    darkModeBlack: "#191919",
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 exports.palette = palette;
 var getVivoSkin = function getVivoSkin() {

package/dist/skins/vivo.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-import type { GetSkin } from "./types";
+import type { GetKnownSkin } from "./types";
 declare export var palette: {
   +vivoPurple: "#660099",
   +vivoPurpleDark: "#461E5F",
@@ -36,4 +36,4 @@ declare export var palette: {
   +darkModeGrey: "#242424",
   +darkModeGrey6: "#313235",
 };
-declare export var getVivoSkin: GetSkin;
+declare export var getVivoSkin: GetKnownSkin;

package/dist/snackbar.js

@@ -104,21 +104,21 @@ var SNACKBAR_MIN_HEIGHT = 48;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return _defineProperty({
         snackbar: {
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
             transition: "visibility ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out"),
             visibility: function visibility(param) {
                 var isOpen = param.isOpen;
-                return isOpen ? 'visible' : 'hidden';
+                return isOpen ? "visible" : "hidden";
             }
         },
         snackbarOpen: {
             animation: "$snackbarAnimation ".concat(TRANSITION_TIME_IN_MS, "ms")
         },
-        '@keyframes snackbarAnimation': {
-            '0%': {
-                transform: 'translateY(100px)',
+        "@keyframes snackbarAnimation": {
+            "0%": {
+                transform: "translateY(100px)",
                 opacity: 0
             }
         },
@@ -128,12 +128,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minHeight: SNACKBAR_MIN_HEIGHT,
             padding: "".concat(PADDING_Y, "px ").concat(PADDING_X, "px"),
             borderRadius: 4,
-            position: 'fixed',
+            position: "fixed",
             bottom: 24,
             zIndex: 1000,
             backgroundColor: function backgroundColor(param) {
                 var type = param.type;
-                return type === 'CRITICAL' ? theme.colors.feedbackErrorBackground : theme.colors.feedbackInfoBackground;
+                return type === "CRITICAL" ? theme.colors.feedbackErrorBackground : theme.colors.feedbackInfoBackground;
             },
             opacity: function opacity(param) {
                 var isOpen = param.isOpen;
@@ -141,7 +141,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             },
             transform: function transform(param) {
                 var isOpen = param.isOpen;
-                return isOpen ? '' : 'translateY(100px)';
+                return isOpen ? "" : "translateY(100px)";
             },
             transition: "transform ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out, opacity ").concat(TRANSITION_TIME_IN_MS, "ms ease-in-out")
         },
@@ -149,15 +149,15 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             fontSize: 14,
             lineHeight: "20px",
             color: theme.colors.textPrimaryInverse,
-            display: 'flex',
+            display: "flex",
             flexDirection: function flexDirection(param) {
                 var isLongButton = param.isLongButton;
-                return isLongButton ? 'column' : 'row';
+                return isLongButton ? "column" : "row";
             },
-            justifyContent: 'space-between',
+            justifyContent: "space-between",
             alignItems: function alignItems(param) {
                 var isLongButton = param.isLongButton;
-                return isLongButton ? 'unset' : 'center';
+                return isLongButton ? "unset" : "center";
             }
         },
         snackbarButton: {
@@ -174,16 +174,16 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             fontWeight: 500,
             fontSize: 16,
             lineHeight: "24px",
-            padding: '4px 8px',
-            whiteSpace: 'nowrap',
-            width: 'auto',
+            padding: "4px 8px",
+            whiteSpace: "nowrap",
+            width: "auto",
             alignSelf: function alignSelf(param) {
                 var isLongButton = param.isLongButton;
-                return isLongButton ? 'flex-end' : 'unset';
+                return isLongButton ? "flex-end" : "unset";
             },
             color: function color(param) {
                 var type = param.type;
-                return type === 'INFORMATIVE' ? theme.colors.textLinkSnackbar : theme.colors.textPrimaryInverse;
+                return type === "INFORMATIVE" ? theme.colors.textLinkSnackbar : theme.colors.textPrimaryInverse;
             }
         }
     }, theme.mq.tabletOrSmaller, {
@@ -196,7 +196,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     });
 });
 var SnackbarComponent = function SnackbarComponent(param) {
-    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, _onClose = param.onClose, onClose = _onClose === void 0 ? function onClose() {} : _onClose, _type = param.type, type = _type === void 0 ? 'INFORMATIVE' : _type;
+    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, _onClose = param.onClose, onClose = _onClose === void 0 ? function onClose() {} : _onClose, _type = param.type, type = _type === void 0 ? "INFORMATIVE" : _type;
     var ref = _slicedToArray(React.useState(false), 2), isOpen = ref[0], setIsOpen = ref[1];
     var ref1 = (0, _hooks).useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
     var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
@@ -228,7 +228,7 @@ var SnackbarComponent = function SnackbarComponent(param) {
         close,
         duration
     ]);
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: classes.snackbar,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             role: "alert",
@@ -248,10 +248,10 @@ var SnackbarComponent = function SnackbarComponent(param) {
                 ]
             })
         })
-    }));
+    });
 };
 var Snackbar = function Snackbar(param) {
-    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, tmp = param.onClose, onCloseProp = tmp === void 0 ? function onCloseProp() {} : tmp, _type = param.type, type = _type === void 0 ? 'INFORMATIVE' : _type;
+    var message = param.message, buttonText = param.buttonText, _duration = param.duration, duration = _duration === void 0 ? buttonText ? 10000 : 5000 : _duration, tmp = param.onClose, onCloseProp = tmp === void 0 ? function onCloseProp() {} : tmp, _type = param.type, type = _type === void 0 ? "INFORMATIVE" : _type;
     var renderNative = (0, _webviewBridge).isWebViewBridgeAvailable();
     var onCloseRef = React.useRef(onCloseProp);
     React.useEffect(function() {
@@ -278,13 +278,13 @@ var Snackbar = function Snackbar(param) {
     if (renderNative) {
         return null;
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(SnackbarComponent, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(SnackbarComponent, {
         message: message,
         duration: duration,
         buttonText: buttonText,
         type: type,
         onClose: onCloseRef.current
-    }));
+    });
 };
 var _default = Snackbar;
 exports.default = _default;

package/dist/spinner.js

@@ -68,94 +68,94 @@ var useStyles = (0, _jss).createUseStyles(function() {
     return {
         spinnerDefault: {
             flexShrink: 0,
-            animation: '$rotator 1.4s linear infinite'
+            animation: "$rotator 1.4s linear infinite"
         },
         spinnerDefaultPath: {
             important: false,
             strokeDasharray: 187,
             strokeDashoffset: 0,
-            transformOrigin: 'center',
-            animation: '$dash 1.4s ease-in-out infinite'
+            transformOrigin: "center",
+            animation: "$dash 1.4s ease-in-out infinite"
         },
         spinnerIos: {
             flexShrink: 0,
-            '& path': {
-                animation: '$spinnerIos 1s infinite linear',
-                '&:nth-of-type(2)': {
-                    animationDelay: '-.080s'
+            "& path": {
+                animation: "$spinnerIos 1s infinite linear",
+                "&:nth-of-type(2)": {
+                    animationDelay: "-.080s"
                 },
-                '&:nth-of-type(3)': {
-                    animationDelay: '-.160s'
+                "&:nth-of-type(3)": {
+                    animationDelay: "-.160s"
                 },
-                '&:nth-of-type(4)': {
-                    animationDelay: '-.240s'
+                "&:nth-of-type(4)": {
+                    animationDelay: "-.240s"
                 },
-                '&:nth-of-type(5)': {
-                    animationDelay: '-.320s'
+                "&:nth-of-type(5)": {
+                    animationDelay: "-.320s"
                 },
-                '&:nth-of-type(6)': {
-                    animationDelay: '-.400s'
+                "&:nth-of-type(6)": {
+                    animationDelay: "-.400s"
                 },
-                '&:nth-of-type(7)': {
-                    animationDelay: '-.480s'
+                "&:nth-of-type(7)": {
+                    animationDelay: "-.480s"
                 },
-                '&:nth-of-type(8)': {
-                    animationDelay: '-.560s'
+                "&:nth-of-type(8)": {
+                    animationDelay: "-.560s"
                 },
-                '&:nth-of-type(9)': {
-                    animationDelay: '-.640s'
+                "&:nth-of-type(9)": {
+                    animationDelay: "-.640s"
                 },
-                '&:nth-of-type(10)': {
-                    animationDelay: '-.720s'
+                "&:nth-of-type(10)": {
+                    animationDelay: "-.720s"
                 },
-                '&:nth-of-type(11)': {
-                    animationDelay: '-.800s'
+                "&:nth-of-type(11)": {
+                    animationDelay: "-.800s"
                 },
-                '&:nth-of-type(12)': {
-                    animationDelay: '-.880s'
+                "&:nth-of-type(12)": {
+                    animationDelay: "-.880s"
                 }
             }
         },
-        '@keyframes rotator': {
-            '0%': {
-                transform: 'rotate(0deg)'
+        "@keyframes rotator": {
+            "0%": {
+                transform: "rotate(0deg)"
             },
-            '100%': {
-                transform: 'rotate(270deg)'
+            "100%": {
+                transform: "rotate(270deg)"
             }
         },
-        '@keyframes dash': {
-            '0%': {
+        "@keyframes dash": {
+            "0%": {
                 strokeDashoffset: 187
             },
-            '50%': {
+            "50%": {
                 strokeDashoffset: 46.75,
-                transform: 'rotate(135deg)'
+                transform: "rotate(135deg)"
             },
-            '100%': {
+            "100%": {
                 strokeDashoffset: 187,
-                transform: 'rotate(450deg)'
+                transform: "rotate(450deg)"
             }
         },
-        '@keyframes spinnerIos': {
-            '0%': {
+        "@keyframes spinnerIos": {
+            "0%": {
                 opacity: 1
             },
-            '100%': {
+            "100%": {
                 opacity: 0.2
             }
         }
     };
 });
 var Spinner = function Spinner(param) {
-    var color = param.color, _delay = param.delay, delay = _delay === void 0 ? '500ms' : _delay, _size = param.size, size = _size === void 0 ? 24 : _size, style = param.style, rolePresentation = param.rolePresentation;
+    var color = param.color, _delay = param.delay, delay = _delay === void 0 ? "500ms" : _delay, _size = param.size, size = _size === void 0 ? 24 : _size, style = param.style, rolePresentation = param.rolePresentation;
     var ref = (0, _hooks).useTheme(), texts = ref.texts, platformOverrides = ref.platformOverrides, colors = ref.colors;
     color = color || colors.controlActivated;
     var classes = useStyles();
     var spinnerId = (0, _hooks).useAriaId();
     var withTitle = !rolePresentation;
     var title = texts.loading;
-    var content = (0, _platform).getPlatform(platformOverrides) === 'ios' ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
+    var content = (0, _platform).getPlatform(platformOverrides) === "ios" ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("svg", {
         "aria-labelledby": spinnerId,
         className: classes.spinnerIos,
         height: size,
@@ -248,13 +248,13 @@ var Spinner = function Spinner(param) {
             })
         ]
     });
-    if (delay === '0' || delay === '0s' || delay === '0ms') {
+    if (delay === "0" || delay === "0s" || delay === "0ms") {
         return content;
     }
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_fadeIn.default, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_fadeIn.default, {
         delay: delay,
         children: content
-    }));
+    });
 };
 var _default = Spinner;
 exports.default = _default;

package/dist/spinner.js.flow

@@ -11,4 +11,4 @@ declare type Props = {
 declare var Spinner: React.ComponentType<Props>;
 declare export default typeof Spinner;
 
-import { type CssStyle } from "./__types__.js.flow";
+import { type CssStyle } from "./__css_types__.js.flow";

package/dist/stack.js

@@ -66,21 +66,21 @@ function _objectSpread(target) {
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         marginStack: {
-            '& > div:not(:empty) ~ div:not(:empty)': {
+            "& > div:not(:empty) ~ div:not(:empty)": {
                 marginTop: function marginTop(p) {
                     return p.space;
                 }
             }
         },
         flexStack: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
             justifyContent: function justifyContent(p) {
                 return "space-".concat(p.space);
             },
-            '& > div:empty': {
-                display: 'none'
+            "& > div:empty": {
+                display: "none"
             }
         }
     };
@@ -90,18 +90,18 @@ var Stack = function Stack(props) {
     var classes = useStyles({
         space: space
     });
-    var isNumeric = typeof space === 'number';
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+    var isNumeric = typeof space === "number";
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         className: (0, _classnames).default(className, isNumeric ? classes.marginStack : classes.flexStack),
         role: role,
-        "aria-labelledby": props['aria-labelledby']
+        "aria-labelledby": props["aria-labelledby"]
     }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes), {
         children: React.Children.map(children, function(child) {
-            /*#__PURE__*/ return (0, _jsxRuntime).jsx("div", {
+            return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 children: child
             });
         })
-    })));
+    }));
 };
 var _default = Stack;
 exports.default = _default;