@telefonica/mistica 11.2.1 → 11.4.1

package/dist-es/search-field.js

@@ -1,12 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { useFieldProps } from './form-context';
-import { TextFieldBaseAutosuggest } from './text-field-base';
-import IconSearch from './icons/icon-search';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import IconButton from './icon-button';
-import { useTheme } from './hooks';
-import { createChangeEvent } 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];
@@ -108,6 +99,15 @@ 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 { useFieldProps } from "./form-context";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
+import IconSearch from "./icons/icon-search";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import IconButton from "./icon-button";
+import { useTheme } from "./hooks";
+import { createChangeEvent } from "./utils/dom";
 var SearchField = function(_param) {
     var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChange = _param.onChange, onChangeValue = _param.onChangeValue, onBlur = _param.onBlur, value = _param.value, defaultValue = _param.defaultValue, rest = _objectWithoutProperties(_param, [
         "disabled",
@@ -124,8 +124,8 @@ var SearchField = function(_param) {
     ]);
     var theme = useTheme();
     var inputRef = React.useRef();
-    var ref = _slicedToArray(React.useState(defaultValue || ''), 2), searchValue = ref[0], setSearchValue = ref[1];
-    var isControlledByParent = typeof value !== 'undefined';
+    var ref = _slicedToArray(React.useState(defaultValue || ""), 2), searchValue = ref[0], setSearchValue = ref[1];
+    var isControlledByParent = typeof value !== "undefined";
     var controlledValue = isControlledByParent ? value : searchValue;
     var handleChangeValue = React.useCallback(function(newValue, newRawValue) {
         if (!isControlledByParent) {
@@ -137,9 +137,9 @@ var SearchField = function(_param) {
         onChangeValue
     ]);
     var clearInput = React.useCallback(function() {
-        handleChangeValue('', '');
+        handleChangeValue("", "");
         if (inputRef.current) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(createChangeEvent(inputRef.current, ''));
+            onChange === null || onChange === void 0 ? void 0 : onChange(createChangeEvent(inputRef.current, ""));
             inputRef.current.focus();
         }
     }, [
@@ -162,13 +162,13 @@ var SearchField = function(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
+    return /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ _jsx(IconSearch, {}),
         endIcon: controlledValue ? /*#__PURE__*/ _jsx(IconButton, {
             size: 48,
             style: {
-                display: 'flex',
+                display: "flex",
                 padding: 12,
                 margin: -12
             },
@@ -178,6 +178,6 @@ var SearchField = function(_param) {
         }) : undefined
     }, rest, fieldProps, {
         type: "search"
-    })));
+    }));
 };
 export default SearchField;

package/dist-es/section-title.js

