@telefonica/mistica 10.9.0 → 10.11.0

package/dist-es/navigation-bar.js

@@ -1,26 +1,3 @@
-var _excluded = ["title"],
-    _excluded2 = ["children"];
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-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; }
-
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import classnames from 'classnames';
@@ -42,627 +19,633 @@ import FocusTrap from './focus-trap';
 import { Portal } from './portal';
 import GridLayout from './grid-layout';
 import { useSetModalState } from './modal-context-provider';
-
-var MovistarLogo = function MovistarLogo(_ref) {
-  var size = _ref.size;
-
-  var _useTheme = useTheme(),
-      colors = _useTheme.colors,
-      isDarkMode = _useTheme.isDarkMode;
-
-  var isInverse = useIsInverseVariant();
-  var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 40 40",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M3.097 16.22c-.595 2.473-.826 5.05-.316 8.118.47 2.83 1.304 5.272 1.865 6.617.194.464.493.948.726 1.246.665.855 1.775.8 2.24.567.508-.254 1.092-.868.881-2.269-.102-.676-.397-1.666-.563-2.217-.508-1.69-1.186-3.728-1.245-5.18-.079-1.942.675-2.196 1.175-2.307.842-.188 1.547.75 2.217 1.927.8 1.405 2.171 3.894 3.29 5.794 1.008 1.716 2.872 3.553 5.864 3.427 3.05-.129 5.297-1.31 6.456-5.034.866-2.785 1.457-4.866 2.408-6.997 1.093-2.452 2.55-3.764 3.779-3.363 1.14.371 1.424 1.504 1.438 3.168.012 1.473-.155 3.096-.286 4.288-.047.433-.133 1.304-.098 1.787.069.95.474 1.9 1.526 2.05 1.122.162 2.022-.748 2.381-1.85.142-.433.263-1.097.328-1.568.33-2.38.415-3.979.267-6.413-.174-2.846-.722-5.443-1.679-7.689-.914-2.148-2.384-3.525-4.269-3.646-2.086-.136-4.48 1.271-5.736 4-1.158 2.516-2.084 5.098-2.646 6.416-.57 1.337-1.407 2.161-2.695 2.299-1.574.168-2.93-.993-3.923-2.65-.867-1.442-2.583-4.19-3.502-5.114-.863-.868-1.848-1.953-3.9-1.92-1.621.026-4.615.839-5.983 6.513z"
-  }))));
-};
-
-var VivoLogo = function VivoLogo(_ref2) {
-  var size = _ref2.size;
-
-  var _useTheme2 = useTheme(),
-      colors = _useTheme2.colors,
-      isDarkMode = _useTheme2.isDarkMode;
-
-  var isInverse = useIsInverseVariant();
-  var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-  return /*#__PURE__*/React.createElement("svg", {
-    height: size,
-    viewBox: "0 0 96 40",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M9.178 16.667h1.679c.282 0 1.364-.143 1.96-1.193l6.948-11.913c.712-1.261-.128-2.331-.87-2.598l-1.847-.8c-.996-.431-2.19.023-2.638 1.03l-4.362 8.479h-.066L5.625 1.193C5.175.186 3.982-.268 2.988.163l-1.847.8C.397 1.23-.442 2.3.27 3.561l6.948 11.913c.596 1.05 1.678 1.193 1.96 1.193",
-    transform: "translate(0.834783, 5.833333) translate(0.000000, 9.166667)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M40.065 25.833h1.678c.284 0 1.366-.142 1.961-1.192l6.948-11.913c.712-1.261-.128-2.332-.87-2.598l-1.848-.8c-.995-.432-2.188.023-2.637 1.03l-4.362 8.478h-.065L36.51 10.36c-.45-1.007-1.642-1.462-2.637-1.03l-1.846.8c-.743.266-1.583 1.337-.871 2.598l6.947 11.913c.597 1.05 1.678 1.192 1.96 1.192",
-    transform: "translate(0.834783, 5.833333)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M8.347 11.622c-1.819 0-3.294-1.472-3.294-3.29 0-1.816 1.475-3.288 3.294-3.288s3.296 1.472 3.296 3.288c0 1.818-1.477 3.29-3.296 3.29M8.347 0C3.738 0 0 3.732 0 8.332c0 4.604 3.738 8.335 8.347 8.335 4.613 0 8.349-3.731 8.349-8.335C16.696 3.732 12.96 0 8.347 0",
-    transform: "translate(0.834783, 5.833333) translate(51.756522, 9.166667)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M7.513 3.75c0 2.072-1.682 3.75-3.756 3.75C1.682 7.5 0 5.822 0 3.75S1.682 0 3.757 0C5.83 0 7.513 1.678 7.513 3.75",
-    transform: "translate(0.834783, 5.833333) translate(21.704348, 0.000000)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M22.54 11.223c0-1.137.92-2.056 2.059-2.056h1.723c1.138 0 2.06.92 2.06 2.056v12.554c0 1.137-.922 2.056-2.06 2.056H24.6c-1.139 0-2.06-.92-2.06-2.056V11.223z",
-    transform: "translate(0.834783, 5.833333)"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    fillRule: "nonzero",
-    d: "M85.88 28.104c.561.033.725.34.916.574.19.234 2.97 3.66 3.158 3.883.188.225.707.637 1.279.715.57.078 1.196-.04 1.596-.338.4-.298.908-.703 1.086-.974.177-.27.479-.658.423-1.295-.056-.636-.191-.969-.675-1.515-.484-.545-3.343-4-3.881-4.662 0 0-.49-.59-.419-1.423.072-.835.439-1.208 1.212-1.415.773-.207 3.795-.958 3.795-.958s1.73-.842 1.337-2.51l-.225-.853s-.376-1.946-2.862-1.343c-2.488.604-3.87.96-3.87.96s-.791.078-.905-.46c-.112-.538.035-.816.385-.965.35-.15 2.558-1.235 2.841-4.165.285-2.932-2.103-5.538-5.2-5.527-3.097.012-5.338 2.412-5.329 4.897.01 2.486 1.578 4.14 2.783 4.757.684.35.465.98.465.98s-.164.613-.884.45c-.72-.166-4.207-.987-4.207-.987s-2.103-.4-2.611 1.734c-.509 2.136.674 2.947 1.541 3.148.868.2 3.802.931 3.802.931s.873.443.907 1.351c.022.537.023.982-.527 1.783-.55.8-3.965 4.892-3.965 4.892s-1.174 1.433.527 2.724c1.701 1.292 2.658.99 3.668-.2 1.009-1.189 3.003-3.68 3.003-3.68s.275-.542.836-.51z"
-  })));
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _iterableToArrayLimit(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+    try {
+        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {
+    };
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {
+    };
+    var target = {
+    };
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+var MovistarLogo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
+    var isInverse = useIsInverseVariant();
+    var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
+    return(/*#__PURE__*/ React.createElement("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 40 40",
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: color,
+        fillRule: "nonzero"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M3.097 16.22c-.595 2.473-.826 5.05-.316 8.118.47 2.83 1.304 5.272 1.865 6.617.194.464.493.948.726 1.246.665.855 1.775.8 2.24.567.508-.254 1.092-.868.881-2.269-.102-.676-.397-1.666-.563-2.217-.508-1.69-1.186-3.728-1.245-5.18-.079-1.942.675-2.196 1.175-2.307.842-.188 1.547.75 2.217 1.927.8 1.405 2.171 3.894 3.29 5.794 1.008 1.716 2.872 3.553 5.864 3.427 3.05-.129 5.297-1.31 6.456-5.034.866-2.785 1.457-4.866 2.408-6.997 1.093-2.452 2.55-3.764 3.779-3.363 1.14.371 1.424 1.504 1.438 3.168.012 1.473-.155 3.096-.286 4.288-.047.433-.133 1.304-.098 1.787.069.95.474 1.9 1.526 2.05 1.122.162 2.022-.748 2.381-1.85.142-.433.263-1.097.328-1.568.33-2.38.415-3.979.267-6.413-.174-2.846-.722-5.443-1.679-7.689-.914-2.148-2.384-3.525-4.269-3.646-2.086-.136-4.48 1.271-5.736 4-1.158 2.516-2.084 5.098-2.646 6.416-.57 1.337-1.407 2.161-2.695 2.299-1.574.168-2.93-.993-3.923-2.65-.867-1.442-2.583-4.19-3.502-5.114-.863-.868-1.848-1.953-3.9-1.92-1.621.026-4.615.839-5.983 6.513z"
+    })))));
 };
