@telefonica/mistica 10.19.0 → 10.20.0

package/dist/skins/telefonica.js

@@ -7,23 +7,27 @@ var _color = require("../utils/color");
 var _constants = require("./constants");
 var palette = {
     telefonicaBlue: '#0066FF',
-    telefonicaBlueDark: '#0356C9',
-    telefonicaBlueLight50: '#80B2FF',
-    telefonicaBlueLight30: '#B3D1FF',
-    telefonicaBlueLight20: '#EBF3FF',
+    telefonicaBlue10: '#E5F0FF',
+    telefonicaBlue20: '#B2D1FF',
+    telefonicaBlue30: '#80B3FF',
+    telefonicaBlue70: '#0356C9',
     ambar: '#EAC344',
-    ambarLight: '#F5E98A',
-    ambarDark: '#AD842D',
+    ambar10: '#FDF9EC',
+    ambar40: '#F0D57C',
+    ambar70: '#69581F',
     coral: '#E66C64',
-    coralLight: '#E3A19A',
-    coralDark: '#912C31',
+    coral10: '#FDF0EF',
+    coral40: '#E3A19A',
+    coral70: '#D50000',
+    coral80: '#912C31',
     orchid: '#C466EF',
-    orchidDark: '#8A1A93',
-    orchidLight: '#E7C2F8',
+    orchid10: '#F9F0FD',
+    orchid40: '#D694F4',
+    orchid70: '#8947A7',
     turquoise: '#59C2C9',
-    turquoiseLight: '#67E0E5',
-    turquoiseDark: '#3E8A8A',
-    white: '#FFFFFF',
+    turquoise10: '#EEF9FA',
+    turquoise40: '#8BD4D9',
+    turquoise70: '#3E888D',
     grey1: '#F2F4FF',
     grey2: '#D1D5E4',
     grey3: '#B0B6CA',
@@ -33,6 +37,7 @@ var palette = {
     grey7: '#414B61',
     grey8: '#2B3447',
     grey9: '#031A34',
+    white: '#FFFFFF',
     // specific for dark mode:
     darkModeBlack: '#191919',
     darkModeGrey: '#242424'
@@ -49,7 +54,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             backgroundBrand: palette.telefonicaBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
             backgroundSkeleton: palette.grey1,
-            backgroundSkeletonInverse: palette.telefonicaBlueDark,
+            backgroundSkeletonInverse: palette.telefonicaBlue70,
             navigationBarBackground: palette.telefonicaBlue,
             backgroundAlternative: palette.grey1,
             backgroundFeedbackBottom: palette.telefonicaBlue,
@@ -62,48 +67,48 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             // BUTTONS
             buttonDangerBackground: palette.coral,
             buttonDangerBackgroundDisabled: palette.grey2,
-            buttonDangerBackgroundSelected: palette.coralDark,
-            buttonDangerBackgroundHover: palette.coralDark,
+            buttonDangerBackgroundSelected: palette.coral80,
+            buttonDangerBackgroundHover: palette.coral80,
             buttonLinkBackgroundSelected: palette.grey1,
             buttonLinkBackgroundSelectedInverse: (0, _color).applyAlpha(palette.white, 0.2),
             buttonPrimaryBackground: palette.telefonicaBlue,
             buttonPrimaryBackgroundDisabled: palette.grey2,
-            buttonPrimaryBackgroundDisabledInverse: palette.telefonicaBlueLight50,
+            buttonPrimaryBackgroundDisabledInverse: palette.telefonicaBlue30,
             buttonPrimaryBackgroundInverse: palette.white,
-            buttonPrimaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundHover: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlueLight50,
+            buttonPrimaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundHover: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlue30,
             buttonSecondaryBackground: palette.telefonicaBlue,
             buttonSecondaryBackgroundDisabled: palette.grey2,
-            buttonSecondaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonSecondaryBorderDisabledInverse: palette.telefonicaBlueLight50,
+            buttonSecondaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonSecondaryBorderDisabledInverse: palette.telefonicaBlue30,
             buttonSecondaryBorderInverse: palette.white,
-            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlueLight50,
+            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlue30,
             textButtonPrimary: palette.white,
             textButtonPrimaryDisabled: palette.white,
             textButtonPrimaryInverse: palette.telefonicaBlue,
-            textButtonPrimaryInverseDisabled: palette.telefonicaBlueLight30,
+            textButtonPrimaryInverseDisabled: palette.telefonicaBlue20,
             textButtonPrimaryInverseSelected: palette.telefonicaBlue,
             textButtonSecondary: palette.telefonicaBlue,
             textButtonSecondaryDisabled: palette.grey2,
-            textButtonSecondarySelected: palette.telefonicaBlueDark,
+            textButtonSecondarySelected: palette.telefonicaBlue70,
             textButtonSecondaryInverse: palette.white,
-            textButtonSecondaryInverseDisabled: palette.telefonicaBlueLight50,
-            textButtonSecondaryInverseSelected: palette.telefonicaBlueLight50,
+            textButtonSecondaryInverseDisabled: palette.telefonicaBlue30,
+            textButtonSecondaryInverseSelected: palette.telefonicaBlue30,
             textLink: palette.telefonicaBlue,
             textLinkInverse: palette.white,
             textLinkDanger: palette.coral,
             textLinkDangerDisabled: palette.grey2,
             textLinkDisabled: palette.grey2,
-            textLinkSnackbar: palette.telefonicaBlueLight50,
+            textLinkSnackbar: palette.telefonicaBlue30,
             // CONTROLS
             control: palette.grey3,
             controlActivated: palette.telefonicaBlue,
             controlError: palette.coral,
-            loadingBar: palette.telefonicaBlueLight50,
-            loadingBarBackground: palette.telefonicaBlueDark,
-            loadingBarBackgroundInverse: palette.telefonicaBlueDark,
-            loadingBarInverse: palette.telefonicaBlueLight50,
+            loadingBar: palette.telefonicaBlue30,
+            loadingBarBackground: palette.telefonicaBlue70,
+            loadingBarBackgroundInverse: palette.telefonicaBlue70,
+            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
@@ -112,18 +117,18 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             dividerInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
             // FEEDBACKS
-            badge: palette.coralDark,
+            badge: palette.coral80,
             feedbackErrorBackground: palette.coral,
             feedbackInfoBackground: palette.grey9,
             // GLOBAL
             brand: palette.telefonicaBlue,
-            brandDark: palette.telefonicaBlueDark,
+            brandDark: palette.telefonicaBlue70,
             inverse: palette.white,
             neutralHigh: palette.grey9,
             neutralMedium: palette.grey5,
             neutralLow: palette.grey1,
             promo: palette.orchid,
-            highlight: palette.coralLight,
+            highlight: palette.coral40,
             textPrimary: palette.grey9,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
@@ -140,7 +145,20 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textNavigationSearchBarHint: palette.grey1,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.telefonicaBlue
+            textAppBarSelected: palette.telefonicaBlue,
+            // TAGS
+            tagBackgroundSuccess: palette.turquoise10,
+            tagBackgroundWarning: palette.ambar10,
+            tagBackgroundError: palette.coral10,
+            tagBackgroundPromo: palette.orchid10,
+            tagBackgroundActive: palette.grey1,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.turquoise70,
+            textTagWarning: palette.ambar70,
+            textTagError: palette.coral70,
+            textTagPromo: palette.orchid70,
+            textTagActive: palette.telefonicaBlue,
+            textTagInactive: palette.grey6
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -163,15 +181,15 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             buttonPrimaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonPrimaryBackgroundInverse: palette.telefonicaBlue,
-            buttonPrimaryBackgroundSelected: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundHover: palette.telefonicaBlueDark,
-            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlueDark,
+            buttonPrimaryBackgroundSelected: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundHover: palette.telefonicaBlue70,
+            buttonPrimaryBackgroundSelectedInverse: palette.telefonicaBlue70,
             buttonSecondaryBackground: palette.telefonicaBlue,
             buttonSecondaryBackgroundDisabled: (0, _color).applyAlpha(palette.white, 0.05),
-            buttonSecondaryBackgroundSelected: palette.telefonicaBlueDark,
+            buttonSecondaryBackgroundSelected: palette.telefonicaBlue70,
             buttonSecondaryBorderDisabledInverse: (0, _color).applyAlpha(palette.white, 0.05),
             buttonSecondaryBorderInverse: palette.telefonicaBlue,
-            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlueDark,
+            buttonSecondaryBorderSelectedInverse: palette.telefonicaBlue70,
             textButtonPrimary: palette.grey2,
             textButtonPrimaryDisabled: palette.grey7,
             textButtonPrimaryInverse: palette.grey2,
@@ -190,8 +208,8 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),
-            loadingBarBackgroundInverse: palette.telefonicaBlueDark,
-            loadingBarInverse: palette.telefonicaBlueLight50,
+            loadingBarBackgroundInverse: palette.telefonicaBlue70,
+            loadingBarInverse: palette.telefonicaBlue30,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.grey1,
             iosControlKnob: palette.grey2,
@@ -209,13 +227,26 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
             textDisabled: palette.grey5,
-            textAmount: palette.telefonicaBlueLight50,
+            textAmount: palette.telefonicaBlue30,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.turquoise40,
+            textTagWarning: palette.ambar40,
+            textTagError: palette.coral40,
+            textTagPromo: palette.orchid40,
+            textTagActive: palette.telefonicaBlue30,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist/skins/telefonica.js.flow

@@ -3,23 +3,27 @@
 import type { GetSkin } from "./types";
 declare export var palette: {
   +telefonicaBlue: "#0066FF",
-  +telefonicaBlueDark: "#0356C9",
-  +telefonicaBlueLight50: "#80B2FF",
-  +telefonicaBlueLight30: "#B3D1FF",
-  +telefonicaBlueLight20: "#EBF3FF",
+  +telefonicaBlue10: "#E5F0FF",
+  +telefonicaBlue20: "#B2D1FF",
+  +telefonicaBlue30: "#80B3FF",
+  +telefonicaBlue70: "#0356C9",
   +ambar: "#EAC344",
-  +ambarLight: "#F5E98A",
-  +ambarDark: "#AD842D",
+  +ambar10: "#FDF9EC",
+  +ambar40: "#F0D57C",
+  +ambar70: "#69581F",
   +coral: "#E66C64",
-  +coralLight: "#E3A19A",
-  +coralDark: "#912C31",
+  +coral10: "#FDF0EF",
+  +coral40: "#E3A19A",
+  +coral70: "#D50000",
+  +coral80: "#912C31",
   +orchid: "#C466EF",
-  +orchidDark: "#8A1A93",
-  +orchidLight: "#E7C2F8",
+  +orchid10: "#F9F0FD",
+  +orchid40: "#D694F4",
+  +orchid70: "#8947A7",
   +turquoise: "#59C2C9",
-  +turquoiseLight: "#67E0E5",
-  +turquoiseDark: "#3E8A8A",
-  +white: "#FFFFFF",
+  +turquoise10: "#EEF9FA",
+  +turquoise40: "#8BD4D9",
+  +turquoise70: "#3E888D",
   +grey1: "#F2F4FF",
   +grey2: "#D1D5E4",
   +grey3: "#B0B6CA",
@@ -29,6 +33,7 @@ declare export var palette: {
   +grey7: "#414B61",
   +grey8: "#2B3447",
   +grey9: "#031A34",
+  +white: "#FFFFFF",
   +darkModeBlack: "#191919",
   +darkModeGrey: "#242424",
 };

package/dist/skins/types.d.ts

@@ -83,4 +83,16 @@ export declare type Colors = {
     textNavigationSearchBarText: string;
     textAppBar: string;
     textAppBarSelected: string;
+    tagBackgroundSuccess: string;
+    tagBackgroundWarning: string;
+    tagBackgroundError: string;
+    tagBackgroundPromo: string;
+    tagBackgroundActive: string;
+    tagBackgroundInactive: string;
+    textTagSuccess: string;
+    textTagWarning: string;
+    textTagError: string;
+    textTagPromo: string;
+    textTagActive: string;
+    textTagInactive: string;
 };

package/dist/skins/types.js.flow

@@ -91,4 +91,16 @@ export type Colors = {
   textNavigationSearchBarText: string,
   textAppBar: string,
   textAppBarSelected: string,
+  tagBackgroundSuccess: string,
+  tagBackgroundWarning: string,
+  tagBackgroundError: string,
+  tagBackgroundPromo: string,
+  tagBackgroundActive: string,
+  tagBackgroundInactive: string,
+  textTagSuccess: string,
+  textTagWarning: string,
+  textTagError: string,
+  textTagPromo: string,
+  textTagActive: string,
+  textTagInactive: string,
 };

package/dist/skins/vivo.d.ts

@@ -8,16 +8,21 @@ export declare const palette: {
     readonly vivoPurpleLight20: "#E0CCEB";
     readonly vivoPurpleLight10: "#EFE5F4";
     readonly vivoGreen: "#99CC33";
-    readonly vivoGreenDark: "#33A14A";
-    readonly vivoGreenLight40: "#D6EAAD";
+    readonly vivoGreenDark: "#225C3D";
+    readonly vivoGreenLight30: "#91AE9E";
+    readonly vivoGreenLight10: "#EDF8E8";
     readonly vivoBlue: "#00ABDB";
     readonly orange: "#FF9900";
-    readonly orangeDark: "#FA6324";
-    readonly orangeLight: "#FFD699";
+    readonly orangeDark: "#972A1D";
+    readonly orangeLight10: "#FFEFE1";
+    readonly orangeLight40: "#FFB84C";
     readonly pink: "#EB3D7D";
     readonly pepper: "#CC1F59";
     readonly pepperDark: "#B71D63";
+    readonly pepperDark80: "#8F2052";
+    readonly pepperLight40: "#DB628B";
     readonly pepperLight30: "#F7B1CB";
+    readonly pepperLight10: "#FCE4EF";
     readonly grey1: "#F6F6F6";
     readonly grey2: "#EEEEEE";
     readonly grey3: "#DDDDDD";

package/dist/skins/vivo.js

@@ -14,16 +14,21 @@ var palette = {
     vivoPurpleLight20: '#E0CCEB',
     vivoPurpleLight10: '#EFE5F4',
     vivoGreen: '#99CC33',
-    vivoGreenDark: '#33A14A',
-    vivoGreenLight40: '#D6EAAD',
+    vivoGreenDark: '#225C3D',
+    vivoGreenLight30: '#91AE9E',
+    vivoGreenLight10: '#EDF8E8',
     vivoBlue: '#00ABDB',
     orange: '#FF9900',
-    orangeDark: '#FA6324',
-    orangeLight: '#FFD699',
+    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',
@@ -127,7 +132,20 @@ var getVivoSkin = function getVivoSkin() {
             textNavigationSearchBarHint: palette.vivoPurpleLight50,
             textNavigationSearchBarText: palette.white,
             textAppBar: palette.grey4,
-            textAppBarSelected: palette.vivoPurple
+            textAppBarSelected: palette.vivoPurple,
+            // TAGS
+            tagBackgroundSuccess: palette.vivoGreenLight10,
+            tagBackgroundWarning: palette.orangeLight10,
+            tagBackgroundError: palette.pepperLight10,
+            tagBackgroundPromo: palette.vivoPurpleLight10,
+            tagBackgroundActive: palette.vivoPurpleLight10,
+            tagBackgroundInactive: palette.grey1,
+            textTagSuccess: palette.vivoGreenDark,
+            textTagWarning: palette.orangeDark,
+            textTagError: palette.pepperDark80,
+            textTagPromo: palette.vivoPurple,
+            textTagActive: palette.vivoPurple,
+            textTagInactive: palette.grey5
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -195,7 +213,20 @@ var getVivoSkin = function getVivoSkin() {
             textNavigationSearchBarHint: palette.grey4,
             textNavigationSearchBarText: palette.grey2,
             textAppBar: palette.grey5,
-            textAppBarSelected: palette.grey2
+            textAppBarSelected: palette.grey2,
+            // TAGS
+            tagBackgroundSuccess: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundWarning: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundError: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundPromo: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundActive: (0, _color).applyAlpha(palette.white, 0.05),
+            tagBackgroundInactive: (0, _color).applyAlpha(palette.white, 0.05),
+            textTagSuccess: palette.vivoGreenLight30,
+            textTagWarning: palette.orangeLight40,
+            textTagError: palette.pepperLight40,
+            textTagPromo: palette.vivoPurpleLight50,
+            textTagActive: palette.vivoPurpleLight50,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist/skins/vivo.js.flow

@@ -10,16 +10,21 @@ declare export var palette: {
   +vivoPurpleLight20: "#E0CCEB",
   +vivoPurpleLight10: "#EFE5F4",
   +vivoGreen: "#99CC33",
-  +vivoGreenDark: "#33A14A",
-  +vivoGreenLight40: "#D6EAAD",
+  +vivoGreenDark: "#225C3D",
+  +vivoGreenLight30: "#91AE9E",
+  +vivoGreenLight10: "#EDF8E8",
   +vivoBlue: "#00ABDB",
   +orange: "#FF9900",
-  +orangeDark: "#FA6324",
-  +orangeLight: "#FFD699",
+  +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",

package/dist/tag.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
+import type { IconProps } from './utils/types';
+export declare type TagType = 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
 export declare type TagProps = {
+    type?: 'promo' | 'active' | 'inactive' | 'success' | 'warning' | 'error';
     children: string;
-    color: string;
+    Icon?: React.FC<IconProps>;
+    /** @deprecated use type prop */
+    color?: string;
 };
 declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/tag.js

@@ -4,48 +4,157 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _box = _interopRequireDefault(require("./box"));
 var _hooks = require("./hooks");
 var _jss = require("./jss");
 var _text = require("./text");
 var _themeVariantContext = require("./theme-variant-context");
+var _css = require("./utils/css");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         tag: {
-            backgroundColor: function backgroundColor(param) {
-                var color = param.color;
-                return color;
-            },
-            padding: '2px 8px',
-            borderRadius: 2,
-            minWidth: 48,
             display: 'inline-flex',
+            flexDirection: 'row',
             alignItems: 'center',
-            justifyContent: 'center'
+            borderRadius: 50,
+            justifyContent: 'center',
+            minWidth: 56,
+            padding: function padding(param) {
+                var hasIcon = param.hasIcon;
+                return "4px 12px 4px ".concat(hasIcon ? 8 : 12, "px");
+            },
+            // FIXME: remove this style and use an inline style for the icon once WEB-338 gets merged
+            '& svg': {
+                display: 'block'
+            }
         }
     };
 });
 var Tag = function Tag(param) {
-    var children = param.children, color = param.color;
+    var Icon = param.Icon, children = param.children, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
     var classes = useStyles({
-        color: color
+        hasIcon: !!Icon
     });
     var ref = (0, _hooks).useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
-    // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
-    var blackText = isDarkMode ? '#313235' : colors.textPrimary;
-    var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
-        className: classes.tag,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    if (!children) {
+        return null;
+    }
+    /**
+     * Legacy implementation
+     *
+     * @deprecated to be removed in the next major version
+     */ if (color) {
+        // Hardcode black text in darkmode because there isn't a black text color constant that we can use in dark mode
+        var blackText = isDarkMode ? '#313235' : colors.textPrimary;
+        var textColor = color === colors.inverse ? blackText : colors.textPrimaryInverse;
+        return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
             isInverse: false,
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-                color: textColor,
-                size: 12,
-                lineHeight: 16,
-                weight: "regular",
-                uppercase: true,
-                children: children
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                className: classes.tag,
+                style: {
+                    background: color
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
+            })
+        }));
+    }
+    var tagTypeToColors = {
+        promo: [
+            colors.textTagPromo,
+            colors.tagBackgroundPromo
+        ],
+        active: [
+            colors.textTagActive,
+            colors.tagBackgroundActive
+        ],
+        inactive: [
+            colors.textTagInactive,
+            colors.tagBackgroundInactive
+        ],
+        success: [
+            colors.textTagSuccess,
+            colors.tagBackgroundSuccess
+        ],
+        warning: [
+            colors.textTagWarning,
+            colors.tagBackgroundWarning
+        ],
+        error: [
+            colors.textTagError,
+            colors.tagBackgroundError
+        ]
+    };
+    var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];
+    var shouldUseInverseBackground = isInverse && !isDarkMode;
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("span", {
+        className: classes.tag,
+        style: {
+            background: shouldUseInverseBackground ? colors.inverse : backgroundColor
+        },
+        children: [
+            Icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
+                    color: textColor,
+                    size: (0, _css).pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
+                isInverse: false,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+                    color: textColor,
+                    size: 14,
+                    lineHeight: 20,
+                    weight: "medium",
+                    truncate: true,
+                    children: children
+                })
             })
-        })
+        ]
     }));
 };
 var _default = Tag;

package/dist/tag.js.flow

@@ -1,9 +1,23 @@
 // @flow
 
 import * as React from "react";
+import type { IconProps } from "./utils/types";
+export type TagType =
+  | "promo"
+  | "active"
+  | "inactive"
+  | "success"
+  | "warning"
+  | "error";
 export type TagProps = {
+  type?: "promo" | "active" | "inactive" | "success" | "warning" | "error",
   children: string,
-  color: string,
+  Icon?: React.ComponentType<IconProps>,
+
+  /**
+   * @deprecated use type prop
+   */
+  color?: string,
 };
 declare var Tag: React.ComponentType<TagProps>;
 declare export default typeof Tag;