@telefonica/mistica 11.11.0 → 11.11.1

package/dist/button.js

@@ -212,13 +212,12 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                "@media (pointer: coarse)": {
-                    // Revert hover background in touch devices
-                    backgroundColor: theme.colors.buttonPrimaryBackground
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonPrimaryBackgroundHover
+            }, theme.mq.touchableOnly, {
+                // Revert hover background in touch devices
+                backgroundColor: theme.colors.buttonPrimaryBackground
+            })
         },
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
@@ -228,14 +227,13 @@ var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 color: theme.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    color: theme.colors.textButtonPrimaryInverse,
-                    backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
-                }
-            }
+                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                color: theme.colors.textButtonPrimaryInverse,
+                backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
+            })
         }
     });
 });
@@ -257,9 +255,7 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
             "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
-            })
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), _defineProperty({}, theme.mq.touchableOnly, _objectSpread({}, buttonSecondaryLightStyle(theme))))
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
@@ -269,14 +265,13 @@ var useSecondaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
-                color: theme.colors.textButtonSecondaryInverseSelected,
-                "@media (pointer: coarse)": {
-                    borderColor: theme.colors.buttonSecondaryBorderInverse,
-                    color: theme.colors.textButtonSecondaryInverse
-                }
-            }
+                color: theme.colors.textButtonSecondaryInverseSelected
+            }, theme.mq.touchableOnly, {
+                borderColor: theme.colors.buttonSecondaryBorderInverse,
+                color: theme.colors.textButtonSecondaryInverse
+            })
         }
     });
 });
@@ -290,13 +285,12 @@ var dangerButtonStyles = function dangerButtonStyles(theme) {
         "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        "&:hover:not([disabled])": {
-            backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            "@media (pointer: coarse)": {
-                // Revert hover background in touch devices
-                backgroundColor: theme.colors.buttonDangerBackground
-            }
-        }
+        "&:hover:not([disabled])": _defineProperty({
+            backgroundColor: theme.colors.buttonDangerBackgroundHover
+        }, theme.mq.touchableOnly, {
+            // Revert hover background in touch devices
+            backgroundColor: theme.colors.buttonDangerBackground
+        })
     };
 };
 var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
