@telefonica/mistica 10.28.0 → 11.0.0

package/dist/tag.js

@@ -135,7 +135,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var Tag = function Tag(param) {
-    var Icon = param.Icon, children = param.children, dataAttributes = param.dataAttributes, _type = param.type, type = _type === void 0 ? 'promo' : _type, color = param.color;
+    var Icon = param.Icon, children = param.children, dataAttributes = param.dataAttributes, _type = param.type, type = _type === void 0 ? 'promo' : _type;
     var classes = useStyles({
         hasIcon: !!Icon
     });
@@ -144,32 +144,6 @@ var Tag = function Tag(param) {
     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("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,
@@ -196,7 +170,7 @@ var Tag = function Tag(param) {
             colors.tagBackgroundError
         ]
     };
-    var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor1 = _type1[0], backgroundColor = _type1[1];
+    var _type1 = _slicedToArray(tagTypeToColors[type], 2), textColor = _type1[0], backgroundColor = _type1[1];
     var shouldUseInverseBackground = isInverse && !isDarkMode;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs("span", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         className: classes.tag,
@@ -207,14 +181,14 @@ var Tag = function Tag(param) {
             Icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 4,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
-                    color: textColor1,
+                    color: textColor,
                     size: (0, _css).pxToRem(16)
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeVariantContext.ThemeVariant, {
                 isInverse: false,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-                    color: textColor1,
+                    color: textColor,
                     size: 14,
                     lineHeight: 20,
                     weight: "medium",

package/dist/tag.js.flow

@@ -14,11 +14,6 @@ export type TagProps = {
   children: string,
   Icon?: React.ComponentType<IconProps>,
   dataAttributes?: DataAttributes,
-
-  /**
-   * @deprecated use type prop
-   */
-  color?: string,
 };
 declare var Tag: React.ComponentType<TagProps>;
 declare export default typeof Tag;

package/dist/text.d.ts

@@ -3,14 +3,10 @@ import type { DataAttributes } from './utils/types';
 declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
-    /** @deprecated use decoration prop */
-    textDecoration?: 'underline' | 'line-through' | 'none';
     decoration?: 'underline' | 'line-through' | 'inherit' | 'none';
     transform?: 'uppercase' | 'capitalize' | 'lowercase' | 'inherit' | 'none';
     children?: React.ReactNode;
     truncate?: boolean | number;
-    /** @deprecated use transform */
-    uppercase?: boolean;
     wordBreak?: boolean;
     id?: string;
     as?: React.ComponentType<any> | string;

package/dist/text.js

@@ -91,14 +91,8 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 return (0, _css).pxToRem(desktopLineHeight);
             },
             textTransform: function textTransform(param) {
-                var uppercase = param.uppercase, transform = param.transform;
-                if (uppercase) {
-                    return 'uppercase';
-                }
-                if (transform) {
-                    return transform;
-                }
-                return 'inherit';
+                var transform = param.transform;
+                return transform || 'inherit';
             },
             fontSize: function fontSize(param) {
                 var desktopSize = param.desktopSize;
@@ -149,7 +143,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Text = function Text(param) {
-    var weight = param.weight, color = param.color, textDecoration = param.textDecoration, _decoration = param.decoration, decoration = _decoration === void 0 ? textDecoration : _decoration, truncate = param.truncate, uppercase = param.uppercase, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
+    var weight = param.weight, color = param.color, decoration = param.decoration, truncate = param.truncate, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? 'span' : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param['aria-level'], dataAttributes = param.dataAttributes;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -160,7 +154,6 @@ var Text = function Text(param) {
         weight: weight,
         color: color,
         decoration: decoration,
-        uppercase: uppercase,
         transform: transform,
         wordBreak: wordBreak,
         letterSpacing: letterSpacing,

package/dist/text.js.flow

@@ -5,20 +5,10 @@ import type { DataAttributes } from "./utils/types";
 declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
-
-  /**
-   * @deprecated use decoration prop
-   */
-  textDecoration?: "underline" | "line-through" | "none",
   decoration?: "underline" | "line-through" | "inherit" | "none",
   transform?: "uppercase" | "capitalize" | "lowercase" | "inherit" | "none",
   children?: React.Node,
   truncate?: boolean | number,
-
-  /**
-   * @deprecated use transform
-   */
-  uppercase?: boolean,
   wordBreak?: boolean,
   id?: string,
   as?: React.ComponentType<any> | string,

package/dist/theme-context-provider.js

@@ -19,7 +19,6 @@ var _platform = require("./utils/platform");
 var _themeContext = _interopRequireDefault(require("./theme-context"));
 var _hooks = require("./hooks");
 var _tabFocus = _interopRequireDefault(require("./tab-focus"));
-var _portal = require("./portal");
 var _modalContextProvider = _interopRequireDefault(require("./modal-context-provider"));
 var _documentVisibility = require("./utils/document-visibility");
 function _interopRequireDefault(obj) {
@@ -220,23 +219,21 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
         theme,
         isOsDarkModeEnabled
     ]);
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_portal.PortalNodesProvider, {
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_reactJss.JssProvider, {
-            jss: (0, _jss1).getJss(),
-            classNamePrefix: classNamePrefix,
-            generateId: generateId,
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_tabFocus.default, {
-                disabled: !theme.enableTabFocus,
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_modalContextProvider.default, {
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeContext.default.Provider, {
-                        value: contextTheme,
-                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_documentVisibility.DocumentVisibilityProvider, {
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
-                                value: getAriaId,
-                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
-                                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
-                                        children: children
-                                    })
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_reactJss.JssProvider, {
+        jss: (0, _jss1).getJss(),
+        classNamePrefix: classNamePrefix,
+        generateId: generateId,
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_tabFocus.default, {
+            disabled: !theme.enableTabFocus,
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_modalContextProvider.default, {
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_themeContext.default.Provider, {
+                    value: contextTheme,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_documentVisibility.DocumentVisibilityProvider, {
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_ariaIdGetterContext.default.Provider, {
+                            value: getAriaId,
+                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContextProvider.default, {
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_dialog.default, {
+                                    children: children
                                 })
                             })
                         })

package/dist/touchable.d.ts

@@ -6,8 +6,6 @@ interface CommonProps {
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    /** @deprecated use ref */
-    elementRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>;
     style?: React.CSSProperties;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     'aria-label'?: string;
@@ -27,6 +25,7 @@ interface CommonProps {
 export interface PropsHref extends CommonProps {
     href: string;
     newTab?: boolean;
+    loadOnTop?: boolean;
     to?: undefined;
     onPress?: undefined;
 }
@@ -47,6 +46,7 @@ export interface PropsMaybeHref extends CommonProps {
     maybe: true;
     href?: string;
     newTab?: boolean;
+    loadOnTop?: boolean;
     to?: undefined;
     onPress?: undefined;
 }

package/dist/touchable.js

@@ -68,9 +68,11 @@ function _objectSpread(target) {
     return target;
 }
 var redirect = function redirect(url) {
-    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var external = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, loadOnTop = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     if (external) {
         window.open(url, '_blank');
+    } else if (loadOnTop) {
+        window.open(url, '_top');
     } else {
         document.location.href = url;
     }
@@ -141,6 +143,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     }, (0, _dom).getPrefixedDataAttributes(props.dataAttributes));
     var type = props.type ? props.type : 'button';
     var openNewTab = !!props.href && !!props.newTab;
+    var loadOnTop = !openNewTab && !!props.href && !!props.loadOnTop;
     var onPress = function onPress(event) {
         if (props.onPress) {
             props.onPress(event);
@@ -188,7 +191,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         }
         event.preventDefault();
         trackOnce(function() {
-            return redirect(getHref(), openNewTab);
+            return redirect(getHref(), openNewTab, loadOnTop);
         });
     };
     var handleKeyDown = function handleKeyDown(event) {
@@ -204,7 +207,11 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
             href: props.disabled ? undefined : getHref(),
-            target: openNewTab ? '_blank' : undefined,
+            target: function() {
+                if (openNewTab) return '_blank';
+                if (loadOnTop) return '_top';
+                return undefined;
+            }(),
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,
             children: [
@@ -218,11 +225,10 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         })));
     }
     if (props.to) {
-        var ref2;
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(Link, _objectSpread({}, commonProps, {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
-            innerRef: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
+            innerRef: ref,
             to: props.disabled ? '' : props.to,
             replace: props.replace,
             onClick: trackEvent,
@@ -231,7 +237,6 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
         })));
     }
     if (props.onPress) {
-        var ref3;
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx("button", _objectSpread({}, commonProps, {
             // this "form" attribute is useful when the form's submit button
             // is located outside the <form> element, for example if you use
@@ -241,14 +246,13 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
             type: type,
-            ref: (ref3 = props.elementRef) !== null && ref3 !== void 0 ? ref3 : ref,
+            ref: ref,
             onClick: handleButtonClick,
             children: children
         })));
     }
-    var ref4;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, commonProps, {
-        ref: (ref4 = props.elementRef) !== null && ref4 !== void 0 ? ref4 : ref,
+        ref: ref,
         className: (0, _classnames).default(commonProps.className, classes.notTouchable),
         children: children
     })));

package/dist/touchable.js.flow

@@ -8,11 +8,6 @@ declare type CommonProps = {
   children: React.Node,
   className?: string,
   disabled?: boolean,
-
-  /**
-   * @deprecated use ref
-   */
-  elementRef?: React.Ref<"button" | "a" | "div">,
   style?: CssStyle,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   "aria-label"?: string,
@@ -36,6 +31,7 @@ export type PropsHref = {
   ...$Exact<CommonProps>,
   href: string,
   newTab?: boolean,
+  loadOnTop?: boolean,
 };
 export type PropsOnPress = {
   ...$Exact<CommonProps>,
@@ -53,6 +49,7 @@ export type PropsMaybeHref = {
   maybe: true,
   href?: string,
   newTab?: boolean,
+  loadOnTop?: boolean,
 };
 export type PropsMaybeTo = {
   ...$Exact<CommonProps>,

package/dist-es/button.js

@@ -409,7 +409,8 @@ var Button = function(props) {
     if (props.href || props.href === '') {
         return(/*#__PURE__*/ _jsx(Touchable, _objectSpread({}, commonProps, {
             href: props.href,
-            newTab: props.newTab
+            newTab: props.newTab,
+            loadOnTop: props.loadOnTop
         })));
     }
     if (process.env.NODE_ENV !== 'production') {

package/dist-es/card.js

@@ -50,7 +50,7 @@ var CardContent = function(param) {
                                     children: [
                                         pretitle && /*#__PURE__*/ _jsx(Text1, {
                                             regular: true,
-                                            uppercase: true,
+                                            transform: "uppercase",
                                             children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
@@ -98,26 +98,6 @@ var useMediaCardStyles = createUseStyles(function() {
             flexDirection: 'column',
             height: '100%'
         },
-        media: {
-            width: '100%',
-            paddingTop: function(param) {
-                var media = param.media;
-                if (media.height) {
-                    return media.height;
-                }
-                // padding percentage is relative to width. With this trick we can force aspect ratio
-                if (media.aspectRatio) {
-                    return "".concat(100 / media.aspectRatio, "%");
-                }
-                return '56.25%'; // 16/9 aspect ratio
-            },
-            backgroundImage: function(param) {
-                var media = param.media;
-                return "url(".concat(media.src, ")");
-            },
-            backgroundSize: 'cover',
-            backgroundPosition: 'center'
-        },
         content: {
             flex: 1,
             padding: 16,
@@ -139,9 +119,7 @@ export var MediaCard = /*#__PURE__*/ React.forwardRef(function(param, ref) {
             className: classes.mediaCard,
             "aria-label": ariaLabel,
             children: [
-                typeof media.src === 'string' ? /*#__PURE__*/ _jsx("div", {
-                    className: classes.media
-                }) : /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
+                /*#__PURE__*/ _jsx(DisableBorderRadiusProvider, {
                     children: media
                 }),
                 /*#__PURE__*/ _jsx("div", {

package/dist-es/carousel.js

@@ -383,11 +383,12 @@ 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, _gap = param.gap, gap = _gap === void 0 ? 8 : _gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
+    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 texts = useTheme().texts;
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
     var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
+    var gap = gapProp !== null && gapProp !== void 0 ? gapProp : isDesktopOrBigger ? 16 : 8;
     var sideMargin = useResonsiveLayoutMargin();
     var classes = useStyles({
         itemsPerPageConfig: itemsPerPageConfig,
@@ -423,12 +424,24 @@ var BaseCarousel = function(param) {
             };
             var calcItemScrollPositions = function() {
                 var maxScroll = carouselEl.scrollWidth - carouselEl.clientWidth;
+                var getItemScrollMargin = function(itemIndex) {
+                    if (centered) {
+                        return 0;
+                    }
+                    if (itemIndex === 0) {
+                        return 0;
+                    }
+                    if (isDesktopOrBigger) {
+                        return -gap;
+                    }
+                    return mobilePageOffsetConfig.prev;
+                };
                 setItemScrollPositions(Array.from(carouselEl.querySelectorAll('[data-item]')).map(function(itemEl, idx) {
                     if (idx === items.length - 1) {
                         return maxScroll;
                     }
                     var offsetLeft = itemEl.offsetLeft;
-                    var scrollMargin = Number(getComputedStyle(itemEl).scrollMargin.replace('px', ''));
+                    var scrollMargin = getItemScrollMargin(idx);
                     var scrollPosition = centered && !isDesktopOrBigger ? offsetLeft - itemEl.clientWidth / 2 : offsetLeft;
                     return Math.min(scrollPosition - scrollMargin - carouselEl.offsetLeft, maxScroll);
                 }));
@@ -647,6 +660,7 @@ var useSlideshowStyles = createUseStyles(function(theme) {
         })),
         item: {
             width: '100%',
+            scrollSnapStop: isAndroid(theme.platformOverrides) ? 'always' : 'normal',
             scrollSnapAlign: 'start',
             flexShrink: 0
         },

package/dist-es/checkbox.js

@@ -203,7 +203,12 @@ var Checkbox = function(props) {
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
     }, getPrefixedDataAttributes(props.dataAttributes), {
-        children: props.render ? props.render(iconCheckbox, labelId) : /*#__PURE__*/ _jsxs(Inline, {
+        children: props.render ? props.render({
+            controlElement: iconCheckbox,
+            labelId: labelId,
+            checked: value !== null && value !== void 0 ? value : checkedState,
+            disabled: !!disabled
+        }) : /*#__PURE__*/ _jsxs(Inline, {
             space: 16,
             children: [
                 /*#__PURE__*/ _jsx(Text3, {

package/dist-es/chip.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createUseStyles } from './jss';
 import { useTheme } from './hooks';
@@ -7,6 +7,7 @@ import { Text2 } from './text';
 import IconButton from './icon-button';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import { pxToRem } from './utils/css';
+import classNames from 'classnames';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -23,7 +24,7 @@ function _defineProperty(obj, key, value) {
 var useStyles = createUseStyles(function(param1) {
     var colors = param1.colors, mq = param1.mq;
     return {
-        container: _defineProperty({
+        container: {
             display: 'inline-flex',
             verticalAlign: 'middle',
             justifyContent: 'center',
@@ -38,8 +39,9 @@ var useStyles = createUseStyles(function(param1) {
             '& > span': {
                 color: colors.textPrimary
             }
-        }, mq.supportsHover, {
-            '&:hover': {
+        },
+        interactive: _defineProperty({}, mq.supportsHover, {
+            '&:hover:not($active)': {
                 borderColor: function(param) {
                     var isDarkMode = param.isDarkMode;
                     return isDarkMode ? colors.background : colors.tagBackgroundActive;
@@ -48,21 +50,26 @@ var useStyles = createUseStyles(function(param1) {
                 backgroundColor: colors.tagBackgroundActive
             },
             '&:hover > span': {
-                color: colors.textLink
+                color: colors.controlActivated
             }
-        })
+        }),
+        active: {
+            borderColor: colors.controlActivated,
+            color: colors.controlActivated,
+            backgroundColor: colors.tagBackgroundActive,
+            '& > span': {
+                color: colors.controlActivated
+            }
+        }
     };
 });
-var Chip = function(param) {
-    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+var Chip = function(props) {
     var ref = useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
     var classes = useStyles({
         isDarkMode: isDarkMode
     });
-    return(/*#__PURE__*/ _jsxs(Box, {
-        className: classes.container,
-        paddingLeft: Icon ? 8 : 12,
-        paddingRight: onClose ? 0 : 12,
+    var Icon = props.Icon, children = props.children, id = props.id;
+    var body = /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             Icon && /*#__PURE__*/ _jsx(Box, {
                 paddingRight: 4,
@@ -72,31 +79,51 @@ var Chip = function(param) {
                 })
             }),
             /*#__PURE__*/ _jsx(Text2, {
+                id: id,
                 medium: true,
                 truncate: 1,
                 color: "currentColor",
                 children: children
-            }),
-            onClose ? /*#__PURE__*/ _jsx(Box, {
-                paddingLeft: 4,
-                children: /*#__PURE__*/ _jsx(IconButton, {
-                    size: 24,
-                    style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center'
-                    },
-                    "aria-label": texts.closeButtonLabel,
-                    onPress: function() {
-                        return onClose();
-                    },
-                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
-                        size: 16,
-                        color: "currentColor"
+            })
+        ]
+    });
+    var paddingLeft = Icon ? 8 : 12;
+    if (props.onClose) {
+        return(/*#__PURE__*/ _jsxs(Box, {
+            className: classes.container,
+            paddingLeft: paddingLeft,
+            children: [
+                body,
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingLeft: 4,
+                    children: /*#__PURE__*/ _jsx(IconButton, {
+                        size: 24,
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                        },
+                        "aria-label": texts.closeButtonLabel,
+                        onPress: function() {
+                            return props.onClose();
+                        },
+                        children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                            size: 16,
+                            color: "currentColor"
+                        })
                     })
                 })
-            }) : null
-        ]
-    }));
+            ]
+        }));
+    } else {
+        var isInteractive = props.active !== undefined;
+        var _obj;
+        return(/*#__PURE__*/ _jsx(Box, {
+            className: classNames(classes.container, (_obj = {}, _defineProperty(_obj, classes.interactive, isInteractive), _defineProperty(_obj, classes.active, props.active), _obj)),
+            paddingLeft: paddingLeft,
+            paddingRight: 12,
+            children: body
+        }));
+    }
 };
 export default Chip;

package/dist-es/fixed-footer-layout.js

@@ -103,7 +103,7 @@ var useStyles = createUseStyles(function(theme) {
             zIndex: 1
         },
         shadow: {
-            boxShadow: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
+            boxShadow: '0 -3px 8px 0 rgba(0, 0, 0, 0.15)'
         }
     });
 });
@@ -172,7 +172,7 @@ var FixedFooterLayout = function(param) {
                  * This style is inline to avoid creating a class that may collide with
                  * other fixed footers during the page animation transition
                  */ style: {
-                    background: isTabletOrSmaller ? footerBgColor || colors.background : undefined
+                    background: isTabletOrSmaller ? footerBgColor || colors.backgroundContainer : undefined
                 },
                 "data-testid": "fixed-footer".concat(isFooterVisible ? '-visible' : '-hidden'),
                 /**

package/dist-es/generated/mistica-icons/icon-academic-filled.js

@@ -77,7 +77,9 @@ var IconAcademicFilled = function(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ _jsx("path", {
-            d: "M11.72 15.44a2.9 2.9 0 00.891-.163l5.992-2.672v2.753c0 .81-.566 1.457-1.294 1.62-1.294.243-3.076.727-4.373 1.78-.325.244-.728.407-1.134.407-.406 0-.81-.163-1.135-.406-1.294-1.054-3.075-1.538-4.372-1.782A1.654 1.654 0 015 15.358v-2.672l5.829 2.59c.244.082.568.163.89.163zm9.393 1.131c.406.325.647.972.647 1.375 0 .244-.081.485-.244.566-.162.163-.484.244-.728.244H20.3c-.325 0-.647 0-.89-.244a.736.736 0 01-.244-.566c0-.406.244-1.053.647-1.375v-5.423l-7.61 3.4c-.163.082-.407.163-.566.163-.244 0-.407-.081-.566-.162l-7.93-3.563c-.566-.244-.891-.729-.891-1.376 0-.566.325-1.134.89-1.375l7.934-3.563a1.57 1.57 0 011.215 0l7.933 3.563c.818.375.81 1.308.81 1.781l.08 6.555z",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M21.76 17.946c0-.403-.241-1.05-.647-1.375l-.081-6.555v-.014c0-.478 0-1.396-.81-1.767l-7.933-3.563a1.577 1.577 0 00-1.216 0L3.141 8.235c-.566.24-.891.81-.891 1.375 0 .647.325 1.132.89 1.376l7.93 3.563c.16.08.323.162.567.162.16 0 .403-.081.565-.162l7.611-3.401v5.423c-.403.322-.647.97-.647 1.375 0 .241.081.404.244.566.243.244.566.244.89.244h.488c.244 0 .566-.081.728-.244.163-.081.244-.322.244-.566zm-9.149-2.67a2.902 2.902 0 01-.89.163c-.322 0-.648-.08-.891-.162L5 12.686v2.672c0 .81.567 1.457 1.295 1.62 1.297.243 3.078.727 4.372 1.78.325.244.729.407 1.135.407s.81-.163 1.134-.406c1.297-1.053 3.079-1.538 4.373-1.782a1.654 1.654 0 001.294-1.619v-2.753l-5.992 2.672z",
             fill: fillColor
         })
     })));

package/dist-es/generated/mistica-icons/icon-academic-light.js

@@ -77,7 +77,9 @@ var IconAcademicLight = function(_param) {
         role: "presentation"
     }, rest, {
         children: /*#__PURE__*/ _jsx("path", {
-            d: "M21.018 18.531h-1.062c0-.411.327-1.072.49-1.072.164 0 .572.577.572 1.072zm-3.345-2.885c0 .33-.244.577-.49.577-1.387.247-3.345.824-4.895 2.062a.975.975 0 01-1.142 0c-1.47-1.235-3.508-1.812-4.895-2.062-.327-.08-.49-.33-.49-.577v-3.543l5.304 2.474a1.2 1.2 0 001.062 0l5.463-2.558.083 3.627zM3.068 9.63c0-.246.08-.412.327-.496l8.078-3.708c.164-.081.244-.081.408 0l8.077 3.708c.097.05.08.082.08.082h-8.485c-.244 0-.407.165-.407.411 0 .247.163.412.407.412h8.322l-8.078 3.711c-.163.081-.244.081-.407 0l-8.078-3.708a.45.45 0 01-.244-.412zm17.87 7.09v-6.678c.013-.518.05-1.373-.652-1.647l-8.08-3.708c-.409-.166-.736-.166-1.143-.082l-8.078 3.79c-.491.165-.735.658-.735 1.235 0 .577.327.989.735 1.235l1.96.908v3.873c0 .743.491 1.32 1.143 1.485 1.306.246 3.183.742 4.487 1.896.327.247.651.412 1.062.412.407 0 .734-.165 1.062-.412 1.386-1.073 3.183-1.647 4.486-1.896a1.51 1.51 0 001.143-1.485v-3.954l1.714-.743v5.77c-.652.247-.98 1.235-.98 1.812 0 .247.081.496.245.659.244.246.571.246.898.246h.491c.244 0 .48-.059.735-.246.186-.138.255-.236.286-.659.036-.607-.208-1.4-.78-1.812z",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M20.937 10.042v6.677c.572.412.816 1.205.78 1.812-.031.423-.1.521-.286.659-.255.187-.49.246-.735.246h-.49c-.328 0-.655 0-.9-.246-.163-.163-.243-.412-.243-.659 0-.577.327-1.565.979-1.812v-5.77l-1.714.743v3.954c0 .743-.49 1.32-1.143 1.485-1.303.25-3.1.823-4.486 1.896-.328.247-.655.412-1.062.412-.41 0-.735-.165-1.062-.412-1.304-1.154-3.181-1.65-4.487-1.896a1.51 1.51 0 01-1.143-1.485v-3.873l-1.96-.908c-.408-.246-.735-.658-.735-1.235 0-.577.244-1.07.735-1.235l8.078-3.79c.407-.084.734-.084 1.142.082l8.08 3.708c.69.27.667 1.099.653 1.619v.028zM3.068 9.63c0-.246.08-.412.327-.496l8.078-3.708c.164-.081.244-.081.408 0l8.077 3.708c.098.05.08.082.08.082h-8.485c-.244 0-.407.165-.407.411 0 .247.163.412.407.412h8.322l-8.078 3.711c-.163.082-.244.082-.407 0l-8.078-3.708a.45.45 0 01-.244-.412zm14.115 6.594c.247 0 .49-.247.49-.578l-.083-3.627-5.463 2.558a1.2 1.2 0 01-1.062 0l-5.304-2.474v3.543c0 .247.163.496.49.578 1.387.249 3.425.826 4.895 2.06a.975.975 0 001.142 0c1.55-1.237 3.508-1.814 4.895-2.06zm2.773 2.307h1.062c0-.495-.408-1.072-.572-1.072-.163 0-.49.66-.49 1.072z",
             fill: fillColor
         })
     })));