@telefonica/mistica 10.5.1 → 10.9.0

package/dist/index.js

@@ -635,6 +635,12 @@ Object.defineProperty(exports, "DateField", {
     return _dateField.default;
   }
 });
+Object.defineProperty(exports, "MonthField", {
+  enumerable: true,
+  get: function get() {
+    return _monthField.default;
+  }
+});
 Object.defineProperty(exports, "DateTimeField", {
   enumerable: true,
   get: function get() {
@@ -809,6 +815,12 @@ Object.defineProperty(exports, "TELEFONICA_SKIN", {
     return _constants.TELEFONICA_SKIN;
   }
 });
+Object.defineProperty(exports, "BLAU_SKIN", {
+  enumerable: true,
+  get: function get() {
+    return _constants.BLAU_SKIN;
+  }
+});
 Object.defineProperty(exports, "getSkinByName", {
   enumerable: true,
   get: function get() {
@@ -875,6 +887,18 @@ Object.defineProperty(exports, "telefonicaPalette", {
     return _telefonica.palette;
   }
 });
+Object.defineProperty(exports, "getBlauSkin", {
+  enumerable: true,
+  get: function get() {
+    return _blau.getBlauSkin;
+  }
+});
+Object.defineProperty(exports, "blauPalette", {
+  enumerable: true,
+  get: function get() {
+    return _blau.palette;
+  }
+});
 Object.defineProperty(exports, "IconAcademicFilled", {
   enumerable: true,
   get: function get() {
@@ -7926,6 +7950,8 @@ var _cvvField = _interopRequireDefault(require("./cvv-field"));
 
 var _dateField = _interopRequireDefault(require("./date-field"));
 
+var _monthField = _interopRequireDefault(require("./month-field"));
+
 var _dateTimeField = _interopRequireDefault(require("./date-time-field"));
 
 var _integerField = _interopRequireDefault(require("./integer-field"));
@@ -7974,6 +8000,8 @@ var _o2Classic = require("./skins/o2-classic");
 
 var _telefonica = require("./skins/telefonica");
 
+var _blau = require("./skins/blau");
+
 var _iconAcademicFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-academic-filled"));
 
 var _iconAcademicLight = _interopRequireDefault(require("./generated/mistica-icons/icon-academic-light"));

package/dist/index.js.flow

@@ -109,6 +109,7 @@ declare export { default as CreditCardExpirationField } from "./credit-card-expi
 declare export { default as CreditCardFields } from "./credit-card-fields";
 declare export { default as CvvField } from "./cvv-field";
 declare export { default as DateField } from "./date-field";
+declare export { default as MonthField } from "./month-field";
 declare export { default as DateTimeField } from "./date-time-field";
 declare export { default as IntegerField } from "./integer-field";
 declare export { default as DecimalField } from "./decimal-field";
@@ -145,6 +146,7 @@ declare export {
   O2_SKIN,
   MOVISTAR_SKIN,
   TELEFONICA_SKIN,
+  BLAU_SKIN,
 } from "./skins/constants";
 declare export { getSkinByName } from "./skins/utils";
 declare export { getVivoSkin } from "./skins/vivo";
@@ -152,11 +154,13 @@ declare export { getMovistarSkin } from "./skins/movistar";
 declare export { getO2Skin } from "./skins/o2";
 declare export { getO2ClassicSkin } from "./skins/o2-classic";
 declare export { getTelefonicaSkin } from "./skins/telefonica";
+declare export { getBlauSkin } from "./skins/blau";
 declare export { palette as vivoPalette } from "./skins/vivo";
 declare export { palette as movistarPalette } from "./skins/movistar";
 declare export { palette as o2Palette } from "./skins/o2";
 declare export { palette as o2ClassicPalette } from "./skins/o2-classic";
 declare export { palette as telefonicaPalette } from "./skins/telefonica";
+declare export { palette as blauPalette } from "./skins/blau";
 declare export { Locale } from "./utils/locale";
 declare export { TrackingEvent } from "./utils/types";
 declare export { RegionCode } from "./utils/region-code";

package/dist/month-field.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { CommonFormFieldProps } from './text-field-base';
+export interface DateFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    min?: Date;
+    max?: Date;
+}
+declare const DateField: React.FC<DateFieldProps>;
+export default DateField;

package/dist/month-field.js

@@ -0,0 +1,192 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _formContext = require("./form-context");
+
+var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+
+var _dom = require("./utils/dom");
+
+var _environment = require("./utils/environment");
+
+var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
+
+var _time = require("./utils/time");
+
+var _hooks = require("./hooks");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _excluded = ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "min", "max"];
+
+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 _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;
+}
+
+var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "date-time-picker" */
+  './date-time-picker');
+});
+
+var DateField = function DateField(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      name = _ref.name,
+      optional = _ref.optional,
+      validateProp = _ref.validate,
+      onChange = _ref.onChange,
+      onChangeValueProp = _ref.onChangeValue,
+      onBlur = _ref.onBlur,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      min = _ref.min,
+      max = _ref.max,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var processValue = function processValue(value) {
+    return value;
+  };
+
+  var hasNativePicker = React.useMemo(function () {
+    return (0, _dom.isInputTypeSupported)('month');
+  }, []);
+
+  var _useTheme = (0, _hooks.useTheme)(),
+      texts = _useTheme.texts;
+
+  var isInRange = function isInRange(value) {
+    if (min && value && value < (0, _time.getLocalYearMonthString)(min)) {
+      return false;
+    }
+
+    if (max && value && value > (0, _time.getLocalYearMonthString)(max)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var validate = function validate(value, rawValue) {
+    if (!isInRange(value)) {
+      return texts.formDateOutOfRangeError;
+    }
+
+    return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
+  };
+
+  var onChangeValue = function onChangeValue(value, rawValue) {
+    if (isInRange(value)) {
+      onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value, rawValue);
+    } // if not in range, onChangeValue is not called
+
+  };
+
+  var fieldProps = (0, _formContext.useFieldProps)({
+    name: name,
+    value: value,
+    defaultValue: defaultValue,
+    processValue: processValue,
+    helperText: helperText,
+    optional: optional,
+    error: error,
+    disabled: disabled,
+    onBlur: onBlur,
+    validate: validate,
+    onChange: onChange,
+    onChangeValue: onChangeValue
+  });
+  var nativePicker = /*#__PURE__*/React.createElement(_textFieldBase.default, _extends({}, rest, fieldProps, {
+    min: min ? (0, _time.getLocalYearMonthString)(min) : undefined,
+    max: max ? (0, _time.getLocalYearMonthString)(max) : undefined,
+    type: "month",
+    endIconOverlay: /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        pointerEvents: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(_iconCalendarRegular.default, null))
+  }));
+
+  if (hasNativePicker || (0, _environment.isServerSide)()) {
+    return nativePicker;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: nativePicker
+  }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
+    isValidDate: function isValidDate(currentDate) {
+      return isInRange((0, _time.getLocalYearMonthString)(currentDate.toDate()));
+    },
+    mode: "year-month"
+  })));
+};
+
+var _default = DateField;
+exports.default = _default;

