@sproutsocial/racine 12.22.0 → 12.23.0

package/__flow__/code-guidelines.mdx

@@ -0,0 +1,244 @@
+<Meta title="Welcome/Racine Code Guidelines" />
+
+### Racine Coding Style Guide
+
+The following are recommendations and standards in our continuing effort to create consistent and well designed React components across Racine.
+Please note that this is a living document and guidelines may change at any moment. The majority of these standards are being re-evaluated as part of a larger effort to modernize our codebase.
+
+## File Structure
+
+Racine follows a basic file structure:
+
+```
+src/
+├── MyComponent/
+│   ├── index.js
+│   ├── index.test.js
+│   ├── index.stories.js
+```
+
+# 1. Imports
+
+While we have no hard rules around imports, they should be logically grouped. With the first imports being top level dependencies like React & Styled-Components.
+Second priority being any global repository dependencies, and third, local dependencies and constants files.
+
+```
+import React from 'react';
+
+import Box from "../Box";
+
+import SubComponent from "./SubComponent"
+```
+
+# 2. Styles
+
+_Most of these standards are currently under discussion and are subject to change_
+
+- As of right now, we maintain most of our styled components within their respective component files.
+
+Do:
+
+```
+const Container = styled.div``
+
+const MyComponent = ({text}) => (<Container>{text}</Container>)
+```
+
+Don't:
+
+```
+import { Container } from "./styled.js"
+
+const MyComponent = ({text}) => (<Container>{text}</Container>)
+```
+
+- Do not mix and match `styled-system` and inheritable `Box` properties with Styled Components. Use one or the other.
+
+Do:
+
+```
+const MyComponent = ({text}) => (<Box mt={30} p={20} bg="colors.container.background.base"}>{text}</Box>)
+```
+
+Don't:
+
+```
+const Container = styled.div`
+    background: ${({theme}) => theme.colors.container.background.base}
+`
+
+const MyComponent = ({text}) => (<Container mt={30} p={20}>{text}</Container>)
+```
+
+- Whenever possible, please use the [css and scss compiler](https://sass-lang.com/documentation/modules) features before resorting to in-line javascript:
+
+Do
+
+```
+const Container = styled.div`
+    background: darken(#b37399, 20%)
+`
+```
+
+Don't
+
+```
+import {darken} from 'polished';
+
+const Container = styled.div`
+    background: ${darken(0.2, '#b37399')}
+`
+```
+
+- When naming Styled Components, it is best practice to name them according to their consuming component for ease searching and refactoring.
+
+Do
+
+```
+const ModalContainer = styled.div``
+const ModalHeader = styled.header``
+const ModalFooter = styled.footer``
+
+const Modal = () => (
+    <ModalContainer>
+        <ModalHeader/>
+        <ModalFooter/>
+    </ModalContainer>
+)
+
+```
+
+Don't
+
+```
+const Container = styled.div``
+const Header = styled.div``
+const Footer = styled.div``
+
+const Modal = () => (
+    <Container>
+        <Header/>
+        <Footer/>
+    </Container>
+)
+```
+
+# 3. Types
+
+WIP
+
+# 4. Component API
+
+- Racine currently utilizes stateless functional React components over class components.
+
+Do
+
+```
+const Component = (props) => {}
+```
+
+Don't
+
+```
+class Component extends React.Component {}
+```
+
+- Racine uses `defaultProps` to define the default API state for our prop usage. You may also apply default props to the destructured props object. This rule applies mainly to required props, and not optional properties.
+
+Do
+
+```
+const Component = (props) => {}
+
+Component.defaultProps ={
+    width = 500
+}
+```
+
+Do
+
+```
+const Component = ({ width = 500 }) => {}
+```
+
+Don't
+
+```
+const Component = ({ width }) => {}
+```
+
+- It is recommended that components are explicit with which props they inherit and define, avoid `...rest` definitions when possible.
+
+Do
+
+```
+const Component = (props: TypeBoxProps & TypeSystemLayoutProps) => (<Box {...props} />)
+```
+
+Don't
+
+```
+const Component = ({ ...rest }) => (<Box {...rest} />)
+```
+
+- Avoid passing large arrays via props to avoid render bugs
+
+Do
+
+```
+const Component = ({ rowData: Array<TypeTableRow> }) => rowData.map(row => (<li>{row.name}</li>));
+```
+
+Don't
+
+```
+const Component = ({ allTableData: TableDataResponse }) => getTableRows(allTableData).filter(showOnlyNecessary(items)).map(row => (<li>{row.name}</li>));
+```
+
+- Avoid passing components as props, use composition or inheritance instead:
+
+Do
+
+```
+const Wrapper = ({ children }) => <Container>{children}</Container>
+
+const Consumer = () => (
+    <Wrapper>
+        <Icon />
+    </Wrapper>
+)
+```
+
+Do
+
+```
+const Wrapper = ({ iconName }) => <Container><Icon name={iconName} /></Container>
+
+const Consumer = () => <Wrapper iconName="user">
+```
+
+Don't
+
+```
+const Wrapper = ({ iconComponent }) => <Container>{iconComponent}</Container>
+
+const Consumer = () => <Wrapper iconComponent={<Icon name="user" />}>
+```
+
+- Be _specific_ and consistent with utility when naming callbacks
+
+Do
+
+```
+const Component = ({ onClose, onCancel, onConfirm }) => {};
+```
+
+Don't
+
+```
+const Component = ({ click, exit, callback }) => {};
+```
+
+_Notes_
+
+- Refer to Racine docs before creating net new styled-components in case there may already be options available

package/__flow__/setupTests.js

@@ -1,3 +1,4 @@
+/* eslint-env jest, node */
 import 'mutationobserver-shim';
 import '@testing-library/jest-dom/extend-expect';
 import 'jest-axe/extend-expect';

package/__flow__/utils/a11yTest.js

@@ -1,3 +1,4 @@
+/* eslint-env jest, node */
 import {axe} from 'jest-axe';
 
 // use runA11yCheck from react-test-library utils file if using react-testing-library

package/__flow__/utils/system-props.js

@@ -1,4 +1,5 @@
 // @flow
+// eslint-disable-next-line no-restricted-syntax
 import * as styles from 'styled-system';
 
 const typeScale = styles.variant({

package/commonjs/Avatar/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = exports.Avatar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -12,12 +15,19 @@ var _excluded = ["fontSize"],
   _excluded2 = ["appearance", "name", "src", "variant", "type", "size", "bg", "color"];
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 _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 _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var AvatarText = (0, _styledComponents.default)(function (_ref) {
   var fontSize = _ref.fontSize,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_Text.default, rest);
 }).withConfig({
   displayName: "Avatar__AvatarText",
@@ -37,10 +47,8 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
     bg = _ref2.bg;
   return (0, _styledComponents.css)(["color:", ";background:", ";"], theme.colors[type][variant === 'dark' ? '200' : '900'], bg ? bg : theme.colors[type][variant === 'dark' ? '900' : '200']);
 });
-var getInitials = function getInitials(name, fallback) {
-  if (fallback === void 0) {
-    fallback = '?';
-  }
+var getInitials = function getInitials(name) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '?';
   if (!name || typeof name !== 'string') return fallback;
   return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
   .slice(0, 2).map(function (v) {
@@ -61,10 +69,11 @@ var Avatar = function Avatar(_ref3) {
     size = _ref3$size === void 0 ? '40px' : _ref3$size,
     bg = _ref3.bg,
     color = _ref3.color,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    rest = _objectWithoutProperties(_ref3, _excluded2);
   var _useState = (0, React.useState)(false),
-    imageFailedLoading = _useState[0],
-    setImageFailedLoading = _useState[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    imageFailedLoading = _useState2[0],
+    setImageFailedLoading = _useState2[1];
   var initials = (0, React.useMemo)(function () {
     return getInitials(name);
   }, [name]);

package/commonjs/Badge/constants.js

@@ -1,6 +1,8 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.legacyBadgeColors = void 0;
 
 var defaultPurple = {

package/commonjs/Badge/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -9,8 +12,9 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _excluded = ["children", "text", "iconName", "type", "tip", "size", "badgeColor"];
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Badge = function Badge(_ref) {
   var children = _ref.children,
@@ -22,7 +26,7 @@ var Badge = function Badge(_ref) {
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$badgeColor = _ref.badgeColor,
     badgeColor = _ref$badgeColor === void 0 ? 'blue' : _ref$badgeColor,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   if (children && text) {
     throw new Error("can't use both `children` and `text` props. Text is deprecated, consider using children.");
   }

package/commonjs/Badge/styles.js

@@ -1,6 +1,8 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _systemProps = require("../utils/system-props");
@@ -21,7 +23,7 @@ var Container = _styledComponents.default.span.withConfig({
 }, function (p) {
   return p.type ? (0, _themeGet.themeGet)(_constants.legacyBadgeColors[p.type].background) : p.theme.colors.container.background.decorative[p.badgeColor];
 }, function (p) {
-  return p.size === 'small' ? p.theme.space[0] + " " + p.theme.space[200] : "" + p.theme.space[300];
+  return p.size === 'small' ? "".concat(p.theme.space[0], " ").concat(p.theme.space[200]) : "".concat(p.theme.space[300]);
 }, _systemProps.COMMON);
 var _default = Container;
 exports.default = _default;

package/commonjs/Banner/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
@@ -9,8 +12,9 @@ var _Box = _interopRequireDefault(require("../Box"));
 var _excluded = ["type", "text"];
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var getBannerIcon = function getBannerIcon(type) {
   switch (type) {
@@ -54,14 +58,15 @@ var Banner = function Banner(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'error' : _ref$type,
     text = _ref.text,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var bannerType = type === 'danger' ? 'error' : type;
   if (type === 'danger') {
+    // eslint-disable-next-line no-console
     console.warn('Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.');
   }
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     type: type,
-    "data-qa-alert": '',
+    "data-qa-alert": "",
     "data-qa-alert-type": type,
     "data-qa-alert-text": text
     // $FlowIssue - upgrade v0.112.0

package/commonjs/Banner/styles.js

@@ -1,11 +1,14 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _systemProps = require("../utils/system-props");
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Container = _styledComponents.default.div.withConfig({
   displayName: "styles__Container",

package/commonjs/Box/index.js

@@ -1,12 +1,15 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = _interopRequireDefault(require("./styles"));
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var Box = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(_styles.default, _extends({}, props, {

package/commonjs/Box/styles.js

@@ -1,6 +1,8 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _systemProps = require("../utils/system-props");

package/commonjs/Breadcrumb/index.js

@@ -1,6 +1,9 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Link = _interopRequireDefault(require("../Link"));
@@ -11,13 +14,17 @@ var _excluded = ["children", "href"],
   _excluded2 = ["ariaLabel", "overflow", "children"];
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var children = _ref.children,
     href = _ref.href,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(_Link.default, _extends({
     href: href
     // $FlowIssue - upgrade v0.112.0
@@ -27,7 +34,7 @@ var Breadcrumb = function Breadcrumb(_ref2) {
   var ariaLabel = _ref2.ariaLabel,
     overflow = _ref2.overflow,
     children = _ref2.children,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var listItems = React.Children.toArray(children);
   var lastItem = listItems[listItems.length - 1];
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
@@ -44,7 +51,7 @@ var Breadcrumb = function Breadcrumb(_ref2) {
   }, /*#__PURE__*/React.createElement(_Icon.default, {
     name: "dotdotdot"
   }))), listItems.map(function (item, i) {
-    return /*#__PURE__*/React.cloneElement(item, _extends({}, item.props, {
+    return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({}, item.props), {}, {
       'aria-current': listItems[i] === lastItem ? 'page' : undefined
     }));
   })));

package/commonjs/Breadcrumb/styles.js

@@ -1,6 +1,8 @@
 "use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/Button/index.js

@@ -1,14 +1,18 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["href", "appearance", "active", "disabled", "external", "children", "size", "innerRef", "onClick", "title", "qa", "as", "ariaLabel"];
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Button = function Button(_ref) {
   var href = _ref.href,
@@ -28,7 +32,7 @@ var Button = function Button(_ref) {
     qa = _ref$qa === void 0 ? {} : _ref$qa,
     as = _ref.as,
     ariaLabel = _ref.ariaLabel,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   if (!href && external) {
     console.warn('Warning: external prop cannot be set without a href declaration');
   }

package/commonjs/Button/styles.js

@@ -1,6 +1,9 @@
 "use strict";
 
-exports.__esModule = true;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _systemProps = require("../utils/system-props");
@@ -8,7 +11,7 @@ var _mixins = require("../utils/mixins");
 var _styles = _interopRequireDefault(require("../Icon/styles"));
 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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Container = _styledComponents.default.button.withConfig({
   displayName: "styles__Container",
@@ -30,7 +33,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
-  return props.buttonSize === 'default' ? "" + props.theme.space[300] : "" + props.theme.space[350];
+  return props.buttonSize === 'default' ? "".concat(props.theme.space[300]) : "".concat(props.theme.space[350]);
 }, function (props) {
   return props.buttonSize === 'default' ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
 }, function (props) {