@telefonica/mistica 11.12.1 → 12.1.0

package/dist-es/grid-layout.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
 var useStyles = createUseStyles(function(theme) {
-    var _obj, _obj1, _obj2, _obj3, _obj4, _obj5;
+    var _obj, _obj1, _obj2, _obj3, _obj4, _obj5, _obj6, _obj7;
     return {
         grid: (_obj = {
             display: "grid"
@@ -35,31 +35,41 @@ var useStyles = createUseStyles(function(theme) {
         span1: {
             gridColumn: "span 1"
         },
-        span4: (_obj1 = {}, _defineProperty(_obj1, theme.mq.desktopOrBigger, {
-            gridColumn: "span 4"
+        span3: (_obj1 = {}, _defineProperty(_obj1, theme.mq.desktopOrBigger, {
+            gridColumn: "span 3"
         }), _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
             gridColumn: "span 1"
         }), _obj1),
-        span5: (_obj2 = {}, _defineProperty(_obj2, theme.mq.desktopOrBigger, {
-            gridColumn: "span 5"
+        span4: (_obj2 = {}, _defineProperty(_obj2, theme.mq.desktopOrBigger, {
+            gridColumn: "span 4"
         }), _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
             gridColumn: "span 1"
         }), _obj2),
-        span6: (_obj3 = {}, _defineProperty(_obj3, theme.mq.desktopOrBigger, {
-            gridColumn: "span 6"
+        span5: (_obj3 = {}, _defineProperty(_obj3, theme.mq.desktopOrBigger, {
+            gridColumn: "span 5"
         }), _defineProperty(_obj3, theme.mq.tabletOrSmaller, {
             gridColumn: "span 1"
         }), _obj3),
-        span8: (_obj4 = {}, _defineProperty(_obj4, theme.mq.desktopOrBigger, {
-            gridColumn: "span 8"
+        span6: (_obj4 = {}, _defineProperty(_obj4, theme.mq.desktopOrBigger, {
+            gridColumn: "span 6"
         }), _defineProperty(_obj4, theme.mq.tabletOrSmaller, {
             gridColumn: "span 1"
         }), _obj4),
-        span10: (_obj5 = {}, _defineProperty(_obj5, theme.mq.desktopOrBigger, {
-            gridColumn: "span 10"
+        span8: (_obj5 = {}, _defineProperty(_obj5, theme.mq.desktopOrBigger, {
+            gridColumn: "span 8"
         }), _defineProperty(_obj5, theme.mq.tabletOrSmaller, {
             gridColumn: "span 1"
-        }), _obj5)
+        }), _obj5),
+        span9: (_obj6 = {}, _defineProperty(_obj6, theme.mq.desktopOrBigger, {
+            gridColumn: "span 9"
+        }), _defineProperty(_obj6, theme.mq.tabletOrSmaller, {
+            gridColumn: "span 1"
+        }), _obj6),
+        span10: (_obj7 = {}, _defineProperty(_obj7, theme.mq.desktopOrBigger, {
+            gridColumn: "span 10"
+        }), _defineProperty(_obj7, theme.mq.tabletOrSmaller, {
+            gridColumn: "span 1"
+        }), _obj7)
     };
 });
 var GridLayout = function(props) {
@@ -139,6 +149,21 @@ var GridLayout = function(props) {
             ]
         });
     }
+    if (props.template === "3+9") {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: classes.grid,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: classes.span3,
+                    children: props.left
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classes.span9,
+                    children: props.right
+                })
+            ]
+        });
+    }
     if (props.template === "10") {
         return /*#__PURE__*/ _jsxs("div", {
             className: classes.grid,

package/dist-es/highlighted-card.js

@@ -92,7 +92,9 @@ var useStyles = createUseStyles(function(theme) {
                 return hasImage ? 8 : 56;
             }
         }, _defineProperty(_obj, theme.mq.desktopOrBigger, {
-            padding: 24,
+            paddingLeft: 24,
+            paddingTop: 32,
+            paddingBottom: 32,
             paddingRight: function(param) {
                 var hasImage = param.hasImage;
                 return hasImage ? 24 : 56;

package/dist-es/icons/__stories__/mistica-icons-story.js

@@ -65,7 +65,7 @@ var misticaIcons = function(requireContext) {
     });
 }(require.context("../../generated/mistica-icons/", true, /\.tsx$/));
 export default {
-    title: "Icons/Mistica Icons"
+    title: "Icons/Catalog"
 };
 export var Catalog = function() {
     var ref = _slicedToArray(useCheckbox("Regular", true), 2), showRegular = ref[0], regularCheckbox = ref[1];

package/dist-es/image.js

@@ -127,7 +127,7 @@ var useStyles = createUseStyles(function() {
             maxHeight: "100%",
             borderRadius: function(param) {
                 var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
+                return noBorderRadius ? 0 : 8;
             },
             "@supports (aspect-ratio: 1 / 1)": {
                 aspectRatio: function(param) {
@@ -155,7 +155,7 @@ var useStyles = createUseStyles(function() {
         wrapper: {
             borderRadius: function(param) {
                 var noBorderRadius = param.noBorderRadius;
-                return noBorderRadius ? 0 : 4;
+                return noBorderRadius ? 0 : 8;
             },
             overflow: "hidden",
             maxWidth: "100%",

package/dist-es/index.js

@@ -35,7 +35,6 @@ 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 { default as SectionTitle } from "./section-title";
 export { Placeholder } from "./placeholder";
 export { Title1, Title2 } from "./title";
 export { RowList, Row, BoxedRowList, BoxedRow } from "./list";
@@ -130,9 +129,6 @@ export { default as Icon5GRegular } from "./generated/mistica-icons/icon-5-g-reg
 export { default as IconAcademicFilled } from "./generated/mistica-icons/icon-academic-filled";
 export { default as IconAcademicLight } from "./generated/mistica-icons/icon-academic-light";
 export { default as IconAcademicRegular } from "./generated/mistica-icons/icon-academic-regular";
-export { default as IconAccesibilityFilled } from "./generated/mistica-icons/icon-accesibility-filled";
-export { default as IconAccesibilityLight } from "./generated/mistica-icons/icon-accesibility-light";
-export { default as IconAccesibilityRegular } from "./generated/mistica-icons/icon-accesibility-regular";
 export { default as IconAccessoriesFilled } from "./generated/mistica-icons/icon-accessories-filled";
 export { default as IconAccessoriesLight } from "./generated/mistica-icons/icon-accessories-light";
 export { default as IconAccessoriesRegular } from "./generated/mistica-icons/icon-accessories-regular";
@@ -370,9 +366,6 @@ export { default as IconCalendarRegular } from "./generated/mistica-icons/icon-c
 export { default as IconCallbackFilled } from "./generated/mistica-icons/icon-callback-filled";
 export { default as IconCallbackLight } from "./generated/mistica-icons/icon-callback-light";
 export { default as IconCallbackRegular } from "./generated/mistica-icons/icon-callback-regular";
-export { default as IconCallCenterUserSupportFilled } from "./generated/mistica-icons/icon-call-center-user-support-filled";
-export { default as IconCallCenterUserSupportLight } from "./generated/mistica-icons/icon-call-center-user-support-light";
-export { default as IconCallCenterUserSupportRegular } from "./generated/mistica-icons/icon-call-center-user-support-regular";
 export { default as IconCallDetailsFilled } from "./generated/mistica-icons/icon-call-details-filled";
 export { default as IconCallDetailsLight } from "./generated/mistica-icons/icon-call-details-light";
 export { default as IconCallDetailsRegular } from "./generated/mistica-icons/icon-call-details-regular";
@@ -739,6 +732,9 @@ export { default as IconExportLight } from "./generated/mistica-icons/icon-expor
 export { default as IconExportRegular } from "./generated/mistica-icons/icon-export-regular";
 export { default as IconEyeFilled } from "./generated/mistica-icons/icon-eye-filled";
 export { default as IconEyeLight } from "./generated/mistica-icons/icon-eye-light";
+export { default as IconEyeOffFilled } from "./generated/mistica-icons/icon-eye-off-filled";
+export { default as IconEyeOffLight } from "./generated/mistica-icons/icon-eye-off-light";
+export { default as IconEyeOffRegular } from "./generated/mistica-icons/icon-eye-off-regular";
 export { default as IconEyeRegular } from "./generated/mistica-icons/icon-eye-regular";
 export { default as IconFamilyFilled } from "./generated/mistica-icons/icon-family-filled";
 export { default as IconFamilyLight } from "./generated/mistica-icons/icon-family-light";
@@ -1146,9 +1142,9 @@ export { default as IconMoonRegular } from "./generated/mistica-icons/icon-moon-
 export { default as IconMouseFilled } from "./generated/mistica-icons/icon-mouse-filled";
 export { default as IconMouseLight } from "./generated/mistica-icons/icon-mouse-light";
 export { default as IconMouseRegular } from "./generated/mistica-icons/icon-mouse-regular";
+export { default as IconMultideviceFilled } from "./generated/mistica-icons/icon-multidevice-filled";
 export { default as IconMultideviceLight } from "./generated/mistica-icons/icon-multidevice-light";
-export { default as IconMultideviceoFilled } from "./generated/mistica-icons/icon-multideviceo-filled";
-export { default as IconMultideviceoRegular } from "./generated/mistica-icons/icon-multideviceo-regular";
+export { default as IconMultideviceRegular } from "./generated/mistica-icons/icon-multidevice-regular";
 export { default as IconMultisaveFilled } from "./generated/mistica-icons/icon-multisave-filled";
 export { default as IconMultisaveLight } from "./generated/mistica-icons/icon-multisave-light";
 export { default as IconMultisaveRegular } from "./generated/mistica-icons/icon-multisave-regular";
@@ -1234,6 +1230,7 @@ export { default as IconPacifierLight } from "./generated/mistica-icons/icon-pac
 export { default as IconPacifierRegular } from "./generated/mistica-icons/icon-pacifier-regular";
 export { default as IconPackageTrolleyFilled } from "./generated/mistica-icons/icon-package-trolley-filled";
 export { default as IconPackageTrolleyLight } from "./generated/mistica-icons/icon-package-trolley-light";
+export { default as IconPackageTrolleyRegular } from "./generated/mistica-icons/icon-package-trolley-regular";
 export { default as IconParkingFilled } from "./generated/mistica-icons/icon-parking-filled";
 export { default as IconParkingLight } from "./generated/mistica-icons/icon-parking-light";
 export { default as IconParkingRegular } from "./generated/mistica-icons/icon-parking-regular";
@@ -1369,9 +1366,6 @@ export { default as IconReportRegular } from "./generated/mistica-icons/icon-rep
 export { default as IconRestaurantFilled } from "./generated/mistica-icons/icon-restaurant-filled";
 export { default as IconRestaurantLight } from "./generated/mistica-icons/icon-restaurant-light";
 export { default as IconRestaurantRegular } from "./generated/mistica-icons/icon-restaurant-regular";
-export { default as IconRewardsFilled } from "./generated/mistica-icons/icon-rewards-filled";
-export { default as IconRewardsLight } from "./generated/mistica-icons/icon-rewards-light";
-export { default as IconRewardsRegular } from "./generated/mistica-icons/icon-rewards-regular";
 export { default as IconRewindFilled } from "./generated/mistica-icons/icon-rewind-filled";
 export { default as IconRewindLight } from "./generated/mistica-icons/icon-rewind-light";
 export { default as IconRewindRegular } from "./generated/mistica-icons/icon-rewind-regular";
@@ -1542,7 +1536,7 @@ export { default as IconTagFilled } from "./generated/mistica-icons/icon-tag-fil
 export { default as IconTagLight } from "./generated/mistica-icons/icon-tag-light";
 export { default as IconTagPoundFilled } from "./generated/mistica-icons/icon-tag-pound-filled";
 export { default as IconTagPoundLight } from "./generated/mistica-icons/icon-tag-pound-light";
-export { default as IconTagPoundregular } from "./generated/mistica-icons/icon-tag-poundregular";
+export { default as IconTagPoundRegular } from "./generated/mistica-icons/icon-tag-pound-regular";
 export { default as IconTagRegular } from "./generated/mistica-icons/icon-tag-regular";
 export { default as IconTalkFilled } from "./generated/mistica-icons/icon-talk-filled";
 export { default as IconTalkLight } from "./generated/mistica-icons/icon-talk-light";

package/dist-es/list.js

@@ -508,6 +508,7 @@ var RowContent = /*#__PURE__*/ React.forwardRef(function(props1, ref) {
                     return /*#__PURE__*/ _jsx(Box, {
                         paddingX: 16,
                         children: renderContent({
+                            labelId: titleId,
                             type: "control",
                             right: function() {
                                 return /*#__PURE__*/ _jsx(Stack, {

package/dist-es/menu.js

@@ -104,7 +104,7 @@ var useStyles = createUseStyles(function(param1) {
                 var width = param.width;
                 return width !== null && width !== void 0 ? width : "100%";
             },
-            borderRadius: 4,
+            borderRadius: 8,
             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: colors.backgroundContainer,
             transformOrigin: function(param) {

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 = "11.12.1";
+export var PACKAGE_VERSION = "12.1.0";

package/dist-es/password-field.js

@@ -105,7 +105,7 @@ import { useFieldProps } from "./form-context";
 import { TextFieldBaseAutosuggest } from "./text-field-base";
 import { useTheme } from "./hooks";
 import IconButton from "./icon-button";
-import IconAccesibilityRegular from "./generated/mistica-icons/icon-accesibility-regular";
+import IconEyeOffRegular from "./generated/mistica-icons/icon-eye-off-regular";
 import IconEyeRegular from "./generated/mistica-icons/icon-eye-regular";
 import { createUseStyles } from "./jss";
 var usePasswordAdornmentStyles = createUseStyles(function(theme) {
@@ -138,7 +138,7 @@ var PasswordAdornment = function(param) {
         size: 40,
         className: classes.shadow,
         style: style,
-        children: isVisible ? /*#__PURE__*/ _jsx(IconAccesibilityRegular, {}) : /*#__PURE__*/ _jsx(IconEyeRegular, {})
+        children: isVisible ? /*#__PURE__*/ _jsx(IconEyeOffRegular, {}) : /*#__PURE__*/ _jsx(IconEyeRegular, {})
     });
 };
 var PasswordField = function(_param) {

package/dist-es/popover.js

@@ -75,9 +75,13 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
-import IcnCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
 import IconButton from "./icon-button";
 import { useTheme, useScreenSize } from "./hooks";
+import Stack from "./stack";
+import Box from "./box";
+import Inline from "./inline";
+import { Text3, Text2 } from "./text";
 // Zeplin definition:
 // https://app.zeplin.io/project/5c9b6f097168bc065782b5c3/screen/5d15d87e46571573089f2863
 var defaultPositionDesktop = "bottom";
@@ -93,13 +97,13 @@ var useStyles = createUseStyles(function(theme) {
     return {
         arrow: {
             position: "absolute",
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             width: arrowSize,
             height: arrowSize,
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2,
             boxShadow: function(param) {
                 var position = param.position;
@@ -108,7 +112,7 @@ var useStyles = createUseStyles(function(theme) {
         },
         arrowWrapper: {
             position: "absolute",
-            color: theme.colors.background,
+            color: theme.colors.backgroundContainer,
             width: arrowWrapperWidth,
             height: arrowWrapperHeight,
             overflow: "hidden"
@@ -121,47 +125,28 @@ var useStyles = createUseStyles(function(theme) {
             width: "auto",
             zIndex: 9,
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
-            backgroundColor: theme.colors.background,
-            border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 4
+            backgroundColor: theme.colors.backgroundContainer,
+            border: "1px solid ".concat(theme.colors.border),
+            borderRadius: 8
         },
-        title: {
-            marginBottom: 4,
-            color: theme.colors.textPrimary,
-            fontWeight: 400,
-            lineHeight: 1.5,
-            fontSize: 16
-        },
-        boxContainer: {
-            position: "relative",
+        textAlign: {
             display: "flex",
-            justifyContent: "space-between"
+            alignItems: "center",
+            height: "100%"
+        },
+        boxContent: {
+            display: "flex"
         },
         textContent: {
-            display: "flex",
-            flexDirection: "column",
-            margin: 16,
-            marginRight: 8,
-            justifyContent: "center",
+            textAlign: "left",
             width: "100%",
             wordBreak: "break-word"
         },
-        assetContent: {
-            width: 40,
-            minWidth: 40,
-            height: 40,
-            margin: 16,
-            marginRight: 0
-        },
-        text: {
-            color: theme.colors.textSecondary,
-            textAlign: "left",
-            lineHeight: 1.42857142,
-            fontSize: 14
-        },
         closeButtonIcon: {
-            paddingTop: 8,
-            paddingRight: 8
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1
         }
     };
 });
@@ -246,7 +231,7 @@ var getTargetPosition = function(targetWrapper) {
     } : null;
 };
 var Popover = function(param) {
-    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
+    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible, extra = param.extra;
     var ref = useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
@@ -287,40 +272,50 @@ var Popover = function(param) {
                         className: classes.arrow
                     })
                 }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: classes.boxContainer,
+                /*#__PURE__*/ _jsxs(Box, {
+                    padding: 16,
                     children: [
-                        asset && /*#__PURE__*/ _jsx("div", {
-                            className: classes.assetContent,
-                            children: asset
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: classes.textContent,
-                            children: [
-                                title && /*#__PURE__*/ _jsx("span", {
-                                    className: classes.title,
-                                    children: title
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    className: classes.text,
-                                    children: description
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingRight: 24,
+                            className: classes.boxContent,
+                            children: /*#__PURE__*/ _jsxs(Inline, {
+                                space: 16,
+                                children: [
+                                    asset,
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        className: classes.textAlign,
+                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                            space: 4,
+                                            className: classes.textContent,
+                                            children: [
+                                                title && /*#__PURE__*/ _jsx(Text3, {
+                                                    regular: true,
+                                                    children: title
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text2, {
+                                                    regular: true,
+                                                    color: colors.textSecondary,
+                                                    children: description
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
                         }),
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsx(IconButton, {
                             className: classes.closeButtonIcon,
-                            children: /*#__PURE__*/ _jsx(IconButton, {
-                                onPress: function(e) {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    e.stopPropagation();
-                                },
-                                trackingEvent: trackingEvent,
-                                "aria-label": texts.modalClose,
-                                children: /*#__PURE__*/ _jsx(IcnCloseRegular, {
-                                    color: colors.neutralHigh
-                                })
+                            onPress: function(e) {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                e.stopPropagation();
+                            },
+                            trackingEvent: trackingEvent,
+                            "aria-label": texts.modalClose,
+                            children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                                color: colors.neutralHigh
                             })
-                        })
+                        }),
+                        extra
                     ]
                 })
             ]

package/dist-es/radio-button.js

@@ -167,13 +167,14 @@ export var useRadioContext = function() {
     return React.useContext(RadioContext);
 };
 var RadioButton = function(_param) {
-    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, rest = _objectWithoutProperties(_param, [
+    var value = _param.value, id = _param.id, dataAttributes = _param.dataAttributes, ariaLabelledby = _param["aria-labelledby"], rest = _objectWithoutProperties(_param, [
         "value",
         "id",
-        "dataAttributes"
+        "dataAttributes",
+        "aria-labelledby"
     ]);
     var ref = useRadioContext(), disabled = ref.disabled, selectedValue = ref.selectedValue, focusableValue = ref.focusableValue, select = ref.select, selectNext = ref.selectNext, selectPrev = ref.selectPrev;
-    var labelId = useAriaId();
+    var labelId = useAriaId(ariaLabelledby);
     var ref1 = React.useRef(null);
     var checked = value === selectedValue;
     var tabIndex = focusableValue === value ? 0 : -1;

package/dist-es/responsive-layout.js

@@ -11,11 +11,27 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
 import classnames from "classnames";
 import { useScreenSize } from "./hooks";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
@@ -56,19 +72,20 @@ export var useResonsiveLayoutMargin = function() {
     return React.useContext(ResponsiveLayoutMarginContext);
 };
 var ResponsiveLayout = function(param) {
-    var children = param.children, className = param.className, fullWidth = param.fullWidth;
+    var children = param.children, className = param.className, fullWidth = param.fullWidth, dataAttributes = param.dataAttributes;
     var classes = useStyles();
     var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
     return /*#__PURE__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: classnames(classes.container, className),
+        children: /*#__PURE__*/ _jsx("div", _objectSpread({
+            className: classnames(classes.container, className)
+        }, getPrefixedDataAttributes(dataAttributes), {
             children: /*#__PURE__*/ _jsx("div", {
                 className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
                 children: children
             })
-        })
+        }))
     });
 };
 export default ResponsiveLayout;

package/dist-es/select.js

@@ -171,7 +171,7 @@ var useStyles = createUseStyles(function(theme) {
                 var optionsComputedProps = param.optionsComputedProps;
                 return optionsComputedProps.width;
             },
-            borderRadius: 4,
+            borderRadius: 8,
             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,

package/dist-es/skins/blau.js

@@ -39,7 +39,8 @@ export var palette = {
     white: "#FFFFFF",
     // specific for dark mode:
     darkModeBlack: "#191919",
-    darkModeGrey: "#242424"
+    darkModeGrey: "#242424",
+    darkModeGrey6: "#313235"
 };
 export var getBlauSkin = function() {
     return {
@@ -52,7 +53,7 @@ export var getBlauSkin = function() {
             backgroundBrand: palette.blauBluePrimary,
             backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
             backgroundSkeleton: palette.grey2,
-            backgroundSkeletonInverse: palette.white,
+            backgroundSkeletonInverse: applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.blauBluePrimary,
             backgroundAlternative: palette.blauBluePrimary20,
             backgroundFeedbackBottom: palette.blauBluePrimary,
@@ -107,16 +108,15 @@ export var getBlauSkin = function() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.blauBluePrimary,
-            brandDark: palette.blauBlueSecondary,
+            brandHigh: palette.blauBlueSecondary,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey2,
+            neutralLow: palette.grey1,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.blauBlueSecondary,
             // STATES
             error: palette.blauRed,
             success: palette.blauGreen,
@@ -131,18 +131,15 @@ export var getBlauSkin = function() {
             textAppBar: palette.grey5,
             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
+            successLow: palette.blauGreen10,
+            warningLow: palette.blauYellow10,
+            errorLow: palette.blauRed10,
+            promoLow: palette.blauPurple10,
+            brandLow: palette.blauBlueSecondary10,
+            successHigh: palette.blauGreen70,
+            warningHigh: palette.blauYellow70,
+            errorHigh: palette.blauRed70,
+            promoHigh: palette.blauPurple
         },
         darkModeColors: {
             // BACKGROUNDS
@@ -189,16 +186,15 @@ export var getBlauSkin = function() {
             navigationBarDivider: palette.darkModeBlack,
             // GLOBAL
             brand: palette.blauBluePrimary,
-            brandDark: palette.grey5,
+            brandHigh: palette.grey5,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
-            neutralLow: palette.darkModeGrey,
+            neutralLow: palette.darkModeGrey6,
             textPrimary: palette.grey2,
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.blauBlueSecondary,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -206,18 +202,15 @@ export var getBlauSkin = function() {
             textAppBar: palette.grey5,
             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
+            successLow: applyAlpha(palette.white, 0.05),
+            warningLow: applyAlpha(palette.white, 0.05),
+            errorLow: applyAlpha(palette.white, 0.05),
+            promoLow: applyAlpha(palette.white, 0.05),
+            brandLow: applyAlpha(palette.white, 0.05),
+            successHigh: palette.blauGreen30,
+            warningHigh: palette.blauYellow40,
+            errorHigh: palette.blauRed40,
+            promoHigh: palette.blauPurple30
         }
     };
 };