@telefonica/mistica 10.5.1 → 10.9.0

package/dist/skins/blau.d.ts

@@ -0,0 +1,37 @@
+import type { GetSkin } from './types';
+export declare const palette: {
+    readonly blauBluePrimary: "#00B6F1";
+    readonly blauBluePrimary10: "#F7FDFF";
+    readonly blauBluePrimary20: "#E5F6FD";
+    readonly blauBluePrimary30: "#B3E9FB";
+    readonly blauBlueSecondary: "#0072BC";
+    readonly blauBlueSecondary10: "#E5F1F9";
+    readonly blauBlueSecondary20: "#B2D4EC";
+    readonly blauBlueSecondary30: "#80B7DF";
+    readonly blauBlueSecondary60: "#005A99";
+    readonly blauPurple: "#7814B3";
+    readonly blauPurple10: "#F1E7F7";
+    readonly blauPurple30: "#BB89D9";
+    readonly blauYellow: "#FFA922";
+    readonly blauYellow10: "#FFF6E9";
+    readonly blauYellow60: "#F09500";
+    readonly blauYellow70: "#996614";
+    readonly blauRed: "#F64417";
+    readonly blauRed10: "#FEECE8";
+    readonly blauRed20: "#FCC7B9";
+    readonly blauRed30: "#FA9E87";
+    readonly blauRed70: "#C93712";
+    readonly blauGreen: "#30D300";
+    readonly blauGreen10: "#EAFBE5";
+    readonly blauGreen70: "#1D7F00";
+    readonly grey1: "#F5F9FA";
+    readonly grey2: "#E7E7E7";
+    readonly grey3: "#B8B8B8";
+    readonly grey4: "#A0A0A0";
+    readonly grey5: "#808285";
+    readonly grey6: "#000000";
+    readonly white: "#FFFFFF";
+    readonly darkModeBlack: "#191919";
+    readonly darkModeGrey: "#242424";
+};
+export declare const getBlauSkin: GetSkin;

package/dist/skins/blau.js