-
-var O2Logo = function O2Logo(_ref3) {
-  var size = _ref3.size;
-
-  var _useTheme3 = useTheme(),
-      colors = _useTheme3.colors,
-      isDarkMode = _useTheme3.isDarkMode;
-
-  var isInverse = useIsInverseVariant();
-  var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-  return /*#__PURE__*/React.createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 40 40",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: color,
-    fillRule: "nonzero"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12.884 6.674c1.909-.057 3.839.212 5.627.876 1.063.395 2.074.927 2.986 1.59 1.52 1.096 2.758 2.55 3.611 4.192.795 1.513 1.268 3.176 1.458 4.863.09.846.128 1.698.08 2.548-.067 1.35-.33 2.691-.784 3.968-.717 2.012-1.93 3.863-3.542 5.307-1.543 1.392-3.451 2.393-5.49 2.898-1.495.373-3.053.489-4.591.376-1.562-.114-3.108-.483-4.535-1.115-1.649-.726-3.133-1.803-4.323-3.13-1.459-1.619-2.475-3.6-2.983-5.693-.248-1.016-.374-2.058-.398-3.1v-.545c.022-.871.1-1.743.263-2.6.386-2.073 1.241-4.078 2.578-5.744 1.03-1.292 2.342-2.37 3.823-3.143 1.903-1 4.064-1.495 6.22-1.548zm-.152 3.827c-.784.062-1.56.235-2.285.533-.768.313-1.478.757-2.095 1.3-.774.676-1.406 1.5-1.893 2.392-.742 1.362-1.157 2.882-1.272 4.416-.067.901-.027 1.81.107 2.704.175 1.144.508 2.27 1.032 3.31.444.885 1.029 1.708 1.762 2.389.775.728 1.722 1.282 2.748 1.604.94.296 1.937.406 2.922.364.916-.042 1.83-.221 2.676-.573 1.276-.522 2.362-1.43 3.152-2.53 1.019-1.414 1.593-3.097 1.82-4.8.298-2.224-.028-4.542-1.032-6.569-.45-.896-1.03-1.737-1.762-2.439-.785-.776-1.753-1.38-2.813-1.735-.98-.331-2.033-.44-3.067-.366zM25.26 28.321c.933-.474 1.961-.76 3.004-.81.533-.033 1.073.008 1.592.139.535.139 1.053.397 1.44.806.326.328.55.753.68 1.2.155.553.195 1.14.124 1.71-.069.514-.238 1.01-.46 1.475-.416.856-.998 1.615-1.619 2.325-.669.76-1.39 1.47-2.11 2.18 1.45-.005 2.902 0 4.353-.002.078-.001.159-.005.236.016v1.793c-.044.006-.087.012-.13.014H25v-1.932c.168-.171.347-.33.52-.496.746-.695 1.482-1.404 2.176-2.155.667-.738 1.317-1.51 1.781-2.401.21-.419.387-.874.384-1.351-.002-.341-.123-.685-.354-.934-.3-.332-.737-.5-1.168-.554-.583-.064-1.172.06-1.714.274-.418.162-.807.39-1.187.629-.06-.642-.121-1.284-.178-1.926z"
-  }))));
+var VivoLogo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
+    var isInverse = useIsInverseVariant();
+    var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
+    return(/*#__PURE__*/ React.createElement("svg", {
+        height: size,
+        viewBox: "0 0 96 40",
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M9.178 16.667h1.679c.282 0 1.364-.143 1.96-1.193l6.948-11.913c.712-1.261-.128-2.331-.87-2.598l-1.847-.8c-.996-.431-2.19.023-2.638 1.03l-4.362 8.479h-.066L5.625 1.193C5.175.186 3.982-.268 2.988.163l-1.847.8C.397 1.23-.442 2.3.27 3.561l6.948 11.913c.596 1.05 1.678 1.193 1.96 1.193",
+        transform: "translate(0.834783, 5.833333) translate(0.000000, 9.166667)"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M40.065 25.833h1.678c.284 0 1.366-.142 1.961-1.192l6.948-11.913c.712-1.261-.128-2.332-.87-2.598l-1.848-.8c-.995-.432-2.188.023-2.637 1.03l-4.362 8.478h-.065L36.51 10.36c-.45-1.007-1.642-1.462-2.637-1.03l-1.846.8c-.743.266-1.583 1.337-.871 2.598l6.947 11.913c.597 1.05 1.678 1.192 1.96 1.192",
+        transform: "translate(0.834783, 5.833333)"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M8.347 11.622c-1.819 0-3.294-1.472-3.294-3.29 0-1.816 1.475-3.288 3.294-3.288s3.296 1.472 3.296 3.288c0 1.818-1.477 3.29-3.296 3.29M8.347 0C3.738 0 0 3.732 0 8.332c0 4.604 3.738 8.335 8.347 8.335 4.613 0 8.349-3.731 8.349-8.335C16.696 3.732 12.96 0 8.347 0",
+        transform: "translate(0.834783, 5.833333) translate(51.756522, 9.166667)"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M7.513 3.75c0 2.072-1.682 3.75-3.756 3.75C1.682 7.5 0 5.822 0 3.75S1.682 0 3.757 0C5.83 0 7.513 1.678 7.513 3.75",
+        transform: "translate(0.834783, 5.833333) translate(21.704348, 0.000000)"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M22.54 11.223c0-1.137.92-2.056 2.059-2.056h1.723c1.138 0 2.06.92 2.06 2.056v12.554c0 1.137-.922 2.056-2.06 2.056H24.6c-1.139 0-2.06-.92-2.06-2.056V11.223z",
+        transform: "translate(0.834783, 5.833333)"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        fillRule: "nonzero",
+        d: "M85.88 28.104c.561.033.725.34.916.574.19.234 2.97 3.66 3.158 3.883.188.225.707.637 1.279.715.57.078 1.196-.04 1.596-.338.4-.298.908-.703 1.086-.974.177-.27.479-.658.423-1.295-.056-.636-.191-.969-.675-1.515-.484-.545-3.343-4-3.881-4.662 0 0-.49-.59-.419-1.423.072-.835.439-1.208 1.212-1.415.773-.207 3.795-.958 3.795-.958s1.73-.842 1.337-2.51l-.225-.853s-.376-1.946-2.862-1.343c-2.488.604-3.87.96-3.87.96s-.791.078-.905-.46c-.112-.538.035-.816.385-.965.35-.15 2.558-1.235 2.841-4.165.285-2.932-2.103-5.538-5.2-5.527-3.097.012-5.338 2.412-5.329 4.897.01 2.486 1.578 4.14 2.783 4.757.684.35.465.98.465.98s-.164.613-.884.45c-.72-.166-4.207-.987-4.207-.987s-2.103-.4-2.611 1.734c-.509 2.136.674 2.947 1.541 3.148.868.2 3.802.931 3.802.931s.873.443.907 1.351c.022.537.023.982-.527 1.783-.55.8-3.965 4.892-3.965 4.892s-1.174 1.433.527 2.724c1.701 1.292 2.658.99 3.668-.2 1.009-1.189 3.003-3.68 3.003-3.68s.275-.542.836-.51z"
+    }))));
 };
