@telefonica/mistica 10.16.0 → 10.20.0

package/dist/image.js

@@ -2,9 +2,33 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.default = exports.useDisableBorderRadius = exports.RATIO = exports.DisableBorderRadiusProvider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {
+        };
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
+                    };
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 function _objectWithoutProperties(source, excluded) {
     if (source == null) return {
     };
@@ -35,14 +59,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+/**
+ * This context is used internally to disable the border radius. This is useful for example
+ * when using the Image component inside a Card
+ */ var DisableBorderRadiusContext = /*#__PURE__*/ React.createContext(false);
+var useDisableBorderRadius = function useDisableBorderRadius() {
+    return React.useContext(DisableBorderRadiusContext);
+};
+exports.useDisableBorderRadius = useDisableBorderRadius;
+var DisableBorderRadiusProvider = function DisableBorderRadiusProvider(param) {
+    var children = param.children;
+    /*#__PURE__*/ return (0, _jsxRuntime).jsx(DisableBorderRadiusContext.Provider, {
+        value: true,
+        children: children
+    });
+};
+exports.DisableBorderRadiusProvider = DisableBorderRadiusProvider;
 var useStyles = (0, _jss).createUseStyles(function() {
     return {
         image: {
-            borderRadius: 4,
+            borderRadius: function borderRadius(param) {
+                var noBorderRadius = param.noBorderRadius;
+                return noBorderRadius ? 0 : 4;
+            },
             display: 'block',
             objectFit: 'cover',
             maxWidth: '100%',
-            maxHeight: '100%'
+            maxHeight: '100%',
+            aspectRatio: function aspectRatio(param) {
+                var aspectRatio1 = param.aspectRatio;
+                return aspectRatio1 !== null && aspectRatio1 !== void 0 ? aspectRatio1 : 'unset';
+            }
         }
     };
 });
@@ -51,27 +98,38 @@ var RATIO = {
     '16:9': 16 / 9,
     '7:10': 7 / 10
 };
-var Image = function Image(_param) {
-    var url = _param.url, _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
-        "url",
+exports.RATIO = RATIO;
+var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var _aspectRatio = _param.aspectRatio, aspectRatio = _aspectRatio === void 0 ? '1:1' : _aspectRatio, _alt = _param.alt, alt = _alt === void 0 ? '' : _alt, props = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt"
     ]);
-    var classes = useStyles();
+    var noBorderRadius = useDisableBorderRadius();
+    var classes = useStyles({
+        noBorderRadius: noBorderRadius,
+        aspectRatio: !props.width && !props.height ? RATIO[aspectRatio] : undefined
+    });
+    var url = props.src || props.url;
     var width = props.width;
     var height = props.height;
-    if (props.width !== undefined) {
+    if (props.width !== undefined && props.height !== undefined) {
+        width = props.width;
+        height = props.height;
+    } else if (props.width !== undefined) {
         height = props.width / RATIO[aspectRatio];
     } else if (props.height !== undefined) {
         width = props.height * RATIO[aspectRatio];
+    } else {
+        width = '100%';
     }
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("img", {
+        ref: ref,
         src: url,
         className: classes.image,
         alt: alt,
         width: width,
         height: height
     }));
-};
+});
 var _default = Image;
 exports.default = _default;

package/dist/image.js.flow

@@ -1,13 +1,39 @@
 // @flow
 
 import * as React from "react";