@@ -0,0 +1,238 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBlauSkin = exports.palette = void 0;
+
+var _color = require("../utils/color");
+
+var _constants = require("./constants");
+
+var palette = {
+  blauBluePrimary: '#00B6F1',
+  blauBluePrimary10: '#F7FDFF',
+  blauBluePrimary20: '#E5F6FD',
+  blauBluePrimary30: '#B3E9FB',
+  blauBlueSecondary: '#0072BC',
+  blauBlueSecondary10: '#E5F1F9',
+  blauBlueSecondary20: '#B2D4EC',
+  blauBlueSecondary30: '#80B7DF',
+  blauBlueSecondary60: '#005A99',
+  blauPurple: '#7814B3',
+  blauPurple10: '#F1E7F7',
+  blauPurple30: '#BB89D9',
+  blauYellow: '#FFA922',
+  blauYellow10: '#FFF6E9',
+  blauYellow60: '#F09500',
+  blauYellow70: '#996614',
+  blauRed: '#F64417',
+  blauRed10: '#FEECE8',
+  blauRed20: '#FCC7B9',
+  blauRed30: '#FA9E87',
+  blauRed70: '#C93712',
+  blauGreen: '#30D300',
+  blauGreen10: '#EAFBE5',
+  blauGreen70: '#1D7F00',
+  grey1: '#F5F9FA',
+  grey2: '#E7E7E7',
+  grey3: '#B8B8B8',
+  grey4: '#A0A0A0',
+  grey5: '#808285',
+  grey6: '#000000',
+  white: '#FFFFFF',
+  // specific for dark mode:
+  darkModeBlack: '#191919',
+  darkModeGrey: '#242424'
+};
+exports.palette = palette;
+
+var getBlauSkin = function getBlauSkin() {
+  return {
+    name: _constants.BLAU_SKIN,
+    colors: {
+      // BACKGROUNDS
+      appBarBackground: palette.white,
+      background: palette.white,
+      backgroundContainer: palette.white,
+      backgroundBrand: palette.blauBluePrimary,
+      backgroundOverlay: (0, _color.applyAlpha)(palette.blauBlueSecondary, 0.75),
+      backgroundSkeleton: palette.grey2,
+      backgroundSkeletonInverse: palette.white,
+      navigationBarBackground: palette.blauBluePrimary,
+      backgroundAlternative: palette.blauBluePrimary20,
+      backgroundFeedbackBottom: palette.blauBluePrimary,
+      skeletonWave: palette.grey2,
+      // BORDERS
+      borderLight: palette.grey1,
+      border: palette.grey2,
+      borderDark: palette.grey5,
+      borderSelected: palette.blauBlueSecondary60,
+      // BUTTONS
+      buttonDangerBackground: palette.blauRed,
+      buttonDangerBackgroundDisabled: palette.blauRed20,
+      buttonDangerBackgroundSelected: palette.blauRed70,
+      buttonDangerBackgroundHover: palette.blauRed70,
+      buttonLinkBackgroundSelected: palette.blauPurple10,
+      buttonLinkBackgroundSelectedInverse: (0, _color.applyAlpha)(palette.white, 0.3),
+      buttonPrimaryBackground: palette.blauBlueSecondary,
+      buttonPrimaryBackgroundDisabled: palette.blauBlueSecondary20,
+      buttonPrimaryBackgroundDisabledInverse: palette.blauBlueSecondary30,
+      buttonPrimaryBackgroundInverse: palette.white,
+      buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
+      buttonPrimaryBackgroundSelectedInverse: palette.blauBluePrimary30,
+      buttonSecondaryBackground: palette.blauBlueSecondary,
+      buttonSecondaryBackgroundDisabled: palette.blauBlueSecondary20,
+      buttonSecondaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonSecondaryBorderDisabledInverse: palette.blauBlueSecondary20,
+      buttonSecondaryBorderInverse: palette.white,
+      buttonSecondaryBorderSelectedInverse: palette.blauBluePrimary30,
+      textButtonPrimary: palette.white,
+      textButtonPrimaryDisabled: palette.white,
+      textButtonPrimaryInverse: palette.blauBlueSecondary,
+      textButtonPrimaryInverseDisabled: palette.blauBluePrimary10,
+      textButtonPrimaryInverseSelected: palette.blauBlueSecondary60,
+      textButtonSecondary: palette.blauBlueSecondary,
+      textButtonSecondaryDisabled: palette.blauBlueSecondary30,
+      textButtonSecondarySelected: palette.blauBlueSecondary60,
+      textButtonSecondaryInverse: palette.white,
+      textButtonSecondaryInverseDisabled: palette.blauBlueSecondary20,
+      textButtonSecondaryInverseSelected: palette.white,
+      textLink: palette.blauPurple,
+      textLinkInverse: palette.white,
+      textLinkDanger: palette.blauRed,
+      textLinkDangerDisabled: palette.blauRed20,
+      textLinkDisabled: palette.blauPurple30,
+      textLinkSnackbar: palette.blauPurple30,
+      // CONTROLS
+      control: palette.grey2,
+      controlActivated: palette.blauBlueSecondary,
+      controlError: palette.blauRed,
+      loadingBar: palette.blauBlueSecondary,
+      loadingBarBackground: palette.blauBlueSecondary10,
+      loadingBarInverse: palette.blauBlueSecondary,
+      // Deprecated. Remove
+      loadingBarBackgroundInverse: palette.blauBlueSecondary10,
+      // Deprecated. Remove
+      toggleAndroidInactive: palette.grey2,
+      toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
+      iosControlKnob: palette.white,
+      // DIVIDERS
+      divider: palette.grey2,
+      dividerInverse: (0, _color.applyAlpha)(palette.white, 0.2),
+      navigationBarDivider: palette.blauBluePrimary,
+      // FEEDBACKS
+      badge: palette.blauRed,
+      feedbackErrorBackground: palette.blauRed,
+      feedbackInfoBackground: palette.grey6,
+      // GLOBAL
+      brand: palette.blauBluePrimary,
+      brandDark: palette.blauBlueSecondary,
+      inverse: palette.white,
+      neutralHigh: palette.grey6,
+      neutralMedium: palette.grey5,
+      neutralLow: palette.grey2,
+      textPrimary: palette.grey6,
+      textPrimaryInverse: palette.white,
+      textSecondary: palette.grey5,
+      textSecondaryInverse: palette.white,
+      textDisabled: palette.grey3,
+      textAmount: palette.blauBlueSecondary,
+      // STATES
+      error: palette.blauRed,
+      success: palette.blauGreen,
+      warning: palette.blauYellow,
+      promo: palette.blauPurple,
+      highlight: palette.blauBluePrimary,
+      // BARS TEXTS
+      textNavigationBarPrimary: palette.white,
+      textNavigationBarSecondary: palette.blauBlueSecondary20,
+      textNavigationSearchBarHint: palette.blauBlueSecondary20,
+      textNavigationSearchBarText: palette.white,
+      textAppBar: palette.grey5,
+      textAppBarSelected: palette.blauBlueSecondary60
+    },
+    darkModeColors: {
+      // BACKGROUNDS
+      backgroundBrand: palette.darkModeBlack,
+      background: palette.darkModeBlack,
+      appBarBackground: palette.darkModeGrey,
+      backgroundContainer: palette.darkModeGrey,
+      backgroundAlternative: palette.darkModeGrey,
+      backgroundOverlay: (0, _color.applyAlpha)(palette.darkModeGrey, 0.8),
+      backgroundSkeleton: palette.darkModeGrey,
+      backgroundSkeletonInverse: palette.darkModeGrey,
+      backgroundFeedbackBottom: palette.darkModeBlack,
+      navigationBarBackground: palette.darkModeBlack,
+      skeletonWave: palette.grey5,
+      // BORDERS
+      borderLight: palette.darkModeBlack,
+      border: palette.darkModeGrey,
+      // BUTTONS
+      buttonDangerBackgroundDisabled: palette.darkModeGrey,
+      buttonLinkBackgroundSelected: (0, _color.applyAlpha)(palette.blauPurple, 0.3),
+      buttonLinkBackgroundSelectedInverse: (0, _color.applyAlpha)(palette.blauPurple, 0.3),
+      buttonPrimaryBackgroundDisabled: palette.darkModeGrey,
+      buttonPrimaryBackgroundDisabledInverse: palette.darkModeGrey,
+      buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
+      buttonPrimaryBackgroundSelected: palette.blauBlueSecondary60,
+      buttonSecondaryBackgroundDisabled: palette.darkModeGrey,
+      buttonSecondaryBorderDisabledInverse: palette.darkModeGrey,
+      buttonSecondaryBorderInverse: palette.blauBluePrimary,
+      buttonSecondaryBorderSelectedInverse: palette.blauBlueSecondary60,
+      textButtonPrimary: palette.grey2,
+      textButtonPrimaryDisabled: palette.grey5,
+      textButtonPrimaryInverse: palette.grey2,
+      textButtonPrimaryInverseDisabled: palette.grey5,
+      textButtonPrimaryInverseSelected: palette.grey2,
+      textButtonSecondary: palette.grey2,
+      textButtonSecondaryDisabled: palette.grey5,
+      textButtonSecondarySelected: palette.blauBlueSecondary60,
+      textButtonSecondaryInverse: palette.grey2,
+      textButtonSecondaryInverseDisabled: palette.grey5,
+      textButtonSecondaryInverseSelected: palette.blauBlueSecondary60,
+      textLink: palette.blauPurple30,
+      textLinkInverse: palette.blauPurple30,
+      textLinkDisabled: palette.grey5,
+      textLinkDangerDisabled: palette.grey5,
+      // CONTROLS
+      control: palette.darkModeGrey,
+      loadingBar: palette.blauBluePrimary,
+      loadingBarBackground: palette.darkModeGrey,
+      toggleAndroidInactive: palette.grey5,
+      // web only
+      toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
+      // web only
+      iosControlKnob: palette.grey2,
+      // web only
+      // DIVIDERS
+      divider: (0, _color.applyAlpha)(palette.white, 0.05),
+      dividerInverse: (0, _color.applyAlpha)(palette.white, 0.05),
+      navigationBarDivider: palette.darkModeBlack,
+      // GLOBAL
+      brand: palette.blauBluePrimary,
+      brandDark: palette.grey5,
+      inverse: palette.grey2,
+      neutralHigh: palette.grey2,
+      neutralMedium: palette.grey5,
+      neutralLow: palette.darkModeGrey,
+      textPrimary: palette.grey2,
+      textPrimaryInverse: palette.grey2,
+      textSecondary: palette.grey4,
+      textSecondaryInverse: palette.grey4,
+      textDisabled: palette.grey5,
+      textAmount: palette.blauBlueSecondary,
+      textNavigationBarPrimary: palette.grey2,
+      textNavigationBarSecondary: palette.grey4,
+      textNavigationSearchBarHint: palette.grey4,
+      // iOS
+      textNavigationSearchBarText: palette.grey2,
+      // iOS
+      textAppBar: palette.grey5,
+      textAppBarSelected: palette.grey2
+    }
+  };
+};
+
+exports.getBlauSkin = getBlauSkin;