@@ -480,12 +474,11 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            },
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelected
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            }),
             "&[disabled]": disabledStyle
         },
         inverse: {
@@ -493,12 +486,11 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            })
         },
         aligned: {
             marginLeft: -padding

package/dist/carousel.js

@@ -201,7 +201,7 @@ var hideScrollbar = {
 };
 var arrowButtonSize = 40;
 var arrowButtonStyle = function arrowButtonStyle(theme) {
-    return {
+    return _defineProperty({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -213,12 +213,10 @@ var arrowButtonStyle = function arrowButtonStyle(theme) {
         transition: "opacity 0.2s",
         "&[disabled]": {
             opacity: 0
-        },
-        // don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
-        "@media (pointer: coarse)": {
-            display: "none"
         }
-    };
+    }, theme.mq.touchableOnly, {
+        display: "none"
+    });
 };
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;

package/dist/package-version.js

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

package/dist/theme.d.ts

@@ -3,6 +3,7 @@ import type { RegionCode } from './utils/region-code';
 import type { Locale } from './utils/locale';
 import type { Skin, Colors, SkinName } from './skins/types';
 import type { TrackingEvent } from './utils/types';
+import type { MediaQueries } from './utils/media-queries';
 export declare type ThemeTexts = typeof TEXTS_ES;
 declare const TEXTS_ES: {
     expirationDatePlaceholder: string;
@@ -124,16 +125,7 @@ export declare type Theme = {
     dimensions: {
         headerMobileHeight: number;
     };
-    mq: {
-        mobile: string;
-        tablet: string;
-        desktop: string;
-        largeDesktop: string;
-        tabletOrBigger: string;
-        tabletOrSmaller: string;
-        desktopOrBigger: string;
-        supportsHover: string;
-    };
+    mq: MediaQueries;
     colors: Colors;
     Link: LinkComponent;
     isDarkMode: boolean;

package/dist/theme.js.flow

@@ -5,6 +5,7 @@ import type { RegionCode } from "./utils/region-code";
 import type { Locale } from "./utils/locale";
 import type { Skin, Colors, SkinName } from "./skins/types";
 import type { TrackingEvent } from "./utils/types";
+import type { MediaQueries } from "./utils/media-queries";
 export type ThemeTexts = typeof TEXTS_ES;
 declare var TEXTS_ES: {
   expirationDatePlaceholder: string,
@@ -128,16 +129,7 @@ export type Theme = {
   dimensions: {
     headerMobileHeight: number,
   },
-  mq: {
-    mobile: string,
-    tablet: string,
-    desktop: string,
-    largeDesktop: string,
-    tabletOrBigger: string,
-    tabletOrSmaller: string,
-    desktopOrBigger: string,
-    supportsHover: string,
-  },
+  mq: MediaQueries,
   colors: Colors,
   Link: LinkComponent,
   isDarkMode: boolean,

package/dist/utils/media-queries.d.ts

@@ -1,9 +1,4 @@
-export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
-    tabletMinWidth: number;
-    desktopMinWidth: number;
-    largeDesktopMinWidth: number;
-    desktopOrTabletMinHeight: number;
-}) => {
+export declare type MediaQueries = Readonly<{
     mobile: string;
     tablet: string;
     desktop: string;
@@ -12,4 +7,11 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrSmaller: string;
     desktopOrBigger: string;
     supportsHover: string;
-};
+    touchableOnly: string;
+}>;
+export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinWidth, desktopMinWidth, largeDesktopMinWidth, }: {
+    tabletMinWidth: number;
+    desktopMinWidth: number;
+    largeDesktopMinWidth: number;
+    desktopOrTabletMinHeight: number;
+}) => MediaQueries;

package/dist/utils/media-queries.js

@@ -17,7 +17,11 @@ var createMediaQueries = function createMediaQueries(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };
 exports.createMediaQueries = createMediaQueries;

package/dist/utils/media-queries.js.flow

@@ -1,11 +1,6 @@
 // @flow
 
-declare export var createMediaQueries: (x: {
-  tabletMinWidth: number,
-  desktopMinWidth: number,
-  largeDesktopMinWidth: number,
-  desktopOrTabletMinHeight: number,
-}) => {
+export type MediaQueries = $ReadOnly<{
   mobile: string,
   tablet: string,
   desktop: string,
@@ -14,4 +9,11 @@ declare export var createMediaQueries: (x: {
   tabletOrSmaller: string,
   desktopOrBigger: string,
   supportsHover: string,
-};
+  touchableOnly: string,
+}>;
+declare export var createMediaQueries: (x: {
+  tabletMinWidth: number,
+  desktopMinWidth: number,
+  largeDesktopMinWidth: number,
+  desktopOrTabletMinHeight: number,
+}) => MediaQueries;

package/dist/utils/platform.d.ts

@@ -11,7 +11,7 @@ export declare const isIos: (platformOverrides: Theme['platformOverrides']) => b
  */
 export declare const isSafari: () => boolean;
 export declare const isFirefox: (platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | undefined;
+    platform?: "desktop" | "ios" | "android" | undefined;
     insideNovumNativeApp?: boolean | undefined;
     userAgent?: string | undefined;
 } | undefined) => boolean;

package/dist/utils/platform.js.flow

@@ -22,7 +22,7 @@ declare export var isIos: (
 declare export var isSafari: () => boolean;
 declare export var isFirefox: (
   platformOverrides?: {
-    platform?: "ios" | "android" | "desktop" | void,
+    platform?: "desktop" | "ios" | "android" | void,
     insideNovumNativeApp?: boolean | void,
     userAgent?: string | void,
   } | void

package/dist-es/button.js

@@ -179,13 +179,12 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
-                "@media (pointer: coarse)": {
-                    // Revert hover background in touch devices
-                    backgroundColor: theme.colors.buttonPrimaryBackground
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonPrimaryBackgroundHover
+            }, theme.mq.touchableOnly, {
+                // Revert hover background in touch devices
+                backgroundColor: theme.colors.buttonPrimaryBackground
+            })
         },
         inverse: {
             color: theme.colors.textButtonPrimaryInverse,
@@ -195,14 +194,13 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 color: theme.colors.textButtonPrimaryInverseSelected,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    color: theme.colors.textButtonPrimaryInverse,
-                    backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
-                }
-            }
+                backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                color: theme.colors.textButtonPrimaryInverse,
+                backgroundColor: theme.colors.buttonPrimaryBackgroundInverse
+            })
         }
     });
 });