-declare type AspectRatio = "1:1" | "16:9" | "7:10";
-declare type Props = {
+declare export var useDisableBorderRadius: () => boolean;
+declare export var DisableBorderRadiusProvider: React.ComponentType<{}>;
+export type AspectRatio = "1:1" | "16:9" | "7:10";
+declare export var RATIO: {
+  "1:1": number,
+  "16:9": number,
+  "7:10": number,
+};
+export type ImageProps = {
+ src: string,
+ /**
+  * defaults to 100% when no width and no height are given
+  */
+ width?: number,
+ height?: number,
+ /**
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
+  */
+ aspectRatio?: AspectRatio,
+ /**
+  * defaults to empty string
+  */
+ alt?: string,
+};
+/**
+ * @deprecated
+ */
+declare type DeprecatedImageProps = {
  url: string,
  width?: number,
  height?: number,
  /**
-  * defaults to 1:1
+  * defaults to 1:1, if both width and height are given, aspectRatio is ignored
   */
  aspectRatio?: AspectRatio,
  /**
@@ -15,5 +41,8 @@ declare type Props = {
   */
  alt?: string,
 };
-declare var Image: React.ComponentType<Props>;
+declare var Image: React.ComponentType<{
+  ...ImageProps | DeprecatedImageProps,
+  ref?: React.Ref<HTMLImageElement>,
+}>;
 declare export default typeof Image;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as MasterDetailLayout } from './master-detail-layout';
 export { default as NavigationBreadcrumbs } from './navigation-breadcrumbs';
 export { default as Text, Text1, Text2, Text3, Text4, Text5, Text6, Text7, Text8, Text9, Text10 } from './text';
 export { default as Tag } from './tag';
+export type { TagType } from './tag';
 export { default as SectionTitle } from './section-title';
 export { Placeholder, AvatarPlaceholder } from './placeholder';
 export { RowList, Row, BoxedRowList, BoxedRow } from './list';
@@ -55,9 +56,11 @@ 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 Video } from './video';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';

package/dist/index.js

@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
         return _image.default;
     }
 });