package/dist/month-field.js.flow

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+import type { CommonFormFieldProps } from "./text-field-base";
+export type DateFieldProps = {|
+  ...$Exact<CommonFormFieldProps>,
+
+  onChangeValue?: (value: string, rawValue: string) => void,
+  min?: Date,
+  max?: Date,
+|};
+declare var DateField: React.ComponentType<DateFieldProps>;
+declare export default typeof DateField;

package/dist/navigation-bar.js

@@ -307,13 +307,38 @@ var TelefonicaLogo = function TelefonicaLogo(_ref4) {
   })));
 };
 
-var NavigationBarLogo = function NavigationBarLogo(_ref5) {
-  var _size;
-
+var BlauLogo = function BlauLogo(_ref5) {
   var size = _ref5.size;
 
   var _useTheme5 = (0, _hooks.useTheme)(),
-      skinName = _useTheme5.skinName;
+      colors = _useTheme5.colors,
+      isDarkMode = _useTheme5.isDarkMode;
+
+  var isInverse = (0, _themeVariantContext.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 NavigationBarLogo = function NavigationBarLogo(_ref6) {
+  var _size;
+
+  var size = _ref6.size;
+
+  var _useTheme6 = (0, _hooks.useTheme)(),
+      skinName = _useTheme6.skinName;
 
   var _useScreenSize = (0, _hooks.useScreenSize)(),
       isTabletOrSmaller = _useScreenSize.isTabletOrSmaller;
@@ -342,6 +367,11 @@ var NavigationBarLogo = function NavigationBarLogo(_ref5) {
         size: size
       });
 
+    case 'Blau':
+      return /*#__PURE__*/React.createElement(BlauLogo, {
+        size: size
+      });
+
     default:
       return null;
   }
@@ -372,8 +402,8 @@ var useBurgerStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var BurgerMenuIcon = function BurgerMenuIcon(_ref6) {
-  var isOpen = _ref6.isOpen;
+var BurgerMenuIcon = function BurgerMenuIcon(_ref7) {
+  var isOpen = _ref7.isOpen;
   var classes = useBurgerStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.burgerIconContainer,
@@ -402,8 +432,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     },
     notFixedPadding: {
       width: '100%',
-      padding: function padding(_ref7) {
-        var paddingX = _ref7.paddingX;
+      padding: function padding(_ref8) {
+        var paddingX = _ref8.paddingX;
         return "0 ".concat(paddingX, "px");
       }
     },
@@ -411,26 +441,26 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       width: '100%',
       display: 'flex',
       alignItems: 'center',
-      background: function background(_ref8) {
-        var isInverse = _ref8.isInverse;
+      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(_ref9) {
-        var withBorder = _ref9.withBorder;
+      borderBottomWidth: function borderBottomWidth(_ref10) {
+        var withBorder = _ref10.withBorder;
         return withBorder ? 1 : 0;
       },
-      borderColor: function borderColor(_ref10) {
-        var isInverse = _ref10.isInverse;
+      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(_ref11) {
-        var isMenuOpen = _ref11.isMenuOpen,
-            isInverse = _ref11.isInverse;
+      borderColor: function borderColor(_ref12) {
+        var isMenuOpen = _ref12.isMenuOpen,
+            isInverse = _ref12.isInverse;
         return isMenuOpen || isInverse && !theme.isDarkMode ? 'transparent' : theme.colors.divider;
       },
       height: MOBILE_NAVBAR_HEIGHT,
@@ -445,15 +475,15 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       transition: 'border-color 300ms ease-in-out'
     }, theme.mq.supportsHover, {
       '&:hover span': {
-        color: function color(_ref12) {
-          var isInverse = _ref12.isInverse;
+        color: function color(_ref13) {
+          var isInverse = _ref13.isInverse;
           return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       }
     }),
     selectedSection: {
-      borderColor: function borderColor(_ref13) {
-        var isInverse = _ref13.isInverse;
+      borderColor: function borderColor(_ref14) {
+        var isInverse = _ref14.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.controlActivated;
       }
     },
@@ -471,8 +501,8 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       height: "calc(100vh - ".concat(MOBILE_NAVBAR_HEIGHT, "px)"),
       overflowY: 'auto',
       background: theme.colors.background,
-      boxShadow: function boxShadow(_ref14) {
-        var menuTransitionState = _ref14.menuTransitionState;
+      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")
@@ -490,14 +520,14 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       transform: 'translate(-100vw)'
     },
     iconButton: _defineProperty({
-      color: function color(_ref15) {
-        var isInverse = _ref15.isInverse;
+      color: function color(_ref16) {
+        var isInverse = _ref16.isInverse;
         return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
       }
     }, theme.mq.supportsHover, {
       '&:hover': {
-        color: function color(_ref16) {
-          var isInverse = _ref16.isInverse;
+        color: function color(_ref17) {
+          var isInverse = _ref17.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
@@ -505,20 +535,20 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
   };
 });
 
-var MainNavigationBar = function MainNavigationBar(_ref17) {
+var MainNavigationBar = function MainNavigationBar(_ref18) {
   var _logo;
 
-  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 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 _useTheme6 = (0, _hooks.useTheme)(),
-      texts = _useTheme6.texts;
+  var _useTheme7 = (0, _hooks.useTheme)(),
+      texts = _useTheme7.texts;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -634,9 +664,9 @@ var MainNavigationBar = function MainNavigationBar(_ref17) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(_inline.default, {
     space: 32
-  }, sections.map(function (_ref18, idx) {
-    var title = _ref18.title,
-        touchableProps = _objectWithoutProperties(_ref18, _excluded);
+  }, sections.map(function (_ref19, idx) {
+    var title = _ref19.title,
+        touchableProps = _objectWithoutProperties(_ref19, _excluded);
 
     return /*#__PURE__*/React.createElement(_touchable.default, _extends({}, touchableProps, {
       key: idx,
@@ -651,20 +681,20 @@ var MainNavigationBar = function MainNavigationBar(_ref17) {
 
 exports.MainNavigationBar = MainNavigationBar;
 
-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 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 _useTheme7 = (0, _hooks.useTheme)(),
-      texts = _useTheme7.texts;
+  var _useTheme8 = (0, _hooks.useTheme)(),
+      texts = _useTheme8.texts;
 
   var classes = useStyles({
     isInverse: isInverse,
@@ -702,13 +732,13 @@ var NavigationBar = function NavigationBar(_ref19) {
 
 exports.NavigationBar = NavigationBar;
 
-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 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
@@ -738,8 +768,8 @@ var useNavigationBarActionGroupStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
-  var children = _ref21.children;
+var NavigationBarActionGroup = function NavigationBarActionGroup(_ref22) {
+  var children = _ref22.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -755,21 +785,21 @@ var useNavigationBarActionStyles = (0, _jss.createUseStyles)(function (theme) {
     touchable: _defineProperty({
       lineHeight: 0,
       '& svg': {
-        color: function color(_ref22) {
-          var isInverse = _ref22.isInverse;
+        color: function color(_ref23) {
+          var isInverse = _ref23.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralHigh;
         }
       }
     }, theme.mq.supportsHover, {
       '&:hover span': {
-        color: function color(_ref23) {
-          var isInverse = _ref23.isInverse;
+        color: function color(_ref24) {
+          var isInverse = _ref24.isInverse;
           return isInverse ? theme.colors.textSecondaryInverse : theme.colors.textSecondary;
         }
       },
       '&:hover svg': {
-        color: function color(_ref24) {
-          var isInverse = _ref24.isInverse;
+        color: function color(_ref25) {
+          var isInverse = _ref25.isInverse;
           return isInverse ? theme.colors.inverse : theme.colors.neutralMedium;
         }
       }
@@ -777,9 +807,9 @@ var useNavigationBarActionStyles = (0, _jss.createUseStyles)(function (theme) {
   };
 });
 
-var NavigationBarAction = function NavigationBarAction(_ref25) {
-  var children = _ref25.children,
-      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
+var NavigationBarAction = function NavigationBarAction(_ref26) {
+  var children = _ref26.children,
+      touchableProps = _objectWithoutProperties(_ref26, _excluded2);
 
   var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
   var classes = useNavigationBarActionStyles({

package/dist/progress-bar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 declare type Props = {
     progressPercent: number;
+    color?: string;
     children?: void;
 };
 declare const ProgressBar: React.FC<Props>;

package/dist/progress-bar.js

@@ -26,12 +26,15 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
     },
     bar: {
       height: '100%',
-      backgroundColor: colors.controlActivated,
+      backgroundColor: function backgroundColor(_ref2) {
+        var color = _ref2.color;
+        return color !== null && color !== void 0 ? color : colors.controlActivated;
+      },
       transition: "max-width ".concat(transition),
       animation: "$bar ".concat(transition),
       borderRadius: 2,
-      maxWidth: function maxWidth(_ref2) {
-        var progressPercent = _ref2.progressPercent;
+      maxWidth: function maxWidth(_ref3) {
+        var progressPercent = _ref3.progressPercent;
         return "".concat(progressPercent, "%");
       }
     },
@@ -43,10 +46,12 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
   };
 });
 
-var ProgressBar = function ProgressBar(_ref3) {
-  var progressPercent = _ref3.progressPercent;
+var ProgressBar = function ProgressBar(_ref4) {
+  var progressPercent = _ref4.progressPercent,
+      color = _ref4.color;
   var classes = useStyles({
-    progressPercent: progressPercent
+    progressPercent: progressPercent,
+    color: color
   });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.barBackground,

package/dist/progress-bar.js.flow

@@ -1,6 +1,9 @@
 // @flow
 
 import * as React from "react";
-declare type Props = { progressPercent: number };
+declare type Props = {
+  progressPercent: number,
+  color?: string,
+};
 declare var ProgressBar: React.ComponentType<Props>;
 declare export default typeof ProgressBar;