-
-var TelefonicaLogo = function TelefonicaLogo(_ref4) {
-  var size = _ref4.size;
-
-  var _useTheme4 = useTheme(),
-      colors = _useTheme4.colors,
-      isDarkMode = _useTheme4.isDarkMode;
-
-  var isInverse = useIsInverseVariant();
-  var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-  return /*#__PURE__*/React.createElement("svg", {
-    height: size,
-    viewBox: "0 0 125 48",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    transform: "translate(2.000000, 10.000000)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M8.61 4.298C8.61 1.924 6.683 0 4.305 0 1.927 0 0 1.924 0 4.298c0 2.375 1.927 4.299 4.305 4.299 2.378 0 4.305-1.924 4.305-4.299"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M18.728 4.298C18.728 1.924 16.8 0 14.423 0c-2.378 0-4.306 1.924-4.306 4.298 0 2.375 1.928 4.299 4.306 4.299 2.377 0 4.305-1.924 4.305-4.299M28.845 4.298C28.845 1.924 26.917 0 24.54 0c-2.378 0-4.306 1.924-4.306 4.298 0 2.375 1.928 4.299 4.306 4.299 2.377 0 4.305-1.924 4.305-4.299M18.728 14.4c0-2.374-1.928-4.298-4.305-4.298-2.378 0-4.306 1.924-4.306 4.298s1.928 4.298 4.306 4.298c2.377 0 4.305-1.924 4.305-4.298M18.728 24.502c0-2.375-1.928-4.299-4.305-4.299-2.378 0-4.306 1.924-4.306 4.299 0 2.374 1.928 4.298 4.306 4.298 2.377 0 4.305-1.924 4.305-4.298M38.022 11.05L34.01 11.05 34.01 8.666 44.518 8.666 44.518 11.05 40.506 11.05 40.506 22.018 38.022 22.018zM50.803 16.296c-.21-1.24-1.032-2.194-2.389-2.194-1.452 0-2.292.954-2.579 2.194h4.968zm2.101 2.861c-.21.763-1.414 3.052-4.49 3.052-2.865 0-4.967-2.098-4.967-5.055 0-2.956 2.102-5.055 4.967-5.055 2.675 0 4.777 2.099 4.777 4.864 0 .287-.038.515-.058.687l-.038.267h-7.26c.21 1.354 1.223 2.29 2.58 2.29 1.127 0 1.814-.65 2.005-1.05h2.484zM54.622 22.018L57.01 22.018 57.01 8.666 54.622 8.666zM65.797 16.296c-.21-1.24-1.032-2.194-2.388-2.194-1.452 0-2.293.954-2.58 2.194h4.968zm2.102 2.861c-.21.763-1.414 3.052-4.49 3.052-2.866 0-4.967-2.098-4.967-5.055 0-2.956 2.101-5.055 4.967-5.055 2.675 0 4.776 2.099 4.776 4.864 0 .287-.038.515-.057.687l-.038.267h-7.26c.21 1.354 1.222 2.29 2.579 2.29 1.127 0 1.815-.65 2.006-1.05h2.484zM70.381 14.579h-1.624v-2.29h1.624v-1.43c0-1.45.937-2.384 2.389-2.384h2.101v2.098h-1.433c-.382 0-.668.286-.668.668v1.049h2.101v2.289H72.77v7.44H70.38v-7.44zM82.775 17.154c0-1.717-1.146-2.861-2.58-2.861-1.432 0-2.578 1.144-2.578 2.861 0 1.717 1.146 2.861 2.579 2.861 1.433 0 2.579-1.144 2.579-2.86m2.388 0c0 2.956-2.101 5.054-4.967 5.054-2.866 0-4.968-2.098-4.968-5.055 0-2.956 2.102-5.055 4.968-5.055s4.967 2.099 4.967 5.055M86.595 12.29h2.197l.19.954h.096c.172-.21.402-.4.65-.572.44-.287 1.108-.573 2.025-.573 2.197 0 3.821 1.622 3.821 4.101v5.818h-2.388v-5.627c0-1.24-.86-2.098-2.102-2.098-1.241 0-2.101.858-2.101 2.098v5.627h-2.388V12.29zM110.774 18.394c-.305 1.526-1.509 3.815-4.585 3.815-2.865 0-4.967-2.098-4.967-5.055 0-2.956 2.102-5.055 4.967-5.055 3.076 0 4.28 2.29 4.585 3.72h-2.388c-.21-.553-.764-1.526-2.197-1.526s-2.579 1.144-2.579 2.861c0 1.717 1.146 2.861 2.58 2.861 1.432 0 1.986-.953 2.196-1.62h2.388zM117.804 17.822h-2.006c-1.242 0-1.815.477-1.815 1.24s.554 1.24 1.529 1.24c1.451 0 2.292-.84 2.292-2.194v-.286zm.191 3.243h-.095c-.172.21-.401.4-.669.572-.458.286-1.127.572-2.102.572-2.216 0-3.534-1.354-3.534-2.956 0-1.908 1.337-3.243 4.012-3.243h2.197v-.191c0-1.068-.65-1.812-1.72-1.812-1.07 0-1.623.686-1.719 1.24h-2.388c.21-1.603 1.51-3.148 4.108-3.148 2.483 0 4.107 1.64 4.107 3.72v6.2h-2.006l-.19-.954zM97.402 22.018L99.791 22.018 99.791 12.29 97.402 12.29zM100.01 9.48c0-.779-.633-1.41-1.414-1.41-.78 0-1.413.631-1.413 1.41 0 .78.633 1.412 1.413 1.412.781 0 1.414-.632 1.414-1.411M81.056 8.189L83.54 8.189 81.247 10.955 79.24 10.955z"
-  })));
+var O2Logo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
+    var isInverse = useIsInverseVariant();
+    var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
+    return(/*#__PURE__*/ React.createElement("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 40 40",
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: color,
+        fillRule: "nonzero"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M12.884 6.674c1.909-.057 3.839.212 5.627.876 1.063.395 2.074.927 2.986 1.59 1.52 1.096 2.758 2.55 3.611 4.192.795 1.513 1.268 3.176 1.458 4.863.09.846.128 1.698.08 2.548-.067 1.35-.33 2.691-.784 3.968-.717 2.012-1.93 3.863-3.542 5.307-1.543 1.392-3.451 2.393-5.49 2.898-1.495.373-3.053.489-4.591.376-1.562-.114-3.108-.483-4.535-1.115-1.649-.726-3.133-1.803-4.323-3.13-1.459-1.619-2.475-3.6-2.983-5.693-.248-1.016-.374-2.058-.398-3.1v-.545c.022-.871.1-1.743.263-2.6.386-2.073 1.241-4.078 2.578-5.744 1.03-1.292 2.342-2.37 3.823-3.143 1.903-1 4.064-1.495 6.22-1.548zm-.152 3.827c-.784.062-1.56.235-2.285.533-.768.313-1.478.757-2.095 1.3-.774.676-1.406 1.5-1.893 2.392-.742 1.362-1.157 2.882-1.272 4.416-.067.901-.027 1.81.107 2.704.175 1.144.508 2.27 1.032 3.31.444.885 1.029 1.708 1.762 2.389.775.728 1.722 1.282 2.748 1.604.94.296 1.937.406 2.922.364.916-.042 1.83-.221 2.676-.573 1.276-.522 2.362-1.43 3.152-2.53 1.019-1.414 1.593-3.097 1.82-4.8.298-2.224-.028-4.542-1.032-6.569-.45-.896-1.03-1.737-1.762-2.439-.785-.776-1.753-1.38-2.813-1.735-.98-.331-2.033-.44-3.067-.366zM25.26 28.321c.933-.474 1.961-.76 3.004-.81.533-.033 1.073.008 1.592.139.535.139 1.053.397 1.44.806.326.328.55.753.68 1.2.155.553.195 1.14.124 1.71-.069.514-.238 1.01-.46 1.475-.416.856-.998 1.615-1.619 2.325-.669.76-1.39 1.47-2.11 2.18 1.45-.005 2.902 0 4.353-.002.078-.001.159-.005.236.016v1.793c-.044.006-.087.012-.13.014H25v-1.932c.168-.171.347-.33.52-.496.746-.695 1.482-1.404 2.176-2.155.667-.738 1.317-1.51 1.781-2.401.21-.419.387-.874.384-1.351-.002-.341-.123-.685-.354-.934-.3-.332-.737-.5-1.168-.554-.583-.064-1.172.06-1.714.274-.418.162-.807.39-1.187.629-.06-.642-.121-1.284-.178-1.926z"
+    })))));
 };