@@ -1,10 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Text1, Text2 } from './text';
-import { useTheme } from './hooks';
-import Inline from './inline';
-import { createUseStyles } from './jss';
-import { pxToRem } from './utils/css';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -18,11 +11,18 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Text1, Text2 } from "./text";
+import { useTheme } from "./hooks";
+import Inline from "./inline";
+import { createUseStyles } from "./jss";
+import { pxToRem } from "./utils/css";
 var useStyles = createUseStyles(function(theme) {
     return {
         right: _defineProperty({
-            display: 'flex',
-            alignItems: 'center',
+            display: "flex",
+            alignItems: "center",
             paddingLeft: 16,
             height: pxToRem(20)
         }, theme.mq.tabletOrSmaller, {
@@ -31,10 +31,10 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 var SectionTitle = function(param) {
-    var children = param.children, id = param.id, right = param.right, _as = param.as, as = _as === void 0 ? 'h3' : _as;
+    var children = param.children, id = param.id, right = param.right, _as = param.as, as = _as === void 0 ? "h3" : _as;
     var classes = useStyles();
     var theme = useTheme();
-    return(/*#__PURE__*/ _jsxs(Inline, {
+    return /*#__PURE__*/ _jsxs(Inline, {
         space: "between",
         children: [
             /*#__PURE__*/ _jsx(Text1, {
@@ -53,6 +53,6 @@ var SectionTitle = function(param) {
                 })
             })
         ]
-    }));
+    });
 };
 export default SectionTitle;

package/dist-es/select.js

@@ -1,17 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useForm } from './form-context';
-import { useAriaId, useTheme } from './hooks';
-import { DOWN, ENTER, ESC, SPACE, TAB, UP } from './utils/key-codes';
-import { FieldContainer, HelperText, Label } from './text-field-components';
-import ChevronDownRegular from './generated/mistica-icons/icon-chevron-down-regular';
-import { TextFieldBaseAutosuggest } from './text-field-base';
-import Overlay from './overlay';
-import classNames from 'classnames';
-import { isAndroid, isIos } from './utils/platform';
-import { createUseStyles } from './jss';
-import { cancelEvent } from './utils/dom';
-import { Text3 } from './text';
 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];
@@ -86,24 +72,38 @@ 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 { useForm } from "./form-context";
+import { useAriaId, useTheme } from "./hooks";
+import { DOWN, ENTER, ESC, SPACE, TAB, UP } from "./utils/key-codes";
+import { FieldContainer, HelperText, Label } from "./text-field-components";
+import ChevronDownRegular from "./generated/mistica-icons/icon-chevron-down-regular";
+import { TextFieldBaseAutosuggest } from "./text-field-base";
+import Overlay from "./overlay";
+import classNames from "classnames";
+import { isAndroid, isIos } from "./utils/platform";
+import { createUseStyles } from "./jss";
+import { cancelEvent } from "./utils/dom";
+import { Text3 } from "./text";
 var _maxHeight;
 var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1;
     return {
         selectContainer: (_obj = {
-            position: 'relative',
+            position: "relative",
             outline: 0
         }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
-            width: '100%'
+            width: "100%"
         }), _defineProperty(_obj, theme.mq.desktopOrBigger, {
             width: function(param) {
                 var fullWidth = param.fullWidth;
-                return fullWidth ? '100%' : 'fit-content';
+                return fullWidth ? "100%" : "fit-content";
             }
         }), _obj),
         select: {
-            fontFamily: 'inherit',
-            backgroundColor: 'transparent',
+            fontFamily: "inherit",
+            backgroundColor: "transparent",
             paddingTop: function(param) {
                 var label = param.label;
                 return label ? 24 : 16;
@@ -118,47 +118,47 @@ var useStyles = createUseStyles(function(theme) {
             outline: 0,
             fontSize: 16,
             color: theme.colors.textPrimary,
-            width: '100%',
-            height: '100%',
-            textOverflow: 'ellipsis',
-            appearance: 'none',
+            width: "100%",
+            height: "100%",
+            textOverflow: "ellipsis",
+            appearance: "none",
             cursor: function(param) {
                 var disabled = param.disabled;
-                return disabled ? 'default' : 'pointer';
+                return disabled ? "default" : "pointer";
             }
         },
         arrowDown: {
-            position: 'absolute',
+            position: "absolute",
             right: 16,
-            top: 'calc(50% - 10px)',
-            pointerEvents: 'none'
+            top: "calc(50% - 10px)",
+            pointerEvents: "none"
         },
         selectText: {
-            position: 'absolute',
-            pointerEvents: 'none',
+            position: "absolute",
+            pointerEvents: "none",
             left: 12 + 1,
             right: 48 + 1,
-            overflow: 'hidden',
+            overflow: "hidden",
             top: function(param) {
                 var label = param.label;
                 return label ? 27 : 17;
             },
-            lineHeight: '20px',
+            lineHeight: "20px",
             fontSize: 16,
             color: theme.colors.textPrimary,
             opacity: function(param) {
                 var disabled = param.disabled;
                 return disabled ? 0.5 : 1;
             },
-            maxWidth: '100%',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
+            maxWidth: "100%",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
         },
         optionsContainer: {
             margin: 0,
             padding: 0,
-            listStyleType: 'none',
-            position: 'absolute',
+            listStyleType: "none",
+            position: "absolute",
             top: function(param) {
                 var optionsComputedProps = param.optionsComputedProps;
                 return optionsComputedProps.top;
@@ -172,7 +172,7 @@ var useStyles = createUseStyles(function(theme) {
                 return optionsComputedProps.width;
             },
             borderRadius: 4,
-            boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)',
+            boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
             backgroundColor: theme.colors.backgroundContainer,
             paddingTop: 8,
             paddingBottom: 8,
@@ -180,34 +180,34 @@ var useStyles = createUseStyles(function(theme) {
                 var optionsComputedProps = param.optionsComputedProps;
                 return optionsComputedProps.transformOrigin;
             },
-            transition: 'opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s',
+            transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
             opacity: function(param) {
                 var animateShowOptions = param.animateShowOptions;
                 return animateShowOptions ? 1 : 0;
             },
             transform: function(param) {
                 var animateShowOptions = param.animateShowOptions;
-                return animateShowOptions ? 'scale(1)' : 'scale(0)';
+                return animateShowOptions ? "scale(1)" : "scale(0)";
             },
             maxHeight: function(param) {
                 var optionsComputedProps = param.optionsComputedProps;
-                return (_maxHeight = optionsComputedProps.maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : '416px';
+                return (_maxHeight = optionsComputedProps.maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : "416px";
             },
-            overflowY: 'auto'
+            overflowY: "auto"
         },
         menuItemSelected: {
-            backgroundColor: 'rgba(0, 0, 0, 0.14)'
+            backgroundColor: "rgba(0, 0, 0, 0.14)"
         },
         menuItem: (_obj1 = {
             color: theme.colors.textPrimary,
-            padding: '6px 16px',
+            padding: "6px 16px",
             height: 48,
-            transition: 'background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
+            transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
         }, _defineProperty(_obj1, theme.mq.supportsHover, {
-            '&:hover': {
-                backgroundColor: 'rgba(0, 0, 0, 0.08)'
+            "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.08)"
             }
-        }), _defineProperty(_obj1, "display", 'flex'), _defineProperty(_obj1, "alignItems", 'center'), _defineProperty(_obj1, "cursor", 'pointer'), _obj1)
+        }), _defineProperty(_obj1, "display", "flex"), _defineProperty(_obj1, "alignItems", "center"), _defineProperty(_obj1, "cursor", "pointer"), _obj1)
     };
 });
 var Select = function(param1) {
@@ -228,8 +228,8 @@ var Select = function(param1) {
     var inputId = useAriaId(id);
     var ref7 = useForm(), rawValues = ref7.rawValues, setRawValue = ref7.setRawValue, formSetValue = ref7.setValue, formStatus = ref7.formStatus, formErrors = ref7.formErrors, setFormError = ref7.setFormError, register = ref7.register;
     var platformOverrides = useTheme().platformOverrides;
-    var shouldUseNative = native || process.env.NODE_ENV === 'test' || isAndroid(platformOverrides) || isIos(platformOverrides);
-    var disabled = disabledProp || formStatus === 'sending';
+    var shouldUseNative = native || process.env.NODE_ENV === "test" || isAndroid(platformOverrides) || isIos(platformOverrides);
+    var disabled = disabledProp || formStatus === "sending";
     var error = errorProp || !!formErrors[name];
     var helperText = formErrors[name] || helperTextProp;
     var value1 = valueProp !== null && valueProp !== void 0 ? valueProp : rawValues[name];
@@ -237,7 +237,7 @@ var Select = function(param1) {
         onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value);
         setFormError({
             name: name,
-            error: ''
+            error: ""
         });
         setRawValue({
             name: name,
@@ -268,7 +268,7 @@ var Select = function(param1) {
                             left: left,
                             top: Math.max(newTop, MARGIN_TOP_SIZE),
                             maxHeight: selectTop - MARGIN_TOP_SIZE,
-                            transformOrigin: 'center bottom'
+                            transformOrigin: "center bottom"
                         });
                     } else {
                         setOptionsComputedProps({
@@ -276,7 +276,7 @@ var Select = function(param1) {
                             top: top,
                             left: left,
                             maxHeight: window.innerHeight - top - MARGIN_TOP_SIZE,
-                            transformOrigin: 'center top'
+                            transformOrigin: "center top"
                         });
                     }
                 } else {
@@ -286,13 +286,13 @@ var Select = function(param1) {
                         top: top,
                         left: left,
                         maxHeight: undefined,
-                        transformOrigin: 'center top'
+                        transformOrigin: "center top"
                     });
                 }
             }
             setOptionsShown(true);
             requestAnimationFrame(function() {
-                if (lastElementSelectionScrollTop.current && optionsMenuRef.current && 'scrollTop' in optionsMenuRef.current) {
+                if (lastElementSelectionScrollTop.current && optionsMenuRef.current && "scrollTop" in optionsMenuRef.current) {
                     optionsMenuRef.current.scrollTop = lastElementSelectionScrollTop.current;
                 }
                 setAnimateShowOptions(true);
@@ -309,10 +309,10 @@ var Select = function(param1) {
         // @ts-expect-error current is typed as read-only
         lastElementSelectionScrollTop.current = (ref = optionsMenuRef.current) === null || ref === void 0 ? void 0 : ref.scrollTop;
         toggleOptions(false);
-        if (onChangeValue && typeof val === 'string') {
+        if (onChangeValue && typeof val === "string") {
             onChangeValue(val);
         }
-        if (typeof value1 === 'undefined') {
+        if (typeof value1 === "undefined") {
             setValueState(val);
         }
     };
@@ -408,9 +408,9 @@ var Select = function(param1) {
                 updateTentativeValueState(e);
             }
         };
-        document.addEventListener('keydown', handleKeyDown, false);
+        document.addEventListener("keydown", handleKeyDown, false);
         return function() {
-            document.removeEventListener('keydown', handleKeyDown, false);
+            document.removeEventListener("keydown", handleKeyDown, false);
         };
     });
     React.useEffect(function() {
@@ -434,7 +434,7 @@ var Select = function(param1) {
         return val ? (ref = options.find(function(param) {
             var value = param.value;
             return value === val;
-        })) === null || ref === void 0 ? void 0 : ref.text : '';
+        })) === null || ref === void 0 ? void 0 : ref.text : "";
     };
     var containerActiveProps = {
         tabIndex: 0,
@@ -468,7 +468,7 @@ var Select = function(param1) {
             label && /*#__PURE__*/ _jsx(Label, {
                 error: error,
                 forId: inputId,
-                inputState: isFocused ? 'focused' : ((ref8 = value1 !== null && value1 !== void 0 ? value1 : valueState) !== null && ref8 !== void 0 ? ref8 : (ref9 = inputRef.current) === null || ref9 === void 0 ? void 0 : ref9.value) ? 'filled' : 'default',
+                inputState: isFocused ? "focused" : ((ref8 = value1 !== null && value1 !== void 0 ? value1 : valueState) !== null && ref8 !== void 0 ? ref8 : (ref9 = inputRef.current) === null || ref9 === void 0 ? void 0 : ref9.value) ? "filled" : "default",
                 optional: optional,
                 children: label
             }),
@@ -514,12 +514,12 @@ var Select = function(param1) {
                     /*#__PURE__*/ _jsx("option", {
                         value: "",
                         style: {
-                            display: 'none'
+                            display: "none"
                         }
                     }),
                     options.map(function(param) {
                         var val = param.value, text = param.text;
-                        /*#__PURE__*/ return _jsx("option", {
+                        return /*#__PURE__*/ _jsx("option", {
                             value: val,
                             children: text
                         }, val);
@@ -545,7 +545,7 @@ var Select = function(param1) {
                 children: [
                     /*#__PURE__*/ _jsx(TextFieldBaseAutosuggest, {
                         style: {
-                            visibility: 'hidden'
+                            visibility: "hidden"
                         },
                         fullWidth: fullWidth,
                         endIcon: /*#__PURE__*/ _jsx(ChevronDownRegular, {
@@ -583,7 +583,7 @@ var Select = function(param1) {
                     ref: optionsMenuRef,
                     children: options.map(function(param) {
                         var val = param.value, text = param.text;
-                        /*#__PURE__*/ return _jsx("li", {
+                        return /*#__PURE__*/ _jsx("li", {
                             role: "option",
                             "aria-selected": val === (valueState !== null && valueState !== void 0 ? valueState : value1),
                             "data-value": val,

package/dist-es/skins/blau.js

@@ -1,45 +1,45 @@
-import { applyAlpha } from '../utils/color';
-import { BLAU_SKIN } from './constants';
+import { applyAlpha } from "../utils/color";
+import { BLAU_SKIN } from "./constants";
 // https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-constants.json
 // https://github.com/Telefonica/mistica-design/blob/production/tokens/blau-skin-schema.json
 export var palette = {
-    blauBluePrimary: '#00B6F1',
-    blauBluePrimary10: '#F7FDFF',
-    blauBluePrimary20: '#E5F6FD',
-    blauBluePrimary30: '#B3E9FB',
-    blauBlueSecondary: '#0072BC',
-    blauBlueSecondary10: '#E5F1F9',
-    blauBlueSecondary20: '#B2D4EC',
-    blauBlueSecondary30: '#80B7DF',
-    blauBlueSecondary60: '#005A99',
-    blauPurple: '#7814B3',
-    blauPurple10: '#F1E7F7',
-    blauPurple30: '#BB89D9',
-    blauYellow: '#FFA922',
-    blauYellow10: '#FFF6E9',
-    blauYellow40: '#FFC364',
-    blauYellow60: '#F09500',
-    blauYellow70: '#996614',
-    blauGreen: '#30D300',
-    blauGreen10: '#EAFBE5',
-    blauGreen30: '#97E980',
-    blauGreen70: '#1D7F00',
-    blauRed: '#F64417',
-    blauRed10: '#FEECE8',
-    blauRed20: '#FCC7B9',
-    blauRed30: '#FA9E87',
-    blauRed40: '#F97C5D',
-    blauRed70: '#C93712',
-    grey1: '#F5F9FA',
-    grey2: '#E7E7E7',
-    grey3: '#B8B8B8',
-    grey4: '#A0A0A0',
-    grey5: '#808285',
-    grey6: '#000000',
-    white: '#FFFFFF',
+    blauBluePrimary: "#00B6F1",
+    blauBluePrimary10: "#F7FDFF",
+    blauBluePrimary20: "#E5F6FD",
+    blauBluePrimary30: "#B3E9FB",
+    blauBlueSecondary: "#0072BC",
+    blauBlueSecondary10: "#E5F1F9",
+    blauBlueSecondary20: "#B2D4EC",
+    blauBlueSecondary30: "#80B7DF",
+    blauBlueSecondary60: "#005A99",
+    blauPurple: "#7814B3",
+    blauPurple10: "#F1E7F7",
+    blauPurple30: "#BB89D9",
+    blauYellow: "#FFA922",
+    blauYellow10: "#FFF6E9",
+    blauYellow40: "#FFC364",
+    blauYellow60: "#F09500",
+    blauYellow70: "#996614",
+    blauGreen: "#30D300",
+    blauGreen10: "#EAFBE5",
+    blauGreen30: "#97E980",
+    blauGreen70: "#1D7F00",
+    blauRed: "#F64417",
+    blauRed10: "#FEECE8",
+    blauRed20: "#FCC7B9",
+    blauRed30: "#FA9E87",
+    blauRed40: "#F97C5D",
+    blauRed70: "#C93712",
+    grey1: "#F5F9FA",
+    grey2: "#E7E7E7",
+    grey3: "#B8B8B8",
+    grey4: "#A0A0A0",
+    grey5: "#808285",
+    grey6: "#000000",
+    white: "#FFFFFF",
     // specific for dark mode:
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424'
+    darkModeBlack: "#191919",
+    darkModeGrey: "#242424"
 };
 export var getBlauSkin = function() {
     return {

package/dist-es/skins/constants.js

@@ -1,6 +1,6 @@
-export var MOVISTAR_SKIN = 'Movistar';
-export var O2_SKIN = 'O2';
-export var O2_CLASSIC_SKIN = 'O2-classic';
-export var VIVO_SKIN = 'Vivo';
-export var TELEFONICA_SKIN = 'Telefonica';
-export var BLAU_SKIN = 'Blau';
+export var MOVISTAR_SKIN = "Movistar";
+export var O2_SKIN = "O2";
+export var O2_CLASSIC_SKIN = "O2-classic";
+export var VIVO_SKIN = "Vivo";
+export var TELEFONICA_SKIN = "Telefonica";
+export var BLAU_SKIN = "Blau";

package/dist-es/skins/movistar.js

@@ -1,50 +1,50 @@
-import { applyAlpha } from '../utils/color';
-import { MOVISTAR_SKIN } from './constants';
+import { applyAlpha } from "../utils/color";
+import { MOVISTAR_SKIN } from "./constants";
 // https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar-skin-schema.json
 // https://github.com/Telefonica/mistica-design/blob/production/tokens/movistar-constants.json
 export var palette = {
-    movistarBlue: '#019DF4',
-    movistarBlue10: '#E6F5FD',
-    movistarBlue20: '#B3E1FB',
-    movistarBlue30: '#80CEF9',
-    movistarBlue40: '#4DBAF7',
-    movistarBlue55: '#008EDD',
-    movistarGreen: '#5CB615',
-    movistarGreen10: '#EFF8E8',
-    movistarGreen30: '#ADDA8A',
-    movistarGreen40: '#8DCC5B',
-    movistarGreen60: '#499110',
-    movistarGreen70: '#407F0F',
-    pepper: '#FF374A',
-    pepper10: '#FFEBED',
-    pepper20: '#FFC3C8',
-    pepper40: '#FF7380',
-    pepper55: '#D73241',
-    pepper70: '#B22634',
-    egg: '#F28D15',
-    egg10: '#FEF4E8',
-    egg40: '#F6AF5B',
-    egg80: '#6D3F09',
-    pink: '#E63780',
-    purple: '#A13EA1',
-    purple10: '#F6ECF6',
-    purple40: '#BD78BD',
-    purple70: '#712B71',
-    grey1: '#F6F6F6',
-    grey2: '#EEEEEE',
-    grey3: '#DDDDDD',
-    grey4: '#999999',
-    grey5: '#86888C',
-    grey6: '#313235',
-    white: '#FFFFFF',
-    movistarProminentBlue: '#0B2739',
-    movistarProminentBlueDark: '#081F2D',
-    movistarProminentBlueLight20: '#CED3D7',
-    movistarProminentBlueLight50: '#85939C',
-    movistarProminentBlueLight70: '#546874',
+    movistarBlue: "#019DF4",
+    movistarBlue10: "#E6F5FD",
+    movistarBlue20: "#B3E1FB",
+    movistarBlue30: "#80CEF9",
+    movistarBlue40: "#4DBAF7",
+    movistarBlue55: "#008EDD",
+    movistarGreen: "#5CB615",
+    movistarGreen10: "#EFF8E8",
+    movistarGreen30: "#ADDA8A",
+    movistarGreen40: "#8DCC5B",
+    movistarGreen60: "#499110",
+    movistarGreen70: "#407F0F",
+    pepper: "#FF374A",
+    pepper10: "#FFEBED",
+    pepper20: "#FFC3C8",
+    pepper40: "#FF7380",
+    pepper55: "#D73241",
+    pepper70: "#B22634",
+    egg: "#F28D15",
+    egg10: "#FEF4E8",
+    egg40: "#F6AF5B",
+    egg80: "#6D3F09",
+    pink: "#E63780",
+    purple: "#A13EA1",
+    purple10: "#F6ECF6",
+    purple40: "#BD78BD",
+    purple70: "#712B71",
+    grey1: "#F6F6F6",
+    grey2: "#EEEEEE",
+    grey3: "#DDDDDD",
+    grey4: "#999999",
+    grey5: "#86888C",
+    grey6: "#313235",
+    white: "#FFFFFF",
+    movistarProminentBlue: "#0B2739",
+    movistarProminentBlueDark: "#081F2D",
+    movistarProminentBlueLight20: "#CED3D7",
+    movistarProminentBlueLight50: "#85939C",
+    movistarProminentBlueLight70: "#546874",
     // specific for dark mode:
-    darkModeBlack: '#191919',
-    darkModeGrey: '#242424'
+    darkModeBlack: "#191919",
+    darkModeGrey: "#242424"
 };
 export var getMovistarSkin = function(variant) {
     var skin = {
@@ -225,7 +225,7 @@ export var getMovistarSkin = function(variant) {
             textTagInactive: palette.grey4
         }
     };
-    if (variant === 'prominent') {
+    if (variant === "prominent") {
         skin.colors.brand = palette.movistarProminentBlue;
         skin.colors.brandDark = palette.movistarProminentBlueDark;
         skin.colors.backgroundBrand = palette.movistarProminentBlue;