@telefonica/mistica 10.5.1 → 10.9.0

package/dist/empty-state-card.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { ButtonProps } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
 interface CommonProps {
     title: string;
-    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
-    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     description?: string;
     children?: void;
     'aria-label'?: string;

package/dist/empty-state-card.js

@@ -15,14 +15,14 @@ var _boxed = require("./boxed");
 
 var _hooks = require("./hooks");
 
-var _inline = _interopRequireDefault(require("./inline"));
-
 var _jss = require("./jss");
 
 var _stack = _interopRequireDefault(require("./stack"));
 
 var _text = require("./text");
 
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
+
 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); }
@@ -61,27 +61,22 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
     }, theme.mq.tabletOrSmaller, {
       width: 64,
       height: 64
-    }),
-    actions: {
-      marginLeft: function marginLeft(_ref) {
-        var needsButtonLinkAlignment = _ref.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      }
-    }
+    })
   };
 });
 
-var EmptyStateCard = function EmptyStateCard(_ref2) {
+var EmptyStateCard = function EmptyStateCard(_ref) {
   var _button$props, _image2;
 
-  var title = _ref2.title,
-      description = _ref2.description,
-      button = _ref2.button,
-      buttonLink = _ref2.buttonLink,
-      icon = _ref2.icon,
-      imageUrl = _ref2.imageUrl,
-      ariaLabel = _ref2['aria-label'],
-      dataAttributes = _ref2.dataAttributes;
+  var title = _ref.title,
+      description = _ref.description,
+      button = _ref.button,
+      secondaryButton = _ref.secondaryButton,
+      buttonLink = _ref.buttonLink,
+      icon = _ref.icon,
+      imageUrl = _ref.imageUrl,
+      ariaLabel = _ref['aria-label'],
+      dataAttributes = _ref.dataAttributes;
 
   var _useTheme = (0, _hooks.useTheme)(),
       colors = _useTheme.colors;
@@ -127,12 +122,11 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
   }, title), /*#__PURE__*/React.createElement(_text.Text2, {
     regular: true,
     color: colors.textSecondary
-  }, description))), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
-    className: classes.actions
-  }, /*#__PURE__*/React.createElement(_inline.default, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink))))));
+  }, description))), (button || secondaryButton || buttonLink) && /*#__PURE__*/React.createElement(_buttonGroup.default, {
+    primaryButton: button,
+    secondaryButton: secondaryButton,
+    link: buttonLink
+  })))));
 };
 
 var _default = EmptyStateCard;

package/dist/empty-state-card.js.flow

@@ -5,9 +5,8 @@ import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
 import type { DataAttributes } from "./utils/types";
 declare type CommonProps = {|
   title: string,
-  button?:
-    | React.Element<typeof ButtonPrimary>
-    | React.Element<typeof ButtonSecondary>,
+  button?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
   buttonLink?: React.Element<typeof ButtonLink>,
   description?: string,
   "aria-label"?: string,

package/dist/empty-state.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from './button';
+import { ButtonPrimary, ButtonSecondary, ButtonLink, ButtonLinkProps } from './button';
 import type { ButtonProps } from './button';
 import type { DataAttributes } from './utils/types';
 interface BaseProps {
     title: string;
     button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
-    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     description?: string;
     children?: void;
     'aria-label'?: string;

package/dist/empty-state.js

@@ -13,6 +13,8 @@ var _box = _interopRequireDefault(require("./box"));
 
 var _boxed = require("./boxed");
 
+var _button = require("./button");
+
 var _hooks = require("./hooks");
 
 var _stack = _interopRequireDefault(require("./stack"));
@@ -21,7 +23,7 @@ var _text = require("./text");
 
 var _jss = require("./jss");
 
-var _inline = _interopRequireDefault(require("./inline"));
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
 
 var _dom = require("./utils/dom");
 
@@ -49,6 +51,44 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -151,6 +191,14 @@ var EmptyState = function EmptyState(_ref2) {
     });
   }
 