-
-var BlauLogo = function BlauLogo(_ref5) {
-  var size = _ref5.size;
-
-  var _useTheme5 = useTheme(),
-      colors = _useTheme5.colors,
-      isDarkMode = _useTheme5.isDarkMode;
-
-  var isInverse = useIsInverseVariant();
-  var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
-  return /*#__PURE__*/React.createElement("svg", {
-    height: size,
-    viewBox: "0 0 100 44",
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: colors.textLink,
-    d: "M0 35.184h100v8.2h-100z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M24.878 13.321c3.448 1.331 5.278 3.588 5.069 7.436-.209 5.009-4.11 8.47-9.216 8.47h-19.731v-7.763h2.775v-13.698h-2.775v-7.766h19.814c4.319 0 7.768 3.674 7.636 8.017-.044 2.334-1.284 4.513-3.572 5.304zm-8.959-6.218h-2.583v4.114h2.583c2.544 0 2.716-4.114 0-4.114zm3.249 12.427c0-1.193-.771-2.381-2.546-2.381h-3.286v4.764h3.286c1.728 0 2.546-1.173 2.546-2.383zm11.554-19.53v7.766h2.75v21.46h10.043v-29.226h-12.793zm41.708 29.227h-9.421l-.206-2.17c-1.535 1.879-3.82 2.545-5.973 2.588-14.283.166-14.283-23.542 0-23.38 2.152 0 4.438.669 5.973 2.547l.207-2.175h9.42v22.59zm-10-11.275c0-4.383-6.183-4.339-6.183 0 .001 4.344 6.183 4.387 6.183 0zm37.513-11.316h-9.959v12.194c0 1.672-1.246 2.463-2.491 2.463-1.25 0-2.246-.831-2.246-2.421v-12.236h-9.965v12.282c0 6.057 2.364 10.562 9.051 10.729 2.199.041 4.485-.672 6.06-2.674l.211 2.254 9.342.015v-22.606h-.003z"
-  })));
+var TelefonicaLogo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
+    var isInverse = useIsInverseVariant();
+    var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
+    return(/*#__PURE__*/ React.createElement("svg", {
+        height: size,
+        viewBox: "0 0 125 48",
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        transform: "translate(2.000000, 10.000000)"
+    }, /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M8.61 4.298C8.61 1.924 6.683 0 4.305 0 1.927 0 0 1.924 0 4.298c0 2.375 1.927 4.299 4.305 4.299 2.378 0 4.305-1.924 4.305-4.299"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M18.728 4.298C18.728 1.924 16.8 0 14.423 0c-2.378 0-4.306 1.924-4.306 4.298 0 2.375 1.928 4.299 4.306 4.299 2.377 0 4.305-1.924 4.305-4.299M28.845 4.298C28.845 1.924 26.917 0 24.54 0c-2.378 0-4.306 1.924-4.306 4.298 0 2.375 1.928 4.299 4.306 4.299 2.377 0 4.305-1.924 4.305-4.299M18.728 14.4c0-2.374-1.928-4.298-4.305-4.298-2.378 0-4.306 1.924-4.306 4.298s1.928 4.298 4.306 4.298c2.377 0 4.305-1.924 4.305-4.298M18.728 24.502c0-2.375-1.928-4.299-4.305-4.299-2.378 0-4.306 1.924-4.306 4.299 0 2.374 1.928 4.298 4.306 4.298 2.377 0 4.305-1.924 4.305-4.298M38.022 11.05L34.01 11.05 34.01 8.666 44.518 8.666 44.518 11.05 40.506 11.05 40.506 22.018 38.022 22.018zM50.803 16.296c-.21-1.24-1.032-2.194-2.389-2.194-1.452 0-2.292.954-2.579 2.194h4.968zm2.101 2.861c-.21.763-1.414 3.052-4.49 3.052-2.865 0-4.967-2.098-4.967-5.055 0-2.956 2.102-5.055 4.967-5.055 2.675 0 4.777 2.099 4.777 4.864 0 .287-.038.515-.058.687l-.038.267h-7.26c.21 1.354 1.223 2.29 2.58 2.29 1.127 0 1.814-.65 2.005-1.05h2.484zM54.622 22.018L57.01 22.018 57.01 8.666 54.622 8.666zM65.797 16.296c-.21-1.24-1.032-2.194-2.388-2.194-1.452 0-2.293.954-2.58 2.194h4.968zm2.102 2.861c-.21.763-1.414 3.052-4.49 3.052-2.866 0-4.967-2.098-4.967-5.055 0-2.956 2.101-5.055 4.967-5.055 2.675 0 4.776 2.099 4.776 4.864 0 .287-.038.515-.057.687l-.038.267h-7.26c.21 1.354 1.222 2.29 2.579 2.29 1.127 0 1.815-.65 2.006-1.05h2.484zM70.381 14.579h-1.624v-2.29h1.624v-1.43c0-1.45.937-2.384 2.389-2.384h2.101v2.098h-1.433c-.382 0-.668.286-.668.668v1.049h2.101v2.289H72.77v7.44H70.38v-7.44zM82.775 17.154c0-1.717-1.146-2.861-2.58-2.861-1.432 0-2.578 1.144-2.578 2.861 0 1.717 1.146 2.861 2.579 2.861 1.433 0 2.579-1.144 2.579-2.86m2.388 0c0 2.956-2.101 5.054-4.967 5.054-2.866 0-4.968-2.098-4.968-5.055 0-2.956 2.102-5.055 4.968-5.055s4.967 2.099 4.967 5.055M86.595 12.29h2.197l.19.954h.096c.172-.21.402-.4.65-.572.44-.287 1.108-.573 2.025-.573 2.197 0 3.821 1.622 3.821 4.101v5.818h-2.388v-5.627c0-1.24-.86-2.098-2.102-2.098-1.241 0-2.101.858-2.101 2.098v5.627h-2.388V12.29zM110.774 18.394c-.305 1.526-1.509 3.815-4.585 3.815-2.865 0-4.967-2.098-4.967-5.055 0-2.956 2.102-5.055 4.967-5.055 3.076 0 4.28 2.29 4.585 3.72h-2.388c-.21-.553-.764-1.526-2.197-1.526s-2.579 1.144-2.579 2.861c0 1.717 1.146 2.861 2.58 2.861 1.432 0 1.986-.953 2.196-1.62h2.388zM117.804 17.822h-2.006c-1.242 0-1.815.477-1.815 1.24s.554 1.24 1.529 1.24c1.451 0 2.292-.84 2.292-2.194v-.286zm.191 3.243h-.095c-.172.21-.401.4-.669.572-.458.286-1.127.572-2.102.572-2.216 0-3.534-1.354-3.534-2.956 0-1.908 1.337-3.243 4.012-3.243h2.197v-.191c0-1.068-.65-1.812-1.72-1.812-1.07 0-1.623.686-1.719 1.24h-2.388c.21-1.603 1.51-3.148 4.108-3.148 2.483 0 4.107 1.64 4.107 3.72v6.2h-2.006l-.19-.954zM97.402 22.018L99.791 22.018 99.791 12.29 97.402 12.29zM100.01 9.48c0-.779-.633-1.41-1.414-1.41-.78 0-1.413.631-1.413 1.41 0 .78.633 1.412 1.413 1.412.781 0 1.414-.632 1.414-1.411M81.056 8.189L83.54 8.189 81.247 10.955 79.24 10.955z"
+    }))));
 };
