@telefonica/mistica 10.22.1 → 10.24.0

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [10.24.0](https://github.com/Telefonica/mistica-web/compare/v10.23.0...v10.24.0) (2022-02-15)
+
+
+### Bug Fixes
+
+* **Card:** spacing between headline and title ([#405](https://github.com/Telefonica/mistica-web/issues/405)) ([2baeb82](https://github.com/Telefonica/mistica-web/commit/2baeb829468ff0fb5181c1b475a6464123eace45))
+* **Dialog:** remove unstable_disableHistoryUpdateInDialogs ([#415](https://github.com/Telefonica/mistica-web/issues/415)) ([bc8da4b](https://github.com/Telefonica/mistica-web/commit/bc8da4bda217134a9c02ab7538268ecc5b2f6b51))
+* **FormFields:** helper text spacing ([#411](https://github.com/Telefonica/mistica-web/issues/411)) ([97111a7](https://github.com/Telefonica/mistica-web/commit/97111a7654aeb5cb1d246065523cedecba721071))
+* **Playroom:** bug with modals when using PreviewTools ([#416](https://github.com/Telefonica/mistica-web/issues/416)) ([1ccf9b1](https://github.com/Telefonica/mistica-web/commit/1ccf9b116d90cc1e8db0e9572222eb2d3b6c7e69))
+* **skins:** cleanup disabled colors in Telefonica skin ([#406](https://github.com/Telefonica/mistica-web/issues/406)) ([8cde8e5](https://github.com/Telefonica/mistica-web/commit/8cde8e5a696bd33b43b14c221211b890da8b36d5))
+* **Tag,Chip:** fix vertical alignment ([2309a24](https://github.com/Telefonica/mistica-web/commit/2309a2452461fb05004f8ae1114a0e32811a4037))
+
+
+### Features
+
+* **Carousel:** new components ([#403](https://github.com/Telefonica/mistica-web/issues/403)) ([613b19c](https://github.com/Telefonica/mistica-web/commit/613b19cd9abbc2a7012fd30087eb2f1d834bcf42))
+* **Feedback:** change icons for O2 ([#402](https://github.com/Telefonica/mistica-web/issues/402)) ([e6b84ae](https://github.com/Telefonica/mistica-web/commit/e6b84ae3c1eb3531bb9ca260e28a1e21767a2177))
+* **types:** better Flow types for ReactElement ([#413](https://github.com/Telefonica/mistica-web/issues/413)) ([3db84c0](https://github.com/Telefonica/mistica-web/commit/3db84c080c7d3786c707d9366b2d7e643752fa70))
+* **Video, Image:** support 4:3 aspect ratio ([#417](https://github.com/Telefonica/mistica-web/issues/417)) ([81ff230](https://github.com/Telefonica/mistica-web/commit/81ff230f0e9f81422af34c499b35e4307f2412fc))
+
+# [10.23.0](https://github.com/Telefonica/mistica-web/compare/v10.22.3...v10.23.0) (2022-02-10)
+
+
+### Features
+
+* **Dialog:** allow disable history update in dialogs ([#412](https://github.com/Telefonica/mistica-web/issues/412)) ([178bc55](https://github.com/Telefonica/mistica-web/commit/178bc55abc19f0d9117d0a51bbcb5a8a2353f68e))
+
+## [10.22.3](https://github.com/Telefonica/mistica-web/compare/v10.22.2...v10.22.3) (2022-02-08)
+
+
+### Bug Fixes
+
+* **Form:** handle undefined rawValue ([#410](https://github.com/Telefonica/mistica-web/issues/410)) ([6363328](https://github.com/Telefonica/mistica-web/commit/63633288d1a9a1781b9bf350c4923af101a72312))
+
+## [10.22.2](https://github.com/Telefonica/mistica-web/compare/v10.22.1...v10.22.2) (2022-02-07)
+
+
+### Bug Fixes
+
+* **Select:** set rawValue on init ([#409](https://github.com/Telefonica/mistica-web/issues/409)) ([d72cbd1](https://github.com/Telefonica/mistica-web/commit/d72cbd179e930712ef54c5e483e08c922a857059))
+
 ## [10.22.1](https://github.com/Telefonica/mistica-web/compare/v10.22.0...v10.22.1) (2022-02-03)
 
 

package/README.md

@@ -61,10 +61,13 @@ const App = () => (
   </Form>
 );
 
+const misticaTheme = {
+  skin: getMovistarSkin(),
+  i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
+};
+
 ReactDOM.render(
-  <ThemeContextProvider
-    theme={{skin: getMovistarSkin(), i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'}}}
-  >
+  <ThemeContextProvider theme={misticaTheme}>
     <App />
   </ThemeContextProvider>,
   document.getElementById('app')
@@ -75,6 +78,11 @@ The `theme` prop in `ThemeContextProvider` is **mandatory**, and you can use it
 the library. There are multiple settings but the only two mandatory fields are `skin` and `i18n`. Read the
 [theme config doc](https://github.com/Telefonica/mistica-web/blob/master/doc/theme-config.md) for more info.
 
+:warning: Usually, the `theme` object is constant and won't need to change dynamically in your application, in
+that case we recommend to extract it to an external `const` variable outside of the component, this way the
+object reference will be the same in every re-render. If for some reason the `theme` must be dynamic in your
+app, consider to memoize it (for example, with `React.useMemo` hook).
+
 ## Components
 
 Explore the components in [Mistica storybook](https://mistica-web.vercel.app)

package/dist/aria-id-getter-context.js

@@ -8,13 +8,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {

package/dist/badge.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _jss = require("./jss");
 function _interopRequireDefault(obj) {
@@ -11,6 +12,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -92,8 +114,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 role: "presentation",
                 "aria-hidden": "true" // otherwise OSX VoiceOver reads this number
                 ,
-                className: (0, _classnames).default(classes.badge, classes.badgeNumber, _defineProperty({
-                }, classes.badgeBigNumber, value > 9)),
+                className: (0, _classnames).default(classes.badge, classes.badgeNumber, _defineProperty({}, classes.badgeBigNumber, value > 9)),
                 children: value > 9 ? '+9' : value
             }) : /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.badge

package/dist/box.js

@@ -17,13 +17,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -51,8 +49,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -84,8 +81,7 @@ var Box = /*#__PURE__*/ React.forwardRef(function(param, ref) {
         padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
         width: width
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({}, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         className: (0, _classnames).default(className, classes.box),
         role: role,
         "aria-label": ariaLabel,

package/dist/boxed.js

@@ -18,13 +18,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -52,8 +50,7 @@ function _defineProperty(obj, key, value) {
 }
 function _objectSpread(target) {
     var _arguments = arguments, _loop = function(i) {
-        var source = _arguments[i] != null ? _arguments[i] : {
-        };
+        var source = _arguments[i] != null ? _arguments[i] : {};
         var ownKeys = Object.keys(source);
         if (typeof Object.getOwnPropertySymbols === "function") {
             ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
@@ -67,8 +64,8 @@ function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++)_loop(i);
     return target;
 }
-var useStyles = (0, _jss).createUseStyles(function(param) {
-    var colors = param.colors, isDarkMode = param.isDarkMode;
+var useStyles = (0, _jss).createUseStyles(function(param1) {
+    var colors = param1.colors, isDarkMode = param1.isDarkMode;
     return {
         boxed: {
             background: function background(param) {

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

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

package/dist/button-fixed-footer-layout.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _fixedFooterLayout = _interopRequireDefault(require("./fixed-footer-layout"));
 var _buttonLayout = _interopRequireDefault(require("./button-layout"));
 var _hooks = require("./hooks");
@@ -14,6 +15,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 var ButtonFixedFooterLayout = function ButtonFixedFooterLayout(param) {
     var _isFooterVisible = param.isFooterVisible, isFooterVisible = _isFooterVisible === void 0 ? true : _isFooterVisible, button = param.button, secondaryButton = param.secondaryButton, link = param.link, children = param.children, _desktopButtonAlign = param.desktopButtonAlign, desktopButtonAlign = _desktopButtonAlign === void 0 ? 'left' : _desktopButtonAlign, footerBgColor = param.footerBgColor, containerBgColor = param.containerBgColor, onChangeFooterHeight = param.onChangeFooterHeight;
     var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller, isTablet = ref.isTablet;

package/dist/button-fixed-footer-layout.js.flow

@@ -2,13 +2,14 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { ButtonElement } from "./button";
+import type { RendersNullableElement } from "./utils/types";
+import type { NullableButtonElement } from "./button";
 declare type Props = {
   isFooterVisible?: boolean,
-  button?: ButtonElement,
+  button?: NullableButtonElement,
   desktopButtonAlign?: "left" | "center",
-  secondaryButton?: ButtonElement,
-  link?: React.Element<typeof ButtonLink>,
+  secondaryButton?: NullableButtonElement,
+  link?: RendersNullableElement<typeof ButtonLink>,
   footerBgColor?: string,
   containerBgColor?: string,
   children: React.Node,

package/dist/button-group.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ButtonLink, ButtonLinkProps, ButtonPrimary, ButtonProps, ButtonSecondary } from './button';
+import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
+import type { RendersNullableElement } from './utils/types';
 export interface ButtonGroupProps {
-    primaryButton?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
-    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
-    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
+    primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
+    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
+    link?: RendersNullableElement<typeof ButtonLink>;
 }
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/button-group.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
 function _interopRequireDefault(obj) {
@@ -11,6 +12,27 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
 var buttonLayoutSpacing = 16;
 var buttonLinkPadding = 6;
 var useStyles = (0, _jss).createUseStyles(function() {

package/dist/button-group.js.flow

@@ -2,10 +2,11 @@
 
 import * as React from "react";
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
+import type { RendersNullableElement } from "./utils/types";
 export type ButtonGroupProps = {
-  primaryButton?: React.Element<typeof ButtonPrimary>,
-  secondaryButton?: React.Element<typeof ButtonSecondary>,
-  link?: React.Element<typeof ButtonLink>,
+  primaryButton?: RendersNullableElement<typeof ButtonPrimary>,
+  secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
+  link?: RendersNullableElement<typeof ButtonLink>,
 };
 declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
 declare export default typeof ButtonGroup;

package/dist/button-layout.d.ts

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

package/dist/button-layout.js

@@ -19,13 +19,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -38,16 +36,16 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-        for(var i = 0, arr2 = new Array(arr.length); i < arr.length; i++){
-            arr2[i] = arr[i];
-        }
-        return arr2;
-    }
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
 }
 function _defineProperty(obj, key, value) {
     if (key in obj) {
@@ -63,15 +61,17 @@ function _defineProperty(obj, key, value) {
     return obj;
 }
 function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
+    var _s, _e;
     try {
-        for(var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true){
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
             _arr.push(_s.value);
             if (i && _arr.length === i) break;
         }
@@ -88,21 +88,28 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
 }
 function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var _Math;
 var buttonLayoutSpacing = 16;
-var _obj;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
+    var _obj;
     return _obj = {
         margins: {
             margin: '16px 0',
@@ -193,8 +200,7 @@ var useOnChildrenChangeEffect = function useOnChildrenChangeEffect(el, effect) {
                 observer.disconnect();
             };
         }
-        return function() {
-        };
+        return function() {};
     }, [
         effect,
         el
@@ -205,14 +211,14 @@ var buttonsRange = [
     _button.ButtonDanger,
     _button.ButtonPrimary
 ];
-var ButtonLayout = function ButtonLayout(param) {
-    var children = param.children, _align = param.align, align = _align === void 0 ? 'full-width' : _align, link = param.link, _withMargins = param.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
-    var ref = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref.isTabletOrSmaller;
+var ButtonLayout = function ButtonLayout(param1) {
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? 'full-width' : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
-    var ref1 = _slicedToArray(React.useState({
+    var ref = _slicedToArray(React.useState({
         isMeasuring: true,
         buttonWidth: 0
-    }), 2), buttonStatus = ref1[0], setButtonStatus = ref1[1];
+    }), 2), buttonStatus = ref[0], setButtonStatus = ref[1];
     var updateButtonStatus = function updateButtonStatus(param) {
         var isMeasuring = param.isMeasuring, buttonWidth = param.buttonWidth;
         if (process.env.NODE_ENV !== 'test') {
@@ -233,6 +239,7 @@ var ButtonLayout = function ButtonLayout(param) {
         if (buttonStatus.isMeasuring) {
             var req = window.requestAnimationFrame(function() {
                 if (wrapperElRef.current) {
+                    var _Math;
                     var childrenWidths = Array.from(wrapperElRef.current.children).map(function(el) {
                         /*
                         We are using offsetWidth instead of getBoundingClientRect().width because
@@ -255,8 +262,7 @@ var ButtonLayout = function ButtonLayout(param) {
                 window.cancelAnimationFrame(req);
             };
         }
-        return function() {
-        };
+        return function() {};
     }, [
         classes.link,
         buttonStatus
@@ -303,8 +309,7 @@ var ButtonLayout = function ButtonLayout(param) {
         className: classes.container,
         children: [
             link ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: (0, _classnames).default(classes.link, _defineProperty({
-                }, classes.linkAlignment, needsLinkAlignment)),
+                className: (0, _classnames).default(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
                 children: link
             }) : null,
             sortedButtons

package/dist/button-layout.js.flow

@@ -2,12 +2,13 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { ButtonElement } from "./button";
-declare type MaybeButtonElement = ButtonElement | void | false;
+import type { RendersNullableElement } from "./utils/types";
+import type { NullableButtonElement } from "./button";
+declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
   children?: MaybeButtonElement | [MaybeButtonElement, MaybeButtonElement],
   align?: "center" | "left" | "right" | "full-width",
-  link?: React.Element<typeof ButtonLink> | null,
+  link?: RendersNullableElement<typeof ButtonLink>,
   withMargins?: boolean,
 };
 declare var ButtonLayout: React.ComponentType<ButtonLayoutProps>;

package/dist/button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { DataAttributes, TrackingEvent } from './utils/types';
+import type { DataAttributes, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { Location } from 'history';
 export declare const BUTTON_MIN_WIDTH = 136;
 interface CommonProps {
@@ -84,5 +84,6 @@ export declare const ButtonLink: React.ForwardRefExoticComponent<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<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary> | React.ReactElement<ButtonProps, typeof ButtonDanger>;
+export declare type ButtonElement = RendersElement<typeof ButtonPrimary> | RendersElement<typeof ButtonSecondary> | RendersElement<typeof ButtonDanger>;
+export declare type NullableButtonElement = RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary> | RendersNullableElement<typeof ButtonDanger>;
 export {};