@telefonica/mistica 10.5.1 → 10.9.0

package/dist-es/header.js

@@ -16,47 +16,16 @@ import GridLayout from './grid-layout';
 import { useScreenSize, useTheme } from './hooks';
 import OverscrollColor from './overscroll-color-context';
 import { Text8, Text7, Text6, Text3 } from './text';
-import ButtonLayout from './button-layout';
-var useButtonLayoutStyles = createUseStyles(function () {
-  return {
-    inlineBlockContainer: {
-      // this inline block makes the parent grow with the width of its bigger children
-      // this, toggether with applying width 100% to the buttons, allows us to have two
-      // sibling buttons with the same width (the width of the bigger one).
-      display: 'inline-block'
-    },
-    button: {
-      '& > *': {
-        width: '100%'
-      }
-    }
-  };
-});
-
-var MobileHeaderButtonLayout = function MobileHeaderButtonLayout(_ref) {
-  var children = _ref.children;
-  var classes = useButtonLayoutStyles();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.inlineBlockContainer
-  }, /*#__PURE__*/React.createElement(Stack, {
-    space: 16
-  }, React.Children.toArray(children).filter(Boolean).map(function (button, idx) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: idx,
-      className: classes.button
-    }, button);
-  })));
-};
-
-export var Header = function Header(_ref2) {
-  var pretitle = _ref2.pretitle,
-      title = _ref2.title,
-      preamount = _ref2.preamount,
-      amount = _ref2.amount,
-      button = _ref2.button,
-      subtitle = _ref2.subtitle,
-      isErrorAmount = _ref2.isErrorAmount,
-      secondaryButton = _ref2.secondaryButton;
+import ButtonGroup from './button-group';
+export var Header = function Header(_ref) {
+  var pretitle = _ref.pretitle,
+      title = _ref.title,
+      preamount = _ref.preamount,
+      amount = _ref.amount,
+      button = _ref.button,
+      subtitle = _ref.subtitle,
+      isErrorAmount = _ref.isErrorAmount,
+      secondaryButton = _ref.secondaryButton;
 
   var _useScreenSize = useScreenSize(),
       isTabletOrSmaller = _useScreenSize.isTabletOrSmaller;
@@ -81,14 +50,16 @@ export var Header = function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(Stack, {
     space: isTabletOrSmaller ? 24 : 32
-  }, (title || pretitle) && /*#__PURE__*/React.createElement(Stack, {
+  }, (title || pretitle) && /*#__PURE__*/React.createElement(Box, {
+    paddingRight: 16
+  }, /*#__PURE__*/React.createElement(Stack, {
     space: 8
   }, pretitle && renderRichText(pretitle, {
     color: theme.colors.textPrimary
   }), /*#__PURE__*/React.createElement(Text6, {
     role: "heading",
     "aria-level": 2
-  }, title)), (preamount || amount || button || subtitle) && /*#__PURE__*/React.createElement(Stack, {
+  }, title))), (preamount || amount || button || subtitle) && /*#__PURE__*/React.createElement(Stack, {
     space: 16
   }, (preamount || amount) && /*#__PURE__*/React.createElement(Stack, {
     space: 8
@@ -96,14 +67,15 @@ export var Header = function Header(_ref2) {
     color: theme.colors.textPrimary
   }), /*#__PURE__*/React.createElement(Text8, {
     color: isErrorAmount && !isInverse ? theme.colors.highlight : theme.colors.textPrimary
-  }, amount)), (button || secondaryButton) && (isTabletOrSmaller ? /*#__PURE__*/React.createElement(MobileHeaderButtonLayout, null, button, secondaryButton) : /*#__PURE__*/React.createElement(ButtonLayout, {
-    align: "left"
-  }, button, secondaryButton)), subtitle && renderRichText(subtitle, {})));
+  }, amount)), (button || secondaryButton) && /*#__PURE__*/React.createElement(ButtonGroup, {
+    primaryButton: button,
+    secondaryButton: secondaryButton
+  }), subtitle && renderRichText(subtitle, {})));
 };
