@telefonica/mistica 12.2.0 → 12.3.0

package/dist-es/responsive-layout.js

@@ -32,6 +32,7 @@ import { createUseStyles } from "./jss";
 import classnames from "classnames";
 import { useScreenSize } from "./hooks";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import ContainerTypeContext from "./container-type-context";
 var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
@@ -76,16 +77,20 @@ var ResponsiveLayout = function(param) {
     var classes = useStyles();
     var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
+    var containerType = isMobile ? "mobile-column" : isTablet ? "tablet-column" : "desktop-wide-column";
     return /*#__PURE__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        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
-            })
-        }))
+        children: /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+            value: containerType,
+            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/screen-size-context-provider.js

@@ -68,13 +68,15 @@ var ScreenSizeContextProvider = function(param1) {
             mobile: stripMedia(theme.mq.mobile),
             tablet: stripMedia(theme.mq.tablet),
             tabletOrBigger: stripMedia(theme.mq.tabletOrBigger),
-            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller)
+            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller),
+            largueDesktop: stripMedia(theme.mq.largeDesktop)
         };
     }, [
         theme.mq.mobile,
         theme.mq.tablet,
         theme.mq.tabletOrBigger,
-        theme.mq.tabletOrSmaller
+        theme.mq.tabletOrSmaller,
+        theme.mq.largeDesktop, 
     ]);
     var ref1 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.mobile).matches;
@@ -88,6 +90,9 @@ var ScreenSizeContextProvider = function(param1) {
     var ref4 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.tabletOrSmaller).matches;
     }), 2), isTabletOrSmaller = ref4[0], setIsTabletOrSmaller = ref4[1];
+    var ref5 = _slicedToArray(React.useState(function() {
+        return !isServerSide && window.matchMedia(mediaQueries.largueDesktop).matches;
+    }), 2), isLargeDesktop = ref5[0], setIsLargeDesktop = ref5[1];
     useIsomorphicLayoutEffect(function() {
         if (!window.matchMedia) {
             return;
@@ -108,6 +113,10 @@ var ScreenSizeContextProvider = function(param1) {
             [
                 mediaQueries.tabletOrSmaller,
                 setIsTabletOrSmaller
+            ],
+            [
+                mediaQueries.largueDesktop,
+                setIsLargeDesktop
             ], 
         ];
         var cleanupFunctions = entries.map(function(param) {
@@ -131,7 +140,8 @@ var ScreenSizeContextProvider = function(param1) {
         mediaQueries.mobile,
         mediaQueries.tablet,
         mediaQueries.tabletOrBigger,
-        mediaQueries.tabletOrSmaller
+        mediaQueries.tabletOrSmaller,
+        mediaQueries.largueDesktop, 
     ]);
     var value = React.useMemo(function() {
         return {
@@ -139,13 +149,15 @@ var ScreenSizeContextProvider = function(param1) {
             isTablet: isTablet,
             isTabletOrBigger: isTabletOrBigger,
             isTabletOrSmaller: isTabletOrSmaller,
-            isDesktopOrBigger: !isTabletOrSmaller
+            isDesktopOrBigger: !isTabletOrSmaller,
+            isLargeDesktop: isLargeDesktop
         };
     }, [
         isMobile,
         isTablet,
         isTabletOrBigger,
-        isTabletOrSmaller
+        isTabletOrSmaller,
+        isLargeDesktop
     ]);
     return /*#__PURE__*/ _jsx(ScreenSizeContext.Provider, {
         value: value,

package/dist-es/screen-size-context.js

@@ -4,6 +4,7 @@ var ScreenSizeContext = /*#__PURE__*/ React.createContext({
     isTablet: false,
     isTabletOrBigger: false,
     isTabletOrSmaller: false,
-    isDesktopOrBigger: false
+    isDesktopOrBigger: false,
+    isLargeDesktop: false
 });
 export default ScreenSizeContext;

package/dist-es/snackbar.js

@@ -63,7 +63,8 @@ import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
 import classNames from "classnames";
 import { isWebViewBridgeAvailable, nativeMessage } from "@tef-novum/webview-bridge";
-import { useElementDimensions, useScreenSize } from "./hooks";
+import { useElementDimensions, useScreenSize, useTheme } from "./hooks";
+import { Text2 } from "./text";
 var PADDING_Y = 14;
 var PADDING_X = 16;
 var TRANSITION_TIME_IN_MS = 300;
@@ -115,9 +116,6 @@ var useStyles = createUseStyles(function(theme) {
             transition: "transform ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out, opacity ").concat(TRANSITION_TIME_IN_MS, "ms ease-in-out")
         },
         snackbarContent: {
-            fontSize: 14,
-            lineHeight: "20px",
-            color: theme.colors.textPrimaryInverse,
             display: "flex",
             flexDirection: function(param) {
                 var isLongButton = param.isLongButton;
@@ -170,6 +168,7 @@ var SnackbarComponent = function(param) {
     var ref1 = useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
     var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
     var longButtonWidth = isDesktopOrBigger ? 160 : 128;
+    var colors = useTheme().colors;
     var classes = useStyles({
         type: type,
         isOpen: isOpen,
@@ -205,7 +204,9 @@ var SnackbarComponent = function(param) {
             children: /*#__PURE__*/ _jsxs("div", {
                 className: classes.snackbarContent,
                 children: [
-                    /*#__PURE__*/ _jsx("span", {
+                    /*#__PURE__*/ _jsx(Text2, {
+                        regular: true,
+                        color: colors.textPrimaryInverse,
                         children: message
                     }),
                     buttonText && /*#__PURE__*/ _jsx(Touchable, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.2.0",
+    "version": "12.3.0",
     "license": "MIT",
     "repository": {
         "type": "git",