-
-export var NavigationBarLogo = function NavigationBarLogo(_ref6) {
-  var _size;
-
-  var size = _ref6.size;
-
-  var _useTheme6 = useTheme(),
-      skinName = _useTheme6.skinName;
-
-  var _useScreenSize = useScreenSize(),
-      isTabletOrSmaller = _useScreenSize.isTabletOrSmaller;
-
-  size = (_size = size) !== null && _size !== void 0 ? _size : isTabletOrSmaller ? 40 : 48;
-
-  switch (skinName) {
-    case 'Movistar':
-      return /*#__PURE__*/React.createElement(MovistarLogo, {
-        size: size
-      });
-
-    case 'Vivo':
-      return /*#__PURE__*/React.createElement(VivoLogo, {
-        size: size
-      });
-
-    case 'O2':
-    case 'O2-classic':
-      return /*#__PURE__*/React.createElement(O2Logo, {
-        size: size
-      });
-
-    case 'Telefonica':
-      return /*#__PURE__*/React.createElement(TelefonicaLogo, {
-        size: size
-      });
-
-    case 'Blau':
-      return /*#__PURE__*/React.createElement(BlauLogo, {
-        size: size
-      });
-
-    default:
-      return null;
-  }
+var BlauLogo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), colors = ref.colors, isDarkMode = ref.isDarkMode;
+    var isInverse = useIsInverseVariant();
+    var color = isInverse && !isDarkMode ? colors.inverse : colors.brand;
+    return(/*#__PURE__*/ React.createElement("svg", {
+        height: size,
+        viewBox: "0 0 100 44",
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("g", {
+        fill: "none",
+        fillRule: "evenodd"
+    }, /*#__PURE__*/ React.createElement("path", {
+        fill: colors.textLink,
+        d: "M0 35.184h100v8.2h-100z"
+    }), /*#__PURE__*/ React.createElement("path", {
+        fill: color,
+        d: "M24.878 13.321c3.448 1.331 5.278 3.588 5.069 7.436-.209 5.009-4.11 8.47-9.216 8.47h-19.731v-7.763h2.775v-13.698h-2.775v-7.766h19.814c4.319 0 7.768 3.674 7.636 8.017-.044 2.334-1.284 4.513-3.572 5.304zm-8.959-6.218h-2.583v4.114h2.583c2.544 0 2.716-4.114 0-4.114zm3.249 12.427c0-1.193-.771-2.381-2.546-2.381h-3.286v4.764h3.286c1.728 0 2.546-1.173 2.546-2.383zm11.554-19.53v7.766h2.75v21.46h10.043v-29.226h-12.793zm41.708 29.227h-9.421l-.206-2.17c-1.535 1.879-3.82 2.545-5.973 2.588-14.283.166-14.283-23.542 0-23.38 2.152 0 4.438.669 5.973 2.547l.207-2.175h9.42v22.59zm-10-11.275c0-4.383-6.183-4.339-6.183 0 .001 4.344 6.183 4.387 6.183 0zm37.513-11.316h-9.959v12.194c0 1.672-1.246 2.463-2.491 2.463-1.25 0-2.246-.831-2.246-2.421v-12.236h-9.965v12.282c0 6.057 2.364 10.562 9.051 10.729 2.199.041 4.485-.672 6.06-2.674l.211 2.254 9.342.015v-22.606h-.003z"
+    }))));
 };
-var useBurgerStyles = createUseStyles(function () {
-  return {
-    burgerIconContainer: {
-      position: 'relative',
-      width: 24,
-      height: 24,
-      '& > *': {
-        position: 'absolute',
-        opacity: 1,
-        transform: 'rotate(0) scale(1)',
-        transition: 'transform 300ms, opacity 100ms'
-      }
-    },
-    iconCloseHidden: {
-      opacity: 0,
-      transform: 'rotate(-45deg) scale(0.9)'
-    },
-    iconMenuHidden: {
-      opacity: 0,
-      transform: 'rotate(0deg) scale(0.7)'
+export var NavigationBarLogo = function(param) {
+    var size = param.size;
+    var ref = useTheme(), skinName = ref.skinName;
+    var ref1 = useScreenSize(), isTabletOrSmaller = ref1.isTabletOrSmaller;
+    size = size !== null && size !== void 0 ? size : isTabletOrSmaller ? 40 : 48;
+    switch(skinName){
+        case 'Movistar':
+            return(/*#__PURE__*/ React.createElement(MovistarLogo, {
+                size: size
+            }));
+        case 'Vivo':
+            return(/*#__PURE__*/ React.createElement(VivoLogo, {
+                size: size
+            }));
+        case 'O2':
+        case 'O2-classic':
+            return(/*#__PURE__*/ React.createElement(O2Logo, {
+                size: size
+            }));
+        case 'Telefonica':
+            return(/*#__PURE__*/ React.createElement(TelefonicaLogo, {
+                size: size
+            }));
+        case 'Blau':
+            return(/*#__PURE__*/ React.createElement(BlauLogo, {
+                size: size
+            }));
+        default:
+            return null;
     }
-  };
+};
+var useBurgerStyles = createUseStyles(function() {
+    return {
+        burgerIconContainer: {
+            position: 'relative',
+            width: 24,
+            height: 24,
+            '& > *': {
+                position: 'absolute',
+                opacity: 1,
+                transform: 'rotate(0) scale(1)',
+                transition: 'transform 300ms, opacity 100ms'
+            }
+        },
+        iconCloseHidden: {
+            opacity: 0,
+            transform: 'rotate(-45deg) scale(0.9)'
+        },
+        iconMenuHidden: {
+            opacity: 0,
+            transform: 'rotate(0deg) scale(0.7)'
+        }
+    };
 });
-
-var BurgerMenuIcon = function BurgerMenuIcon(_ref7) {
-  var isOpen = _ref7.isOpen;
-  var classes = useBurgerStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.burgerIconContainer,
-    role: "presentation"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: isOpen ? '' : classes.iconCloseHidden
-  }, /*#__PURE__*/React.createElement(IconCloseRegular, null)), /*#__PURE__*/React.createElement("div", {
-    className: isOpen ? classes.iconMenuHidden : ''
-  }, /*#__PURE__*/React.createElement(IconMenuRegular, null)));
+var BurgerMenuIcon = function(param) {
+    var isOpen = param.isOpen;
+    var classes = useBurgerStyles();
+    return(/*#__PURE__*/ React.createElement("div", {
+        className: classes.burgerIconContainer,
+        role: "presentation"
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: isOpen ? '' : classes.iconCloseHidden
+    }, /*#__PURE__*/ React.createElement(IconCloseRegular, null)), /*#__PURE__*/ React.createElement("div", {
+        className: isOpen ? classes.iconMenuHidden : ''
+    }, /*#__PURE__*/ React.createElement(IconMenuRegular, null))));
 };
-
 var NAVBAR_ZINDEX = 25;
 var BURGER_ZINDEX = 26;
 var DESKTOP_NAVBAR_HEIGHT = 80;
 var MOBILE_NAVBAR_HEIGHT = 56;
 var BURGER_MENU_ANIMATION_DURATION_MS = 300;
