@telefonica/mistica 10.0.1 → 10.3.1

package/dist/text-field-components.js

@@ -336,21 +336,30 @@ var useFieldContainerStyles = (0, _jss.createUseStyles)(function (theme) {
       display: 'flex',
       position: 'relative',
       lineHeight: '16px',
-      backgroundColor: theme.colors.backgroundContainer
+      backgroundColor: function backgroundColor(_ref10) {
+        var disabled = _ref10.disabled;
+        return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
+      },
+      cursor: function cursor(_ref11) {
+        var disabled = _ref11.disabled;
+        return disabled ? 'not-allowed' : 'initial';
+      }
     }
   };
 });
 
-var FieldContainer = function FieldContainer(_ref10) {
-  var multiline = _ref10.multiline,
-      children = _ref10.children,
-      helperText = _ref10.helperText,
-      className = _ref10.className,
-      fieldRef = _ref10.fieldRef,
-      fullWidth = _ref10.fullWidth;
+var FieldContainer = function FieldContainer(_ref12) {
+  var multiline = _ref12.multiline,
+      disabled = _ref12.disabled,
+      children = _ref12.children,
+      helperText = _ref12.helperText,
+      className = _ref12.className,
+      fieldRef = _ref12.fieldRef,
+      fullWidth = _ref12.fullWidth;
   var classes = useFieldContainerStyles({
     multiline: multiline,
-    fullWidth: fullWidth
+    fullWidth: fullWidth,
+    disabled: disabled
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.fieldContainer

package/dist/text-field-components.js.flow

@@ -22,6 +22,7 @@ declare type HelperTextProps = {
 declare export var HelperText: React.ComponentType<HelperTextProps>;
 declare type FieldContainerProps = {
   multiline?: boolean,
+  disabled?: boolean,
   children: React.Node,
   helperText?: React.Node,
   className?: string,

package/dist/text-link.d.ts

@@ -29,6 +29,6 @@ export interface OnPressProps extends CommonProps {
     href?: undefined;
     to?: undefined;
 }
-declare type Props = HrefProps | ToProps | OnPressProps;
-declare const TextLink: React.FC<Props>;
+export declare type TextLinkProps = HrefProps | ToProps | OnPressProps;
+declare const TextLink: React.FC<TextLinkProps>;
 export default TextLink;

package/dist/text-link.js

@@ -43,21 +43,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
 
@@ -94,22 +79,34 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 var useStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
-    textLink: {
+    textLink: _defineProperty({
       width: 'auto',
       lineHeight: 'inherit',
       display: 'inline-block',
       color: theme.colors.textLink,
-      wordBreak: 'break-word',
+      wordBreak: 'break-word'
+    }, theme.mq.supportsHover, {
       '&:hover': {
-        textDecoration: 'underline',
-        // Revert hover effect in touch devices
-        '@media (pointer: coarse)': {
-          textDecoration: 'initial'
-        }
+        textDecoration: 'underline'
       }
-    },
+    }),
     inverse: {
       color: theme.colors.textLinkInverse
     },

package/dist/text-link.js.flow

@@ -29,8 +29,8 @@ export type OnPressProps = {|
   ...$Exact<CommonProps>,
   onPress: (event: SyntheticMouseEvent<HTMLElement>) => void | boolean,
 |};
-declare type Props = HrefProps | ToProps | OnPressProps;
-declare var TextLink: React.ComponentType<Props>;
+export type TextLinkProps = HrefProps | ToProps | OnPressProps;
+declare var TextLink: React.ComponentType<TextLinkProps>;
 declare export default typeof TextLink;
 
 import { type CssStyle } from "./__types__.js.flow";

package/dist/theme-context-provider.js

@@ -227,7 +227,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
   }, []);
   var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
   var contextTheme = React.useMemo(function () {
-    var _theme$colorScheme, _theme$Link; // TODO: In next major version we could change this to "auto" by default
+    var _theme$colorScheme, _theme$mediaQueries, _theme$Link; // TODO: In next major version we could change this to "auto" by default
 
 
     var colorScheme = (_theme$colorScheme = theme.colorScheme) !== null && _theme$colorScheme !== void 0 ? _theme$colorScheme : 'light';
@@ -254,7 +254,7 @@ var ThemeContextProvider = function ThemeContextProvider(_ref) {
         }
       }, theme.analytics),
       dimensions: _objectSpread(_objectSpread({}, _theme.dimensions), theme.dimensions),
-      mq: theme.mediaQueries ? (0, _mediaQueries.createMediaQueries)(theme.mediaQueries) : (0, _mediaQueries.createMediaQueries)(_theme.mediaQueriesConfig),
+      mq: (0, _mediaQueries.createMediaQueries)((_theme$mediaQueries = theme.mediaQueries) !== null && _theme$mediaQueries !== void 0 ? _theme$mediaQueries : _theme.mediaQueriesConfig),
       colors: colors,
       Link: (_theme$Link = theme.Link) !== null && _theme$Link !== void 0 ? _theme$Link : _theme.AnchorLink,
       isDarkMode: isDarkModeEnabled,

package/dist/theme.d.ts

@@ -31,6 +31,7 @@ declare const TEXTS_ES: {
     menuLabelSuffix: string;
     openNavigationMenu: string;
     closeNavigationMenu: string;
+    backNavigationBar: string;
 };
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {
@@ -124,6 +125,7 @@ export declare type Theme = {
         tabletOrBigger: string;
         tabletOrSmaller: string;
         desktopOrBigger: string;
+        supportsHover: string;
     };
     colors: Colors;
     Link: LinkComponent;

package/dist/theme.js

@@ -95,7 +95,8 @@ var TEXTS_ES = {
   formSearchClear: 'Borrar búsqueda',
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
-  closeNavigationMenu: 'Cerrar menú de navegación'
+  closeNavigationMenu: 'Cerrar menú de navegación',
+  backNavigationBar: 'Atrás'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -123,7 +124,8 @@ var TEXTS_EN = {
   formSearchClear: 'Clear search',
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
-  closeNavigationMenu: 'Close navigation menu'
+  closeNavigationMenu: 'Close navigation menu',
+  backNavigationBar: 'Back'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -151,7 +153,8 @@ var TEXTS_DE = {
   formSearchClear: 'Suche löschen',
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
-  closeNavigationMenu: 'Navigationsmenü schließen'
+  closeNavigationMenu: 'Navigationsmenü schließen',
+  backNavigationBar: 'Zurück'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -179,7 +182,8 @@ var TEXTS_PT = {
   formSearchClear: 'Apagar pesquisa',
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
-  closeNavigationMenu: 'Fechar menu de navegação'
+  closeNavigationMenu: 'Fechar menu de navegação',
+  backNavigationBar: 'Voltar'
 };
 
 var getTexts = function getTexts(locale) {

package/dist/theme.js.flow

@@ -33,6 +33,7 @@ declare var TEXTS_ES: {
   menuLabelSuffix: string,
   openNavigationMenu: string,
   closeNavigationMenu: string,
+  backNavigationBar: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {
@@ -128,6 +129,7 @@ export type Theme = {
     tabletOrBigger: string,
     tabletOrSmaller: string,
     desktopOrBigger: string,
+    supportsHover: string,
   },
   colors: Colors,
   Link: LinkComponent,

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

@@ -11,4 +11,5 @@ export declare const createMediaQueries: ({ desktopOrTabletMinHeight, tabletMinW
     tabletOrBigger: string;
     tabletOrSmaller: string;
     desktopOrBigger: string;
+    supportsHover: string;
 };

package/dist/utils/media-queries.js

@@ -17,7 +17,12 @@ var createMediaQueries = function createMediaQueries(_ref) {
     largeDesktop: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(largeDesktopMinWidth, "px)"),
     tabletOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(tabletMinWidth, "px)"),
     tabletOrSmaller: "@media only screen and (max-width: ".concat(desktopMinWidth - 1, "px), ") + "(max-height: ".concat(desktopOrTabletMinHeight - 1, "px)"),
-    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)")
+    desktopOrBigger: "@media only screen " + "and (min-height: ".concat(desktopOrTabletMinHeight, "px) ") + "and (min-width: ".concat(desktopMinWidth, "px)"),
+    // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
+    // 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)'
   };
 };
 

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

@@ -13,4 +13,5 @@ declare export var createMediaQueries: (x: {
   tabletOrBigger: string,
   tabletOrSmaller: string,
   desktopOrBigger: string,
+  supportsHover: string,
 };

package/dist-es/icon-button.js

@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import Touchable from './touchable';
-import { getPrefixedDataAttributes } from './utils/dom';
 var ICON_SIZE_1 = 24;
 
 var getButtonStyle = function getButtonStyle(backgroundUrl, size, backgroundColor, iconSize, disabled) {
@@ -51,14 +50,14 @@ var IconButton = function IconButton(props) {
       iconSize = props.iconSize,
       _props$size = props.size,
       size = _props$size === void 0 ? ICON_SIZE_1 : _props$size;
-
-  var commonProps = _objectSpread({
+  var commonProps = {
     className: props.className || '',
     disabled: props.disabled,
     style: _objectSpread(_objectSpread({}, getButtonStyle(icon, size, backgroundColor, iconSize, props.disabled)), props.style),
     trackingEvent: props.trackingEvent,
-    'aria-live': props['aria-live']
-  }, getPrefixedDataAttributes(props.dataAttributes));
+    'aria-live': props['aria-live'],
+    dataAttributes: props.dataAttributes
+  };
 
   if (props.href) {
     return /*#__PURE__*/React.createElement(Touchable, _extends({}, commonProps, {

package/dist-es/list.js

@@ -38,22 +38,17 @@ import { Boxed } from './boxed';
 import Divider from './divider';
 import { getPrefixedDataAttributes } from './utils/dom';
 var useStyles = createUseStyles(function (_ref) {
-  var colors = _ref.colors;
+  var colors = _ref.colors,
+      mq = _ref.mq;
   return {
-    hover: {
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover': {
-          background: function background(_ref2) {
-            var isInverse = _ref2.isInverse;
-            return isInverse ? 'initial' : colors.backgroundAlternative;
-          }
+    hover: _defineProperty({}, mq.supportsHover, {
+      '&:hover': {
+        background: function background(_ref2) {
+          var isInverse = _ref2.isInverse;
+          return isInverse ? 'initial' : colors.backgroundAlternative;
         }
       }
-    },
+    }),
     rowContent: {
       width: '100%',
       cursor: 'pointer'
@@ -415,7 +410,7 @@ var RowContent = function RowContent(props) {
 
   return /*#__PURE__*/React.createElement(Box, {
     paddingX: 16,
-    className: classNames(classNames(classes.rowContent, classes.hover), classes.hoverDisabled),
+    className: classNames(classes.rowContent, classes.hover, classes.hoverDisabled),
     role: role
   }, props.right ? renderContent({
     type: 'custom',

package/dist-es/navigation-bar.js

@@ -26,6 +26,7 @@ import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
 import ResponsiveLayout from './responsive-layout';
 import Inline from './inline';
+import Box from './box';
 import Touchable from './touchable';
 import { Text2, Text3 } from './text';
 import { useScreenSize, useTheme, useAriaId } from './hooks';
@@ -252,54 +253,60 @@ var useStyles = createUseStyles(function (theme) {
       right: 0,
       zIndex: NAVBAR_ZINDEX
     },
+    notFixedPadding: {
+      width: '100%',
+      padding: function padding(_ref7) {
+        var paddingX = _ref7.paddingX;
+        return "0 ".concat(paddingX, "px");
+      }
+    },
     navbar: _defineProperty({
       width: '100%',
       display: 'flex',
       alignItems: 'center',
-      background: function background(_ref7) {
-        var isInverse = _ref7.isInverse;
+      background: function background(_ref8) {
+        var isInverse = _ref8.isInverse;
         return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
       },
       height: DESKTOP_NAVBAR_HEIGHT,
       padding: '16px 0',
-      transition: 'border 300ms',
-      borderBottom: "1px solid ".concat(theme.colors.divider),
-      borderColor: function borderColor(_ref8) {
-        var isInverse = _ref8.isInverse;
+      borderBottomStyle: 'solid',
+      borderBottomWidth: function borderBottomWidth(_ref9) {
+        var withBorder = _ref9.withBorder;
+        return withBorder ? 1 : 0;
+      },
+      borderColor: function borderColor(_ref10) {
+        var isInverse = _ref10.isInverse;
         return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       }
     }, theme.mq.tabletOrSmaller, {
-      borderColor: function borderColor(_ref9) {
-        var isMenuOpen = _ref9.isMenuOpen,
-            isInverse = _ref9.isInverse;
+      transition: 'border-color 300ms',
+      borderColor: function borderColor(_ref11) {
+        var isMenuOpen = _ref11.isMenuOpen,
+            isInverse = _ref11.isInverse;
         return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       },
       height: MOBILE_NAVBAR_HEIGHT,
       padding: '8px 0'
     }),
-    section: {
+    section: _defineProperty({
       height: DESKTOP_NAVBAR_HEIGHT,
       display: 'flex',
       alignItems: 'center',
       padding: '0 8px',
       borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out',
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref10) {
-            var isInverse = _ref10.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
+      transition: 'border-color 300ms ease-in-out'
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref12) {
+          var isInverse = _ref12.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
-    },
+    }),
     selectedSection: {
-      borderColor: function borderColor(_ref11) {
-        var isInverse = _ref11.isInverse;
+      borderColor: function borderColor(_ref13) {
+        var isInverse = _ref13.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
       }
     },
@@ -317,8 +324,8 @@ var useStyles = createUseStyles(function (theme) {
       height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
       overflowY: 'auto',
       background: theme.colors.background,
-      boxShadow: function boxShadow(_ref12) {
-        var menuTransitionState = _ref12.menuTransitionState;
+      boxShadow: function boxShadow(_ref14) {
+        var menuTransitionState = _ref14.menuTransitionState;
         return menuTransitionState !== 'closed' ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(shadowAlpha, ")") : 'none';
       },
       transition: "transform ".concat(BURGER_MENU_ANIMATION_DURATION_MS, "ms ease-out")
@@ -334,20 +341,33 @@ var useStyles = createUseStyles(function (theme) {
     },
     burgerMenuExitActive: {
       transform: 'translate(-100vw)'
-    }
+    },
+    iconButton: _defineProperty({
+      color: function color(_ref15) {
+        var isInverse = _ref15.isInverse;
+        return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover': {
+        color: function color(_ref16) {
+          var isInverse = _ref16.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
+        }
+      }
+    })
   };
 });
-export var MainNavigationBar = function MainNavigationBar(_ref13) {
+export var MainNavigationBar = function MainNavigationBar(_ref17) {
   var _logo;
 
-  var sections = _ref13.sections,
-      selectedIndex = _ref13.selectedIndex,
-      right = _ref13.right,
-      logo = _ref13.logo,
-      _ref13$isInverse = _ref13.isInverse,
-      isInverse = _ref13$isInverse === void 0 ? false : _ref13$isInverse,
-      _ref13$topFixed = _ref13.topFixed,
-      topFixed = _ref13$topFixed === void 0 ? true : _ref13$topFixed;
+  var sections = _ref17.sections,
+      selectedIndex = _ref17.selectedIndex,
+      right = _ref17.right,
+      logo = _ref17.logo,
+      _ref17$isInverse = _ref17.isInverse,
+      isInverse = _ref17$isInverse === void 0 ? false : _ref17$isInverse,
+      _ref17$topFixed = _ref17.topFixed,
+      topFixed = _ref17$topFixed === void 0 ? true : _ref17$topFixed;
 
   var _useTheme6 = useTheme(),
       texts = _useTheme6.texts;
@@ -366,7 +386,8 @@ export var MainNavigationBar = function MainNavigationBar(_ref13) {
   var classes = useStyles({
     isMenuOpen: isMenuOpen,
     isInverse: isInverse,
-    menuTransitionState: menuTransitionState
+    menuTransitionState: menuTransitionState,
+    withBorder: true
   });
 
   var _useScreenSize2 = useScreenSize(),
@@ -465,9 +486,9 @@ export var MainNavigationBar = function MainNavigationBar(_ref13) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(Inline, {
     space: 32
-  }, sections.map(function (_ref14, idx) {
-    var title = _ref14.title,
-        touchableProps = _objectWithoutProperties(_ref14, _excluded);
+  }, sections.map(function (_ref18, idx) {
+    var title = _ref18.title,
+        touchableProps = _objectWithoutProperties(_ref18, _excluded);
 
     return /*#__PURE__*/React.createElement(Touchable, _extends({}, touchableProps, {
       key: idx,
@@ -479,16 +500,25 @@ export var MainNavigationBar = function MainNavigationBar(_ref13) {
     className: classes.spacer
   }));
 };
-export var NavigationBar = function NavigationBar(_ref15) {
-  var onBack = _ref15.onBack,
-      title = _ref15.title,
-      right = _ref15.right,
-      _ref15$isInverse = _ref15.isInverse,
-      isInverse = _ref15$isInverse === void 0 ? false : _ref15$isInverse,
-      _ref15$topFixed = _ref15.topFixed,
-      topFixed = _ref15$topFixed === void 0 ? true : _ref15$topFixed;
+export var NavigationBar = function NavigationBar(_ref19) {
+  var onBack = _ref19.onBack,
+      title = _ref19.title,
+      right = _ref19.right,
+      _ref19$isInverse = _ref19.isInverse,
+      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
+      _ref19$topFixed = _ref19.topFixed,
+      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed,
+      paddingX = _ref19.paddingX,
+      _ref19$withBorder = _ref19.withBorder,
+      withBorder = _ref19$withBorder === void 0 ? true : _ref19$withBorder;
+
+  var _useTheme7 = useTheme(),
+      texts = _useTheme7.texts;
+
   var classes = useStyles({
-    isInverse: isInverse
+    isInverse: isInverse,
+    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
+    withBorder: withBorder
   });
   var content = /*#__PURE__*/React.createElement(Inline, {
     space: "between",
@@ -497,28 +527,37 @@ export var NavigationBar = function NavigationBar(_ref15) {
     space: 24,
     alignItems: "center"
   }, onBack && /*#__PURE__*/React.createElement(IconButton, {
-    "aria-label": "back",
-    onPress: onBack
-  }, /*#__PURE__*/React.createElement(IconChevronLeftRegular, null)), /*#__PURE__*/React.createElement(Text3, {
-    regular: true
-  }, title)), right);
+    "aria-label": texts.backNavigationBar,
+    onPress: onBack,
+    className: classes.iconButton
+  }, /*#__PURE__*/React.createElement(IconChevronLeftRegular, {
+    color: "currentColor"
+  })), /*#__PURE__*/React.createElement(Text3, {
+    regular: true,
+    truncate: true
+  }, title)), /*#__PURE__*/React.createElement(Box, {
+    paddingLeft: 24
+  }, right));
   return /*#__PURE__*/React.createElement(ThemeVariant, {
     isInverse: isInverse
   }, /*#__PURE__*/React.createElement("header", {
     className: classnames(classes.navbar, _defineProperty({}, classes.topFixed, topFixed))
-  }, topFixed ? /*#__PURE__*/React.createElement(ResponsiveLayout, null, content) : content), topFixed && /*#__PURE__*/React.createElement("div", {
+  }, topFixed ? /*#__PURE__*/React.createElement(ResponsiveLayout, null, content) : /*#__PURE__*/React.createElement("div", {
+    className: classes.notFixedPadding
+  }, content)), topFixed && /*#__PURE__*/React.createElement("div", {
     className: classes.spacer
   }));
 };
-export var FunnelNavigationBar = function FunnelNavigationBar(_ref16) {
-  var logo = _ref16.logo,
-      right = _ref16.right,
-      _ref16$isInverse = _ref16.isInverse,
-      isInverse = _ref16$isInverse === void 0 ? false : _ref16$isInverse,
-      _ref16$topFixed = _ref16.topFixed,
-      topFixed = _ref16$topFixed === void 0 ? true : _ref16$topFixed;
+export var FunnelNavigationBar = function FunnelNavigationBar(_ref20) {
+  var logo = _ref20.logo,
+      right = _ref20.right,
+      _ref20$isInverse = _ref20.isInverse,
+      isInverse = _ref20$isInverse === void 0 ? false : _ref20$isInverse,
+      _ref20$topFixed = _ref20.topFixed,
+      topFixed = _ref20$topFixed === void 0 ? true : _ref20$topFixed;
   var classes = useStyles({
-    isInverse: isInverse
+    isInverse: isInverse,
+    withBorder: true
   });
   return /*#__PURE__*/React.createElement(ThemeVariant, {
     isInverse: isInverse
@@ -542,8 +581,8 @@ var useNavigationBarActionGroupStyles = createUseStyles(function () {
     }
   };
 });
-export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref17) {
-  var children = _ref17.children;
+export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
+  var children = _ref21.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -554,38 +593,33 @@ export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref17)
 };
 var useNavigationBarActionStyles = createUseStyles(function (theme) {
   return {
-    touchable: {
+    touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
-        color: function color(_ref18) {
-          var isInverse = _ref18.isInverse;
+        color: function color(_ref22) {
+          var isInverse = _ref22.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
+      }
+    }, theme.mq.supportsHover, {
+      '&:hover span': {
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
+          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+        }
       },
-      // Only apply hover effect to user agents using fine pointer devices (a mouse, for example)
-      // 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
-      '@media (pointer: fine), (pointer: none)': {
-        '&:hover span': {
-          color: function color(_ref19) {
-            var isInverse = _ref19.isInverse;
-            return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-          }
-        },
-        '&:hover svg': {
-          color: function color(_ref20) {
-            var isInverse = _ref20.isInverse;
-            return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-          }
+      '&:hover svg': {
+        color: function color(_ref24) {
+          var isInverse = _ref24.isInverse;
+          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
-    }
+    })
   };
 });
-export var NavigationBarAction = function NavigationBarAction(_ref21) {
-  var children = _ref21.children,
-      touchableProps = _objectWithoutProperties(_ref21, _excluded2);
+export var NavigationBarAction = function NavigationBarAction(_ref25) {
+  var children = _ref25.children,
+      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
 
   var isInverse = useIsInverseVariant();
   var classes = useNavigationBarActionStyles({