@@ -224,9 +222,7 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
         light: _objectSpread({}, buttonSecondaryLightStyle(theme), {
             "&:enabled:active": _objectSpread({}, buttonSecondaryHoverLightStyle(theme)),
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), {
-                "@media (pointer: coarse)": _objectSpread({}, buttonSecondaryLightStyle(theme))
-            })
+            "&:hover:not([disabled])": _objectSpread({}, buttonSecondaryHoverLightStyle(theme), _defineProperty({}, theme.mq.touchableOnly, _objectSpread({}, buttonSecondaryLightStyle(theme))))
         }),
         inverse: {
             borderColor: theme.colors.buttonSecondaryBorderInverse,
@@ -236,14 +232,13 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
             "&[disabled]:not($isLoading)": disabledStyle,
-            "&:hover:not([disabled])": {
+            "&:hover:not([disabled])": _defineProperty({
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
-                color: theme.colors.textButtonSecondaryInverseSelected,
-                "@media (pointer: coarse)": {
-                    borderColor: theme.colors.buttonSecondaryBorderInverse,
-                    color: theme.colors.textButtonSecondaryInverse
-                }
-            }
+                color: theme.colors.textButtonSecondaryInverseSelected
+            }, theme.mq.touchableOnly, {
+                borderColor: theme.colors.buttonSecondaryBorderInverse,
+                color: theme.colors.textButtonSecondaryInverse
+            })
         }
     });
 });
@@ -257,13 +252,12 @@ var dangerButtonStyles = function(theme) {
         "&[disabled]:not($isLoading)": {
             opacity: 0.5
         },
-        "&:hover:not([disabled])": {
-            backgroundColor: theme.colors.buttonDangerBackgroundHover,
-            "@media (pointer: coarse)": {
-                // Revert hover background in touch devices
-                backgroundColor: theme.colors.buttonDangerBackground
-            }
-        }
+        "&:hover:not([disabled])": _defineProperty({
+            backgroundColor: theme.colors.buttonDangerBackgroundHover
+        }, theme.mq.touchableOnly, {
+            // Revert hover background in touch devices
+            backgroundColor: theme.colors.buttonDangerBackground
+        })
     };
 };
 var useDangerButtonStyles = createUseStyles(function(theme) {
@@ -447,12 +441,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelected,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            },
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelected
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            }),
             "&[disabled]": disabledStyle
         },
         inverse: {
@@ -460,12 +453,11 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             "&:enabled:active": {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            "&:hover:not([disabled])": {
-                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
-                "@media (pointer: coarse)": {
-                    backgroundColor: "initial"
-                }
-            }
+            "&:hover:not([disabled])": _defineProperty({
+                backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
+            }, theme.mq.touchableOnly, {
+                backgroundColor: "initial"
+            })
         },
         aligned: {
             marginLeft: -padding

package/dist-es/carousel.js

@@ -168,7 +168,8 @@ var hideScrollbar = {
 };
 var arrowButtonSize = 40;
 var arrowButtonStyle = function(theme) {
-    return {
+    return(// don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
+    _defineProperty({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -180,12 +181,10 @@ var arrowButtonStyle = function(theme) {
         transition: "opacity 0.2s",
         "&[disabled]": {
             opacity: 0
-        },
-        // don't show carrousel arrow buttons in touch devices, just regular horizontal scroll
-        "@media (pointer: coarse)": {
-            display: "none"
         }
-    };
+    }, theme.mq.touchableOnly, {
+        display: "none"
+    }));
 };
 var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1, _obj2;

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.11.0";
+export var PACKAGE_VERSION = "11.11.1";

package/dist-es/utils/media-queries.js

@@ -12,6 +12,10 @@ export var createMediaQueries = function(param) {
         // Also enabled for (pointer: none) for acceptance tests, where (pointer: fine) doesn't match.
         // WARNING: you may be tempted to use @media (hover: hover) instead, but that doesn't work as expected in some android browsers.
         // See: https://hover-pointer-media-query.glitch.me/ and https://github.com/mui-org/material-ui/issues/15736
-        supportsHover: "@media (pointer: fine), (pointer: none)"
+        supportsHover: "@media (pointer: fine), (pointer: none)",
+        /**
+     * Scopes the styles to touchable devices.
+     * See: https://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets/42835826#42835826
+     */ touchableOnly: "@media (pointer: coarse), @media (hover: none)"
     };
 };

package/package.json

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