-var useStyles = createUseStyles(function (theme) {
-  var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
-  return {
-    topFixed: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      zIndex: NAVBAR_ZINDEX
-    },
-    notFixedPadding: {
-      width: '100%',
-      padding: function padding(_ref8) {
-        var paddingX = _ref8.paddingX;
-        return "0 ".concat(paddingX, "px");
-      }
-    },
-    navbar: _defineProperty({
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      background: function background(_ref9) {
-        var isInverse = _ref9.isInverse;
-        return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
-      },
-      height: DESKTOP_NAVBAR_HEIGHT,
-      padding: '16px 0',
-      borderBottomStyle: 'solid',
-      borderBottomWidth: function borderBottomWidth(_ref10) {
-        var withBorder = _ref10.withBorder;
-        return withBorder ? 1 : 0;
-      },
-      borderColor: function borderColor(_ref11) {
-        var isInverse = _ref11.isInverse;
-        return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
-      }
-    }, theme.mq.tabletOrSmaller, {
-      transition: 'border-color 300ms',
-      borderColor: function borderColor(_ref12) {
-        var isMenuOpen = _ref12.isMenuOpen,
-            isInverse = _ref12.isInverse;
-        return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
-      },
-      height: MOBILE_NAVBAR_HEIGHT,
-      padding: '8px 0'
-    }),
-    section: _defineProperty({
-      height: DESKTOP_NAVBAR_HEIGHT,
-      display: 'flex',
-      alignItems: 'center',
-      padding: '0 8px',
-      borderBottom: "2px solid transparent",
-      transition: 'border-color 300ms ease-in-out'
-    }, theme.mq.supportsHover, {
-      '&:hover span': {
-        color: function color(_ref13) {
-          var isInverse = _ref13.isInverse;
-          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-        }
-      }
-    }),
-    selectedSection: {
-      borderColor: function borderColor(_ref14) {
-        var isInverse = _ref14.isInverse;
-        return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
-      }
-    },
-    spacer: _defineProperty({
-      height: DESKTOP_NAVBAR_HEIGHT
-    }, theme.mq.tabletOrSmaller, {
-      height: MOBILE_NAVBAR_HEIGHT
-    }),
-    burgerMenu: {
-      zIndex: BURGER_ZINDEX,
-      position: 'fixed',
-      top: MOBILE_NAVBAR_HEIGHT,
-      left: 0,
-      right: 0,
-      height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
-      overflowY: 'auto',
-      background: theme.colors.background,
-      boxShadow: function boxShadow(_ref15) {
-        var menuTransitionState = _ref15.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")
-    },
-    burgerMenuEnter: {
-      transform: 'translate(-100vw)'
-    },
-    burgerMenuEnterActive: {
-      transform: 'translate(0)'
-    },
-    burgerMenuExit: {
-      transform: 'translate(0)'
-    },
-    burgerMenuExitActive: {
-      transform: 'translate(-100vw)'
-    },
-    iconButton: _defineProperty({
-      color: function color(_ref16) {
-        var isInverse = _ref16.isInverse;
-        return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-      }
-    }, theme.mq.supportsHover, {
-      '&:hover': {
-        color: function color(_ref17) {
-          var isInverse = _ref17.isInverse;
-          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-        }
-      }
-    })
-  };
-});
-export var MainNavigationBar = function MainNavigationBar(_ref18) {
-  var _logo;
-
-  var sections = _ref18.sections,
-      selectedIndex = _ref18.selectedIndex,
-      right = _ref18.right,
-      logo = _ref18.logo,
-      _ref18$isInverse = _ref18.isInverse,
-      isInverse = _ref18$isInverse === void 0 ? false : _ref18$isInverse,
-      _ref18$topFixed = _ref18.topFixed,
-      topFixed = _ref18$topFixed === void 0 ? true : _ref18$topFixed;
-
-  var _useTheme7 = useTheme(),
-      texts = _useTheme7.texts;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isMenuOpen = _React$useState2[0],
-      setIsMenuOpen = _React$useState2[1];
-
-  var _React$useState3 = React.useState('closed'),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      menuTransitionState = _React$useState4[0],
-      setMenuTransitionState = _React$useState4[1];
-
-  var menuId = useAriaId();
-  var classes = useStyles({
-    isMenuOpen: isMenuOpen,
-    isInverse: isInverse,
-    menuTransitionState: menuTransitionState,
-    withBorder: true
-  });
-
-  var _useScreenSize2 = useScreenSize(),
-      isTabletOrSmaller = _useScreenSize2.isTabletOrSmaller;
-
-  var setModalState = useSetModalState();
-  logo = (_logo = logo) !== null && _logo !== void 0 ? _logo : /*#__PURE__*/React.createElement(NavigationBarLogo, null);
-
-  if (isTabletOrSmaller) {
-    var openMenu = function openMenu() {
-      setIsMenuOpen(true);
-      setModalState({
-        isModalOpen: true
-      });
+var useStyles = createUseStyles(function(theme) {
+    var shadowAlpha = theme.isDarkMode ? 1 : 0.2;
+    return {
+        topFixed: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: NAVBAR_ZINDEX
+        },
+        notFixedPadding: {
+            width: '100%',
+            padding: function(param) {
+                var paddingX = param.paddingX;
+                return "0 ".concat(paddingX, "px");
+            }
+        },
+        navbar: _defineProperty({
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            background: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? theme.colors.navigationBarBackground : theme.colors.background;
+            },
+            height: DESKTOP_NAVBAR_HEIGHT,
+            padding: '16px 0',
+            borderBottomStyle: 'solid',
+            borderBottomWidth: function(param) {
+                var withBorder = param.withBorder;
+                return withBorder ? 1 : 0;
+            },
+            borderColor: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
+            }
+        }, theme.mq.tabletOrSmaller, {
+            transition: 'border-color 300ms',
+            borderColor: function(param) {
+                var isMenuOpen = param.isMenuOpen, isInverse = param.isInverse;
+                return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
+            },
+            height: MOBILE_NAVBAR_HEIGHT,
+            padding: '8px 0'
+        }),
+        section: _defineProperty({
+            height: DESKTOP_NAVBAR_HEIGHT,
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 8px',
+            borderBottom: "2px solid transparent",
+            transition: 'border-color 300ms ease-in-out'
+        }, theme.mq.supportsHover, {
+            '&:hover span': {
+                color: function(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+                }
+            }
+        }),
+        selectedSection: {
+            borderColor: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
+            }
+        },
+        spacer: _defineProperty({
+            height: DESKTOP_NAVBAR_HEIGHT
+        }, theme.mq.tabletOrSmaller, {
+            height: MOBILE_NAVBAR_HEIGHT
+        }),
+        burgerMenu: {
+            zIndex: BURGER_ZINDEX,
+            position: 'fixed',
+            top: MOBILE_NAVBAR_HEIGHT,
+            left: 0,
+            right: 0,
+            height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
+            overflowY: 'auto',
+            background: theme.colors.background,
+            boxShadow: function(param) {
+                var menuTransitionState = param.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")
+        },
+        burgerMenuEnter: {
+            transform: 'translate(-100vw)'
+        },
+        burgerMenuEnterActive: {
+            transform: 'translate(0)'
+        },
+        burgerMenuExit: {
+            transform: 'translate(0)'
+        },
+        burgerMenuExitActive: {
+            transform: 'translate(-100vw)'
+        },
+        iconButton: _defineProperty({
+            color: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
+            }
+        }, theme.mq.supportsHover, {
+            '&:hover': {
+                color: function(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
+                }
+            }
+        })
     };
-
-    var closeMenu = function closeMenu() {
-      setIsMenuOpen(false);
-      setModalState({
-        isModalOpen: false
-      });
-    };
-
-    var disableFocusTrap = menuTransitionState !== 'open';
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FocusTrap, {
-      disabled: disableFocusTrap,
-      group: "burger-menu-lock"
-    }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(ThemeVariant, {
-      isInverse: isInverse
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(classes.navbar, _defineProperty({}, classes.topFixed, topFixed))
-    }, /*#__PURE__*/React.createElement(ResponsiveLayout, null, /*#__PURE__*/React.createElement(Inline, {
-      space: "between",
-      alignItems: "center"
-    }, /*#__PURE__*/React.createElement(Inline, {
-      space: 24,
-      alignItems: "center"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      "aria-live": "polite",
-      "aria-label": isMenuOpen ? texts.closeNavigationMenu : texts.openNavigationMenu,
-      "aria-expanded": isMenuOpen,
-      "aria-controls": menuId,
-      onPress: isMenuOpen ? closeMenu : openMenu
-    }, /*#__PURE__*/React.createElement(BurgerMenuIcon, {
-      isOpen: isMenuOpen
-    })), logo), right)))), topFixed && /*#__PURE__*/React.createElement("div", {
-      className: classes.spacer
-    }))), /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
-      disabled: disableFocusTrap,
-      group: "burger-menu-lock"
-    }, /*#__PURE__*/React.createElement(CSSTransition, {
-      onEntering: function onEntering() {
-        setMenuTransitionState('opening');
-      },
-      onEntered: function onEntered() {
-        setMenuTransitionState('open');
-      },
-      onExiting: function onExiting() {
-        setMenuTransitionState('closing');
-      },
-      onExited: function onExited() {
-        setMenuTransitionState('closed');
-      },
-      in: isMenuOpen,
-      timeout: BURGER_MENU_ANIMATION_DURATION_MS,
-      classNames: {
-        enter: classes.burgerMenuEnter,
-        enterActive: classes.burgerMenuEnterActive,
-        exit: classes.burgerMenuExit,
-        exitActive: classes.burgerMenuExitActive
-      },
-      unmountOnExit: true
-    }, /*#__PURE__*/React.createElement("nav", {
-      className: classes.burgerMenu,
-      id: menuId,
-      onClick: function onClick() {
-        // Capture bubbling click events to close the burger menu when any row is pressed
-        closeMenu();
-      }
-    }, /*#__PURE__*/React.createElement(ResponsiveLayout, null, /*#__PURE__*/React.createElement(NegativeBox, null, /*#__PURE__*/React.createElement(RowList, null, sections.map(function (section, index) {
-      return /*#__PURE__*/React.createElement(Row, _extends({
-        key: index
-      }, section));
-    })))))))));
-  }
-
-  return /*#__PURE__*/React.createElement(ThemeVariant, {
-    isInverse: isInverse
-  }, /*#__PURE__*/React.createElement("header", {
-    className: classnames(classes.navbar, _defineProperty({}, classes.topFixed, topFixed))
-  }, /*#__PURE__*/React.createElement(ResponsiveLayout, null, /*#__PURE__*/React.createElement(Inline, {
-    space: "between",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 48,
-    alignItems: "center"
-  }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(Inline, {
-    space: 32
-  }, sections.map(function (_ref19, idx) {
-    var title = _ref19.title,
-        touchableProps = _objectWithoutProperties(_ref19, _excluded);
-
-    return /*#__PURE__*/React.createElement(Touchable, _extends({}, touchableProps, {
-      key: idx,
-      className: classnames(classes.section, _defineProperty({}, classes.selectedSection, idx === selectedIndex))
-    }), /*#__PURE__*/React.createElement(Text3, {
-      regular: true
-    }, title));
-  })))), right))), topFixed && /*#__PURE__*/React.createElement("div", {
-    className: classes.spacer
-  }));
+});
+export var MainNavigationBar = function(param) {
+    var sections = param.sections, selectedIndex = param.selectedIndex, right = param.right, logo = param.logo, _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, _topFixed = param.topFixed, topFixed = _topFixed === void 0 ? true : _topFixed;
+    var ref = useTheme(), texts = ref.texts;
+    var ref1 = _slicedToArray(React.useState(false), 2), isMenuOpen = ref1[0], setIsMenuOpen = ref1[1];
+    var ref2 = _slicedToArray(React.useState('closed'), 2), menuTransitionState = ref2[0], setMenuTransitionState = ref2[1];
+    var menuId = useAriaId();
+    var classes = useStyles({
+        isMenuOpen: isMenuOpen,
+        isInverse: isInverse,
+        menuTransitionState: menuTransitionState,
+        withBorder: true
+    });
+    var ref3 = useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
+    var setModalState = useSetModalState();
+    logo = logo !== null && logo !== void 0 ? logo : /*#__PURE__*/ React.createElement(NavigationBarLogo, null);
+    if (isTabletOrSmaller) {
+        var openMenu = function() {
+            setIsMenuOpen(true);
+            setModalState({
+                isModalOpen: true
+            });
+        };
+        var closeMenu = function() {
+            setIsMenuOpen(false);
+            setModalState({
+                isModalOpen: false
+            });
+        };
+        var disableFocusTrap = menuTransitionState !== 'open';
+        return(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FocusTrap, {
+            disabled: disableFocusTrap,
+            group: "burger-menu-lock"
+        }, /*#__PURE__*/ React.createElement("header", null, /*#__PURE__*/ React.createElement(ThemeVariant, {
+            isInverse: isInverse
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classnames(classes.navbar, _defineProperty({
+            }, classes.topFixed, topFixed))
+        }, /*#__PURE__*/ React.createElement(ResponsiveLayout, null, /*#__PURE__*/ React.createElement(Inline, {
+            space: "between",
+            alignItems: "center"
+        }, /*#__PURE__*/ React.createElement(Inline, {
+            space: 24,
+            alignItems: "center"
+        }, /*#__PURE__*/ React.createElement(IconButton, {
+            "aria-live": "polite",
+            "aria-label": isMenuOpen ? texts.closeNavigationMenu : texts.openNavigationMenu,
+            "aria-expanded": isMenuOpen,
+            "aria-controls": menuId,
+            onPress: isMenuOpen ? closeMenu : openMenu
+        }, /*#__PURE__*/ React.createElement(BurgerMenuIcon, {
+            isOpen: isMenuOpen
+        })), logo), right)))), topFixed && /*#__PURE__*/ React.createElement("div", {
+            className: classes.spacer
+        }))), /*#__PURE__*/ React.createElement(Portal, null, /*#__PURE__*/ React.createElement(FocusTrap, {
+            disabled: disableFocusTrap,
+            group: "burger-menu-lock"
+        }, /*#__PURE__*/ React.createElement(CSSTransition, {
+            onEntering: function() {
+                setMenuTransitionState('opening');
+            },
+            onEntered: function() {
+                setMenuTransitionState('open');
+            },
+            onExiting: function() {
+                setMenuTransitionState('closing');
+            },
+            onExited: function() {
+                setMenuTransitionState('closed');
+            },
+            in: isMenuOpen,
+            timeout: BURGER_MENU_ANIMATION_DURATION_MS,
+            classNames: {
+                enter: classes.burgerMenuEnter,
+                enterActive: classes.burgerMenuEnterActive,
+                exit: classes.burgerMenuExit,
+                exitActive: classes.burgerMenuExitActive
+            },
+            unmountOnExit: true
+        }, /*#__PURE__*/ React.createElement("nav", {
+            className: classes.burgerMenu,
+            id: menuId,
+            onClick: function() {
+                // Capture bubbling click events to close the burger menu when any row is pressed
+                closeMenu();
+            }
+        }, /*#__PURE__*/ React.createElement(ResponsiveLayout, null, /*#__PURE__*/ React.createElement(NegativeBox, null, /*#__PURE__*/ React.createElement(RowList, null, sections.map(function(section, index) {
+            /*#__PURE__*/ return React.createElement(Row, _extends({
+                key: index
+            }, section));
+        }))))))))));
+    }
+    return(/*#__PURE__*/ React.createElement(ThemeVariant, {
+        isInverse: isInverse
+    }, /*#__PURE__*/ React.createElement("header", {
+        className: classnames(classes.navbar, _defineProperty({
+        }, classes.topFixed, topFixed))
+    }, /*#__PURE__*/ React.createElement(ResponsiveLayout, null, /*#__PURE__*/ React.createElement(Inline, {
+        space: "between",
+        alignItems: "center"
+    }, /*#__PURE__*/ React.createElement(Inline, {
+        space: 48,
+        alignItems: "center"
+    }, logo, /*#__PURE__*/ React.createElement("nav", null, /*#__PURE__*/ React.createElement(Inline, {
+        space: 32
+    }, sections.map(function(_param, idx) /*#__PURE__*/ {
+        var title = _param.title, touchableProps = _objectWithoutProperties(_param, ["title"]);
+        return React.createElement(Touchable, _extends({
+        }, touchableProps, {
+            key: idx,
+            className: classnames(classes.section, _defineProperty({
+            }, classes.selectedSection, idx === selectedIndex))
+        }), /*#__PURE__*/ React.createElement(Text3, {
+            regular: true
+        }, title));
+    })))), right))), topFixed && /*#__PURE__*/ React.createElement("div", {
+        className: classes.spacer
+    })));
 };
