@telefonica/mistica 9.17.0 → 10.2.0

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+# [10.2.0](https://github.com/Telefonica/mistica-web/compare/v10.1.0...v10.2.0) (2021-09-21)
+
+
+### Bug Fixes
+
+* **form fields:** change disabled color ([#334](https://github.com/Telefonica/mistica-web/issues/334)) ([fdb9f89](https://github.com/Telefonica/mistica-web/commit/fdb9f890677d4fb5e5d6d1a6980efe6287e4d533))
+* **PasswordField:** keep caret position when switching visibility ([#339](https://github.com/Telefonica/mistica-web/issues/339)) ([6d4b67b](https://github.com/Telefonica/mistica-web/commit/6d4b67b3bbfa935936fb456fa97d760af4522b0c))
+* **snippets:** wrong icon prop in Callout ([#337](https://github.com/Telefonica/mistica-web/issues/337)) ([a974a12](https://github.com/Telefonica/mistica-web/commit/a974a128107f7ce46ab9379ebe7155da160f0efc))
+
+
+### Features
+
+* **mq.suportsHover:** include mq for devices that support hover ([#341](https://github.com/Telefonica/mistica-web/issues/341)) ([b6b6389](https://github.com/Telefonica/mistica-web/commit/b6b638965b2253bd813ff42af4ef596949c59120))
+
+# [10.1.0](https://github.com/Telefonica/mistica-web/compare/v10.0.1...v10.1.0) (2021-09-15)
+
+
+### Bug Fixes
+
+* **NavigationBarActionGroup:** add missing children prop type ([#333](https://github.com/Telefonica/mistica-web/issues/333)) ([a6d1a79](https://github.com/Telefonica/mistica-web/commit/a6d1a79f7a6e9146aaa9fb83634ae8d69f2b50c4))
+* **Select, TextField:** fix label text overflow ([#335](https://github.com/Telefonica/mistica-web/issues/335)) ([2e647b4](https://github.com/Telefonica/mistica-web/commit/2e647b4301f1ace758656c40f9793150bcf19c2e))
+* **types:** review wrong usages of TS React.ReactElement ([#332](https://github.com/Telefonica/mistica-web/issues/332)) ([9ea483f](https://github.com/Telefonica/mistica-web/commit/9ea483f26b0d070fc5237949dba4f2acd68185ff))
+
+
+### Features
+
+* **NavigationBar:** allow custom paddingX when not fixed ([#336](https://github.com/Telefonica/mistica-web/issues/336)) ([b09c6dc](https://github.com/Telefonica/mistica-web/commit/b09c6dc03a8e71c2eb16684c399cc16b55c61513))
+
+## [10.0.1](https://github.com/Telefonica/mistica-web/compare/v10.0.0...v10.0.1) (2021-09-07)
+
+
+### Bug Fixes
+
+* **TextLink:** add missing dataAttributes to Props type ([#331](https://github.com/Telefonica/mistica-web/issues/331)) ([666cbeb](https://github.com/Telefonica/mistica-web/commit/666cbeb694ceb01a9611c55d6372401c4585be37))
+
+# [10.0.0](https://github.com/Telefonica/mistica-web/compare/v9.17.0...v10.0.0) (2021-09-07)
+
+
+### Bug Fixes
+
+* **snippets:** change some deprecated icons ([70286a0](https://github.com/Telefonica/mistica-web/commit/70286a0459bf947b7881f6b12267379595d6dfa1))
+
+
+### Features
+
+* **deprecate:** remove deprecated props and icons ([#326](https://github.com/Telefonica/mistica-web/issues/326)) ([b06894e](https://github.com/Telefonica/mistica-web/commit/b06894ef241de7324e4cc9958c01c23dcdf03a52))
+* **EmptyState:** new component ([f367dfd](https://github.com/Telefonica/mistica-web/commit/f367dfdbe46acb8339ba9c097cd37ab6d76cb423))
+* **FocusTrap:** allow focus trap to work cross Portals ([#327](https://github.com/Telefonica/mistica-web/issues/327)) ([d07e409](https://github.com/Telefonica/mistica-web/commit/d07e4097dde542b49d8889b2400f28cc88f9455a))
+* **GridLayout:** add 5+4 and remove 6+4 template ([#328](https://github.com/Telefonica/mistica-web/issues/328)) ([ab3f0b0](https://github.com/Telefonica/mistica-web/commit/ab3f0b051260745f55acbb66b25e97d5eea692c6))
+* **icons:** allow icons size prop to be a string ('100%' for example) ([444d4a9](https://github.com/Telefonica/mistica-web/commit/444d4a91a88dd8d8defded0c356d6106f69daf5d))
+* **NavigationBar:** new navigation bar components ([6ccbcac](https://github.com/Telefonica/mistica-web/commit/6ccbcac64d7992741aa4676d2cd7839879aac8bb))
+* **Playroom:** add forceDesktop prop to PreviewTools ([#330](https://github.com/Telefonica/mistica-web/issues/330)) ([e70db3e](https://github.com/Telefonica/mistica-web/commit/e70db3ec3266b39032b9505cdf5cca07412536f8))
+
+
+### BREAKING CHANGES
+
+* **EmptyState:** remove EmptyStateScreen component
+* **GridLayout:** removed 6+4 template from GridLayout
+* **deprecate:** Removed data-xxx props. Removed IconButton label prop (use aria-label instead). Removed deprecated icons. Removed some other deprecated stuff
+* **FocusTrap:** removed clickOutsideDeactivates feature from FocusTrap
+
 # [9.17.0](https://github.com/Telefonica/mistica-web/compare/v9.16.1...v9.17.0) (2021-09-03)
 
 

package/dist/box.d.ts

@@ -13,8 +13,6 @@ declare type Props = {
     children?: React.ReactNode;
     className?: string;
     role?: string;
-    'data-testid'?: string;
-    'data-qsysid'?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-label'?: string;

package/dist/box.js

@@ -65,18 +65,13 @@ var Box = function Box(_ref) {
       _ref$paddingRight = _ref.paddingRight,
       paddingRight = _ref$paddingRight === void 0 ? paddingX : _ref$paddingRight,
       role = _ref.role,
-      dataTestId = _ref['data-testid'],
-      dataQsysId = _ref['data-qsysid'],
       dataAttributes = _ref.dataAttributes,
       ariaLabel = _ref['aria-label'];
   var classes = useStyles({
     padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
     width: width
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    "data-testid": dataTestId,
-    "data-qsysid": dataQsysId
-  }, (0, _dom.getPrefixedDataAttributes)(dataAttributes), {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (0, _dom.getPrefixedDataAttributes)(dataAttributes), {
     className: (0, _classnames.default)(className, classes.box),
     role: role,
     "aria-label": ariaLabel

package/dist/box.js.flow

@@ -29,8 +29,6 @@ declare type Props = {
   children?: React.Node,
   className?: string,
   role?: string,
-  "data-testid"?: string,
-  "data-qsysid"?: string,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"

package/dist/boxed.d.ts

@@ -5,8 +5,6 @@ declare type Props = {
     isInverse?: boolean;
     className?: string;
     role?: string;
-    'data-testid'?: string;
-    'data-qsysid'?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-label'?: string;

package/dist/boxed.js

@@ -76,8 +76,6 @@ var Boxed = function Boxed(_ref4) {
       isInverseInside = _ref4$isInverse === void 0 ? false : _ref4$isInverse,
       className = _ref4.className,
       role = _ref4.role,
-      dataTestId = _ref4['data-testid'],
-      dataQsysId = _ref4['data-qsysid'],
       dataAttributes = _ref4.dataAttributes,
       ariaLabel = _ref4['aria-label'];
   var isInverseOutside = (0, _themeVariantContext.useIsInverseVariant)();
@@ -87,9 +85,7 @@ var Boxed = function Boxed(_ref4) {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     className: (0, _classnames.default)(className, classes.boxed),
-    role: role,
-    "data-testid": dataTestId,
-    "data-qsysid": dataQsysId
+    role: role
   }, (0, _dom.getPrefixedDataAttributes)(dataAttributes), {
     "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement(_themeVariantContext.ThemeVariant, {

package/dist/boxed.js.flow

@@ -7,8 +7,6 @@ declare type Props = {
   isInverse?: boolean,
   className?: string,
   role?: string,
-  "data-testid"?: string,
-  "data-qsysid"?: string,
 
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"

package/dist/button-fixed-footer-layout.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { ButtonElement } from './button';
+import type { ButtonElement, ButtonLinkProps } from './button';
 declare type Props = {
     isFooterVisible?: boolean;
     button?: ButtonElement;
     desktopButtonAlign?: 'left' | 'center';
     secondaryButton?: ButtonElement;
-    link?: React.ReactElement<typeof ButtonLink>;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     footerBgColor?: string;
     containerBgColor?: string;
     children: React.ReactNode;

package/dist/button-layout.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { ButtonElement } from './button';
+import type { ButtonElement, ButtonLinkProps } from './button';
 declare type MaybeButtonElement = ButtonElement | void | false;
 declare type ButtonLayoutProps = {
     children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement];
     align?: 'center' | 'left' | 'right' | 'full-width';
-    link?: React.ReactElement<typeof ButtonLink> | null;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink> | null;
     withMargins?: boolean;
 };
 declare const ButtonLayout: React.FC<ButtonLayoutProps>;

package/dist/button.d.ts

@@ -11,8 +11,6 @@ interface CommonProps {
     loadingText?: string;
     disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    /** @deprecated use dataAttributes */
-    'data-testid'?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     'aria-controls'?: string;
@@ -60,8 +58,6 @@ export declare type ButtonProps = FakeButtonProps | SubmitButtonProps | ToButton
 interface ButtonLinkCommonProps {
     children: React.ReactNode;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    /** @deprecated use dataAttributes */
-    'data-testid'?: string;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
     aligned?: boolean;
@@ -88,5 +84,5 @@ export declare const ButtonLink: React.FC<ButtonLinkProps>;
 export declare const ButtonPrimary: React.FC<ButtonProps>;
 export declare const ButtonSecondary: React.FC<ButtonProps>;
 export declare const ButtonDanger: React.FC<ButtonProps>;
-export declare type ButtonElement = React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary> | React.ReactElement<typeof ButtonDanger>;
+export declare type ButtonElement = React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary> | React.ReactElement<ButtonProps, typeof ButtonDanger>;
 export {};

package/dist/button.js

@@ -423,7 +423,6 @@ var Button = function Button(props) {
       cursor: props.fake ? 'pointer' : undefined
     }, props.style),
     trackingEvent: props.trackingEvent,
-    'data-testid': props['data-testid'],
     dataAttributes: props.dataAttributes,
     'aria-controls': props['aria-controls'],
     'aria-expanded': props['aria-expanded'],
@@ -554,7 +553,6 @@ var ButtonLink = function ButtonLink(props) {
   var commonProps = {
     className: (0, _classnames3.default)(classes.link, (_classnames2 = {}, _defineProperty(_classnames2, classes.inverse, isInverse), _defineProperty(_classnames2, classes.aligned, props.aligned), _classnames2)),
     trackingEvent: props.trackingEvent,
-    'data-testid': props['data-testid'],
     dataAttributes: props.dataAttributes,
     children: /*#__PURE__*/React.createElement(_text.Text2, {
       medium: true,

package/dist/button.js.flow

@@ -14,11 +14,6 @@ declare type CommonProps = {|
   disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 
-  /**
-   * @deprecated use dataAttributes
-   */
-  "data-testid"?: string,
-
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
    */
@@ -59,11 +54,6 @@ declare type ButtonLinkCommonProps = {|
   children: React.Node,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 
-  /**
-   * @deprecated use dataAttributes
-   */
-  "data-testid"?: string,
-
   /**
    * "data-" prefix is automatically added. For example, use "testid" instead of "data-testid"
    */

package/dist/callout.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 declare type Props = {
     title?: string;
     description: string;
     onClose?: () => void;
-    icon?: React.ReactElement<any>;
-    button?: React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    icon?: React.ReactElement;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
 };

package/dist/callout.js

@@ -132,7 +132,7 @@ var Callout = function Callout(_ref3) {
       justifyContent: 'center'
     },
     onPress: onClose,
-    label: texts.closeButtonLabel
+    "aria-label": texts.closeButtonLabel
   }, /*#__PURE__*/React.createElement(_iconClose.default, {
     color: colors.neutralHigh
   }))));

package/dist/card.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import Tag from './tag';
 import { ButtonLink, ButtonPrimary } from './button';
+import type { ButtonProps, ButtonLinkProps } from './button';
 import type { DataAttributes } from './utils/types';
+import type { TagProps } from './tag';
 declare type CardMedia = {
     src: string;
     aspectRatio: number;
@@ -17,13 +19,13 @@ declare type CardMedia = {
 };
 declare type MediaCardProps = {
     media: CardMedia;
-    headline?: string | React.ReactElement<typeof Tag>;
+    headline?: string | React.ReactElement<TagProps, typeof Tag>;
     pretitle?: string;
     title?: string;
     description: string;
-    body?: React.ReactNode;
-    button?: React.ReactElement<typeof ButtonPrimary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    extra?: React.ReactNode;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
 };
@@ -32,16 +34,14 @@ interface DataCardProps {
     /**
      * Typically a mistica-icons component element
      */
-    icon?: React.ReactElement<any>;
-    headline?: string | React.ReactElement<typeof Tag>;
+    icon?: React.ReactElement;
+    headline?: string | React.ReactElement<TagProps, typeof Tag>;
     title: string;
     subtitle?: string;
     description: string;
-    /** @deprecated use extra */
-    body?: React.ReactNode;
     extra?: React.ReactNode;
-    button?: React.ReactElement<typeof ButtonPrimary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;

package/dist/card.js

@@ -52,7 +52,6 @@ var CardContent = function CardContent(_ref2) {
       title = _ref2.title,
       subtitle = _ref2.subtitle,
       description = _ref2.description,
-      body = _ref2.body,
       extra = _ref2.extra,
       button = _ref2.button,
       buttonLink = _ref2.buttonLink;
@@ -96,7 +95,7 @@ var CardContent = function CardContent(_ref2) {
     as: "p",
     regular: true,
     color: theme.colors.textSecondary
-  }, description)), (extra !== null && extra !== void 0 ? extra : body) && /*#__PURE__*/React.createElement("div", null, extra !== null && extra !== void 0 ? extra : body)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
+  }, description)), extra && /*#__PURE__*/React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
     className: classes.actions
   }, /*#__PURE__*/React.createElement(_inline.default, {
     space: 16,
@@ -153,7 +152,7 @@ var MediaCard = function MediaCard(_ref5) {
       pretitle = _ref5.pretitle,
       title = _ref5.title,
       description = _ref5.description,
-      body = _ref5.body,
+      extra = _ref5.extra,
       button = _ref5.button,
       buttonLink = _ref5.buttonLink,
       ariaLabel = _ref5['aria-label'];
@@ -174,7 +173,7 @@ var MediaCard = function MediaCard(_ref5) {
     pretitle: pretitle,
     title: title,
     description: description,
-    body: body,
+    extra: extra,
     button: button,
     buttonLink: buttonLink
   }))));
@@ -201,7 +200,6 @@ var DataCard = function DataCard(_ref6) {
       title = _ref6.title,
       subtitle = _ref6.subtitle,
       description = _ref6.description,
-      body = _ref6.body,
       extra = _ref6.extra,
       button = _ref6.button,
       buttonLink = _ref6.buttonLink,
@@ -221,7 +219,7 @@ var DataCard = function DataCard(_ref6) {
     title: title,
     subtitle: subtitle,
     description: description,
-    extra: extra !== null && extra !== void 0 ? extra : body,
+    extra: extra,
     button: button,
     buttonLink: buttonLink
   })));

package/dist/card.js.flow

@@ -20,7 +20,7 @@ declare type MediaCardProps = {
   pretitle?: string,
   title?: string,
   description: string,
-  body?: React.Node,
+  extra?: React.Node,
   button?: React.Element<typeof ButtonPrimary>,
   buttonLink?: React.Element<typeof ButtonLink>,
   "aria-label"?: string,
@@ -35,10 +35,6 @@ declare type DataCardProps = {|
   title: string,
   subtitle?: string,
   description: string,
-  /**
-   * @deprecated use extra
-   */
-  body?: React.Node,
   extra?: React.Node,
   button?: React.Element<typeof ButtonPrimary>,
   buttonLink?: React.Element<typeof ButtonLink>,

package/dist/circle.d.ts

@@ -3,7 +3,7 @@ declare type Props = {
     backgroundColor?: string;
     backgroundImage?: string;
     size?: number | string;
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement;
 };
 declare const Circle: React.FC<Props>;
 export default Circle;

package/dist/date-time-picker.js

@@ -416,7 +416,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     onFocus: onFocus,
     shrinkLabel: !!getValue(),
     endIcon: /*#__PURE__*/React.createElement(_iconButton.default, {
-      label: "",
+      "aria-label": "",
       size: 32,
       onPress: function onPress() {
         return setShowPicker(!showPicker);

package/dist/dialog.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface DialogProps {
     className?: string;
     title?: string;
-    icon?: React.ReactElement<any>;
+    icon?: React.ReactElement;
     message: string;
     cancelText?: string;
     acceptText?: string;

package/dist/dialog.js

@@ -19,7 +19,7 @@ var _portal = require("./portal");
 
 var _focusTrap = _interopRequireDefault(require("./focus-trap"));
 
-var _iconClose = _interopRequireDefault(require("./icons/icon-close"));
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
 
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 
@@ -39,6 +39,8 @@ var _box = _interopRequireDefault(require("./box"));
 
 var _platform = require("./utils/platform");
 
+var _modalContextProvider = require("./modal-context-provider");
+
 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); }
@@ -544,6 +546,17 @@ var ModalDialog = function ModalDialog(props) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [addKeyDownListener, handleKeyDown, props, renderNative, platformOverrides]);
+  var setModalState = (0, _modalContextProvider.useSetModalState)();
+  React.useEffect(function () {
+    setModalState({
+      isModalOpen: true
+    });
+    return function () {
+      setModalState({
+        isModalOpen: false
+      });
+    };
+  }, [setModalState]);
 
   var isClosing = props.isClosing,
       onCloseTransitionEnd = props.onCloseTransitionEnd,
@@ -581,8 +594,8 @@ var ModalDialog = function ModalDialog(props) {
     className: classes.modalCloseButtonContainer
   }, /*#__PURE__*/React.createElement(_iconButton.default, {
     onPress: handleClose,
-    label: (_context$texts$modalC = context.texts.modalClose) !== null && _context$texts$modalC !== void 0 ? _context$texts$modalC : context.texts.closeButtonLabel
-  }, /*#__PURE__*/React.createElement(_iconClose.default, {
+    "aria-label": (_context$texts$modalC = context.texts.modalClose) !== null && _context$texts$modalC !== void 0 ? _context$texts$modalC : context.texts.closeButtonLabel
+  }, /*#__PURE__*/React.createElement(_iconCloseRegular.default, {
     color: context.colors.neutralHigh
   }))), /*#__PURE__*/React.createElement(Dialog, dialogProps)))))));
 };

package/dist/double-field.d.ts

@@ -1,4 +1,14 @@
 import * as React from 'react';
+import CreditCardExpirationField from './credit-card-expiration-field';
+import CvvField from './cvv-field';
+import DateField from './date-field';
+import DecimalField from './decimal-field';
+import EmailField from './email-field';
+import IntegerField from './integer-field';
+import PasswordField from './password-field';
+import PhoneNumberField from './phone-number-field';
+import Select from './select';
+import TextField from './text-field';
 import type { TextFieldProps } from './text-field';
 import type { SelectProps } from './select';
 import type { CvvFieldProps } from './cvv-field';
@@ -9,7 +19,7 @@ import type { DateFieldProps } from './date-field';
 import type { PasswordFieldProps } from './password-field';
 import type { PhoneNumberFieldProps } from './phone-number-field';
 import type { EmailFieldProps } from './email-field';
-declare type Field = React.ReactElement<TextFieldProps> | React.ReactElement<SelectProps> | React.ReactElement<CvvFieldProps> | React.ReactElement<CreditCardExpirationFieldProps> | React.ReactElement<DecimalFieldProps> | React.ReactElement<IntegerFieldProps> | React.ReactElement<DateFieldProps> | React.ReactElement<PhoneNumberFieldProps> | React.ReactElement<PasswordFieldProps> | React.ReactElement<EmailFieldProps>;
+declare type Field = React.ReactElement<TextFieldProps, typeof TextField> | React.ReactElement<SelectProps, typeof Select> | React.ReactElement<CvvFieldProps, typeof CvvField> | React.ReactElement<CreditCardExpirationFieldProps, typeof CreditCardExpirationField> | React.ReactElement<DecimalFieldProps, typeof DecimalField> | React.ReactElement<IntegerFieldProps, typeof IntegerField> | React.ReactElement<DateFieldProps, typeof DateField> | React.ReactElement<PhoneNumberFieldProps, typeof PhoneNumberField> | React.ReactElement<PasswordFieldProps, typeof PasswordField> | React.ReactElement<EmailFieldProps, typeof EmailField>;
 declare type Props = {
     fullWidth?: boolean;
     children: Field | [Field, Field];

package/dist/double-field.js.flow

@@ -1,27 +1,27 @@
 // @flow
 
 import * as React from "react";
-import type { TextFieldProps } from "./text-field";
-import type { SelectProps } from "./select";
-import type { CvvFieldProps } from "./cvv-field";
-import type { CreditCardExpirationFieldProps } from "./credit-card-expiration-field";
-import type { DecimalFieldProps } from "./decimal-field";
-import type { IntegerFieldProps } from "./integer-field";
-import type { DateFieldProps } from "./date-field";
-import type { PasswordFieldProps } from "./password-field";
-import type { PhoneNumberFieldProps } from "./phone-number-field";
-import type { EmailFieldProps } from "./email-field";
+import CreditCardExpirationField from "./credit-card-expiration-field";
+import CvvField from "./cvv-field";
+import DateField from "./date-field";
+import DecimalField from "./decimal-field";
+import EmailField from "./email-field";
+import IntegerField from "./integer-field";
+import PasswordField from "./password-field";
+import PhoneNumberField from "./phone-number-field";
+import Select from "./select";
+import TextField from "./text-field";
 declare type Field =
-  | React.Element<TextFieldProps>
-  | React.Element<SelectProps>
-  | React.Element<CvvFieldProps>
-  | React.Element<CreditCardExpirationFieldProps>
-  | React.Element<DecimalFieldProps>
-  | React.Element<IntegerFieldProps>
-  | React.Element<DateFieldProps>
-  | React.Element<PhoneNumberFieldProps>
-  | React.Element<PasswordFieldProps>
-  | React.Element<EmailFieldProps>;
+  | React.Element<typeof TextField>
+  | React.Element<typeof Select>
+  | React.Element<typeof CvvField>
+  | React.Element<typeof CreditCardExpirationField>
+  | React.Element<typeof DecimalField>
+  | React.Element<typeof IntegerField>
+  | React.Element<typeof DateField>
+  | React.Element<typeof PhoneNumberField>
+  | React.Element<typeof PasswordField>
+  | React.Element<typeof EmailField>;
 declare type Props = {
   fullWidth?: boolean,
   children: Field | [Field, Field],

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { ButtonProps } from './button';
 import type { DataAttributes } from './utils/types';
 interface CommonProps {
     title: string;
-    button?: React.ReactElement<typeof ButtonPrimary> | React.ReactElement<typeof ButtonSecondary>;
-    buttonLink?: React.ReactElement<typeof ButtonLink>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
     description?: string;
     children?: void;
     'aria-label'?: string;
@@ -12,7 +13,7 @@ interface CommonProps {
     dataAttributes?: DataAttributes;
 }
 interface IconProps extends CommonProps {
-    icon: React.ReactElement<any>;
+    icon: React.ReactElement;
     imageUrl?: undefined;
 }
 interface ImageProps extends CommonProps {

package/dist/empty-state-card.js

@@ -50,8 +50,16 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       maxWidth: 392
     }),
     image: _defineProperty({
+      height: 80,
+      display: 'block'
+    }, theme.mq.tabletOrSmaller, {
+      height: 64
+    }),
+    iconContainer: _defineProperty({
+      width: 80,
       height: 80
     }, theme.mq.tabletOrSmaller, {
+      width: 64,
       height: 64
     }),
     actions: {
@@ -64,7 +72,7 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
 });
 
 var EmptyStateCard = function EmptyStateCard(_ref2) {
-  var _image2;
+  var _button$props, _image2;
 
   var title = _ref2.title,
       description = _ref2.description,
@@ -96,6 +104,10 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
     });
   }
 
+  if (process.env.NODE_ENV !== 'production' && !(button !== null && button !== void 0 && (_button$props = button.props) !== null && _button$props !== void 0 && _button$props.small)) {
+    console.error('button property in EmptyStateCard must be a a small Button. Set small prop to true');
+  }
+
   return /*#__PURE__*/React.createElement(_boxed.Boxed, {
     dataAttributes: dataAttributes
   }, /*#__PURE__*/React.createElement(_box.default, {
@@ -106,9 +118,9 @@ var EmptyStateCard = function EmptyStateCard(_ref2) {
     "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement(_stack.default, {
     space: 16
-  }, (_image2 = image) !== null && _image2 !== void 0 ? _image2 : icon, /*#__PURE__*/React.createElement(_box.default, {
-    paddingRight: isTabletOrSmaller ? 48 : 0
-  }, /*#__PURE__*/React.createElement(_stack.default, {
+  }, (_image2 = image) !== null && _image2 !== void 0 ? _image2 : icon && /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, icon), /*#__PURE__*/React.createElement(_box.default, null, /*#__PURE__*/React.createElement(_stack.default, {
     space: 8
   }, /*#__PURE__*/React.createElement(_text.Text4, {
     regular: true