-export var MainSectionHeader = function MainSectionHeader(_ref3) {
-  var title = _ref3.title,
-      description = _ref3.description,
-      button = _ref3.button;
+export var MainSectionHeader = function MainSectionHeader(_ref2) {
+  var title = _ref2.title,
+      description = _ref2.description,
+      button = _ref2.button;
 
   var _useScreenSize2 = useScreenSize(),
       isTabletOrSmaller = _useScreenSize2.isTabletOrSmaller;
@@ -120,8 +92,8 @@ export var MainSectionHeader = function MainSectionHeader(_ref3) {
 var useHeaderLayoutStyles = createUseStyles(function (theme) {
   return {
     background: {
-      background: function background(_ref4) {
-        var isInverse = _ref4.isInverse;
+      background: function background(_ref3) {
+        var isInverse = _ref3.isInverse;
         return isInverse ? theme.colors.backgroundBrand : 'initial';
       }
     },
@@ -130,14 +102,14 @@ var useHeaderLayoutStyles = createUseStyles(function (theme) {
     }
   };
 });
-export var HeaderLayout = function HeaderLayout(_ref5) {
-  var _ref5$isInverse = _ref5.isInverse,
-      isInverse = _ref5$isInverse === void 0 ? true : _ref5$isInverse,
-      breadcrumbs = _ref5.breadcrumbs,
-      header = _ref5.header,
-      extra = _ref5.extra,
-      _ref5$sideBySideExtra = _ref5.sideBySideExtraOnDesktop,
-      sideBySideExtraOnDesktop = _ref5$sideBySideExtra === void 0 ? false : _ref5$sideBySideExtra;
+export var HeaderLayout = function HeaderLayout(_ref4) {
+  var _ref4$isInverse = _ref4.isInverse,
+      isInverse = _ref4$isInverse === void 0 ? true : _ref4$isInverse,
+      breadcrumbs = _ref4.breadcrumbs,
+      header = _ref4.header,
+      extra = _ref4.extra,
+      _ref4$sideBySideExtra = _ref4.sideBySideExtraOnDesktop,
+      sideBySideExtraOnDesktop = _ref4$sideBySideExtra === void 0 ? false : _ref4$sideBySideExtra;
   var classes = useHeaderLayoutStyles({
     isInverse: isInverse
   });
@@ -154,9 +126,7 @@ export var HeaderLayout = function HeaderLayout(_ref5) {
     paddingBottom: 24
   }, /*#__PURE__*/React.createElement(Stack, {
     space: 24
-  }, /*#__PURE__*/React.createElement(Box, {
-    paddingRight: 16
-  }, header), extra)) : sideBySideExtraOnDesktop ? /*#__PURE__*/React.createElement(Box, {
+  }, header, extra)) : sideBySideExtraOnDesktop ? /*#__PURE__*/React.createElement(Box, {
     paddingTop: breadcrumbs ? 16 : 48,
     paddingBottom: 48
   }, /*#__PURE__*/React.createElement(GridLayout, null, /*#__PURE__*/React.createElement("div", {
@@ -176,10 +146,10 @@ export var HeaderLayout = function HeaderLayout(_ref5) {
     space: 32
   }, breadcrumbs, header), extra))))));
 };
-export var MainSectionHeaderLayout = function MainSectionHeaderLayout(_ref6) {
-  var _ref6$isInverse = _ref6.isInverse,
-      isInverse = _ref6$isInverse === void 0 ? true : _ref6$isInverse,
-      children = _ref6.children;
+export var MainSectionHeaderLayout = function MainSectionHeaderLayout(_ref5) {
+  var _ref5$isInverse = _ref5.isInverse,
+      isInverse = _ref5$isInverse === void 0 ? true : _ref5$isInverse,
+      children = _ref5.children;
   var classes = useHeaderLayoutStyles({
     isInverse: isInverse
   });

package/dist-es/index.js

@@ -68,6 +68,7 @@ export { default as CreditCardExpirationField } from './credit-card-expiration-f
 export { default as CreditCardFields } from './credit-card-fields';
 export { default as CvvField } from './cvv-field';
 export { default as DateField } from './date-field';
+export { default as MonthField } from './month-field';
 export { default as DateTimeField } from './date-time-field';
 export { default as IntegerField } from './integer-field';
 export { default as DecimalField } from './decimal-field';
@@ -87,18 +88,20 @@ export { default as IconSuccessVivo } from './icons/icon-success-vivo';
 export { default as Circle } from './circle';
 export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth } from './hooks';
 export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
-export { VIVO_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN } from './skins/constants';
+export { VIVO_SKIN, O2_CLASSIC_SKIN, O2_SKIN, MOVISTAR_SKIN, TELEFONICA_SKIN, BLAU_SKIN } from './skins/constants';
 export { getSkinByName } from './skins/utils';
 export { getVivoSkin } from './skins/vivo';
 export { getMovistarSkin } from './skins/movistar';
 export { getO2Skin } from './skins/o2';
 export { getO2ClassicSkin } from './skins/o2-classic';
 export { getTelefonicaSkin } from './skins/telefonica';
+export { getBlauSkin } from './skins/blau';
 export { palette as vivoPalette } from './skins/vivo';
 export { palette as movistarPalette } from './skins/movistar';
 export { palette as o2Palette } from './skins/o2';
 export { palette as o2ClassicPalette } from './skins/o2-classic';
 export { palette as telefonicaPalette } from './skins/telefonica';
+export { palette as blauPalette } from './skins/blau';
 
 // Check there is only one version of mistica installed in the page.
 if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {

package/dist-es/month-field.js

@@ -0,0 +1,120 @@
+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; }
+
+import * as React from 'react';
+import { useFieldProps } from './form-context';
+import TextFieldBase from './text-field-base';
+import { isInputTypeSupported } from './utils/dom';
+import { isServerSide } from './utils/environment';
+import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
+import { getLocalYearMonthString } from './utils/time';
+import { useTheme } from './hooks';
+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 isInputTypeSupported('month');
+  }, []);
+
+  var _useTheme = useTheme(),
+      texts = _useTheme.texts;
+
+  var isInRange = function isInRange(value) {
+    if (min && value && value < getLocalYearMonthString(min)) {
+      return false;
+    }
+
+    if (max && value && value > 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 = 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, _extends({}, rest, fieldProps, {
+    min: min ? getLocalYearMonthString(min) : undefined,
+    max: max ? getLocalYearMonthString(max) : undefined,
+    type: "month",
+    endIconOverlay: /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        pointerEvents: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(IconCalendarRegular, null))
+  }));
+
+  if (hasNativePicker || 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(getLocalYearMonthString(currentDate.toDate()));
+    },
+    mode: "year-month"
+  })));
+};
+
+export default DateField;