-export var NavigationBar = function NavigationBar(_ref20) {
-  var onBack = _ref20.onBack,
-      title = _ref20.title,
-      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,
-      paddingX = _ref20.paddingX,
-      _ref20$withBorder = _ref20.withBorder,
-      withBorder = _ref20$withBorder === void 0 ? true : _ref20$withBorder;
-
-  var _useTheme8 = useTheme(),
-      texts = _useTheme8.texts;
-
-  var classes = useStyles({
-    isInverse: isInverse,
-    paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
-    withBorder: withBorder
-  });
-  var content = /*#__PURE__*/React.createElement(Inline, {
-    space: "between",
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 24,
-    alignItems: "center"
-  }, onBack && /*#__PURE__*/React.createElement(IconButton, {
-    "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) : /*#__PURE__*/React.createElement("div", {
-    className: classes.notFixedPadding
-  }, content)), topFixed && /*#__PURE__*/React.createElement("div", {
-    className: classes.spacer
-  }));
+export var NavigationBar = function(param) {
+    var onBack = param.onBack, title = param.title, right = param.right, _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, _topFixed = param.topFixed, topFixed = _topFixed === void 0 ? true : _topFixed, paddingX = param.paddingX, _withBorder = param.withBorder, withBorder = _withBorder === void 0 ? true : _withBorder;
+    var ref = useTheme(), texts = ref.texts;
+    var classes = useStyles({
+        isInverse: isInverse,
+        paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : 0,
+        withBorder: withBorder
+    });
+    var content = /*#__PURE__*/ React.createElement(Inline, {
+        space: "between",
+        alignItems: "center"
+    }, /*#__PURE__*/ React.createElement(Inline, {
+        space: 24,
+        alignItems: "center"
+    }, onBack && /*#__PURE__*/ React.createElement(IconButton, {
+        "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) : /*#__PURE__*/ React.createElement("div", {
+        className: classes.notFixedPadding
+    }, content)), topFixed && /*#__PURE__*/ React.createElement("div", {
+        className: classes.spacer
+    })));
 };