package/dist/skins/blau.js.flow

@@ -0,0 +1,39 @@
+// @flow
+
+import type { GetSkin } from "./types";
+declare export var palette: {
+  +blauBluePrimary: "#00B6F1",
+  +blauBluePrimary10: "#F7FDFF",
+  +blauBluePrimary20: "#E5F6FD",
+  +blauBluePrimary30: "#B3E9FB",
+  +blauBlueSecondary: "#0072BC",
+  +blauBlueSecondary10: "#E5F1F9",
+  +blauBlueSecondary20: "#B2D4EC",
+  +blauBlueSecondary30: "#80B7DF",
+  +blauBlueSecondary60: "#005A99",
+  +blauPurple: "#7814B3",
+  +blauPurple10: "#F1E7F7",
+  +blauPurple30: "#BB89D9",
+  +blauYellow: "#FFA922",
+  +blauYellow10: "#FFF6E9",
+  +blauYellow60: "#F09500",
+  +blauYellow70: "#996614",
+  +blauRed: "#F64417",
+  +blauRed10: "#FEECE8",
+  +blauRed20: "#FCC7B9",
+  +blauRed30: "#FA9E87",
+  +blauRed70: "#C93712",
+  +blauGreen: "#30D300",
+  +blauGreen10: "#EAFBE5",
+  +blauGreen70: "#1D7F00",
+  +grey1: "#F5F9FA",
+  +grey2: "#E7E7E7",
+  +grey3: "#B8B8B8",
+  +grey4: "#A0A0A0",
+  +grey5: "#808285",
+  +grey6: "#000000",
+  +white: "#FFFFFF",
+  +darkModeBlack: "#191919",
+  +darkModeGrey: "#242424",
+};
+declare export var getBlauSkin: GetSkin;

