@telefonica/mistica 11.12.1 → 12.1.0

package/dist/skins/vivo.js

@@ -108,18 +108,17 @@ var getVivoSkin = function getVivoSkin() {
             feedbackInfoBackground: palette.grey6,
             // GLOBAL
             brand: palette.vivoPurple,
-            brandDark: palette.vivoPurpleDark,
+            brandHigh: palette.vivoPurpleDark,
             inverse: palette.white,
             neutralHigh: palette.grey6,
             neutralMedium: palette.grey5,
-            neutralLow: palette.grey3,
+            neutralLow: palette.grey1,
             promo: palette.vivoPurple,
             highlight: palette.pink,
             textPrimary: palette.grey6,
             textPrimaryInverse: palette.white,
             textSecondary: palette.grey5,
             textSecondaryInverse: palette.white,
-            textAmount: palette.vivoPurple,
             // STATES
             error: palette.pepper,
             success: palette.vivoGreen,
@@ -132,18 +131,15 @@ var getVivoSkin = function getVivoSkin() {
             textAppBar: palette.grey4,
             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
+            successLow: palette.vivoGreenLight10,
+            warningLow: palette.orangeLight10,
+            errorLow: palette.pepperLight10,
+            promoLow: palette.vivoPurpleLight10,
+            brandLow: palette.vivoPurpleLight10,
+            successHigh: palette.vivoGreenDark,
+            warningHigh: palette.orangeDark,
+            errorHigh: palette.pepperDark80,
+            promoHigh: palette.vivoPurple
         },
         darkModeColors: {
             appBarBackground: palette.darkModeGrey,
@@ -193,7 +189,7 @@ var getVivoSkin = function getVivoSkin() {
             navigationBarDivider: palette.darkModeBlack,
             feedbackInfoBackground: palette.darkModeGrey6,
             brand: palette.vivoPurpleLight80,
-            brandDark: palette.darkModeGrey6,
+            brandHigh: palette.darkModeGrey6,
             inverse: palette.grey2,
             neutralHigh: palette.grey2,
             neutralMedium: palette.grey5,
@@ -203,7 +199,6 @@ var getVivoSkin = function getVivoSkin() {
             textPrimaryInverse: palette.grey2,
             textSecondary: palette.grey4,
             textSecondaryInverse: palette.grey4,
-            textAmount: palette.vivoPurpleLight50,
             textNavigationBarPrimary: palette.grey2,
             textNavigationBarSecondary: palette.grey4,
             textNavigationSearchBarHint: palette.grey4,
@@ -211,18 +206,15 @@ var getVivoSkin = function getVivoSkin() {
             textAppBar: palette.grey5,
             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
+            successLow: (0, _color).applyAlpha(palette.white, 0.05),
+            warningLow: (0, _color).applyAlpha(palette.white, 0.05),
+            errorLow: (0, _color).applyAlpha(palette.white, 0.05),
+            promoLow: (0, _color).applyAlpha(palette.white, 0.05),
+            brandLow: (0, _color).applyAlpha(palette.white, 0.05),
+            successHigh: palette.vivoGreenLight30,
+            warningHigh: palette.orangeLight40,
+            errorHigh: palette.pepperLight40,
+            promoHigh: palette.vivoPurpleLight50
         }
     };
 };

package/dist/snackbar.js

@@ -127,7 +127,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minWidth: SNACKBAR_MIN_WIDTH,
             minHeight: SNACKBAR_MIN_HEIGHT,
             padding: "".concat(PADDING_Y, "px ").concat(PADDING_X, "px"),
-            borderRadius: 4,
+            borderRadius: 8,
             position: "fixed",
             bottom: 24,
             zIndex: 1000,

package/dist/spinner.js

@@ -243,7 +243,6 @@ var Spinner = function Spinner(param) {
                 r: "30",
                 role: "presentation",
                 stroke: color,
-                strokeLinecap: "square",
                 strokeWidth: "6"
             })
         ]

package/dist/tag.js

