@telefonica/mistica 10.19.0 → 10.22.1

package/dist-es/card.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Tag from './tag';
 import Stack from './stack';
@@ -14,8 +14,7 @@ var useCardContentStyles = createUseStyles(function() {
         actions: {
             flex: 1,
             display: 'flex',
-            alignItems: 'flex-end',
-            marginTop: 16
+            alignItems: 'flex-end'
         }
     };
 });
@@ -29,32 +28,30 @@ var CardContent = function(param) {
         }
         if (typeof headline === 'string') {
             return(/*#__PURE__*/ _jsx(Tag, {
-                color: theme.colors.promo,
+                type: "promo",
                 children: headline
             }));
         }
         return headline;
     };
-    return(/*#__PURE__*/ _jsxs(_Fragment, {
+    return(/*#__PURE__*/ _jsxs(Stack, {
+        space: 16,
         children: [
             /*#__PURE__*/ _jsxs(Stack, {
-                space: 16,
+                space: 8,
                 children: [
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        space: 8,
-                        children: [
-                            (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
-                                children: /*#__PURE__*/ _jsxs(Stack, {
+                    (headline || pretitle || title || subtitle) && /*#__PURE__*/ _jsx("header", {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            space: 16,
+                            children: [
+                                renderHeadline(),
+                                /*#__PURE__*/ _jsxs(Stack, {
                                     space: 4,
                                     children: [
-                                        renderHeadline(),
-                                        pretitle && /*#__PURE__*/ _jsx(Box, {
-                                            paddingTop: 4,
-                                            children: /*#__PURE__*/ _jsx(Text1, {
-                                                regular: true,
-                                                uppercase: true,
-                                                children: pretitle
-                                            })
+                                        pretitle && /*#__PURE__*/ _jsx(Text1, {
+                                            regular: true,
+                                            uppercase: true,
+                                            children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
                                             as: "h1",
@@ -67,20 +64,20 @@ var CardContent = function(param) {
                                         })
                                     ]
                                 })
-                            }),
-                            description && /*#__PURE__*/ _jsx(Text2, {
-                                as: "p",
-                                regular: true,
-                                color: theme.colors.textSecondary,
-                                children: description
-                            })
-                        ]
+                            ]
+                        })
                     }),
-                    extra && /*#__PURE__*/ _jsx("div", {
-                        children: extra
+                    description && /*#__PURE__*/ _jsx(Text2, {
+                        as: "p",
+                        regular: true,
+                        color: theme.colors.textSecondary,
+                        children: description
                     })
                 ]
             }),
+            extra && /*#__PURE__*/ _jsx("div", {
+                children: extra
+            }),
             (button || buttonLink) && /*#__PURE__*/ _jsx("div", {
                 className: classes.actions,
                 children: /*#__PURE__*/ _jsx(ButtonGroup, {

package/dist-es/chip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createUseStyles } from './jss';
+import { useTheme } from './hooks';
+import Box from './box';
+import { Text2 } from './text';
+import IconButton from './icon-button';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import { pxToRem } from './utils/css';
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+var useStyles = createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ _jsxs(Box, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ _jsx(Box, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    color: "currentColor",
+                    size: pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+export default Chip;

package/dist-es/form.js

@@ -146,7 +146,7 @@ var Form = function(param) {
                     if (input.disabled) {
                         continue;
                     }
-                    if (input.required && !input.value.trim()) {
+                    if (input.required && !rawValues[name].trim()) {
                         errors[name] = texts.formFieldErrorIsMandatory;
                     } else {
                         var error = validator === null || validator === void 0 ? void 0 : validator(values[name], rawValues[name]);

package/dist-es/index.js

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.19.0';
+export var PACKAGE_VERSION = '10.22.1';

package/dist-es/skins/blau.js

@@ -1,5 +1,7 @@
 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',
@@ -15,16 +17,19 @@ export var palette = {
     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',
-    blauGreen: '#30D300',
-    blauGreen10: '#EAFBE5',
-    blauGreen70: '#1D7F00',
     grey1: '#F5F9FA',
     grey2: '#E7E7E7',
     grey3: '#B8B8B8',
@@ -126,7 +131,20 @@ export var getBlauSkin = function() {
             textNavigationSearchBarHint: palette.blauBlueSecondary20,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.blauBlueSecondary60
+            textAppBarSelected: palette.blauBlueSecondary60,
+            // TAGS
+            tagBackgroundSuccess: palette.blauGreen10,
+            tagBackgroundWarning: palette.blauYellow10,
+            tagBackgroundError: palette.blauRed10,
+            tagBackgroundPromo: palette.blauPurple10,
+            tagBackgroundActive: palette.blauBlueSecondary10,
+            tagBackgroundInactive: palette.grey2,
+            textTagSuccess: palette.blauGreen70,
+            textTagWarning: palette.blauYellow70,
+            textTagError: palette.blauRed70,
+            textTagPromo: palette.blauPurple,
+            textTagActive: palette.blauBlueSecondary,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             // BACKGROUNDS
@@ -188,7 +206,20 @@ export var getBlauSkin = function() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: applyAlpha(palette.white, 0.05),
+            tagBackgroundError: applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.blauGreen30,
+            textTagWarning: palette.blauYellow40,
+            textTagError: palette.blauRed40,
+            textTagPromo: palette.blauPurple30,
+            textTagActive: palette.blauBluePrimary30,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist-es/skins/movistar.js

@@ -1,22 +1,35 @@
 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',
-    movistarBlueDark: '#008EDD',
-    movistarBlueLight50: '#80CEF9',
-    movistarBlueLight30: '#B3E1FB',
-    movistarBlueLight10: '#E6F5FD',
+    movistarBlue10: '#E6F5FD',
+    movistarBlue20: '#B3E1FB',
+    movistarBlue30: '#80CEF9',
+    movistarBlue40: '#4DBAF7',
+    movistarBlue55: '#008EDD',
     movistarGreen: '#5CB615',
-    movistarGreenDark: '#499110',
-    movistarGreenLight50: '#ADDA8A',
-    movistarGreenLight30: '#CEE9B9',
+    movistarGreen10: '#EFF8E8',
+    movistarGreen30: '#ADDA8A',
+    movistarGreen40: '#8DCC5B',
+    movistarGreen60: '#499110',
+    movistarGreen70: '#407F0F',
     pepper: '#FF374A',
-    pepperDark: '#D73241',
-    pepperLight30: '#FFC3C8',
+    pepper10: '#FFEBED',
+    pepper20: '#FFC3C8',
+    pepper40: '#FF7380',
+    pepper55: '#D73241',
+    pepper70: '#B22634',
     egg: '#F28D15',
-    eggLight: '#F8D2B3',
+    egg10: '#FEF4E8',
+    egg40: '#F6AF5B',
+    egg80: '#6D3F09',
     pink: '#E63780',
     purple: '#A13EA1',
+    purple10: '#F6ECF6',
+    purple40: '#BD78BD',
+    purple70: '#712B71',
     grey1: '#F6F6F6',
     grey2: '#EEEEEE',
     grey3: '#DDDDDD',
@@ -31,8 +44,7 @@ export var palette = {
     movistarProminentBlueLight70: '#546874',
     // specific for dark mode:
     darkModeBlack: '#191919',
-    darkModeGrey: '#242424',
-    darkModeMovistarBlueDark: '#4C7389'
+    darkModeGrey: '#242424'
 };
 export var getMovistarSkin = function(variant) {
     var skin = {
@@ -45,7 +57,7 @@ export var getMovistarSkin = function(variant) {
             backgroundBrand: palette.movistarBlue,
             backgroundOverlay: applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey1,
-            backgroundSkeletonInverse: palette.movistarBlueDark,
+            backgroundSkeletonInverse: palette.movistarBlue55,
             navigationBarBackground: palette.movistarBlue,
             backgroundAlternative: palette.grey1,
             backgroundFeedbackBottom: palette.movistarBlue,
@@ -57,50 +69,50 @@ export var getMovistarSkin = function(variant) {
             borderSelected: palette.movistarGreen,
             // BUTTONS
             buttonDangerBackground: palette.pepper,
-            buttonDangerBackgroundSelected: palette.pepperDark,
-            buttonDangerBackgroundHover: palette.pepperDark,
-            buttonLinkBackgroundSelected: palette.movistarBlueLight10,
+            buttonDangerBackgroundSelected: palette.pepper55,
+            buttonDangerBackgroundHover: palette.pepper55,
+            buttonLinkBackgroundSelected: palette.movistarBlue10,
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.movistarGreen,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
-            buttonPrimaryBackgroundHover: palette.movistarGreenDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.movistarBlueLight50,
+            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
+            buttonPrimaryBackgroundHover: palette.movistarGreen60,
+            buttonPrimaryBackgroundSelectedInverse: palette.movistarBlue30,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
+            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.movistarBlueLight50,
+            buttonSecondaryBorderSelectedInverse: palette.movistarBlue30,
             textButtonPrimary: palette.white,
             textButtonPrimaryInverse: palette.movistarBlue,
             textButtonPrimaryInverseSelected: palette.movistarBlue,
             textButtonSecondary: palette.movistarGreen,
-            textButtonSecondarySelected: palette.movistarGreenDark,
+            textButtonSecondarySelected: palette.movistarGreen60,
             textButtonSecondaryInverse: palette.white,
             textButtonSecondaryInverseSelected: palette.white,
             textLink: palette.movistarBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.pepper,
-            textLinkSnackbar: palette.movistarBlueLight50,
+            textLinkSnackbar: palette.movistarBlue30,
             // CONTROLS
             control: palette.grey3,
             controlActivated: palette.movistarBlue,
             controlError: palette.pepper,
-            loadingBar: palette.movistarBlueLight50,
-            loadingBarBackground: palette.movistarBlueDark,
+            loadingBar: palette.movistarBlue30,
+            loadingBarBackground: palette.movistarBlue55,
             toggleAndroidInactive: palette.grey2,
-            toggleAndroidBackgroundActive: palette.movistarBlueLight30,
+            toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.white,
             // DIVIDERS
             divider: palette.grey2,
-            dividerInverse: palette.movistarBlueDark,
+            dividerInverse: palette.movistarBlue55,
             navigationBarDivider: palette.movistarBlue,
             // FEEDBACKS
-            badge: palette.pepperDark,
+            badge: palette.pepper55,
             feedbackErrorBackground: palette.pepper,
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.movistarBlue,
-            brandDark: palette.movistarBlueDark,
+            brandDark: palette.movistarBlue55,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
@@ -118,11 +130,24 @@ export var getMovistarSkin = function(variant) {
             warning: palette.egg,
             // BARS TEXTS
             textNavigationBarPrimary: palette.white,
-            textNavigationBarSecondary: palette.movistarBlueLight30,
-            textNavigationSearchBarHint: palette.movistarBlueLight30,
+            textNavigationBarSecondary: palette.movistarBlue20,
+            textNavigationSearchBarHint: palette.movistarBlue20,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.movistarBlue
+            textAppBarSelected: palette.movistarBlue,
+            // TAGS
+            tagBackgroundSuccess: palette.movistarGreen10,
+            tagBackgroundWarning: palette.egg10,
+            tagBackgroundError: palette.pepper10,
+            tagBackgroundPromo: palette.purple10,
+            tagBackgroundActive: palette.movistarBlue10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.movistarGreen70,
+            textTagWarning: palette.egg80,
+            textTagError: palette.pepper70,
+            textTagPromo: palette.purple70,
+            textTagActive: palette.movistarBlue,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             brand: palette.movistarBlue,
@@ -143,13 +168,13 @@ export var getMovistarSkin = function(variant) {
             buttonLinkBackgroundSelectedInverse: applyAlpha(palette.white, 0.05),
             buttonPrimaryBackground: palette.movistarGreen,
             buttonPrimaryBackgroundInverse: palette.movistarGreen,
-            buttonPrimaryBackgroundSelected: palette.movistarGreenDark,
-            buttonPrimaryBackgroundHover: palette.movistarGreenDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.movistarGreenDark,
+            buttonPrimaryBackgroundSelected: palette.movistarGreen60,
+            buttonPrimaryBackgroundHover: palette.movistarGreen60,
+            buttonPrimaryBackgroundSelectedInverse: palette.movistarGreen60,
             buttonSecondaryBackground: palette.movistarGreen,
-            buttonSecondaryBackgroundSelected: palette.movistarGreenDark,
+            buttonSecondaryBackgroundSelected: palette.movistarGreen60,
             buttonSecondaryBorderInverse: palette.movistarGreen,
-            buttonSecondaryBorderSelectedInverse: palette.movistarGreenDark,
+            buttonSecondaryBorderSelectedInverse: palette.movistarGreen60,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryInverse: palette.grey2,
             textButtonPrimaryInverseSelected: palette.grey2,
@@ -164,7 +189,7 @@ export var getMovistarSkin = function(variant) {
             loadingBar: palette.movistarBlue,
             loadingBarBackground: applyAlpha(palette.white, 0.05),
             toggleAndroidInactive: palette.grey4,
-            toggleAndroidBackgroundActive: palette.movistarBlueLight30,
+            toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
@@ -178,13 +203,26 @@ export var getMovistarSkin = function(variant) {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.movistarBlueLight50,
+            textAmount: palette.movistarBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: applyAlpha(palette.white, 0.05),
+            tagBackgroundError: applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.movistarGreen40,
+            textTagWarning: palette.egg40,
+            textTagError: palette.pepper40,
+            textTagPromo: palette.purple40,
+            textTagActive: palette.movistarBlue40,
+            textTagInactive: palette.grey4
         }
     };
     if (variant === 'prominent') {