package/dist-es/navigation-bar.js

@@ -162,13 +162,38 @@ var TelefonicaLogo = function TelefonicaLogo(_ref4) {
   })));
 };
 
-export var NavigationBarLogo = function NavigationBarLogo(_ref5) {
-  var _size;
-
+var BlauLogo = function BlauLogo(_ref5) {
   var size = _ref5.size;
 
   var _useTheme5 = useTheme(),
-      skinName = _useTheme5.skinName;
+      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"
+  })));
+};
+
+export var NavigationBarLogo = function NavigationBarLogo(_ref6) {
+  var _size;
+
+  var size = _ref6.size;
+
+  var _useTheme6 = useTheme(),
+      skinName = _useTheme6.skinName;
 
   var _useScreenSize = useScreenSize(),
       isTabletOrSmaller = _useScreenSize.isTabletOrSmaller;
@@ -197,6 +222,11 @@ export var NavigationBarLogo = function NavigationBarLogo(_ref5) {
         size: size
       });
 
+    case 'Blau':
+      return /*#__PURE__*/React.createElement(BlauLogo, {
+        size: size
+      });
+
     default:
       return null;
   }
@@ -225,8 +255,8 @@ var useBurgerStyles = 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,
@@ -255,8 +285,8 @@ var useStyles = 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");
       }
     },