+Object.defineProperty(exports, "Video", {
+    enumerable: true,
+    get: function() {
+        return _video.default;
+    }
+});
 Object.defineProperty(exports, "Form", {
     enumerable: true,
     get: function() {
@@ -584,6 +590,12 @@ Object.defineProperty(exports, "TextField", {
         return _textField.default;
     }
 });
+Object.defineProperty(exports, "TextFieldBase", {
+    enumerable: true,
+    get: function() {
+        return _textFieldBase.TextFieldBase;
+    }
+});
 Object.defineProperty(exports, "SearchField", {
     enumerable: true,
     get: function() {
@@ -8292,9 +8304,11 @@ var _callout = _interopRequireDefault(require("./callout"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
+var _video = _interopRequireDefault(require("./video"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));
 var _textField = _interopRequireDefault(require("./text-field"));
+var _textFieldBase = require("./text-field-base");
 var _searchField = _interopRequireDefault(require("./search-field"));
 var _emailField = _interopRequireDefault(require("./email-field"));
 var _phoneNumberField = _interopRequireDefault(require("./phone-number-field"));

package/dist/index.js.flow

@@ -70,6 +70,7 @@ declare export {
   Text10,
 } from "./text";
 declare export { default as Tag } from "./tag";
+export type { TagType } from "./tag";
 declare export { default as SectionTitle } from "./section-title";
 declare export { Placeholder, AvatarPlaceholder } from "./placeholder";
 declare export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
@@ -98,9 +99,11 @@ declare export {
   NavigationBarLogo,
 } from "./navigation-bar";
 declare export { default as Image } from "./image";
+declare export { default as Video } from "./video";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";
 declare export { default as TextField } from "./text-field";
+declare export { TextFieldBase } from "./text-field-base";
 declare export { default as SearchField } from "./search-field";
 declare export { default as EmailField } from "./email-field";
 declare export { default as PhoneNumberField } from "./phone-number-field";

package/dist/integer-field.js

@@ -6,12 +6,7 @@ exports.default = exports.IntegerInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -137,7 +132,7 @@ var IntegerField = function IntegerField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist/menu.js

@@ -6,9 +6,9 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _keyCodes = require("./utils/key-codes");
-var _overlay = _interopRequireDefault(require("./overlay"));
 var _jss = require("./jss");
 var _dom = require("./utils/dom");
+var _overlay = _interopRequireDefault(require("./overlay"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -103,6 +103,7 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
     var colors = param.colors;
     return {
         menuContainer: {
+            zIndex: 12,
             margin: 0,
             padding: 0,
             listStyleType: 'none',
@@ -111,13 +112,17 @@ var useStyles = (0, _jss).createUseStyles(function(param) {
                 var itemsComputedProps = param.itemsComputedProps;
                 return itemsComputedProps.top;
             },
-            left: function left(param) {
+            bottom: function bottom(param) {
+                var itemsComputedProps = param.itemsComputedProps;
+                return itemsComputedProps.bottom;
+            },
+            right: function right(param) {
                 var itemsComputedProps = param.itemsComputedProps;
-                return itemsComputedProps.left;
+                return itemsComputedProps.right;
             },
             width: function width(param) {
-                var itemsComputedProps = param.itemsComputedProps, width1 = param.width;
-                return width1 !== null && width1 !== void 0 ? width1 : itemsComputedProps.width;
+                var width1 = param.width;
+                return width1 !== null && width1 !== void 0 ? width1 : '100%';
             },
             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)',
@@ -158,28 +163,27 @@ var Menu = function Menu(param) {
             return;
         }
         var MARGIN_THRESHOLD = 12;
-        var topTarget = targetRect.top, widthTarget = targetRect.width, left = targetRect.left, right = targetRect.right, height = targetRect.height;
+        var topTarget = targetRect.top, widthTarget = targetRect.width, height = targetRect.height;
         var top = topTarget + height;
         var ref;
         var spaceTaken = (ref = parseInt(window.getComputedStyle(menu).getPropertyValue('height'))) !== null && ref !== void 0 ? ref : 0;
-        var leftDirection = position === 'left' ? left : right - (width !== null && width !== void 0 ? width : widthTarget);
+        var rightDirection = position === 'left' ? 'auto' : "calc(100% - ".concat(widthTarget, "px)");
         // if it doesn't fit on bottom
         if (top + spaceTaken + MARGIN_THRESHOLD > window.innerHeight) {
             var availableSpaceBottom = window.innerHeight - top;
             if (topTarget /* this is the available space on top */  > availableSpaceBottom) {
-                var newTop = topTarget - spaceTaken;
                 setItemsComputedProps({
-                    width: widthTarget,
-                    left: leftDirection,
-                    top: Math.max(newTop, MARGIN_THRESHOLD),
-                    maxHeight: topTarget - MARGIN_THRESHOLD,
+                    right: rightDirection,
+                    bottom: '100%',
+                    top: 'auto',
+                    maxHeight: Math.min(topTarget, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center bottom'
                 });
             } else {
                 setItemsComputedProps({
-                    width: widthTarget,
-                    top: top,
-                    left: leftDirection,
+                    top: '100%',
+                    bottom: 'auto',
+                    right: rightDirection,
                     maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                     transformOrigin: 'center top'
                 });
@@ -187,9 +191,9 @@ var Menu = function Menu(param) {
         } else {
             // if it fits on bottom
             setItemsComputedProps({
-                width: widthTarget,
-                top: top,
-                left: leftDirection,
+                top: '100%',
+                bottom: 'auto',
+                right: rightDirection,
                 maxHeight: Math.min(window.innerHeight - top - MARGIN_THRESHOLD, MAX_HEIGHT_DEFAULT),
                 transformOrigin: 'center top'
             });
@@ -257,20 +261,23 @@ var Menu = function Menu(param) {
             document.removeEventListener('keydown', handleKeyDown, false);
         };
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+        style: {
+            position: 'relative'
+        },
         children: [
-            renderTarget(_objectSpread({
-            }, targetProps, {
-                isMenuOpen: isMenuOpen
-            })),
             isMenuOpen ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_overlay.default, {
                 onPress: function onPress(e) {
-                    setIsMenuOpen(false);
                     (0, _dom).cancelEvent(e);
+                    setIsMenuOpen(false);
                 },
-                disableScroll: true,
-                children: renderMenu(menuProps)
-            }) : null
+                disableScroll: true
+            }) : null,
+            renderTarget(_objectSpread({
+            }, targetProps, {
+                isMenuOpen: isMenuOpen
+            })),
+            isMenuOpen ? renderMenu(menuProps) : null
         ]
     }));
 };

package/dist/month-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -163,7 +163,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalYearMonthString(min) : undefined,
         max: max ? (0, _time).getLocalYearMonthString(max) : undefined,

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.16.0';
+var PACKAGE_VERSION = '10.20.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/password-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconVisibility = _interopRequireDefault(require("./icons/icon-visibility"));
@@ -221,7 +221,7 @@ var PasswordField = function PasswordField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: isVisible ? 'text' : 'password',
         inputRef: function inputRef1(field) {

package/dist/phone-number-field.js

@@ -8,15 +8,10 @@ var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _libphonenumber = require("@telefonica/libphonenumber");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -252,7 +247,7 @@ var PhoneNumberField = function PhoneNumberField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "phone",
         inputProps: {

package/dist/search-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconSearch = _interopRequireDefault(require("./icons/icon-search"));
 var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
@@ -185,7 +185,7 @@ var SearchField = function SearchField(_param) {
         onChange: onChange,
         onChangeValue: handleChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
         ref: inputRef,
         startIcon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconSearch.default, {
         }),

package/dist/section-title.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
-import TextLink from './text-link';
-import type { TextLinkProps } from './text-link';
 declare type Props = {
     children: React.ReactNode;
     id?: string;
-    right?: React.ReactElement<TextLinkProps, typeof TextLink>;
+    right?: React.ReactNode;
     as?: 'h1' | 'h2' | 'h3' | 'h4';
 };
 declare const SectionTitle: React.FC<Props>;

package/dist/section-title.js.flow

@@ -1,11 +1,10 @@
 // @flow
 
 import * as React from "react";
-import TextLink from "./text-link";
 declare type Props = {
   children: React.Node,
   id?: string,
-  right?: React.Element<typeof TextLink>,
+  right?: React.Node,
   as?: "h1" | "h2" | "h3" | "h4",
 };
 declare var SectionTitle: React.ComponentType<Props>;

package/dist/select.js

@@ -10,7 +10,7 @@ var _hooks = require("./hooks");
 var _keyCodes = require("./utils/key-codes");
 var _textFieldComponents = require("./text-field-components");
 var _iconChevronDownRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-down-regular"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _overlay = _interopRequireDefault(require("./overlay"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _platform = require("./utils/platform");
@@ -548,7 +548,7 @@ var Select = function Select(param) {
                 ref: focusableRef
             }, !disabled && containerActiveProps, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, {
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, {
                         style: {
                             visibility: 'hidden'
                         },

package/dist/skins/blau.d.ts

@@ -14,16 +14,19 @@ export declare const palette: {
     readonly blauPurple30: "#BB89D9";
     readonly blauYellow: "#FFA922";
     readonly blauYellow10: "#FFF6E9";
+    readonly blauYellow40: "#FFC364";
     readonly blauYellow60: "#F09500";
     readonly blauYellow70: "#996614";
+    readonly blauGreen: "#30D300";
+    readonly blauGreen10: "#EAFBE5";
+    readonly blauGreen30: "#97E980";
+    readonly blauGreen70: "#1D7F00";
     readonly blauRed: "#F64417";
     readonly blauRed10: "#FEECE8";
     readonly blauRed20: "#FCC7B9";
     readonly blauRed30: "#FA9E87";
+    readonly blauRed40: "#F97C5D";
     readonly blauRed70: "#C93712";
-    readonly blauGreen: "#30D300";
-    readonly blauGreen10: "#EAFBE5";
-    readonly blauGreen70: "#1D7F00";
     readonly grey1: "#F5F9FA";
     readonly grey2: "#E7E7E7";
     readonly grey3: "#B8B8B8";

package/dist/skins/blau.js

@@ -20,16 +20,19 @@ 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',
@@ -132,7 +135,20 @@ var getBlauSkin = function getBlauSkin() {
             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
@@ -194,7 +210,20 @@ var getBlauSkin = function getBlauSkin() {
             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.blauGreen30,
+            textTagWarning: palette.blauYellow40,
+            textTagError: palette.blauRed40,
+            textTagPromo: palette.blauPurple30,
+            textTagActive: palette.blauBluePrimary30,
+            textTagInactive: palette.grey4
         }
     };
 };

package/dist/skins/blau.js.flow

@@ -16,16 +16,19 @@ declare 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",