@@ -146,28 +146,28 @@ var Tag = function Tag(param) {
     }
     var tagTypeToColors = {
         promo: [
-            colors.textTagPromo,
-            colors.tagBackgroundPromo
+            colors.promoHigh,
+            colors.promoLow
         ],
         active: [
-            colors.textTagActive,
-            colors.tagBackgroundActive
+            colors.brand,
+            colors.brandLow
         ],
         inactive: [
-            colors.textTagInactive,
-            colors.tagBackgroundInactive
+            colors.neutralMedium,
+            colors.neutralLow
         ],
         success: [
-            colors.textTagSuccess,
-            colors.tagBackgroundSuccess
+            colors.successHigh,
+            colors.successLow
         ],
         warning: [
-            colors.textTagWarning,
-            colors.tagBackgroundWarning
+            colors.warningHigh,
+            colors.warningLow
         ],
         error: [
-            colors.textTagError,
-            colors.tagBackgroundError
+            colors.errorHigh,
+            colors.errorLow
         ]
     };
     var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];

package/dist/text-field-components.js

@@ -287,7 +287,7 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
         border: (_obj1 = {
             overflow: "hidden",
             border: "1px solid ".concat(theme.colors.border),
-            borderRadius: 4,
+            borderRadius: 8,
             height: function height(param) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 60;

package/dist/text-link.js

@@ -94,25 +94,33 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var useStyles = (0, _jss).createUseStyles(function(theme) {
+var useStyles = (0, _jss).createUseStyles(function(param) {
+    var colors = param.colors, isDarkMode = param.isDarkMode, mq = param.mq;
     var _obj;
     return {
         textLink: (_obj = {
             width: "auto",
             lineHeight: "inherit",
             display: "inline-block",
-            color: theme.colors.textLink,
-            wordBreak: "break-word"
-        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            color: colors.textLink,
+            wordBreak: "break-word",
+            cursor: "pointer"
+        }, _defineProperty(_obj, mq.supportsHover, {
             "&:hover:not([disabled])": {
                 textDecoration: "underline"
             }
         }), _defineProperty(_obj, "&[disabled]", {
-            opacity: 0.5
+            opacity: 0.5,
+            textDecoration: "none"
         }), _obj),
-        inverse: {
-            color: theme.colors.textLinkInverse
-        },
+        inverse: _defineProperty({
+            color: colors.textLinkInverse,
+            textDecoration: isDarkMode ? "none" : "underline"
+        }, mq.supportsHover, {
+            "&:hover:not([disabled])": {
+                textDecorationThickness: isDarkMode ? 1 : 2
+            }
+        }),
         small: {
             fontSize: 14
         }

package/dist/text.js

@@ -70,7 +70,8 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     var mapToWeight = {
         light: 300,
         regular: 400,
-        medium: 500
+        medium: 500,
+        bold: 700
     };
     var _obj;
     var inverseColorsMap = (_obj = {}, _defineProperty(_obj, theme.colors.textPrimary, theme.colors.textPrimaryInverse), _defineProperty(_obj, theme.colors.textSecondary, theme.colors.textSecondaryInverse), _defineProperty(_obj, theme.colors.textLink, theme.colors.textLinkInverse), _obj);
@@ -119,9 +120,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return wordBreak ? "anywhere" : "inherit";
             },
             "@supports not (overflow-wrap: anywhere)": {
+                // "overflow-wrap: anywhere" is not supported in Safari
+                // "word-break: break-word" has the same effect as "word-break: normal" and "overflow-wrap: anywhere",
+                // regardless of the actual value of the overflow-wrap property.
                 wordBreak: function wordBreak(param) {
                     var wordBreak1 = param.wordBreak;
-                    return wordBreak1 ? "break-all" : "inherit";
+                    return wordBreak1 ? "break-word" : "inherit";
                 }
             },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
@@ -140,10 +144,11 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             "-webkit-line-clamp": lineClamp,
             lineClamp: lineClamp,
             wordBreak: function wordBreak(param) {
-                var wordBreak2 = param.wordBreak;
-                return wordBreak2 ? "break-all" : "normal";
+                var truncate = param.truncate;
+                return truncate === 1 || truncate === true ? "break-all" : "break-word";
             },
             "@supports (overflow-wrap: anywhere)": {
+                overflowWrap: "anywhere",
                 wordBreak: function wordBreak(param) {
                     var truncate = param.truncate;
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
@@ -221,8 +226,8 @@ var Text8 = function Text8(props) {
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
-        desktopSize: 40,
-        desktopLineHeight: "48px",
+        desktopSize: 48,
+        desktopLineHeight: "56px",
         weight: textPresets.text8.weight
     }, props, {
         children: props.children

package/dist/tooltip.js

@@ -152,7 +152,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         arrow: {
             position: "absolute",
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             width: arrowSize,
             height: arrowSize,
             top: 0,
@@ -194,7 +194,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         },
         arrowWrapper: {
             position: "absolute",
-            color: theme.colors.background,
+            color: theme.colors.backgroundContainer,
             width: arrowWrapperWidth,
             height: arrowWrapperHeight,
             overflow: "hidden"
@@ -208,10 +208,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             width: "auto",
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
             padding: 16,
-            backgroundColor: theme.colors.background,
+            backgroundColor: theme.colors.backgroundContainer,
             zIndex: 12,
             border: "1px solid ".concat(theme.colors.divider),
-            borderRadius: 2
+            borderRadius: 8
         },
         title: {
             margin: 0,

package/dist/video.js

@@ -220,7 +220,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         style: {
             // For some reason adding this style with JSS doesn't add the border radius in safari
-            borderRadius: noBorderRadius ? 0 : 4
+            borderRadius: noBorderRadius ? 0 : 8
         },
         children: sources.map(function(param, index) {
             var src = param.src, type = param.type;
@@ -239,7 +239,7 @@ var Video = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 backgroundImage: poster ? 'url("'.concat(poster, '")') : undefined,
                 backgroundSize: "cover",
                 backgroundPosition: "50% 50%",
-                borderRadius: noBorderRadius ? 0 : 4
+                borderRadius: noBorderRadius ? 0 : 8
             },
             className: classes.wrapper,
             children: video1

package/dist-es/avatar.js

@@ -164,9 +164,9 @@ var Avatar = function(_param) {
     var colors = useTheme().colors;
     var isInverse = useIsInverseVariant();
     var _backgroundColor;
-    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandDark : colors.tagBackgroundActive;
+    var backgroundColor = (_backgroundColor = props.backgroundColor) !== null && _backgroundColor !== void 0 ? _backgroundColor : isInverse ? colors.brandHigh : colors.brandLow;
     var _textColor;
-    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.textTagActive;
+    var textColor = (_textColor = props.textColor) !== null && _textColor !== void 0 ? _textColor : isInverse ? colors.textPrimaryInverse : colors.brand;
     var ref = _slicedToArray(React.useState(false), 2), imgLoadError = ref[0], setImgLoadError = ref[1];
     var classes = useStyles({
         textColor: textColor,

package/dist-es/boxed.js

@@ -50,7 +50,7 @@ var useStyles = createUseStyles(function(param1) {
                 }
                 return "1px solid ".concat(colors.border);
             },
-            borderRadius: 4,
+            borderRadius: 8,
             overflow: "hidden"
         }
     };

package/dist-es/button-group.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { createUseStyles } from "./jss";
 import classNames from "classnames";
 var buttonLayoutSpacing = 16;
-var buttonLinkPadding = 6;
+var buttonLinkPadding = 12;
 var useStyles = createUseStyles(function() {
     return {
         inline: {

package/dist-es/button.js

@@ -92,7 +92,7 @@ var BORDER_PX = 1.5;
 var SPINNER_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
-var X_SMALL_PADDING_PX = 8 - BORDER_PX;
+var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
 var commonClasses = function() {
     return {
@@ -427,12 +427,13 @@ var Button = function(props) {
     return null;
 };
 var useButtonLinkStyles = createUseStyles(function(theme) {
-    var padding = 6;
+    var paddingY = 6;
+    var paddingX = 12;
     return {
         link: {
             display: "inline-block",
             width: "auto",
-            padding: padding,
+            padding: "".concat(paddingY, "px ").concat(paddingX, "px"),
             fontWeight: 500,
             borderRadius: 4,
             overflow: "hidden",
@@ -460,7 +461,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             })
         },
         aligned: {
-            marginLeft: -padding
+            marginLeft: -paddingX
         }
     };
 });

package/dist-es/callout.js

@@ -29,7 +29,7 @@ var useStyles = createUseStyles(function(param) {
     return {
         container: {
             background: colors.backgroundAlternative,
-            borderRadius: 4,
+            borderRadius: 8,
             padding: 16,
             overflow: "hidden",
             display: "flex",

package/dist-es/card.js

@@ -171,7 +171,8 @@ var MaybeSection = function(param) {
         });
     }
 };
-var useMediaCardStyles = createUseStyles(function() {
+var useMediaCardStyles = createUseStyles(function(param) {
+    var mq = param.mq;
     return {
         boxed: {
             height: "100%",
@@ -182,103 +183,111 @@ var useMediaCardStyles = createUseStyles(function() {
             flexDirection: "column",
             height: "100%"
         },
-        content: {
+        content: _defineProperty({
             flex: 1,
             padding: 16,
             paddingBottom: 24,
             display: "flex",
             flexDirection: "column"
-        }
+        }, mq.desktopOrBigger, {
+            padding: 24,
+            paddingBottom: 32
+        })
     };
 });
 export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var media = param.media, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useMediaCardStyles({
         media: media
     });
-    var content = /*#__PURE__*/ _jsx(Boxed, {
-        className: classes.boxed,
-        dataAttributes: dataAttributes,
-        ref: ref,
-        children: /*#__PURE__*/ _jsxs(MaybeSection, {
-            className: classes.mediaCard,
-            "aria-label": ariaLabel,
-            children: [
-                /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
-                    children: media
-                }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.content,
-                    children: /*#__PURE__*/ _jsx(CardContent, {
-                        headline: headline,
-                        pretitle: pretitle,
-                        pretitleLinesMax: pretitleLinesMax,
-                        title: title,
-                        titleLinesMax: titleLinesMax,
-                        description: description,
-                        descriptionLinesMax: descriptionLinesMax,
-                        extra: extra,
-                        button: button,
-                        buttonLink: buttonLink
-                    })
-                })
-            ]
-        })
-    });
     return /*#__PURE__*/ _jsx(MaybeDismissable, {
         onClose: onClose,
         "aria-label": ariaLabel,
-        children: content
+        children: /*#__PURE__*/ _jsx(Boxed, {
+            className: classes.boxed,
+            dataAttributes: dataAttributes,
+            ref: ref,
+            children: /*#__PURE__*/ _jsxs(MaybeSection, {
+                className: classes.mediaCard,
+                "aria-label": ariaLabel,
+                children: [
+                    /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
+                        children: media
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: classes.content,
+                        children: /*#__PURE__*/ _jsx(CardContent, {
+                            headline: headline,
+                            pretitle: pretitle,
+                            pretitleLinesMax: pretitleLinesMax,
+                            title: title,
+                            titleLinesMax: titleLinesMax,
+                            subtitle: subtitle,
+                            subtitleLinesMax: subtitleLinesMax,
+                            description: description,
+                            descriptionLinesMax: descriptionLinesMax,
+                            extra: extra,
+                            button: button,
+                            buttonLink: buttonLink
+                        })
+                    })
+                ]
+            })
+        })
     });
 });
-var useDataCardStyles = createUseStyles(function() {
+var useDataCardStyles = createUseStyles(function(param) {
+    var mq = param.mq;
     return {
         boxed: {
             height: "100%",
             width: "100%"
         },
-        dataCard: {
+        dataCard: _defineProperty({
             display: "flex",
             flexDirection: "column",
             padding: "24px 16px",
             height: "100%"
-        }
+        }, mq.desktopOrBigger, {
+            padding: "32px 24px"
+        })
     };
 });
 export var DataCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
-    var icon = param.icon, headline = param.headline, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
+    var icon = param.icon, headline = param.headline, pretitle = param.pretitle, pretitleLinesMax = param.pretitleLinesMax, title = param.title, titleLinesMax = param.titleLinesMax, subtitle = param.subtitle, subtitleLinesMax = param.subtitleLinesMax, description = param.description, descriptionLinesMax = param.descriptionLinesMax, extra = param.extra, button = param.button, buttonLink = param.buttonLink, dataAttributes = param.dataAttributes, ariaLabel = param["aria-label"], onClose = param.onClose;
     var classes = useDataCardStyles();
-    var content = /*#__PURE__*/ _jsx(Boxed, {
-        className: classes.boxed,
-        dataAttributes: dataAttributes,
-        ref: ref,
-        children: /*#__PURE__*/ _jsxs(MaybeSection, {
-            className: classes.dataCard,
-            "aria-label": ariaLabel,
-            children: [
-                icon && /*#__PURE__*/ _jsx(Box, {
-                    paddingBottom: 16,
-                    children: icon
-                }),
-                /*#__PURE__*/ _jsx(CardContent, {
-                    headline: headline,
-                    title: title,
-                    titleLinesMax: titleLinesMax,
-                    subtitle: subtitle,
-                    subtitleLinesMax: subtitleLinesMax,
-                    description: description,
-                    descriptionLinesMax: descriptionLinesMax,
-                    extra: extra,
-                    button: button,
-                    buttonLink: buttonLink
-                })
-            ]
-        })
-    });
     return /*#__PURE__*/ _jsx(MaybeDismissable, {
         "aria-label": ariaLabel,
         onClose: onClose,
-        children: content
+        children: /*#__PURE__*/ _jsx(Boxed, {
+            className: classes.boxed,
+            dataAttributes: dataAttributes,
+            ref: ref,
+            children: /*#__PURE__*/ _jsxs(MaybeSection, {
+                className: classes.dataCard,
+                "aria-label": ariaLabel,
+                children: [
+                    icon && /*#__PURE__*/ _jsx(Box, {
+                        paddingBottom: 16,
+                        children: icon
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        headline: headline,
+                        pretitle: pretitle,
+                        pretitleLinesMax: pretitleLinesMax,
+                        title: title,
+                        titleLinesMax: titleLinesMax,
+                        subtitle: subtitle,
+                        subtitleLinesMax: subtitleLinesMax,
+                        description: description,
+                        descriptionLinesMax: descriptionLinesMax,
+                        extra: extra,
+                        button: button,
+                        buttonLink: buttonLink
+                    })
+                ]
+            })
+        })
     });
 });
 var useSnapCardStyles = createUseStyles(function(theme) {
@@ -305,6 +314,7 @@ var useSnapCardStyles = createUseStyles(function(theme) {
             justifyContent: "space-between",
             padding: 16,
             minHeight: 80,
+            flex: 1,
             minWidth: 104
         }, theme.mq.desktopOrBigger, {
             padding: 24

package/dist-es/carousel.js

@@ -388,7 +388,7 @@ var calcCurrentPageIndex = function(scrollPosition, pagesScrollPositions) {
 };
 var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function(param) {
-    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     var texts = useTheme().texts;
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
@@ -602,7 +602,8 @@ var BaseCarousel = function(param) {
                         ref: carouselRef,
                         children: items.map(function(item, index) {
                             return /*#__PURE__*/ _jsx("div", {
-                                className: classes.item,
+                                className: classNames(classes.item, itemClassName),
+                                style: itemStyle,
                                 "data-item": true,
                                 children: item
                             }, index);
@@ -631,9 +632,11 @@ export var Carousel = function(props) {
     return /*#__PURE__*/ _jsx(BaseCarousel, _objectSpread({}, props));
 };
 export var CenteredCarousel = function(param) {
-    var items = param.items, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     return /*#__PURE__*/ _jsx(BaseCarousel, {
         items: items,
+        itemStyle: itemStyle,
+        itemClassName: itemClassName,
         itemsPerPage: {
             mobile: 1,
             desktop: 3

package/dist-es/checkbox.js

@@ -93,6 +93,7 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
             justifyContent: "center",
             alignItems: "center",
             userSelect: "none",
+            outline: "1px solid transparent",
             borderRadius: 2,
             verticalAlign: "middle",
             background: colors.background,
@@ -100,7 +101,7 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
             transition: "box-shadow 0.3s"
         },
         boxChecked: {
-            boxShadow: "inset 0 0 0 9px ".concat(colors.controlActivated)
+            boxShadow: "inset 0 0 0 12px ".concat(colors.controlActivated)
         },
         check: {
             display: "block",

package/dist-es/chip.js

@@ -46,10 +46,10 @@ var useStyles = createUseStyles(function(param1) {
             "&:hover:not($active)": {
                 borderColor: function(param) {
                     var isDarkMode = param.isDarkMode;
-                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                    return isDarkMode ? colors.background : colors.brandLow;
                 },
                 color: colors.controlActivated,
-                backgroundColor: colors.tagBackgroundActive
+                backgroundColor: colors.brandLow
             },
             "&:hover > span": {
                 color: colors.controlActivated
@@ -58,7 +58,7 @@ var useStyles = createUseStyles(function(param1) {
         active: {
             borderColor: colors.controlActivated,
             color: colors.controlActivated,
-            backgroundColor: colors.tagBackgroundActive,
+            backgroundColor: colors.brandLow,
             "& > span": {
                 color: colors.controlActivated
             }