package/dist/skins/constants.d.ts

@@ -3,3 +3,4 @@ export declare const O2_SKIN = "O2";
 export declare const O2_CLASSIC_SKIN = "O2-classic";
 export declare const VIVO_SKIN = "Vivo";
 export declare const TELEFONICA_SKIN = "Telefonica";
+export declare const BLAU_SKIN = "Blau";

package/dist/skins/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TELEFONICA_SKIN = exports.VIVO_SKIN = exports.O2_CLASSIC_SKIN = exports.O2_SKIN = exports.MOVISTAR_SKIN = void 0;
+exports.BLAU_SKIN = exports.TELEFONICA_SKIN = exports.VIVO_SKIN = exports.O2_CLASSIC_SKIN = exports.O2_SKIN = exports.MOVISTAR_SKIN = void 0;
 var MOVISTAR_SKIN = 'Movistar';
 exports.MOVISTAR_SKIN = MOVISTAR_SKIN;
 var O2_SKIN = 'O2';
@@ -13,4 +13,6 @@ exports.O2_CLASSIC_SKIN = O2_CLASSIC_SKIN;
 var VIVO_SKIN = 'Vivo';
 exports.VIVO_SKIN = VIVO_SKIN;
 var TELEFONICA_SKIN = 'Telefonica';