@@ -264,26 +294,26 @@ var useStyles = 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,
@@ -298,15 +328,15 @@ var useStyles = 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;
       }
     },
@@ -324,8 +354,8 @@ var useStyles = 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")
@@ -343,34 +373,34 @@ var useStyles = 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;
         }
       }
     })
   };
 });
-export var MainNavigationBar = function MainNavigationBar(_ref17) {
+export 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 = useTheme(),
-      texts = _useTheme6.texts;
+  var _useTheme7 = useTheme(),
+      texts = _useTheme7.texts;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -486,9 +516,9 @@ export var MainNavigationBar = function MainNavigationBar(_ref17) {
     alignItems: "center"
   }, logo, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(Inline, {
     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, _extends({}, touchableProps, {
       key: idx,
@@ -500,20 +530,20 @@ export var MainNavigationBar = function MainNavigationBar(_ref17) {
     className: classes.spacer
   }));
 };
-export var NavigationBar = function NavigationBar(_ref19) {
-  var onBack = _ref19.onBack,
-      title = _ref19.title,
-      right = _ref19.right,
-      _ref19$isInverse = _ref19.isInverse,
-      isInverse = _ref19$isInverse === void 0 ? false : _ref19$isInverse,
-      _ref19$topFixed = _ref19.topFixed,
-      topFixed = _ref19$topFixed === void 0 ? true : _ref19$topFixed,
-      paddingX = _ref19.paddingX,
-      _ref19$withBorder = _ref19.withBorder,
-      withBorder = _ref19$withBorder === void 0 ? true : _ref19$withBorder;
+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 _useTheme7 = useTheme(),
-      texts = _useTheme7.texts;
+  var _useTheme8 = useTheme(),
+      texts = _useTheme8.texts;
 
   var classes = useStyles({
     isInverse: isInverse,
@@ -548,13 +578,13 @@ export var NavigationBar = function NavigationBar(_ref19) {
     className: classes.spacer
   }));
 };
-export var FunnelNavigationBar = function FunnelNavigationBar(_ref20) {
-  var logo = _ref20.logo,
-      right = _ref20.right,
-      _ref20$isInverse = _ref20.isInverse,
-      isInverse = _ref20$isInverse === void 0 ? false : _ref20$isInverse,
-      _ref20$topFixed = _ref20.topFixed,
-      topFixed = _ref20$topFixed === void 0 ? true : _ref20$topFixed;
+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
@@ -581,8 +611,8 @@ var useNavigationBarActionGroupStyles = createUseStyles(function () {
     }
   };
 });
-export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref21) {
-  var children = _ref21.children;
+export var NavigationBarActionGroup = function NavigationBarActionGroup(_ref22) {
+  var children = _ref22.children;
   var classes = useNavigationBarActionGroupStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.lineHeightFix
@@ -596,30 +626,30 @@ var useNavigationBarActionStyles = 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;
         }
       }
     })
   };
 });
-export var NavigationBarAction = function NavigationBarAction(_ref25) {
-  var children = _ref25.children,
-      touchableProps = _objectWithoutProperties(_ref25, _excluded2);
+export var NavigationBarAction = function NavigationBarAction(_ref26) {
+  var children = _ref26.children,
+      touchableProps = _objectWithoutProperties(_ref26, _excluded2);
 
   var isInverse = useIsInverseVariant();
   var classes = useNavigationBarActionStyles({

package/dist-es/progress-bar.js

@@ -11,12 +11,15 @@ var useStyles = 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, "%");
       }
     },
@@ -28,10 +31,12 @@ var useStyles = 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,