+  var buttons = _objectSpread({}, (button === null || button === void 0 ? void 0 : button.type) === _button.ButtonPrimary ? {
+    primaryButton: button
+  } : {
+    secondaryButton: button
+  });
+
+  buttons.link = buttonLink;
+
   if (isTabletOrSmaller) {
     var _ref3, _largeImage;
 
@@ -169,10 +217,7 @@ var EmptyState = function EmptyState(_ref2) {
       light: true,
       as: "p",
       color: colors.textSecondary
-    }, description)), button && /*#__PURE__*/React.createElement(_inline.default, {
-      space: 16,
-      alignItems: "center"
-    }, button, buttonLink)));
+    }, description)), button && /*#__PURE__*/React.createElement(_buttonGroup.default, buttons)));
   }
 
   return /*#__PURE__*/React.createElement(_boxed.Boxed, {
@@ -195,10 +240,7 @@ var EmptyState = function EmptyState(_ref2) {
     light: true,
     as: "p",
     color: colors.textSecondary
-  }, description)), button && /*#__PURE__*/React.createElement(_inline.default, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)))), largeImageUrl && /*#__PURE__*/React.createElement("div", {
+  }, description)), button && /*#__PURE__*/React.createElement(_buttonGroup.default, buttons)))), largeImageUrl && /*#__PURE__*/React.createElement("div", {
     className: classes.desktopImage
   })));
 };

package/dist/feedback.d.ts

@@ -1,13 +1,8 @@
 import * as React from 'react';
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from './button';
-import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
+import type { ButtonGroupProps } from './button-group';
 declare type HapticFeedback = 'error' | 'success';
-declare type FeedbackButtonsProps = {
-    primaryButton?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
-    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
-    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
-};
+declare type FeedbackButtonsProps = ButtonGroupProps;
 interface FeedbackProps extends FeedbackButtonsProps {
     title: string;
     description?: string | Array<string>;

package/dist/feedback.js

@@ -45,6 +45,8 @@ var _stack = _interopRequireDefault(require("./stack"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
+
 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); }
@@ -155,7 +157,6 @@ var checkHasButtons = function checkHasButtons(_ref) {
   return !!primaryButton || !!secondaryButton;
 };
 
-var buttonLayoutSpacing = 16;
 var useStyles = (0, _jss.createUseStyles)(function (theme) {
   return {
     background: {
@@ -240,18 +241,6 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       transitionDelay: '0.6s',
       opacity: 1,
       transform: 'translate(0, 0)'
-    },
-    buttonsContainer: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      flexWrap: 'wrap',
-      margin: -buttonLayoutSpacing / 2,
-      '& > *': {
-        margin: buttonLayoutSpacing / 2
-      }
-    },
-    link: {
-      width: '100%'
     }
   };
 });
@@ -332,30 +321,19 @@ var renderFeedbackBody = function renderFeedbackBody(_ref9, animateText, appear,
   }, normalizedDescription), children));
 };
 
-var renderInlineFeedbackBody = function renderInlineFeedbackBody(feedbackBody, _ref10, classes) {
-  var primaryButton = _ref10.primaryButton,
-      secondaryButton = _ref10.secondaryButton,
-      link = _ref10.link;
-  var hasButtons = checkHasButtons({
-    primaryButton: primaryButton,
-    secondaryButton: secondaryButton,
-    link: link
-  });
+var renderInlineFeedbackBody = function renderInlineFeedbackBody(feedbackBody, buttons) {
+  var hasButtons = checkHasButtons(buttons);
   return /*#__PURE__*/React.createElement(_stack.default, {
     space: 24
-  }, feedbackBody, hasButtons && /*#__PURE__*/React.createElement("div", {
-    className: classes.buttonsContainer
-  }, primaryButton, secondaryButton, link && /*#__PURE__*/React.createElement("div", {
-    className: classes.link
-  }, link)));
+  }, feedbackBody, hasButtons && /*#__PURE__*/React.createElement(_buttonGroup.default, buttons));
 };
 
-var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref11) {
-  var isInverse = _ref11.isInverse,
-      inlineFeedbackBody = _ref11.inlineFeedbackBody,
-      classes = _ref11.classes,
-      imageUrl = _ref11.imageUrl,
-      dataAttributes = _ref11.dataAttributes;
+var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref10) {
+  var isInverse = _ref10.isInverse,
+      inlineFeedbackBody = _ref10.inlineFeedbackBody,
+      classes = _ref10.classes,
+      imageUrl = _ref10.imageUrl,
+      dataAttributes = _ref10.dataAttributes;
   return /*#__PURE__*/React.createElement(_boxed.Boxed, {
     isInverse: isInverse,
     dataAttributes: dataAttributes
@@ -370,21 +348,21 @@ var renderFeedbackInDesktop = function renderFeedbackInDesktop(_ref11) {
   })));
 };
 