-export var FunnelNavigationBar = function FunnelNavigationBar(_ref21) {
-  var logo = _ref21.logo,
-      right = _ref21.right,
-      _ref21$isInverse = _ref21.isInverse,
-      isInverse = _ref21$isInverse === void 0 ? false : _ref21$isInverse,
-      _ref21$topFixed = _ref21.topFixed,
-      topFixed = _ref21$topFixed === void 0 ? true : _ref21$topFixed;
-  var classes = useStyles({
-    isInverse: isInverse,
-    withBorder: true
-  });
-  return /*#__PURE__*/React.createElement(ThemeVariant, {
-    isInverse: isInverse
-  }, /*#__PURE__*/React.createElement("header", {
-    className: classnames(classes.navbar, _defineProperty({}, classes.topFixed, topFixed))
-  }, /*#__PURE__*/React.createElement(ResponsiveLayout, null, /*#__PURE__*/React.createElement(GridLayout, {
-    template: "10"
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: "between",
-    alignItems: "center"
-  }, logo !== null && logo !== void 0 ? logo : /*#__PURE__*/React.createElement(NavigationBarLogo, null), right)))), topFixed && /*#__PURE__*/React.createElement("div", {
-    className: classes.spacer
-  }));
+export var FunnelNavigationBar = function(param) {
+    var logo = param.logo, right = param.right, _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? false : _isInverse, _topFixed = param.topFixed, topFixed = _topFixed === void 0 ? true : _topFixed;
+    var classes = useStyles({
+        isInverse: isInverse,
+        withBorder: true
+    });
+    return(/*#__PURE__*/ React.createElement(ThemeVariant, {
+        isInverse: isInverse
+    }, /*#__PURE__*/ React.createElement("header", {
+        className: classnames(classes.navbar, _defineProperty({
+        }, classes.topFixed, topFixed))
+    }, /*#__PURE__*/ React.createElement(ResponsiveLayout, null, /*#__PURE__*/ React.createElement(GridLayout, {
+        template: "10"
+    }, /*#__PURE__*/ React.createElement(Inline, {
+        space: "between",
+        alignItems: "center"
+    }, logo !== null && logo !== void 0 ? logo : /*#__PURE__*/ React.createElement(NavigationBarLogo, null), right)))), topFixed && /*#__PURE__*/ React.createElement("div", {
+        className: classes.spacer
+    })));
 };
-var useNavigationBarActionGroupStyles = createUseStyles(function () {
-  return {
-    lineHeightFix: {
-      // This fixes vertical alignment issues with icons in the secondary navigation, because mistica icons
-      // use display inline and other components like Badge use inline-block.
-      lineHeight: 0
-    }
-  };
+var useNavigationBarActionGroupStyles = createUseStyles(function() {
+    return {
+        lineHeightFix: {
+            // This fixes vertical alignment issues with icons in the secondary navigation, because mistica icons
+            // use display inline and other components like Badge use inline-block.
+            lineHeight: 0
+        }
+    };
 });
-export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref22) {
-  var children = _ref22.children;
-  var classes = useNavigationBarActionGroupStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.lineHeightFix
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 24,
-    alignItems: "center"
-  }, children));
+export var NavigationBarActionGroup = function(param) {
+    var children = param.children;
+    var classes = useNavigationBarActionGroupStyles();
+    return(/*#__PURE__*/ React.createElement("div", {
+        className: classes.lineHeightFix
+    }, /*#__PURE__*/ React.createElement(Inline, {
+        space: 24,
+        alignItems: "center"
+    }, children)));
 };
-var useNavigationBarActionStyles = createUseStyles(function (theme) {
-  return {
-    touchable: _defineProperty({
-      lineHeight: 0,
-      '& svg': {
-        color: function color(_ref23) {
-          var isInverse = _ref23.isInverse;
-          return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
-        }
-      }
-    }, theme.mq.supportsHover, {
-      '&:hover span': {
-        color: function color(_ref24) {
-          var isInverse = _ref24.isInverse;
-          return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
-        }
-      },
-      '&:hover svg': {
-        color: function color(_ref25) {
-          var isInverse = _ref25.isInverse;
-          return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
-        }
-      }
-    })
-  };
+var useNavigationBarActionStyles = createUseStyles(function(theme) {
+    return {
+        touchable: _defineProperty({
+            lineHeight: 0,
+            '& svg': {
+                color: function(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
+                }
+            }
+        }, theme.mq.supportsHover, {
+            '&:hover span': {
+                color: function(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
+                }
+            },
+            '&:hover svg': {
+                color: function(param) {
+                    var isInverse = param.isInverse;
+                    return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
+                }
+            }
+        })
+    };
 });
-export var NavigationBarAction = function NavigationBarAction(_ref26) {
-  var children = _ref26.children,
-      touchableProps = _objectWithoutProperties(_ref26, _excluded2);
-
-  var isInverse = useIsInverseVariant();
-  var classes = useNavigationBarActionStyles({
-    isInverse: isInverse
-  });
-  return /*#__PURE__*/React.createElement(Touchable, _extends({}, touchableProps, {
-    className: classes.touchable
-  }), /*#__PURE__*/React.createElement(Inline, {
-    space: 16,
-    alignItems: "center"
-  }, React.Children.map(children, function (child) {
-    return typeof child === 'string' ? /*#__PURE__*/React.createElement(Text2, {
-      regular: true
-    }, child) : child;
-  })));
-};
+var NavigationBarAction = function(_param) {
+    var children = _param.children, touchableProps = _objectWithoutProperties(_param, ["children"]);
+    var isInverse = useIsInverseVariant();
+    var classes = useNavigationBarActionStyles({
+        isInverse: isInverse
+    });
+    return(/*#__PURE__*/ React.createElement(Touchable, _extends({
+    }, touchableProps, {
+        className: classes.touchable
+    }), /*#__PURE__*/ React.createElement(Inline, {
+        space: 16,
+        alignItems: "center"
+    }, React.Children.map(children, function(child) {
+        return typeof child === 'string' ? /*#__PURE__*/ React.createElement(Text2, {
+            regular: true
+        }, child) : child;
+    }))));
+};
+export { NavigationBarAction };