-exports.TELEFONICA_SKIN = TELEFONICA_SKIN;
+exports.TELEFONICA_SKIN = TELEFONICA_SKIN;
+var BLAU_SKIN = 'Blau';
+exports.BLAU_SKIN = BLAU_SKIN;

package/dist/skins/constants.js.flow

@@ -5,3 +5,4 @@ declare export var O2_SKIN: "O2";
 declare export var O2_CLASSIC_SKIN: "O2-classic";
 declare export var VIVO_SKIN: "Vivo";
 declare export var TELEFONICA_SKIN: "Telefonica";
+declare export var BLAU_SKIN: "Blau";

package/dist/skins/telefonica.js

@@ -199,7 +199,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
       textLink: palette.telefonicaBlue,
       textLinkInverse: palette.telefonicaBlue,
       textLinkDisabled: palette.grey6,
-      control: palette.grey6,
+      control: palette.darkModeGrey,
       controlActivated: palette.telefonicaBlue,
       loadingBar: palette.telefonicaBlue,
       loadingBarBackground: (0, _color.applyAlpha)(palette.white, 0.05),

package/dist/skins/types.d.ts

@@ -1,5 +1,5 @@
 export declare type SkinVariant = 'prominent';
-export declare type SkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica';
+export declare type SkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica' | 'Blau';
 export declare type GetSkin = (variant?: SkinVariant) => Skin;
 export declare type Skin = {
     name: SkinName;

package/dist/skins/types.js.flow

@@ -1,7 +1,13 @@
 // @flow
 
 export type SkinVariant = "prominent";
-export type SkinName = "Movistar" | "O2" | "O2-classic" | "Vivo" | "Telefonica";
+export type SkinName =
+  | "Movistar"
+  | "O2"
+  | "O2-classic"
+  | "Vivo"
+  | "Telefonica"
+  | "Blau";
 export type GetSkin = (variant?: SkinVariant) => Skin;
 export type Skin = {
   name: SkinName,

package/dist/skins/utils.js

@@ -7,6 +7,8 @@ exports.getSkinByName = void 0;
 
 var _constants = require("./constants");
 
+var _blau = require("./blau");
+
 var _telefonica = require("./telefonica");
 
 var _vivo = require("./vivo");
@@ -19,6 +21,9 @@ var _movistar = require("./movistar");
 
 var getSkinByName = function getSkinByName(name, variant) {
   switch (name) {
+    case _constants.BLAU_SKIN:
+      return (0, _blau.getBlauSkin)(variant);
+
     case _constants.TELEFONICA_SKIN:
       return (0, _telefonica.getTelefonicaSkin)(variant);
 

package/dist/stepper.js

@@ -135,7 +135,7 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
       height: 4,
       width: '100%',
       margin: '0 8px',
-      background: colors.border,
+      background: colors.control,
       borderRadius: 4,
       overflow: 'hidden',
       '&:last-child': {

package/dist/text-field-base.js

@@ -315,6 +315,10 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       // Chrome: hide value if not valid or focused
       // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
       // be sure to check that case when updating these styles
+      '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+        color: 'transparent',
+        opacity: 0
+      },
       '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
         color: 'transparent',
         opacity: 0
@@ -325,6 +329,9 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       },
       // Firefox: hide value if not valid or focused
       // Only apply when Firefox, otherwise it breaks styles in safari mobile
+      '&[type="month"]:not(:valid):not(:focus)': (0, _platform.isFirefox)() ? {
+        color: 'transparent'
+      } : {},
       '&[type="date"]:not(:valid):not(:focus)': (0, _platform.isFirefox)() ? {
         color: 'transparent'
       } : {},
@@ -439,7 +446,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref
   var hasLabel = !!label || !rest.required; // this shrinkLabel override is a workaround because I was unable to find a way to hide date
   // and date-time native placeholders when the input is not required
 
-  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local') && !rest.required;
+  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local' || rest.type === 'month') && !rest.required;
   var classes = useStyles({
     inputState: inputState,
     error: error,

package/dist/theme.d.ts

@@ -32,6 +32,7 @@ declare const TEXTS_ES: {
     openNavigationMenu: string;
     closeNavigationMenu: string;
     backNavigationBar: string;
+    clearButton: string;
 };
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {

package/dist/theme.js

@@ -96,7 +96,8 @@ var TEXTS_ES = {
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
   closeNavigationMenu: 'Cerrar menú de navegación',
-  backNavigationBar: 'Atrás'
+  backNavigationBar: 'Atrás',
+  clearButton: 'Borrar'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -125,7 +126,8 @@ var TEXTS_EN = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
   closeNavigationMenu: 'Close navigation menu',
-  backNavigationBar: 'Back'
+  backNavigationBar: 'Back',
+  clearButton: 'Clear'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -154,7 +156,8 @@ var TEXTS_DE = {
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
   closeNavigationMenu: 'Navigationsmenü schließen',
-  backNavigationBar: 'Zurück'
+  backNavigationBar: 'Zurück',
+  clearButton: 'Löschen'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -183,7 +186,8 @@ var TEXTS_PT = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
   closeNavigationMenu: 'Fechar menu de navegação',
-  backNavigationBar: 'Voltar'
+  backNavigationBar: 'Voltar',
+  clearButton: 'Apagar'
 };
 
 var getTexts = function getTexts(locale) {

package/dist/theme.js.flow

@@ -34,6 +34,7 @@ declare var TEXTS_ES: {
   openNavigationMenu: string,
   closeNavigationMenu: string,
   backNavigationBar: string,
+  clearButton: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {

package/dist/utils/time.d.ts

@@ -1,2 +1,3 @@
 export declare const getLocalDateString: (date: Date) => string;
+export declare const getLocalYearMonthString: (date: Date) => string;
 export declare const getLocalDateTimeString: (date: Date) => string;

package/dist/utils/time.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLocalDateTimeString = exports.getLocalDateString = void 0;
+exports.getLocalDateTimeString = exports.getLocalYearMonthString = exports.getLocalDateString = void 0;
 
 var getLocalDateString = function getLocalDateString(date) {
   var yyyy = date.getFullYear();
@@ -14,6 +14,14 @@ var getLocalDateString = function getLocalDateString(date) {
 
 exports.getLocalDateString = getLocalDateString;
 
+var getLocalYearMonthString = function getLocalYearMonthString(date) {
+  var yyyy = date.getFullYear();
+  var mm = String(date.getMonth() + 1).padStart(2, '0');
+  return "".concat(yyyy, "-").concat(mm);
+};
+
+exports.getLocalYearMonthString = getLocalYearMonthString;
+
 var getLocalDateTimeString = function getLocalDateTimeString(date) {
   var h = String(date.getHours()).padStart(2, '0');
   var m = String(date.getMinutes()).padStart(2, '0');

package/dist/utils/time.js.flow

@@ -1,4 +1,5 @@
 // @flow
 
 declare export var getLocalDateString: (date: Date) => string;
+declare export var getLocalYearMonthString: (date: Date) => string;
 declare export var getLocalDateTimeString: (date: Date) => string;

package/dist-es/button-group.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { createUseStyles } from './jss';
+import classNames from 'classnames';
+var buttonLayoutSpacing = 16;
+var buttonLinkPadding = 6;
+var useStyles = createUseStyles(function () {
+  return {
+    inline: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center'
+    },
+    container: {
+      marginTop: -buttonLayoutSpacing,
+      marginLeft: -buttonLayoutSpacing - buttonLinkPadding
+    },
+    buttons: {
+      marginLeft: buttonLinkPadding,
+      '& > div': {
+        marginTop: buttonLayoutSpacing,
+        marginLeft: buttonLayoutSpacing
+      }
+    },
+    link: {
+      marginTop: buttonLayoutSpacing,
+      marginLeft: buttonLayoutSpacing,
+      width: function width(_ref) {
+        var bothButtons = _ref.bothButtons;
+        return bothButtons ? '100%' : 'auto';
+      }
+    }
+  };
+});
+
+var ButtonGroup = function ButtonGroup(_ref2) {
+  var primaryButton = _ref2.primaryButton,
+      secondaryButton = _ref2.secondaryButton,
+      link = _ref2.link;
+  var anyAction = !!primaryButton || !!secondaryButton || !!link;
+  var bothButtons = !!primaryButton && !!secondaryButton;
+  var classes = useStyles({
+    bothButtons: bothButtons
+  });
+  return anyAction ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(classes.inline, classes.container)
+  }, (primaryButton || secondaryButton) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(classes.inline, classes.buttons)
+  }, primaryButton && /*#__PURE__*/React.createElement("div", null, primaryButton), secondaryButton && /*#__PURE__*/React.createElement("div", null, secondaryButton)), link && /*#__PURE__*/React.createElement("div", {
+    className: classes.link
+  }, link)) : null;
+};
+
+export default ButtonGroup;

package/dist-es/button.js

@@ -28,7 +28,7 @@ import { useForm } from './form-context';
 import { pxToRem } from './utils/css';
 import { Text, Text2, Text3 } from './text';
 import Box from './box';
-export var BUTTON_MIN_WIDTH = 156;
+export var BUTTON_MIN_WIDTH = 136;
 var transitionTiming = '0.3s cubic-bezier(0.77, 0, 0.175, 1)';
 var BORDER_PX = 1.5;
 var SPINNER_MARGIN_PX = 8;

package/dist-es/callout.js

@@ -9,7 +9,7 @@ import { Text2, Text3 } from './text';
 import IconClose from './icons/icon-close';
 import IconButton from './icon-button';
 import classNames from 'classnames';
-import Inline from './inline';
+import ButtonGroup from './button-group';
 var useStyles = createUseStyles(function (_ref) {
   var colors = _ref.colors;
   return {
@@ -34,24 +34,19 @@ var useStyles = createUseStyles(function (_ref) {
     },
     overInverse: {
       background: colors.backgroundContainer
-    },
-    actions: {
-      marginLeft: function marginLeft(_ref2) {
-        var needsButtonLinkAlignment = _ref2.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      }
     }
   };
 });
 
-var Callout = function Callout(_ref3) {
-  var title = _ref3.title,
-      description = _ref3.description,
-      icon = _ref3.icon,
-      onClose = _ref3.onClose,
-      button = _ref3.button,
-      buttonLink = _ref3.buttonLink,
-      ariaLabel = _ref3['aria-label'];
+var Callout = function Callout(_ref2) {
+  var title = _ref2.title,
+      description = _ref2.description,
+      icon = _ref2.icon,
+      onClose = _ref2.onClose,
+      button = _ref2.button,
+      secondaryButton = _ref2.secondaryButton,
+      buttonLink = _ref2.buttonLink,
+      ariaLabel = _ref2['aria-label'];
   var needsButtonLinkAlignment = buttonLink && !button;
   var isInverse = useIsInverseVariant();
   var classes = useStyles({
@@ -80,12 +75,11 @@ var Callout = function Callout(_ref3) {
     as: "p",
     regular: true,
     color: colors.textSecondary
-  }, description)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
-    className: classes.actions
-  }, /*#__PURE__*/React.createElement(Inline, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)))), onClose && /*#__PURE__*/React.createElement(IconButton, {
+  }, description)), (button || secondaryButton || buttonLink) && /*#__PURE__*/React.createElement(ButtonGroup, {
+    primaryButton: button,
+    secondaryButton: secondaryButton,
+    link: buttonLink
+  }))), onClose && /*#__PURE__*/React.createElement(IconButton, {
     size: 40,
     style: {
       display: 'flex',