-var FeedbackScreen = function FeedbackScreen(_ref12) {
-  var title = _ref12.title,
-      description = _ref12.description,
-      children = _ref12.children,
-      primaryButton = _ref12.primaryButton,
-      secondaryButton = _ref12.secondaryButton,
-      link = _ref12.link,
-      hapticFeedback = _ref12.hapticFeedback,
-      icon = _ref12.icon,
-      _ref12$animateText = _ref12.animateText,
-      animateText = _ref12$animateText === void 0 ? false : _ref12$animateText,
-      unstable_inlineInDesktop = _ref12.unstable_inlineInDesktop,
-      imageUrl = _ref12.imageUrl,
-      imageFit = _ref12.imageFit,
-      dataAttributes = _ref12.dataAttributes;
+var FeedbackScreen = function FeedbackScreen(_ref11) {
+  var title = _ref11.title,
+      description = _ref11.description,
+      children = _ref11.children,
+      primaryButton = _ref11.primaryButton,
+      secondaryButton = _ref11.secondaryButton,
+      link = _ref11.link,
+      hapticFeedback = _ref11.hapticFeedback,
+      icon = _ref11.icon,
+      _ref11$animateText = _ref11.animateText,
+      animateText = _ref11$animateText === void 0 ? false : _ref11$animateText,
+      unstable_inlineInDesktop = _ref11.unstable_inlineInDesktop,
+      imageUrl = _ref11.imageUrl,
+      imageFit = _ref11.imageFit,
+      dataAttributes = _ref11.dataAttributes;
   useHapticFeedback(hapticFeedback);
   var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
 
@@ -440,7 +418,7 @@ var FeedbackScreen = function FeedbackScreen(_ref12) {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
     link: link
-  }, classes);
+  });
 
   if (!isTabletOrSmaller && unstable_inlineInDesktop) {
     return inlineFeedbackBody;
@@ -524,16 +502,16 @@ var InfoFeedbackScreen = function InfoFeedbackScreen(props) {
 
 exports.InfoFeedbackScreen = InfoFeedbackScreen;
 
-var SuccessFeedback = function SuccessFeedback(_ref13) {
-  var title = _ref13.title,
-      description = _ref13.description,
-      children = _ref13.children,
-      primaryButton = _ref13.primaryButton,
-      secondaryButton = _ref13.secondaryButton,
-      link = _ref13.link,
-      imageUrl = _ref13.imageUrl,
-      imageFit = _ref13.imageFit,
-      dataAttributes = _ref13.dataAttributes;
+var SuccessFeedback = function SuccessFeedback(_ref12) {
+  var title = _ref12.title,
+      description = _ref12.description,
+      children = _ref12.children,
+      primaryButton = _ref12.primaryButton,
+      secondaryButton = _ref12.secondaryButton,
+      link = _ref12.link,
+      imageUrl = _ref12.imageUrl,
+      imageFit = _ref12.imageFit,
+      dataAttributes = _ref12.dataAttributes;
   useHapticFeedback('success');
 
   var _useScreenSize3 = (0, _hooks.useScreenSize)(),
@@ -569,7 +547,7 @@ var SuccessFeedback = function SuccessFeedback(_ref13) {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
     link: link
-  }, classes);
+  });
   return /*#__PURE__*/React.createElement(_themeVariantContext.ThemeVariant, {
     isInverse: true
   }, isTabletOrSmaller ? /*#__PURE__*/React.createElement(_responsiveLayout.default, {

package/dist/feedback.js.flow

@@ -1,14 +1,10 @@
 // @flow
 
 import * as React from "react";
-import { ButtonPrimary, ButtonSecondary, ButtonLink } from "./button";
 import type { DataAttributes } from "./utils/types";
+import type { ButtonGroupProps } from "./button-group";
 declare type HapticFeedback = "error" | "success";
-declare type FeedbackButtonsProps = {
-  primaryButton?: React.Element<typeof ButtonPrimary>,
-  secondaryButton?: React.Element<typeof ButtonSecondary>,
-  link?: React.Element<typeof ButtonLink>,
-};
+declare type FeedbackButtonsProps = ButtonGroupProps;
 declare type FeedbackProps = {|
   ...$Exact<FeedbackButtonsProps>,
 

package/dist/header.js

@@ -27,7 +27,7 @@ var _overscrollColorContext = _interopRequireDefault(require("./overscroll-color
 
 var _text = require("./text");
 
-var _buttonLayout = _interopRequireDefault(require("./button-layout"));
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -91,46 +91,15 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var useButtonLayoutStyles = (0, _jss.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.default, {
-    space: 16
-  }, React.Children.toArray(children).filter(Boolean).map(function (button, idx) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: idx,
-      className: classes.button
-    }, button);
-  })));
-};
-
-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;
+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 = (0, _hooks.useScreenSize)(),
       isTabletOrSmaller = _useScreenSize.isTabletOrSmaller;
@@ -155,14 +124,16 @@ var Header = function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(_stack.default, {
     space: isTabletOrSmaller ? 24 : 32
-  }, (title || pretitle) && /*#__PURE__*/React.createElement(_stack.default, {
+  }, (title || pretitle) && /*#__PURE__*/React.createElement(_box.default, {
+    paddingRight: 16
+  }, /*#__PURE__*/React.createElement(_stack.default, {
     space: 8
   }, pretitle && renderRichText(pretitle, {
     color: theme.colors.textPrimary
   }), /*#__PURE__*/React.createElement(_text.Text6, {
     role: "heading",
     "aria-level": 2
-  }, title)), (preamount || amount || button || subtitle) && /*#__PURE__*/React.createElement(_stack.default, {
+  }, title))), (preamount || amount || button || subtitle) && /*#__PURE__*/React.createElement(_stack.default, {
     space: 16
   }, (preamount || amount) && /*#__PURE__*/React.createElement(_stack.default, {
     space: 8
@@ -170,17 +141,18 @@ var Header = function Header(_ref2) {
     color: theme.colors.textPrimary
   }), /*#__PURE__*/React.createElement(_text.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.default, {
-    align: "left"
-  }, button, secondaryButton)), subtitle && renderRichText(subtitle, {})));
+  }, amount)), (button || secondaryButton) && /*#__PURE__*/React.createElement(_buttonGroup.default, {
+    primaryButton: button,
+    secondaryButton: secondaryButton
+  }), subtitle && renderRichText(subtitle, {})));
 };
 
 exports.Header = Header;
 
-var MainSectionHeader = function MainSectionHeader(_ref3) {
-  var title = _ref3.title,
-      description = _ref3.description,
-      button = _ref3.button;
+var MainSectionHeader = function MainSectionHeader(_ref2) {
+  var title = _ref2.title,
+      description = _ref2.description,
+      button = _ref2.button;
 
   var _useScreenSize2 = (0, _hooks.useScreenSize)(),
       isTabletOrSmaller = _useScreenSize2.isTabletOrSmaller;
@@ -199,8 +171,8 @@ exports.MainSectionHeader = MainSectionHeader;
 var useHeaderLayoutStyles = (0, _jss.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';
       }
     },
@@ -210,14 +182,14 @@ var useHeaderLayoutStyles = (0, _jss.createUseStyles)(function (theme) {
   };
 });
 
-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;
+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
   });
@@ -234,9 +206,7 @@ var HeaderLayout = function HeaderLayout(_ref5) {
     paddingBottom: 24
   }, /*#__PURE__*/React.createElement(_stack.default, {
     space: 24
-  }, /*#__PURE__*/React.createElement(_box.default, {
-    paddingRight: 16
-  }, header), extra)) : sideBySideExtraOnDesktop ? /*#__PURE__*/React.createElement(_box.default, {
+  }, header, extra)) : sideBySideExtraOnDesktop ? /*#__PURE__*/React.createElement(_box.default, {
     paddingTop: breadcrumbs ? 16 : 48,
     paddingBottom: 48
   }, /*#__PURE__*/React.createElement(_gridLayout.default, null, /*#__PURE__*/React.createElement("div", {
@@ -259,10 +229,10 @@ var HeaderLayout = function HeaderLayout(_ref5) {
 
 exports.HeaderLayout = HeaderLayout;
 
-var MainSectionHeaderLayout = function MainSectionHeaderLayout(_ref6) {
-  var _ref6$isInverse = _ref6.isInverse,
-      isInverse = _ref6$isInverse === void 0 ? true : _ref6$isInverse,
-      children = _ref6.children;
+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/index.d.ts

@@ -66,6 +66,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';
@@ -85,18 +86,20 @@ export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize
 export type { ThemeConfig, ColorScheme } from './theme';
 export { ThemeVariant, useIsInverseVariant } from './theme-variant-context';
 export type { Skin, SkinName } from './skins/types';
-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';
 export type { Locale } from './utils/locale';
 export type { TrackingEvent } from './utils/types';
 export type { RegionCode } from './utils/region-code';