@hig/banner - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

build/index.es.js

@@ -1,2 +0,2 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -8,6 +8,101 @@ import { css, cx } from 'emotion';
 import { createCustomClassNames } from '@hig/utils';
-import { CloseSUI, CloseMUI, Complete16, Complete24, Error16, Error24, Info16, Info24, Alert16, Alert24 } from '@hig/icons';
+import { CloseMUI, CloseSUI, Info16, Info24, Complete16, Complete24, Alert16, Alert24, Error16, Error24 } from '@hig/icons';
 
+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 _objectSpread2(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 || 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 _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;
+}
+
+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;
+}
+
 /** @type {Object.<string, string>} */
-var placements = Object.freeze({
+const placements = Object.freeze({
   ABOVE: "above",
@@ -18,6 +113,6 @@ ABOVE_OVERLAY: "above-overlay",
 });
-
 /** @type {string[]} */
-var AVAILABLE_PLACEMENTS = Object.freeze(Object.values(placements));
 
+const AVAILABLE_PLACEMENTS = Object.freeze(Object.values(placements));
+
 /**
@@ -28,3 +123,3 @@ * @todo Move into shared package to consolidate component types
 /** @type {Object.<string, string>} */
-var types = Object.freeze({
+const types = Object.freeze({
   PRIMARY: "primary",
@@ -35,39 +130,40 @@ COMPLETE: "complete",
 });
-
 /** @type {string[]} */
-var AVAILABLE_TYPES = Object.freeze(Object.values(types));
 
+const AVAILABLE_TYPES = Object.freeze(Object.values(types));
+
 /** @type {Object.<string, string>} */
-var positions = Object.freeze({
+const positions = Object.freeze({
   TOP: "top",
   BOTTOM: "bottom"
 });
-
 /** @type {string[]} */
-var AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
 
-var _placements$ABOVE$pla;
+const AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
 
-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; }
+var animatorPropsByPlacement = {
+  [placements.ABOVE]: {
+    position: positions.TOP,
+    hasBounce: true,
+    hasPush: true
+  },
+  [placements.ABOVE_OVERLAY]: {
+    position: positions.TOP,
+    hasBounce: true,
+    hasPush: false
+  },
+  [placements.BETWEEN]: {
+    position: positions.TOP,
+    hasBounce: false,
+    hasPush: true
+  },
+  [placements.BELOW_OVERLAY]: {
+    position: positions.BOTTOM,
+    hasBounce: true,
+    hasPush: false
+  }
+};
 
-var animatorPropsByPlacement = (_placements$ABOVE$pla = {}, _defineProperty(_placements$ABOVE$pla, placements.ABOVE, {
-  position: positions.TOP,
-  hasBounce: true,
-  hasPush: true
-}), _defineProperty(_placements$ABOVE$pla, placements.ABOVE_OVERLAY, {
-  position: positions.TOP,
-  hasBounce: true,
-  hasPush: false
-}), _defineProperty(_placements$ABOVE$pla, placements.BETWEEN, {
-  position: positions.TOP,
-  hasBounce: false,
-  hasPush: true
-}), _defineProperty(_placements$ABOVE$pla, placements.BELOW_OVERLAY, {
-  position: positions.BOTTOM,
-  hasBounce: true,
-  hasPush: false
-}), _placements$ABOVE$pla);
-
-var constants = function constants(themeData) {
-  var base = {
+const constants = themeData => {
+  const base = {
     colorMapping: {
@@ -95,35 +191,31 @@ error: "urgent",
   };
-
-  var bannerDismissIconPadding = "calc((" + base.bannerDismissIconButtonWidth + " - " + base.bannerDismissIconWidth + ") / 2)";
-  var bannerDismissSpacingRightInteractive = base.bannerActionSpacingX;
-  var bannerContentSpacingY = "calc((" + base.bannerWrapperMinHeight + " - " + base.bannerMessageFontSize + ") / 2)";
-
+  const bannerDismissIconPadding = `calc((${base.bannerDismissIconButtonWidth} - ${base.bannerDismissIconWidth}) / 2)`;
+  const bannerDismissSpacingRightInteractive = base.bannerActionSpacingX;
+  const bannerContentSpacingY = `calc((${base.bannerWrapperMinHeight} - ${base.bannerMessageFontSize}) / 2)`;
   return Object.assign(base, {
-    bannerContentSpacingY: bannerContentSpacingY,
-    bannerDismissIconPadding: bannerDismissIconPadding,
-    bannerDismissSpacingRightInteractive: bannerDismissSpacingRightInteractive,
-    bannerDismissPaddingRight: "calc(" + base.bannerDismissSpacingRight + " - " + bannerDismissIconPadding + ")",
-    bannerDismissPaddingRightInteractive: "calc(" + bannerDismissSpacingRightInteractive + " - " + base.bannerDismissIconPadding + ")",
-    bannerDismissPaddingTopWrapping: "calc(" + bannerContentSpacingY + " - " + base.bannerDismissIconPadding + ")",
-    bannerInteractionsWrapperPaddingY: "calc(" + bannerContentSpacingY + " - " + base.bannerActionPaddingY + ")",
-    bannerMessagePaddingY: "calc((" + base.bannerWrapperMinHeight + " - " + base.bannerMessageLineHeight + ") / 2)"
+    bannerContentSpacingY,
+    bannerDismissIconPadding,
+    bannerDismissSpacingRightInteractive,
+    bannerDismissPaddingRight: `calc(${base.bannerDismissSpacingRight} - ${bannerDismissIconPadding})`,
+    bannerDismissPaddingRightInteractive: `calc(${bannerDismissSpacingRightInteractive} - ${base.bannerDismissIconPadding})`,
+    bannerDismissPaddingTopWrapping: `calc(${bannerContentSpacingY} - ${base.bannerDismissIconPadding})`,
+    bannerInteractionsWrapperPaddingY: `calc(${bannerContentSpacingY} - ${base.bannerActionPaddingY})`,
+    bannerMessagePaddingY: `calc((${base.bannerWrapperMinHeight} - ${base.bannerMessageLineHeight}) / 2)`
   });
 };
 
-var _extends = Object.assign || 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; };
+function stylesheet$2(props, themeData) {
+  const vars = constants(themeData);
+  const {
+    stylesheet: customStylesheet
+  } = props;
 
-function stylesheet(props, themeData) {
-  var vars = constants(themeData);
-  var customStylesheet = props.stylesheet;
-
-  var styles = _extends({
+  const styles = _objectSpread2({
     display: "flex",
     alignItems: "center",
-    padding: vars.bannerActionPaddingY + " 0",
+    padding: `${vars.bannerActionPaddingY} 0`,
     marginLeft: vars.bannerActionSpacingX,
-
     "&:first-of-type": {
       marginLeft: 0
     }
-
   }, props.isWrappedContent && {
@@ -134,2 +226,3 @@ "&:last-of-type": {
   });
+
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
@@ -148,22 +241,19 @@ }
  */
+
 function BannerAction(_ref) {
-  var children = _ref.children,
-      customStylesheet = _ref.stylesheet;
-
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles;
-      return React.createElement(
-        "div",
-        {
-          className: css(stylesheet({ stylesheet: customStylesheet }, resolvedRoles))
-        },
-        children
-      );
-    }
-  );
+  let {
+    children,
+    stylesheet: customStylesheet
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref2 => {
+    let {
+      resolvedRoles
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: css(stylesheet$2({
+        stylesheet: customStylesheet
+      }, resolvedRoles))
+    }, children);
+  });
 }
-
 BannerAction.propTypes = {
@@ -202,12 +292,16 @@ children: PropTypes.node,
 /** Transition ease for bounce effect */
-var BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+
+const BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
 /** Pixels; height added to the wrapper to show the bounce animation on the inner wrapper */
-var OVERLAY_HEIGHT_BUFFER = 20;
+
+const OVERLAY_HEIGHT_BUFFER = 20;
 /** Milliseconds; time for the banner to expand and collapse */
-var TRANSITION_DURATION = 300;
+
+const TRANSITION_DURATION = 300;
 /** Milliseconds; wait time for the inner wrapper to expand after the wrapper expands */
-var PUSH_DELAY = 300;
+
+const PUSH_DELAY = 300;
 /** Pixels; default banner height used when the component isn't mounted */
-var DEFAULT_HEIGHT = 50;
 
+const DEFAULT_HEIGHT = 50;
 /**
@@ -229,7 +323,9 @@ * @typedef {Object} StyleUpdaterParams
  */
+
 function getInnerWrapperheight(innerWrapper) {
   return innerWrapper ? innerWrapper.offsetHeight : DEFAULT_HEIGHT;
 }
+/** @returns {Object.<string, string>} */
 
-/** @returns {Object.<string, string>} */
+
 function getWrapperReset() {
@@ -242,4 +338,4 @@ return {
 }
+/** @returns {Object.<string, string>} */
 
-/** @returns {Object.<string, string>} */
 function getInnerWrapperReset() {
@@ -251,22 +347,24 @@ return {
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperTransition(_ref) {
-  var hasPush = _ref.hasPush;
-
-  return hasPush ? TRANSITION_DURATION + "ms height ease" : "";
+  let {
+    hasPush
+  } = _ref;
+  return hasPush ? `${TRANSITION_DURATION}ms height ease` : "";
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperExpandingTransition(_ref2) {
-  var hasBounce = _ref2.hasBounce,
-      hasPush = _ref2.hasPush;
+  let {
+    hasBounce,
+    hasPush
+  } = _ref2;
+  const duration = `${TRANSITION_DURATION}ms`;
+  const property = "transform";
+  const easing = hasBounce ? BOUNCE_EASING : "ease";
+  const transition = [duration, property, easing];
 
-  var duration = TRANSITION_DURATION + "ms";
-  var property = "transform";
-  var easing = hasBounce ? BOUNCE_EASING : "ease";
-  var transition = [duration, property, easing];
-
   if (hasPush && hasBounce) {
-    transition.push(PUSH_DELAY + "ms");
+    transition.push(`${PUSH_DELAY}ms`);
   }
@@ -276,54 +374,55 @@
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperCollapsingTransition() {
-  return TRANSITION_DURATION + "ms transform ease";
+  return `${TRANSITION_DURATION}ms transform ease`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperExpandedHeight(_ref3) {
-  var hasBounce = _ref3.hasBounce,
-      innerWrapper = _ref3.innerWrapper;
-
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
-  var result = innerWrapperHeight + offset;
-
-  return result + "px";
+  let {
+    hasBounce,
+    innerWrapper
+  } = _ref3;
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
+  const result = innerWrapperHeight + offset;
+  return `${result}px`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperCollapsedHeight(_ref4) {
-  var hasPush = _ref4.hasPush,
-      innerWrapper = _ref4.innerWrapper;
-
+  let {
+    hasPush,
+    innerWrapper
+  } = _ref4;
   if (hasPush) return "0";
-
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
-
-  return result + "px";
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
+  return `${result}px`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperCollapsedTransform(_ref5) {
-  var innerWrapper = _ref5.innerWrapper,
-      position = _ref5.position;
-
-  var isBottomPlacement = position === positions.BOTTOM;
-  var modifier = isBottomPlacement ? 1 : -1;
-  var offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var result = innerWrapperHeight * modifier + offset;
-
-  return "translateY(" + result + "px)";
+  let {
+    innerWrapper,
+    position
+  } = _ref5;
+  const isBottomPlacement = position === positions.BOTTOM;
+  const modifier = isBottomPlacement ? 1 : -1;
+  const offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const result = innerWrapperHeight * modifier + offset;
+  return `translateY(${result}px)`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperExpandingTransform(_ref6) {
-  var hasBounce = _ref6.hasBounce,
-      position = _ref6.position;
+  let {
+    hasBounce,
+    position
+  } = _ref6;
 
   if (hasBounce && position === positions.BOTTOM) {
-    return "translateY(" + OVERLAY_HEIGHT_BUFFER + "px)";
+    return `translateY(${OVERLAY_HEIGHT_BUFFER}px)`;
   }
@@ -335,4 +434,6 @@
 /** @typedef {import("./BannerAnimator").BannerAnimatorState} BannerAnimatorState */
+
 /** @typedef {import("./BannerAnimator").BannerAnimatorProps} BannerAnimatorProps */
 // eslint-disable-next-line max-len
+
 /** @typedef {function(BannerAnimatorState, BannerAnimatorProps): BannerAnimatorState} BannerAnimatorUpdater */
@@ -345,119 +446,108 @@
  */
+
 function getParams() {
-  var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var innerWrapper = prevState.innerWrapper;
-  var hasPush = props.hasPush,
-      hasBounce = props.hasBounce,
-      position = props.position;
-
-
+  let prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    innerWrapper
+  } = prevState;
+  const {
+    hasPush,
+    hasBounce,
+    position
+  } = props;
   return {
-    innerWrapper: innerWrapper,
-    hasBounce: hasBounce,
-    hasPush: hasPush,
-    position: position
+    innerWrapper,
+    hasBounce,
+    hasPush,
+    position
   };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function startExpand(setState) {
-  var setStatus = setState.setStatus;
 
 
-  setStatus(statuses.EXPANDING);
+function startExpand() {
+  return {
+    status: statuses.EXPANDING
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function startCollapse(setState) {
-  var setStatus = setState.setStatus;
 
-
-  setStatus(statuses.COLLAPSING);
+function startCollapse() {
+  return {
+    status: statuses.COLLAPSING
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function endExpand(setState) {
-  var setStatus = setState.setStatus,
-      setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  setStatus(statuses.EXPANDED);
-  setWrapperStyle(getWrapperReset());
-  setInnerWrapperStyle(getInnerWrapperReset());
+function endExpand() {
+  return {
+    status: statuses.EXPANDED,
+    wrapperStyle: getWrapperReset(),
+    innerWrapperStyle: getInnerWrapperReset()
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function endCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setStatus = setState.setStatus,
-      setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setStatus(statuses.COLLAPSED);
-  setWrapperStyle({
-    transition: "",
-    overflow: "hidden",
-    height: "0"
-  });
-  setInnerWrapperStyle({
-    transition: "",
-    transform: getInnerWrapperCollapsedTransform(params)
-  });
+function endCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    status: statuses.COLLAPSED,
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: "0"
+    },
+    innerWrapperStyle: {
+      transition: "",
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function prepareCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: "",
-    overflow: "hidden",
-    height: getWrapperExpandedHeight(params)
-  });
-  setInnerWrapperStyle(getInnerWrapperReset());
+function prepareCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: getInnerWrapperReset()
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function animateCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: getWrapperTransition(params),
-    overflow: "hidden",
-    height: getWrapperCollapsedHeight(params)
-  });
-  setInnerWrapperStyle({
-    transition: getInnerWrapperCollapsingTransition(params),
-    transform: getInnerWrapperCollapsedTransform(params)
-  });
+function animateCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperCollapsedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperCollapsingTransition(),
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function animateExpand(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: getWrapperTransition(params),
-    overflow: "hidden",
-    height: getWrapperExpandedHeight(params)
-  });
-  setInnerWrapperStyle({
-    transition: getInnerWrapperExpandingTransition(params),
-    transform: getInnerWrapperExpandingTransform(params)
-  });
+function animateExpand(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperExpandingTransition(params),
+      transform: getInnerWrapperExpandingTransform(params)
+    }
+  };
 }
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 /**
@@ -482,97 +572,66 @@ * @typedef {Object} BannerAnimatorProps
 /** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
-var BannerAnimator = function BannerAnimator(props) {
-  /** @type {BannerAnimatorState} */
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      innerWrapper = _useState4[0],
-      setInnerWrapper = _useState4[1];
+class BannerAnimator extends Component {
+  constructor() {
+    super(...arguments);
 
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      innerWrapperStyle = _useState6[0],
-      setInnerWrapperStyle = _useState6[1];
+    _defineProperty(this, "state", {});
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      wrapper = _useState8[0],
-      setWrapper = _useState8[1];
+    _defineProperty(this, "props", void 0);
 
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      wrapperStyle = _useState10[0],
-      setWrapperStyle = _useState10[1];
+    _defineProperty(this, "handleReady", () => {
+      const {
+        status
+      } = this.state;
 
-  var prevState = {
-    status: status,
-    innerWrapper: innerWrapper,
-    innerWrapperStyle: innerWrapperStyle,
-    wrapper: wrapper,
-    wrapperStyle: wrapperStyle
-  };
-  var setState = {
-    setStatus: setStatus,
-    setInnerWrapper: setInnerWrapper,
-    setInnerWrapperStyle: setInnerWrapperStyle,
-    setWrapper: setWrapper,
-    setWrapperStyle: setWrapperStyle
-  };
-  var expand = function expand() {
-    window.requestAnimationFrame(function () {
-      animateExpand(prevState, setState, props);
+      if (status === statuses.EXPANDING) {
+        this.expand();
+      }
     });
-  };
 
-  var collapse = function collapse() {
-    window.requestAnimationFrame(function () {
-      animateCollapse(prevState, setState, props);
-    });
-  };
+    _defineProperty(this, "handleTransitionEnd", event => {
+      const {
+        innerWrapper
+      } = this.state;
+      if (event.target !== innerWrapper) return;
+      const {
+        status
+      } = this.state;
 
-  var collapseFromExpanded = function collapseFromExpanded() {
-    window.requestAnimationFrame(function () {
-      prepareCollapse(prevState, setState, props);
-      collapse();
+      if (status === statuses.COLLAPSING) {
+        window.requestAnimationFrame(() => {
+          this.setState(endCollapse);
+        });
+        return;
+      }
+
+      if (status === statuses.EXPANDING) {
+        window.requestAnimationFrame(() => {
+          this.setState(endExpand);
+        });
+      }
     });
-  };
 
-  var handleReady = function handleReady() {
-    if (status === statuses.EXPANDING) {
-      expand();
-    }
-  };
-
-  /** @param {TransitionEvent} event */
-  var handleTransitionEnd = function handleTransitionEnd(event) {
-    if (event.target !== innerWrapper) return;
-
-    if (status === statuses.COLLAPSING) {
-      window.requestAnimationFrame(function () {
-        endCollapse(prevState, setState, props);
+    _defineProperty(this, "refInnerWrapper", innerWrapper => {
+      this.setState({
+        innerWrapper
       });
-      return;
-    }
+    });
+  }
 
-    if (status === statuses.EXPANDING) {
-      window.requestAnimationFrame(function () {
-        endExpand(setState);
-      });
-    }
-  };
+  /**
+   * @param {BannerAnimatorProps} nextProps
+   * @param {BannerAnimatorState} prevState
+   * @returns {BannerAnimatorState | null}
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      isVisible
+    } = nextProps;
+    const {
+      status
+    } = prevState;
 
-  /** @param {HTMLDivElement} innerWrapperParams */
-  var refInnerWrapper = function refInnerWrapper(innerWrapperParams) {
-    setInnerWrapper(innerWrapperParams);
-  };
-
-  useEffect(function () {
-    var isVisible = props.isVisible;
-
-
     if (!status) {
-      return isVisible ? endExpand(setState) : endCollapse(prevState, setState, props);
+      return isVisible ? endExpand() : endCollapse();
     }
@@ -583,47 +642,84 @@
       case statuses.COLLAPSING:
-        return isVisible ? startExpand(setState) : null;
+        return isVisible ? startExpand() : null;
+
       case statuses.EXPANDED:
       case statuses.EXPANDING:
-        return isVisible ? null : startCollapse(setState);
+        return isVisible ? null : startCollapse();
+
       default:
         // eslint-disable-next-line no-console
-        console.warn("Invalid status", { status: status });
+        console.warn("Invalid status", {
+          status
+        });
         return null;
     }
-  }, [props]);
-
-  function usePreviousStatus(value) {
-    var ref = useRef(null);
-    useEffect(function () {
-      ref.current = value;
-    });
-    return ref.current;
   }
+  /**
+   * @param {BannerAnimatorProps} prevProps
+   * @param {BannerAnimatorState} prevState
+   */
 
-  var prevStatus = usePreviousStatus(status);
 
-  useEffect(function () {
-    var expandStatuses = prevStatus === statuses.COLLAPSED && status === statuses.EXPANDING || prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING;
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      status: prevStatus
+    } = prevState;
+    const {
+      status
+    } = this.state;
 
     if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
-      collapseFromExpanded();
+      this.collapseFromExpanded();
       return;
     }
-    if (expandStatuses) {
-      expand();
+
+    if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
+      this.expand();
       return;
     }
+
     if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
-      collapse();
+      this.collapse();
     }
-  }, [props, prevStatus, status]);
+  }
 
-  var renderChildren = props.children;
+  collapse() {
+    window.requestAnimationFrame(() => {
+      this.setState(animateCollapse);
+    });
+  }
 
-  var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
-  var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+  collapseFromExpanded() {
+    window.requestAnimationFrame(() => {
+      this.setState(prepareCollapse, () => {
+        this.collapse();
+      });
+    });
+  }
 
-  return React.createElement(
-    "div",
-    {
+  expand() {
+    window.requestAnimationFrame(() => {
+      this.setState(animateExpand);
+    });
+  }
+
+  render() {
+    const {
+      children: renderChildren
+    } = this.props;
+    const {
+      status,
+      wrapperStyle,
+      innerWrapperStyle
+    } = this.state;
+    const {
+      handleReady,
+      handleTransitionEnd,
+      refInnerWrapper
+    } = this;
+    const children = status === statuses.COLLAPSED ? null : renderChildren({
+      handleReady
+    });
+    const isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+    return /*#__PURE__*/React.createElement("div", {
       "aria-busy": isBusy,
@@ -633,29 +729,32 @@ "aria-expanded": status === statuses.EXPANDED,
       onTransitionEnd: handleTransitionEnd
-    },
-    React.createElement(
-      "div",
-      { style: innerWrapperStyle, ref: refInnerWrapper },
-      children
-    )
-  );
-};
+    }, /*#__PURE__*/React.createElement("div", {
+      style: innerWrapperStyle,
+      ref: refInnerWrapper
+    }, children));
+  }
 
-BannerAnimator.displayName = "BannerAnimator";
+}
 
-BannerAnimator.propTypes = {
+_defineProperty(BannerAnimator, "propTypes", {
   /* eslint-disable react/no-unused-prop-types */
+
   /** Determines the visibility of the banner */
   isVisible: PropTypes.bool,
+
   /** Determines the type of animation used */
   hasBounce: PropTypes.bool,
+
   /** Determines the type of animation used */
   hasPush: PropTypes.bool,
+
   /** Determines the direction of the animation */
   position: PropTypes.oneOf(AVAILABLE_POSITIONS),
+
   /* eslint-enable react/no-unused-prop-types */
+
   /** A render prop, that renders the component to be animated */
   children: PropTypes.func.isRequired
-};
+});
 
-BannerAnimator.defaultProps = {
+_defineProperty(BannerAnimator, "defaultProps", {
   isVisible: true,
@@ -665,3 +764,4 @@ hasBounce: true,
   position: positions.TOP
-};
+});
+
 BannerAnimator.__docgenInfo = {
@@ -727,4 +827,2 @@ "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
 
-var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 /**
@@ -753,57 +851,82 @@ * @typedef {Object} PresenterBag
 /** The minimum space between the notification and actions */
-var MIN_CONTENT_SPACING = 125;
+
+const MIN_CONTENT_SPACING = 125;
 /** The minimum width of the notification */
-var MIN_NOTIFICATION_WIDTH = 200;
+
+const MIN_NOTIFICATION_WIDTH = 200;
 /** The width of the notification at which actions will begin wrapping */
-var ACTIONS_WRAPPING_THRESHOLD = 300;
 
+const ACTIONS_WRAPPING_THRESHOLD = 300;
 /** @type {Component<BannerContainerProps, BannerContainerState>} */
-var BannerContainer = function BannerContainer(props) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      isWrappingActions = _useState2[0],
-      setIsWrappingActions = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray$1(_useState3, 2),
-      isWrappingContent = _useState4[0],
-      setIsWrappingContent = _useState4[1];
+class BannerContainer extends Component {
+  constructor() {
+    super(...arguments);
 
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray$1(_useState5, 2),
-      callBack = _useState6[0],
-      setCallBack = _useState6[1];
+    _defineProperty(this, "state", {
+      isWrappingActions: false,
+      isWrappingContent: false
+    });
 
-  /** @type {HTMLDivElement | undefined} */
+    _defineProperty(this, "content", void 0);
 
+    _defineProperty(this, "interactionsWrapper", void 0);
 
-  var content = useRef(null);
-  /** @type {HTMLDivElement | undefined} */
-  var interactionsWrapper = useRef(null);
-  /** @type {HTMLParagraphElement | undefined} */
-  var notification = useRef(null);
-  /** @type {number | undefined} */
-  var wrappingFrame = useRef(null);
+    _defineProperty(this, "notification", void 0);
 
-  /**
-   * @param {HTMLDivElement} element
-   */
-  var refContent = function refContent(element) {
-    content.current = element;
-  };
+    _defineProperty(this, "wrappingFrame", void 0);
 
-  /**
-   * @param {HTMLParagraphElement} element
-   */
-  var refNotification = function refNotification(element) {
-    notification.current = element;
-  };
+    _defineProperty(this, "refContent", element => {
+      this.content = element;
+    });
 
+    _defineProperty(this, "refNotification", element => {
+      // eslint-disable-next-line react/no-unused-class-component-methods
+      this.notification = element;
+    });
+
+    _defineProperty(this, "refInteractionsWrapper", element => {
+      this.interactionsWrapper = element;
+    });
+
+    _defineProperty(this, "handleResize", () => {
+      this.updateWrapping();
+    });
+
+    _defineProperty(this, "updateContentWrapping", callback => {
+      const update = {
+        isWrappingContent: this.shouldWrapContent()
+      };
+      this.setState(update, () => {
+        delete this.wrappingFrame;
+        if (callback) callback();
+      });
+    });
+
+    _defineProperty(this, "updateActionWrapping", callback => {
+      const update = {
+        isWrappingActions: this.shouldWrapActions()
+      };
+      this.setState(update, () => {
+        this.wrappingFrame = window.requestAnimationFrame(() => {
+          this.updateContentWrapping(callback);
+        });
+      });
+    });
+  }
+
+  componentDidMount() {
+    this.bindResize();
+    this.updateWrapping(this.props.onReady);
+  }
+
+  componentWillUnmount() {
+    this.unbindResize();
+    this.cancelWrappingUpdate();
+  }
   /**
    * @param {HTMLDivElement} element
    */
-  var refInteractionsWrapper = function refInteractionsWrapper(element) {
-    interactionsWrapper.current = element;
-  };
 
+
   /**
@@ -816,151 +939,165 @@ * Determines whether the content will overflow its container
    */
-  var willContentOverflow = function willContentOverflow(notificationWidth) {
-    if (!content.current || !interactionsWrapper.current) return false;
-
-    var contentWidth = content.offsetWidth;
-    var actionsWidth = interactionsWrapper.offsetWidth;
-    var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
-
+  willContentOverflow(notificationWidth) {
+    const {
+      content,
+      interactionsWrapper
+    } = this;
+    if (!content || !interactionsWrapper) return false;
+    const contentWidth = content.offsetWidth;
+    const actionsWidth = interactionsWrapper.offsetWidth;
+    const contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
     return contentChildrenWidth > contentWidth;
-  };
-
+  }
   /**
-   * Determines whether actions should wrap on the next repaint
+   * Determines whether content should wrap on the next repaint
    * @returns {boolean}
    */
-  var shouldWrapActions = function shouldWrapActions() {
-    if (!interactionsWrapper) return false;
-    var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
 
-    return willContentOverflow(notificationWidth);
-  };
 
-  var updateActionWrapping = function updateActionWrapping(callBackParam) {
-    var update = { isWrappingActions: shouldWrapActions() };
-    setIsWrappingActions(update);
-    setCallBack(callBackParam);
-  };
-
+  shouldWrapContent() {
+    return this.willContentOverflow(MIN_NOTIFICATION_WIDTH);
+  }
   /**
-   * Asynchronously updates the wrapping behavior of the presenter
-   * @param {Function} callback
-   */
-  var updateWrapping = function updateWrapping(callback) {
-    if (wrappingFrame.current !== undefined) return;
-
-    wrappingFrame.current = window.requestAnimationFrame(function () {
-      updateActionWrapping(callback);
-    });
-  };
-
-  var handleResize = function handleResize() {
-    updateWrapping();
-  };
-
-  /**
-   * Determines whether content should wrap on the next repaint
+   * Determines whether actions should wrap on the next repaint
    * @returns {boolean}
    */
-  var shouldWrapContent = function shouldWrapContent() {
-    return willContentOverflow(MIN_NOTIFICATION_WIDTH);
-  };
 
-  /**
-   * @param {Function} callback
-   */
-  var updateContentWrapping = function updateContentWrapping(callback) {
-    var update = { isWrappingContent: shouldWrapContent() };
-    setIsWrappingContent(update);
-    setCallBack(callback);
-  };
 
+  shouldWrapActions() {
+    const {
+      interactionsWrapper
+    } = this;
+    if (!interactionsWrapper) return false;
+    const {
+      isWrappingActions
+    } = this.state;
+    const notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
+    return this.willContentOverflow(notificationWidth);
+  }
   /**
+   * Asynchronously updates the wrapping behavior of the presenter
    * @param {Function} callback
    */
 
-  var cancelWrappingUpdate = function cancelWrappingUpdate() {
-    if (wrappingFrame !== undefined) {
-      window.cancelAnimationFrame(wrappingFrame);
-    }
-  };
 
-  var bindResize = function bindResize() {
-    window.addEventListener("resize", handleResize);
-  };
+  updateWrapping(callback) {
+    if (this.wrappingFrame !== undefined) return;
+    this.wrappingFrame = window.requestAnimationFrame(() => {
+      this.updateActionWrapping(callback);
+    });
+  }
 
-  var unbindResize = function unbindResize() {
-    window.removeEventListener("resize", handleResize);
-  };
+  cancelWrappingUpdate() {
+    if (this.wrappingFrame !== undefined) {
+      window.cancelAnimationFrame(this.wrappingFrame);
+    }
+  }
 
-  /** @returns {any} */
-  var renderActions = function renderActions() {
-    var actions = props.actions;
+  bindResize() {
+    window.addEventListener("resize", this.handleResize);
+  }
 
-
-    if (typeof actions !== "function") return actions;
-
-    var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
-
-    return actions(actionsBag);
-  };
-
+  unbindResize() {
+    window.removeEventListener("resize", this.handleResize);
+  }
   /**
    * @returns {PresenterBag}
    */
-  var createPresenterBag = function createPresenterBag() {
+
+
+  createPresenterBag() {
+    const {
+      isWrappingContent
+    } = this.state;
+    const {
+      refContent,
+      refNotification,
+      refInteractionsWrapper
+    } = this;
     return {
-      isWrappingContent: isWrappingContent,
-      refContent: refContent,
-      refNotification: refNotification,
-      refInteractionsWrapper: refInteractionsWrapper,
-      actions: renderActions()
+      isWrappingContent,
+      refContent,
+      refNotification,
+      refInteractionsWrapper,
+      actions: this.renderActions()
     };
-  };
+  }
+  /** @returns {any} */
 
-  useEffect(function () {
-    if (isWrappingContent) {
-      // delete wrappingFrame;
-      if (callBack) callBack();
-    }
-  }, [isWrappingContent]);
 
-  useEffect(function () {
-    if (isWrappingActions) {
-      wrappingFrame.current = window.requestAnimationFrame(function () {
-        updateContentWrapping(callBack);
-      });
-    }
-  }, [isWrappingActions]);
-
-  useEffect(function () {
-    bindResize();
-    updateWrapping(props.onReady);
-    return function () {
-      unbindResize();
-      cancelWrappingUpdate();
+  renderActions() {
+    const {
+      actions
+    } = this.props;
+    if (typeof actions !== "function") return actions;
+    const {
+      isWrappingContent,
+      isWrappingActions
+    } = this.state;
+    const actionsBag = {
+      isWrappingContent,
+      isWrappingActions
     };
-  }, []);
+    return actions(actionsBag);
+  }
 
-  var renderPresenter = props.children;
+  render() {
+    const {
+      children: renderPresenter
+    } = this.props;
+    const presenterBag = this.createPresenterBag();
+    return renderPresenter(presenterBag);
+  }
 
-  var presenterBag = createPresenterBag();
+}
 
-  return renderPresenter(presenterBag);
-};
-
-BannerContainer.displayName = "BannerContainer";
-
-BannerContainer.propTypes = {
+_defineProperty(BannerContainer, "propTypes", {
   /** Banner actions; Any JSX, or a render prop function */
   actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
   /** Called after the component has been mounted, and dynamically resized */
   onReady: PropTypes.func,
+
   /** A render prop function to render a `BannerPresenter` */
   children: PropTypes.func.isRequired
+});
+
+BannerContainer.__docgenInfo = {
+  "description": "@type {Component<BannerContainerProps, BannerContainerState>}",
+  "displayName": "BannerContainer",
+  "props": {
+    "actions": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "func"
+        }]
+      },
+      "required": false,
+      "description": "Banner actions; Any JSX, or a render prop function"
+    },
+    "onReady": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after the component has been mounted, and dynamically resized"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "A render prop function to render a `BannerPresenter`"
+    }
+  }
 };
 
 function stylesheet$1(props, themeData) {
-  var customStylesheet = props.stylesheet;
-
-  var styles = {
+  const {
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
     display: "flex"
@@ -982,18 +1119,17 @@ };
  */
+
 function BannerInteractions(props) {
-  var children = props.children,
-      customStylesheet = props.stylesheet;
-
-
-  return React.createElement(
-    "div",
-    { className: css(stylesheet$1({ stylesheet: customStylesheet }, {})) },
-    children
-  );
+  const {
+    children,
+    stylesheet: customStylesheet
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: css(stylesheet$1({
+      stylesheet: customStylesheet
+    }, {}))
+  }, children);
 }
-
 BannerInteractions.defaultProps = {
   isWrappingActions: false
 };
-
 BannerInteractions.propTypes = {
@@ -1037,12 +1173,11 @@ // eslint-disable-next-line react/no-unused-prop-types
 
-var _extends$1 = Object.assign || 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; };
-
-function stylesheet$2(props, themeData) {
-  var validTypes = Object.values(types);
-  var vars = constants(themeData);
-  var customStylesheet = props.stylesheet;
-
-  var styles = {
+function stylesheet(props, themeData) {
+  const validTypes = Object.values(types);
+  const vars = constants(themeData);
+  const {
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
     // .hig__banner
-    banner: _extends$1({
+    banner: _objectSpread2({
       display: "flex",
@@ -1053,14 +1188,11 @@ boxSizing: "border-box",
       borderStyle: "solid"
-
     }, validTypes.includes(props.type) && {
-      borderColor: themeData["banner." + vars.colorMapping[props.type] + ".borderColor"],
-      backgroundColor: themeData["banner." + vars.colorMapping[props.type] + ".backgroundColor"]
+      borderColor: themeData[`banner.${vars.colorMapping[props.type]}.borderColor`],
+      backgroundColor: themeData[`banner.${vars.colorMapping[props.type]}.backgroundColor`]
     }),
-
     bannerBackground: {
       backgroundColor: themeData["colorScheme.surface.level100"]
     },
-
     // .hig__banner__content
-    content: _extends$1({
+    content: _objectSpread2({
       display: "flex",
@@ -1071,5 +1203,4 @@ flexGrow: "1",
       justifyContent: "space-between",
-      margin: vars.bannerMessagePaddingY + " 0 0 " + vars.bannerContentPaddingX,
+      margin: `${vars.bannerMessagePaddingY} 0 0 ${vars.bannerContentPaddingX}`,
       overflow: "hidden"
-
     }, !props.isWrappingContent && {
@@ -1079,5 +1210,4 @@ flexDirection: "column",
     }),
-
     // .hig__banner__message
-    message: _extends$1({
+    message: _objectSpread2(_objectSpread2({
       minWidth: vars.bannerNotificationWidthMin,
@@ -1088,11 +1218,9 @@ maxWidth: vars.bannerNotificationWidthMax,
       textAlign: "left"
-
     }, props.hasActions && {
       marginRight: vars.bannerContentSpacingMin
-    }, props.isWrappingContent && {
+    }), props.isWrappingContent && {
       marginRight: 0
     }),
-
     // .hig__banner__dismiss-button
-    dismissButton: _extends$1({
+    dismissButton: _objectSpread2(_objectSpread2(_objectSpread2({
       display: "flex",
@@ -1103,18 +1231,14 @@ alignItems: "center",
       paddingRight: vars.bannerDismissPaddingRight
-
     }, props.hasActions && {
       paddingRight: vars.bannerDismissPaddingRightInteractive
-    }, props.isWrappingContent && {
+    }), props.isWrappingContent && {
       alignItems: "flex-start",
       paddingTop: vars.bannerDismissPaddingTopWrapping
-    }, {
-
+    }), {}, {
       "& svg": {
         cursor: "pointer"
       },
-
       "& svg *": {
         fill: themeData["colorScheme.icon.default"]
       },
-
       "&:hover svg *": {
@@ -1124,3 +1248,2 @@ fill: themeData["colorScheme.reference.accent"]
     }),
-
     // .hig__banner__interactions-wrapper
@@ -1132,5 +1255,4 @@ interactionsWrapper: {
     },
-
     // .hig__banner__icon-background
-    iconBackground: _extends$1({
+    iconBackground: _objectSpread2(_objectSpread2({
       display: "flex",
@@ -1144,6 +1266,5 @@ flexGrow: 0,
       margin: 0
-
     }, validTypes.includes(props.type) && {
-      backgroundColor: themeData["banner." + vars.colorMapping[props.type] + ".iconField.backgroundColor"]
-    }, {
+      backgroundColor: themeData[`banner.${vars.colorMapping[props.type]}.iconField.backgroundColor`]
+    }), {}, {
       "svg *": {
@@ -1157,8 +1278,9 @@ fill: "white"
 
-var _extends$2 = Object.assign || 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; };
-
-function _defineProperty$1(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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded$2 = ["type", "children"],
+      _excluded2 = ["isWrappingContent", "innerRef", "children", "stylesheet"],
+      _excluded3 = ["onClick", "stylesheet"],
+      _excluded4 = ["innerRef", "children", "stylesheet"],
+      _excluded5 = ["children"],
+      _excluded6 = ["innerRef", "children", "stylesheet"],
+      _excluded7 = ["type", "stylesheet"];
 /**
@@ -1182,34 +1304,27 @@ * @typedef {Object} StyledProps
  */
+
 function Wrapper(props) {
-  var type = props.type,
-      children = props.children,
-      otherProps = _objectWithoutProperties(props, ["type", "children"]);
+  const {
+    type,
+    children
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$2);
 
-  var className = otherProps.className;
-
-  var bannerClassName = createCustomClassNames(className, "banner");
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
-      return React.createElement(
-        "div",
-        {
-          className: cx(css(stylesheet$2(props, resolvedRoles).bannerBackground), className)
-        },
-        React.createElement(
-          "div",
-          {
-            role: "alert",
-            "aria-live": type === types.URGENT ? "assertive" : "polite",
-            className: cx(css(stylesheet$2(props, resolvedRoles).banner), bannerClassName)
-          },
-          children
-        )
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const bannerClassName = createCustomClassNames(className, "banner");
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(css(stylesheet(props, resolvedRoles).bannerBackground), className)
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "alert",
+      "aria-live": type === types.URGENT ? "assertive" : "polite",
+      className: cx(css(stylesheet(props, resolvedRoles).banner), bannerClassName)
+    }, children));
+  });
 }
-
 /**
@@ -1219,29 +1334,29 @@ * @param {StyledProps} props
  */
+
 function Content(_ref2) {
-  var isWrappingContent = _ref2.isWrappingContent,
-      innerRef = _ref2.innerRef,
-      children = _ref2.children,
-      customStylesheet = _ref2.stylesheet,
-      otherProps = _objectWithoutProperties(_ref2, ["isWrappingContent", "innerRef", "children", "stylesheet"]);
+  let {
+    isWrappingContent,
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
 
-  var className = otherProps.className;
-
-  var contentClassName = createCustomClassNames(className, "content");
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref3) {
-      var resolvedRoles = _ref3.resolvedRoles;
-      return React.createElement(
-        "div",
-        {
-          className: cx(css(stylesheet$2({ isWrappingContent: isWrappingContent, stylesheet: customStylesheet }, resolvedRoles).content), contentClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const contentClassName = createCustomClassNames(className, "content");
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref3 => {
+    let {
+      resolvedRoles
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(css(stylesheet({
+        isWrappingContent,
+        stylesheet: customStylesheet
+      }, resolvedRoles).content), contentClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1256,34 +1371,32 @@ * @typedef {Object} DismissButtonProps
  */
+
 function DismissButton(_ref4) {
-  var onClick = _ref4.onClick,
-      customStylesheet = _ref4.stylesheet,
-      otherProps = _objectWithoutProperties(_ref4, ["onClick", "stylesheet"]);
+  let {
+    onClick,
+    stylesheet: customStylesheet
+  } = _ref4,
+      otherProps = _objectWithoutProperties(_ref4, _excluded3);
 
-  var className = otherProps.className;
-
-  var dismissClassName = createCustomClassNames(className, "dismiss-button");
-  var dismissIconClassName = createCustomClassNames(className, "dismiss-button-icon");
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref5) {
-      var resolvedRoles = _ref5.resolvedRoles,
-          metadata = _ref5.metadata;
-
-      var closeIcon = metadata.densityId === "medium-density" ? React.createElement(CloseMUI, null) : React.createElement(CloseSUI, null);
-      return React.createElement(
-        "div",
-        {
-          className: cx(css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).dismissButton), dismissClassName)
-        },
-        React.createElement(IconButton, _extends$2({}, otherProps, {
-          className: dismissIconClassName,
-          icon: closeIcon,
-          onClick: onClick
-        }))
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const dismissClassName = createCustomClassNames(className, "dismiss-button");
+  const dismissIconClassName = createCustomClassNames(className, "dismiss-button-icon");
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref5 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref5;
+    const closeIcon = metadata.densityId === "medium-density" ? /*#__PURE__*/React.createElement(CloseMUI, null) : /*#__PURE__*/React.createElement(CloseSUI, null);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).dismissButton), dismissClassName)
+    }, /*#__PURE__*/React.createElement(IconButton, _extends({}, otherProps, {
+      className: dismissIconClassName,
+      icon: closeIcon,
+      onClick: onClick
+    })));
+  });
 }
-
 /**
@@ -1293,28 +1406,27 @@ * @param {StyledProps} props
  */
+
 function Notification(_ref6) {
-  var innerRef = _ref6.innerRef,
-      children = _ref6.children,
-      customStylesheet = _ref6.stylesheet,
-      otherProps = _objectWithoutProperties(_ref6, ["innerRef", "children", "stylesheet"]);
+  let {
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref6,
+      otherProps = _objectWithoutProperties(_ref6, _excluded4);
 
-  var className = otherProps.className;
-
-  var notifClassName = createCustomClassNames(className, "message");
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref7) {
-      var resolvedRoles = _ref7.resolvedRoles;
-      return React.createElement(
-        "div",
-        {
-          className: cx(css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).message), notifClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const notifClassName = createCustomClassNames(className, "message");
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref7 => {
+    let {
+      resolvedRoles
+    } = _ref7;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).message), notifClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1324,15 +1436,19 @@ * @param {StyledProps} props
  */
+
 function Message(_ref8) {
-  var children = _ref8.children,
-      otherProps = _objectWithoutProperties(_ref8, ["children"]);
+  let {
+    children
+  } = _ref8,
+      otherProps = _objectWithoutProperties(_ref8, _excluded5);
 
-  var className = otherProps.className;
+  const {
+    className
+  } = otherProps;
+  const notifClassName = createCustomClassNames(className, "message-text");
 
-  var notifClassName = createCustomClassNames(className, "message-text");
   if (typeof children === "string") {
-    return React.createElement(
-      Typography,
-      { className: notifClassName, variant: "body" },
-      children
-    );
+    return /*#__PURE__*/React.createElement(Typography, {
+      className: notifClassName,
+      variant: "body"
+    }, children);
   }
@@ -1342,3 +1458,2 @@
 }
-
 /**
@@ -1348,28 +1463,27 @@ * @param {StyledProps} props
  */
+
 function InteractionsWrapper(_ref9) {
-  var innerRef = _ref9.innerRef,
-      children = _ref9.children,
-      customStylesheet = _ref9.stylesheet,
-      otherProps = _objectWithoutProperties(_ref9, ["innerRef", "children", "stylesheet"]);
+  let {
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref9,
+      otherProps = _objectWithoutProperties(_ref9, _excluded6);
 
-  var className = otherProps.className;
-
-  var interactionClassName = createCustomClassNames(className, "interactions-wrapper");
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref10) {
-      var resolvedRoles = _ref10.resolvedRoles;
-      return React.createElement(
-        "div",
-        {
-          className: cx(css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).interactionsWrapper), interactionClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const interactionClassName = createCustomClassNames(className, "interactions-wrapper");
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref10 => {
+    let {
+      resolvedRoles
+    } = _ref10;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx(css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).interactionsWrapper), interactionClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1380,48 +1494,50 @@ * @property {string} type
 function IconBackground(_ref11) {
-  var _iconNamesByType;
+  let {
+    type,
+    stylesheet: customStylesheet
+  } = _ref11,
+      otherProps = _objectWithoutProperties(_ref11, _excluded7);
 
-  var type = _ref11.type,
-      customStylesheet = _ref11.stylesheet,
-      otherProps = _objectWithoutProperties(_ref11, ["type", "stylesheet"]);
-
-  var className = otherProps.className;
-
-  var iconClassName = createCustomClassNames(className, "icon-background");
-  var iconImageClassName = createCustomClassNames(className, "icon-background-image");
-
-  var iconNamesByType = (_iconNamesByType = {}, _defineProperty$1(_iconNamesByType, types.PRIMARY, {
-    high: Info16,
-    medium: Info24
-  }), _defineProperty$1(_iconNamesByType, types.COMPLETE, {
-    high: Complete16,
-    medium: Complete24
-  }), _defineProperty$1(_iconNamesByType, types.WARNING, {
-    high: Alert16,
-    medium: Alert24
-  }), _defineProperty$1(_iconNamesByType, types.URGENT, {
-    high: Error16,
-    medium: Error24
-  }), _iconNamesByType);
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref12) {
-      var resolvedRoles = _ref12.resolvedRoles,
-          metadata = _ref12.metadata;
-
-      var density = metadata.densityId === "medium-density" ? "medium" : "high";
-      var Icon = iconNamesByType[type][density];
-      return React.createElement(
-        "figure",
-        {
-          className: cx(css(stylesheet$2({ type: type, stylesheet: customStylesheet }, resolvedRoles).iconBackground), iconClassName)
-        },
-        React.createElement(Icon, { className: iconImageClassName })
-      );
+  const {
+    className
+  } = otherProps;
+  const iconClassName = createCustomClassNames(className, "icon-background");
+  const iconImageClassName = createCustomClassNames(className, "icon-background-image");
+  const iconNamesByType = {
+    [types.PRIMARY]: {
+      high: Info16,
+      medium: Info24
+    },
+    [types.COMPLETE]: {
+      high: Complete16,
+      medium: Complete24
+    },
+    [types.WARNING]: {
+      high: Alert16,
+      medium: Alert24
+    },
+    [types.URGENT]: {
+      high: Error16,
+      medium: Error24
     }
-  );
+  };
+  return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref12 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref12;
+    const density = metadata.densityId === "medium-density" ? "medium" : "high";
+    const Icon = iconNamesByType[type][density];
+    return /*#__PURE__*/React.createElement("figure", {
+      className: cx(css(stylesheet({
+        type,
+        stylesheet: customStylesheet
+      }, resolvedRoles).iconBackground), iconClassName)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: iconImageClassName
+    }));
+  });
 }
 
-function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded$1 = ["type", "actions", "dismissButtonTitle", "onDismiss", "isWrappingContent", "refContent", "refNotification", "refInteractionsWrapper", "children", "stylesheet"];
 /**
@@ -1446,73 +1562,56 @@ * @typedef {Object} BannerPresenterProps
  */
+
 function BannerPresenter(props) {
-  var type = props.type,
-      actions = props.actions,
-      dismissButtonTitle = props.dismissButtonTitle,
-      onDismiss = props.onDismiss,
-      isWrappingContent = props.isWrappingContent,
-      refContent = props.refContent,
-      refNotification = props.refNotification,
-      refInteractionsWrapper = props.refInteractionsWrapper,
-      message = props.children,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$1(props, ["type", "actions", "dismissButtonTitle", "onDismiss", "isWrappingContent", "refContent", "refNotification", "refInteractionsWrapper", "children", "stylesheet"]);
+  const {
+    type,
+    actions,
+    dismissButtonTitle,
+    onDismiss,
+    isWrappingContent,
+    refContent,
+    refNotification,
+    refInteractionsWrapper,
+    children: message,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-  var hasActions = React.Children.count(actions) > 0;
-  var className = otherProps.className;
-
-  return React.createElement(
-    Wrapper,
-    {
-      className: className,
-      type: type,
-      hasActions: hasActions,
-      isWrappingContent: isWrappingContent,
-      stylesheet: customStylesheet
-    },
-    React.createElement(IconBackground, {
-      className: className,
-      type: type,
-      stylesheet: customStylesheet
-    }),
-    React.createElement(
-      Content,
-      {
-        className: className,
-        isWrappingContent: true,
-        innerRef: refContent,
-        stylesheet: customStylesheet
-      },
-      React.createElement(
-        Notification,
-        {
-          className: className,
-          innerRef: refNotification,
-          stylesheet: customStylesheet
-        },
-        React.createElement(
-          Message,
-          { className: className },
-          message
-        )
-      ),
-      hasActions ? React.createElement(
-        InteractionsWrapper,
-        {
-          className: className,
-          innerRef: refInteractionsWrapper,
-          stylesheet: customStylesheet
-        },
-        actions
-      ) : null
-    ),
-    onDismiss ? React.createElement(DismissButton, {
-      className: className,
-      title: dismissButtonTitle,
-      onClick: onDismiss,
-      stylesheet: customStylesheet
-    }) : null
-  );
+  const hasActions = React.Children.count(actions) > 0;
+  const {
+    className
+  } = otherProps;
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    className: className,
+    type: type,
+    hasActions: hasActions,
+    isWrappingContent: isWrappingContent,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React.createElement(IconBackground, {
+    className: className,
+    type: type,
+    stylesheet: customStylesheet
+  }), /*#__PURE__*/React.createElement(Content, {
+    className: className,
+    isWrappingContent: true,
+    innerRef: refContent,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React.createElement(Notification, {
+    className: className,
+    innerRef: refNotification,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React.createElement(Message, {
+    className: className
+  }, message)), hasActions ? /*#__PURE__*/React.createElement(InteractionsWrapper, {
+    className: className,
+    innerRef: refInteractionsWrapper,
+    stylesheet: customStylesheet
+  }, actions) : null), onDismiss ? /*#__PURE__*/React.createElement(DismissButton, {
+    className: className,
+    title: dismissButtonTitle,
+    onClick: onDismiss,
+    stylesheet: customStylesheet
+  }) : null);
 }
+/** @type {BannerPresenterProps} */
 
-/** @type {BannerPresenterProps} */
 BannerPresenter.defaultProps = {
@@ -1524,22 +1623,30 @@ type: types.PRIMARY,
 };
-
 BannerPresenter.propTypes = {
   /** Indicates the style of banner */
   type: PropTypes.oneOf(AVAILABLE_TYPES),
+
   /** Banner actions */
   actions: PropTypes.node,
+
   /** Accessibility text for the dismiss button */
   dismissButtonTitle: PropTypes.string,
+
   /** Called when the banner is dismissed */
   onDismiss: PropTypes.func,
+
   /** Determines whether the banner content wraps */
   isWrappingContent: PropTypes.bool,
+
   /** References content element */
   refContent: PropTypes.func,
+
   /** References notification element */
   refNotification: PropTypes.func,
+
   /** References interactions wrapper element */
   refInteractionsWrapper: PropTypes.func,
+
   /** The displayed message */
   children: PropTypes.node,
+
   /** Adds custom/overriding style */
@@ -1643,6 +1750,3 @@ stylesheet: PropTypes.func
 
-var _extends$3 = Object.assign || 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; };
-
-function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded = ["children", "stylesheet"];
 /**
@@ -1663,73 +1767,82 @@ * @typedef {Object} BannerProps
 /** @type {Component<BannerProps>} */
-var Banner = function Banner(props) {
-  /**
-   * @param {import("./BannerContainer").PresenterBag} presenterBag
-   */
-  var renderPresenter = function renderPresenter(presenterBag) {
-    var presenterProps = _extends$3({}, props, presenterBag);
 
-    var children = presenterProps.children,
-        customStylesheet = presenterProps.stylesheet,
-        otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
+class Banner extends Component {
+  constructor() {
+    super(...arguments);
 
-    return React.createElement(
-      BannerPresenter,
-      _extends$3({}, otherProps, { stylesheet: customStylesheet }),
-      children
-    );
-  };
+    _defineProperty(this, "props", void 0);
 
-  /**
-   * @param {import("./BannerAnimator").ContainerBag} containerBag
-   */
-  // eslint-disable-next-line react/prop-types
-  var renderContainer = function renderContainer(_ref) {
-    var handleReady = _ref.handleReady;
-    var actions = props.actions;
+    _defineProperty(this, "renderPresenter", presenterBag => {
+      const presenterProps = _objectSpread2(_objectSpread2({}, this.props), presenterBag);
 
+      const {
+        children,
+        stylesheet: customStylesheet
+      } = presenterProps,
+            otherProps = _objectWithoutProperties(presenterProps, _excluded);
 
-    return React.createElement(
-      BannerContainer,
-      { actions: actions, onReady: handleReady },
-      renderPresenter
-    );
-  };
+      return /*#__PURE__*/React.createElement(BannerPresenter, _extends({}, otherProps, {
+        stylesheet: customStylesheet
+      }), children);
+    });
 
-  var isVisible = props.isVisible,
-      placement = props.placement;
+    _defineProperty(this, "renderContainer", _ref => {
+      let {
+        handleReady
+      } = _ref;
+      const {
+        actions
+      } = this.props;
+      const {
+        renderPresenter
+      } = this;
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        actions: actions,
+        onReady: handleReady
+      }, renderPresenter);
+    });
+  }
 
-
-  return React.createElement(
-    BannerAnimator,
-    _extends$3({
+  render() {
+    const {
+      isVisible,
+      placement
+    } = this.props;
+    const {
+      renderContainer
+    } = this;
+    return /*#__PURE__*/React.createElement(BannerAnimator, _extends({
       isVisible: isVisible
-    }, animatorPropsByPlacement[placement]),
-    renderContainer
-  );
-};
+    }, animatorPropsByPlacement[placement]), renderContainer);
+  }
 
-Banner.displayName = "Banner";
+}
 
-Banner.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
-Banner.AVAILABLE_TYPES = AVAILABLE_TYPES;
-Banner.placements = placements;
-Banner.types = types;
+_defineProperty(Banner, "AVAILABLE_PLACEMENTS", AVAILABLE_PLACEMENTS);
 
-Banner.Action = BannerAction;
-Banner.Interactions = BannerInteractions;
-Banner.Presenter = BannerPresenter;
+_defineProperty(Banner, "AVAILABLE_TYPES", AVAILABLE_TYPES);
 
-Banner.propTypes = {
+_defineProperty(Banner, "placements", placements);
+
+_defineProperty(Banner, "types", types);
+
+_defineProperty(Banner, "Action", BannerAction);
+
+_defineProperty(Banner, "Interactions", BannerInteractions);
+
+_defineProperty(Banner, "Presenter", BannerPresenter);
+
+_defineProperty(Banner, "propTypes", {
   /** Indicates the style of banner */
   type: PropTypes.oneOf(AVAILABLE_TYPES),
+
   /** Determines the intended placement of banner */
   placement: PropTypes.oneOf(AVAILABLE_PLACEMENTS),
-  /** The label of the message displayed */
-  label: PropTypes.string,
-  /** The ID used for ARIA labeling */
-  labelledBy: PropTypes.string,
+
   /** Banner actions; Any JSX, or a render prop function */
   actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+
   /** Accessibility text for the dismiss button */
   dismissButtonTitle: PropTypes.string,
+
   /** Called when the banner is dismissed
@@ -1739,9 +1852,13 @@ *  If this is not supplied the close button will not appear
   onDismiss: PropTypes.func,
+
   /** Animation; Determines the visibility of the banner */
   isVisible: PropTypes.bool,
+
   /** The displayed message */
   children: PropTypes.node,
+
   /* Adds custom/overriding style */
   stylesheet: PropTypes.func
-};
+});
+
 Banner.__docgenInfo = {
@@ -1769,16 +1886,2 @@ "description": "@type {Component<BannerProps>}",
     },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "The label of the message displayed"
-    },
-    "labelledBy": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "The ID used for ARIA labeling"
-    },
     "actions": {
@@ -1834,3 +1937,2 @@ "type": {
 
-export default Banner;
-export { BannerAction, BannerAnimator, BannerInteractions, BannerPresenter, placements, AVAILABLE_PLACEMENTS, types, AVAILABLE_TYPES };
+export { AVAILABLE_PLACEMENTS, AVAILABLE_TYPES, BannerAction, BannerAnimator, BannerInteractions, BannerPresenter, Banner as default, placements, types };

build/index.js

@@ -5,16 +5,116 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
 var emotion = require('emotion');
-var ThemeContext = _interopDefault(require('@hig/theme-context'));
-var IconButton = _interopDefault(require('@hig/icon-button'));
-var Typography = _interopDefault(require('@hig/typography'));
+var ThemeContext = require('@hig/theme-context');
+var IconButton = require('@hig/icon-button');
+var Typography = require('@hig/typography');
 var utils = require('@hig/utils');
 var icons = require('@hig/icons');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+
+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 _objectSpread2(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 || 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 _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;
+}
+
+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;
+}
+
 /** @type {Object.<string, string>} */
-var placements = Object.freeze({
+const placements = Object.freeze({
   ABOVE: "above",
@@ -25,6 +125,6 @@ ABOVE_OVERLAY: "above-overlay",
 });
-
 /** @type {string[]} */
-var AVAILABLE_PLACEMENTS = Object.freeze(Object.values(placements));
 
+const AVAILABLE_PLACEMENTS = Object.freeze(Object.values(placements));
+
 /**
@@ -35,3 +135,3 @@ * @todo Move into shared package to consolidate component types
 /** @type {Object.<string, string>} */
-var types = Object.freeze({
+const types = Object.freeze({
   PRIMARY: "primary",
@@ -42,39 +142,40 @@ COMPLETE: "complete",
 });
-
 /** @type {string[]} */
-var AVAILABLE_TYPES = Object.freeze(Object.values(types));
 
+const AVAILABLE_TYPES = Object.freeze(Object.values(types));
+
 /** @type {Object.<string, string>} */
-var positions = Object.freeze({
+const positions = Object.freeze({
   TOP: "top",
   BOTTOM: "bottom"
 });
-
 /** @type {string[]} */
-var AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
 
-var _placements$ABOVE$pla;
+const AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
 
-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; }
+var animatorPropsByPlacement = {
+  [placements.ABOVE]: {
+    position: positions.TOP,
+    hasBounce: true,
+    hasPush: true
+  },
+  [placements.ABOVE_OVERLAY]: {
+    position: positions.TOP,
+    hasBounce: true,
+    hasPush: false
+  },
+  [placements.BETWEEN]: {
+    position: positions.TOP,
+    hasBounce: false,
+    hasPush: true
+  },
+  [placements.BELOW_OVERLAY]: {
+    position: positions.BOTTOM,
+    hasBounce: true,
+    hasPush: false
+  }
+};
 
-var animatorPropsByPlacement = (_placements$ABOVE$pla = {}, _defineProperty(_placements$ABOVE$pla, placements.ABOVE, {
-  position: positions.TOP,
-  hasBounce: true,
-  hasPush: true
-}), _defineProperty(_placements$ABOVE$pla, placements.ABOVE_OVERLAY, {
-  position: positions.TOP,
-  hasBounce: true,
-  hasPush: false
-}), _defineProperty(_placements$ABOVE$pla, placements.BETWEEN, {
-  position: positions.TOP,
-  hasBounce: false,
-  hasPush: true
-}), _defineProperty(_placements$ABOVE$pla, placements.BELOW_OVERLAY, {
-  position: positions.BOTTOM,
-  hasBounce: true,
-  hasPush: false
-}), _placements$ABOVE$pla);
-
-var constants = function constants(themeData) {
-  var base = {
+const constants = themeData => {
+  const base = {
     colorMapping: {
@@ -102,35 +203,31 @@ error: "urgent",
   };
-
-  var bannerDismissIconPadding = "calc((" + base.bannerDismissIconButtonWidth + " - " + base.bannerDismissIconWidth + ") / 2)";
-  var bannerDismissSpacingRightInteractive = base.bannerActionSpacingX;
-  var bannerContentSpacingY = "calc((" + base.bannerWrapperMinHeight + " - " + base.bannerMessageFontSize + ") / 2)";
-
+  const bannerDismissIconPadding = `calc((${base.bannerDismissIconButtonWidth} - ${base.bannerDismissIconWidth}) / 2)`;
+  const bannerDismissSpacingRightInteractive = base.bannerActionSpacingX;
+  const bannerContentSpacingY = `calc((${base.bannerWrapperMinHeight} - ${base.bannerMessageFontSize}) / 2)`;
   return Object.assign(base, {
-    bannerContentSpacingY: bannerContentSpacingY,
-    bannerDismissIconPadding: bannerDismissIconPadding,
-    bannerDismissSpacingRightInteractive: bannerDismissSpacingRightInteractive,
-    bannerDismissPaddingRight: "calc(" + base.bannerDismissSpacingRight + " - " + bannerDismissIconPadding + ")",
-    bannerDismissPaddingRightInteractive: "calc(" + bannerDismissSpacingRightInteractive + " - " + base.bannerDismissIconPadding + ")",
-    bannerDismissPaddingTopWrapping: "calc(" + bannerContentSpacingY + " - " + base.bannerDismissIconPadding + ")",
-    bannerInteractionsWrapperPaddingY: "calc(" + bannerContentSpacingY + " - " + base.bannerActionPaddingY + ")",
-    bannerMessagePaddingY: "calc((" + base.bannerWrapperMinHeight + " - " + base.bannerMessageLineHeight + ") / 2)"
+    bannerContentSpacingY,
+    bannerDismissIconPadding,
+    bannerDismissSpacingRightInteractive,
+    bannerDismissPaddingRight: `calc(${base.bannerDismissSpacingRight} - ${bannerDismissIconPadding})`,
+    bannerDismissPaddingRightInteractive: `calc(${bannerDismissSpacingRightInteractive} - ${base.bannerDismissIconPadding})`,
+    bannerDismissPaddingTopWrapping: `calc(${bannerContentSpacingY} - ${base.bannerDismissIconPadding})`,
+    bannerInteractionsWrapperPaddingY: `calc(${bannerContentSpacingY} - ${base.bannerActionPaddingY})`,
+    bannerMessagePaddingY: `calc((${base.bannerWrapperMinHeight} - ${base.bannerMessageLineHeight}) / 2)`
   });
 };
 
-var _extends = Object.assign || 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; };
+function stylesheet$2(props, themeData) {
+  const vars = constants(themeData);
+  const {
+    stylesheet: customStylesheet
+  } = props;
 
-function stylesheet(props, themeData) {
-  var vars = constants(themeData);
-  var customStylesheet = props.stylesheet;
-
-  var styles = _extends({
+  const styles = _objectSpread2({
     display: "flex",
     alignItems: "center",
-    padding: vars.bannerActionPaddingY + " 0",
+    padding: `${vars.bannerActionPaddingY} 0`,
     marginLeft: vars.bannerActionSpacingX,
-
     "&:first-of-type": {
       marginLeft: 0
     }
-
   }, props.isWrappedContent && {
@@ -141,2 +238,3 @@ "&:last-of-type": {
   });
+
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
@@ -155,25 +253,22 @@ }
  */
+
 function BannerAction(_ref) {
-  var children = _ref.children,
-      customStylesheet = _ref.stylesheet;
-
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles;
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.css(stylesheet({ stylesheet: customStylesheet }, resolvedRoles))
-        },
-        children
-      );
-    }
-  );
+  let {
+    children,
+    stylesheet: customStylesheet
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref2 => {
+    let {
+      resolvedRoles
+    } = _ref2;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.css(stylesheet$2({
+        stylesheet: customStylesheet
+      }, resolvedRoles))
+    }, children);
+  });
 }
-
 BannerAction.propTypes = {
-  children: PropTypes.node,
-  stylesheet: PropTypes.func
+  children: PropTypes__default["default"].node,
+  stylesheet: PropTypes__default["default"].func
 };
@@ -209,12 +304,16 @@ BannerAction.__docgenInfo = {
 /** Transition ease for bounce effect */
-var BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+
+const BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
 /** Pixels; height added to the wrapper to show the bounce animation on the inner wrapper */
-var OVERLAY_HEIGHT_BUFFER = 20;
+
+const OVERLAY_HEIGHT_BUFFER = 20;
 /** Milliseconds; time for the banner to expand and collapse */
-var TRANSITION_DURATION = 300;
+
+const TRANSITION_DURATION = 300;
 /** Milliseconds; wait time for the inner wrapper to expand after the wrapper expands */
-var PUSH_DELAY = 300;
+
+const PUSH_DELAY = 300;
 /** Pixels; default banner height used when the component isn't mounted */
-var DEFAULT_HEIGHT = 50;
 
+const DEFAULT_HEIGHT = 50;
 /**
@@ -236,7 +335,9 @@ * @typedef {Object} StyleUpdaterParams
  */
+
 function getInnerWrapperheight(innerWrapper) {
   return innerWrapper ? innerWrapper.offsetHeight : DEFAULT_HEIGHT;
 }
+/** @returns {Object.<string, string>} */
 
-/** @returns {Object.<string, string>} */
+
 function getWrapperReset() {
@@ -249,4 +350,4 @@ return {
 }
+/** @returns {Object.<string, string>} */
 
-/** @returns {Object.<string, string>} */
 function getInnerWrapperReset() {
@@ -258,22 +359,24 @@ return {
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperTransition(_ref) {
-  var hasPush = _ref.hasPush;
-
-  return hasPush ? TRANSITION_DURATION + "ms height ease" : "";
+  let {
+    hasPush
+  } = _ref;
+  return hasPush ? `${TRANSITION_DURATION}ms height ease` : "";
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperExpandingTransition(_ref2) {
-  var hasBounce = _ref2.hasBounce,
-      hasPush = _ref2.hasPush;
+  let {
+    hasBounce,
+    hasPush
+  } = _ref2;
+  const duration = `${TRANSITION_DURATION}ms`;
+  const property = "transform";
+  const easing = hasBounce ? BOUNCE_EASING : "ease";
+  const transition = [duration, property, easing];
 
-  var duration = TRANSITION_DURATION + "ms";
-  var property = "transform";
-  var easing = hasBounce ? BOUNCE_EASING : "ease";
-  var transition = [duration, property, easing];
-
   if (hasPush && hasBounce) {
-    transition.push(PUSH_DELAY + "ms");
+    transition.push(`${PUSH_DELAY}ms`);
   }
@@ -283,54 +386,55 @@
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperCollapsingTransition() {
-  return TRANSITION_DURATION + "ms transform ease";
+  return `${TRANSITION_DURATION}ms transform ease`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperExpandedHeight(_ref3) {
-  var hasBounce = _ref3.hasBounce,
-      innerWrapper = _ref3.innerWrapper;
-
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
-  var result = innerWrapperHeight + offset;
-
-  return result + "px";
+  let {
+    hasBounce,
+    innerWrapper
+  } = _ref3;
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
+  const result = innerWrapperHeight + offset;
+  return `${result}px`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getWrapperCollapsedHeight(_ref4) {
-  var hasPush = _ref4.hasPush,
-      innerWrapper = _ref4.innerWrapper;
-
+  let {
+    hasPush,
+    innerWrapper
+  } = _ref4;
   if (hasPush) return "0";
-
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
-
-  return result + "px";
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
+  return `${result}px`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperCollapsedTransform(_ref5) {
-  var innerWrapper = _ref5.innerWrapper,
-      position = _ref5.position;
-
-  var isBottomPlacement = position === positions.BOTTOM;
-  var modifier = isBottomPlacement ? 1 : -1;
-  var offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
-  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
-  var result = innerWrapperHeight * modifier + offset;
-
-  return "translateY(" + result + "px)";
+  let {
+    innerWrapper,
+    position
+  } = _ref5;
+  const isBottomPlacement = position === positions.BOTTOM;
+  const modifier = isBottomPlacement ? 1 : -1;
+  const offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
+  const innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  const result = innerWrapperHeight * modifier + offset;
+  return `translateY(${result}px)`;
 }
+/** @type {StyleUpdater} */
 
-/** @type {StyleUpdater} */
 function getInnerWrapperExpandingTransform(_ref6) {
-  var hasBounce = _ref6.hasBounce,
-      position = _ref6.position;
+  let {
+    hasBounce,
+    position
+  } = _ref6;
 
   if (hasBounce && position === positions.BOTTOM) {
-    return "translateY(" + OVERLAY_HEIGHT_BUFFER + "px)";
+    return `translateY(${OVERLAY_HEIGHT_BUFFER}px)`;
   }
@@ -342,4 +446,6 @@
 /** @typedef {import("./BannerAnimator").BannerAnimatorState} BannerAnimatorState */
+
 /** @typedef {import("./BannerAnimator").BannerAnimatorProps} BannerAnimatorProps */
 // eslint-disable-next-line max-len
+
 /** @typedef {function(BannerAnimatorState, BannerAnimatorProps): BannerAnimatorState} BannerAnimatorUpdater */
@@ -352,119 +458,108 @@
  */
+
 function getParams() {
-  var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var innerWrapper = prevState.innerWrapper;
-  var hasPush = props.hasPush,
-      hasBounce = props.hasBounce,
-      position = props.position;
-
-
+  let prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const {
+    innerWrapper
+  } = prevState;
+  const {
+    hasPush,
+    hasBounce,
+    position
+  } = props;
   return {
-    innerWrapper: innerWrapper,
-    hasBounce: hasBounce,
-    hasPush: hasPush,
-    position: position
+    innerWrapper,
+    hasBounce,
+    hasPush,
+    position
   };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function startExpand(setState) {
-  var setStatus = setState.setStatus;
 
 
-  setStatus(statuses.EXPANDING);
+function startExpand() {
+  return {
+    status: statuses.EXPANDING
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function startCollapse(setState) {
-  var setStatus = setState.setStatus;
 
-
-  setStatus(statuses.COLLAPSING);
+function startCollapse() {
+  return {
+    status: statuses.COLLAPSING
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function endExpand(setState) {
-  var setStatus = setState.setStatus,
-      setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-  setStatus(statuses.EXPANDED);
-  setWrapperStyle(getWrapperReset());
-  setInnerWrapperStyle(getInnerWrapperReset());
+function endExpand() {
+  return {
+    status: statuses.EXPANDED,
+    wrapperStyle: getWrapperReset(),
+    innerWrapperStyle: getInnerWrapperReset()
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function endCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setStatus = setState.setStatus,
-      setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setStatus(statuses.COLLAPSED);
-  setWrapperStyle({
-    transition: "",
-    overflow: "hidden",
-    height: "0"
-  });
-  setInnerWrapperStyle({
-    transition: "",
-    transform: getInnerWrapperCollapsedTransform(params)
-  });
+function endCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    status: statuses.COLLAPSED,
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: "0"
+    },
+    innerWrapperStyle: {
+      transition: "",
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function prepareCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: "",
-    overflow: "hidden",
-    height: getWrapperExpandedHeight(params)
-  });
-  setInnerWrapperStyle(getInnerWrapperReset());
+function prepareCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: getInnerWrapperReset()
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function animateCollapse(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: getWrapperTransition(params),
-    overflow: "hidden",
-    height: getWrapperCollapsedHeight(params)
-  });
-  setInnerWrapperStyle({
-    transition: getInnerWrapperCollapsingTransition(params),
-    transform: getInnerWrapperCollapsedTransform(params)
-  });
+function animateCollapse(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperCollapsedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperCollapsingTransition(),
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
 }
-
 /** @type {BannerAnimatorUpdater} */
-function animateExpand(prevState, setState, props) {
-  var params = getParams(prevState, props);
-  var setWrapperStyle = setState.setWrapperStyle,
-      setInnerWrapperStyle = setState.setInnerWrapperStyle;
 
-
-  setWrapperStyle({
-    transition: getWrapperTransition(params),
-    overflow: "hidden",
-    height: getWrapperExpandedHeight(params)
-  });
-  setInnerWrapperStyle({
-    transition: getInnerWrapperExpandingTransition(params),
-    transform: getInnerWrapperExpandingTransform(params)
-  });
+function animateExpand(prevState, props) {
+  const params = getParams(prevState, props);
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperExpandingTransition(params),
+      transform: getInnerWrapperExpandingTransform(params)
+    }
+  };
 }
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 /**
@@ -489,97 +584,66 @@ * @typedef {Object} BannerAnimatorProps
 /** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
-var BannerAnimator = function BannerAnimator(props) {
-  /** @type {BannerAnimatorState} */
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      status = _useState2[0],
-      setStatus = _useState2[1];
 
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      innerWrapper = _useState4[0],
-      setInnerWrapper = _useState4[1];
+class BannerAnimator extends React.Component {
+  constructor() {
+    super(...arguments);
 
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      innerWrapperStyle = _useState6[0],
-      setInnerWrapperStyle = _useState6[1];
+    _defineProperty(this, "state", {});
 
-  var _useState7 = React.useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      wrapper = _useState8[0],
-      setWrapper = _useState8[1];
+    _defineProperty(this, "props", void 0);
 
-  var _useState9 = React.useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      wrapperStyle = _useState10[0],
-      setWrapperStyle = _useState10[1];
+    _defineProperty(this, "handleReady", () => {
+      const {
+        status
+      } = this.state;
 
-  var prevState = {
-    status: status,
-    innerWrapper: innerWrapper,
-    innerWrapperStyle: innerWrapperStyle,
-    wrapper: wrapper,
-    wrapperStyle: wrapperStyle
-  };
-  var setState = {
-    setStatus: setStatus,
-    setInnerWrapper: setInnerWrapper,
-    setInnerWrapperStyle: setInnerWrapperStyle,
-    setWrapper: setWrapper,
-    setWrapperStyle: setWrapperStyle
-  };
-  var expand = function expand() {
-    window.requestAnimationFrame(function () {
-      animateExpand(prevState, setState, props);
+      if (status === statuses.EXPANDING) {
+        this.expand();
+      }
     });
-  };
 
-  var collapse = function collapse() {
-    window.requestAnimationFrame(function () {
-      animateCollapse(prevState, setState, props);
-    });
-  };
+    _defineProperty(this, "handleTransitionEnd", event => {
+      const {
+        innerWrapper
+      } = this.state;
+      if (event.target !== innerWrapper) return;
+      const {
+        status
+      } = this.state;
 
-  var collapseFromExpanded = function collapseFromExpanded() {
-    window.requestAnimationFrame(function () {
-      prepareCollapse(prevState, setState, props);
-      collapse();
+      if (status === statuses.COLLAPSING) {
+        window.requestAnimationFrame(() => {
+          this.setState(endCollapse);
+        });
+        return;
+      }
+
+      if (status === statuses.EXPANDING) {
+        window.requestAnimationFrame(() => {
+          this.setState(endExpand);
+        });
+      }
     });
-  };
 
-  var handleReady = function handleReady() {
-    if (status === statuses.EXPANDING) {
-      expand();
-    }
-  };
-
-  /** @param {TransitionEvent} event */
-  var handleTransitionEnd = function handleTransitionEnd(event) {
-    if (event.target !== innerWrapper) return;
-
-    if (status === statuses.COLLAPSING) {
-      window.requestAnimationFrame(function () {
-        endCollapse(prevState, setState, props);
+    _defineProperty(this, "refInnerWrapper", innerWrapper => {
+      this.setState({
+        innerWrapper
       });
-      return;
-    }
+    });
+  }
 
-    if (status === statuses.EXPANDING) {
-      window.requestAnimationFrame(function () {
-        endExpand(setState);
-      });
-    }
-  };
+  /**
+   * @param {BannerAnimatorProps} nextProps
+   * @param {BannerAnimatorState} prevState
+   * @returns {BannerAnimatorState | null}
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      isVisible
+    } = nextProps;
+    const {
+      status
+    } = prevState;
 
-  /** @param {HTMLDivElement} innerWrapperParams */
-  var refInnerWrapper = function refInnerWrapper(innerWrapperParams) {
-    setInnerWrapper(innerWrapperParams);
-  };
-
-  React.useEffect(function () {
-    var isVisible = props.isVisible;
-
-
     if (!status) {
-      return isVisible ? endExpand(setState) : endCollapse(prevState, setState, props);
+      return isVisible ? endExpand() : endCollapse();
     }
@@ -590,47 +654,84 @@
       case statuses.COLLAPSING:
-        return isVisible ? startExpand(setState) : null;
+        return isVisible ? startExpand() : null;
+
       case statuses.EXPANDED:
       case statuses.EXPANDING:
-        return isVisible ? null : startCollapse(setState);
+        return isVisible ? null : startCollapse();
+
       default:
         // eslint-disable-next-line no-console
-        console.warn("Invalid status", { status: status });
+        console.warn("Invalid status", {
+          status
+        });
         return null;
     }
-  }, [props]);
-
-  function usePreviousStatus(value) {
-    var ref = React.useRef(null);
-    React.useEffect(function () {
-      ref.current = value;
-    });
-    return ref.current;
   }
+  /**
+   * @param {BannerAnimatorProps} prevProps
+   * @param {BannerAnimatorState} prevState
+   */
 
-  var prevStatus = usePreviousStatus(status);
 
-  React.useEffect(function () {
-    var expandStatuses = prevStatus === statuses.COLLAPSED && status === statuses.EXPANDING || prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING;
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      status: prevStatus
+    } = prevState;
+    const {
+      status
+    } = this.state;
 
     if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
-      collapseFromExpanded();
+      this.collapseFromExpanded();
       return;
     }
-    if (expandStatuses) {
-      expand();
+
+    if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
+      this.expand();
       return;
     }
+
     if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
-      collapse();
+      this.collapse();
     }
-  }, [props, prevStatus, status]);
+  }
 
-  var renderChildren = props.children;
+  collapse() {
+    window.requestAnimationFrame(() => {
+      this.setState(animateCollapse);
+    });
+  }
 
-  var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
-  var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+  collapseFromExpanded() {
+    window.requestAnimationFrame(() => {
+      this.setState(prepareCollapse, () => {
+        this.collapse();
+      });
+    });
+  }
 
-  return React__default.createElement(
-    "div",
-    {
+  expand() {
+    window.requestAnimationFrame(() => {
+      this.setState(animateExpand);
+    });
+  }
+
+  render() {
+    const {
+      children: renderChildren
+    } = this.props;
+    const {
+      status,
+      wrapperStyle,
+      innerWrapperStyle
+    } = this.state;
+    const {
+      handleReady,
+      handleTransitionEnd,
+      refInnerWrapper
+    } = this;
+    const children = status === statuses.COLLAPSED ? null : renderChildren({
+      handleReady
+    });
+    const isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
       "aria-busy": isBusy,
@@ -640,29 +741,32 @@ "aria-expanded": status === statuses.EXPANDED,
       onTransitionEnd: handleTransitionEnd
-    },
-    React__default.createElement(
-      "div",
-      { style: innerWrapperStyle, ref: refInnerWrapper },
-      children
-    )
-  );
-};
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: innerWrapperStyle,
+      ref: refInnerWrapper
+    }, children));
+  }
 
-BannerAnimator.displayName = "BannerAnimator";
+}
 
-BannerAnimator.propTypes = {
+_defineProperty(BannerAnimator, "propTypes", {
   /* eslint-disable react/no-unused-prop-types */
+
   /** Determines the visibility of the banner */
-  isVisible: PropTypes.bool,
+  isVisible: PropTypes__default["default"].bool,
+
   /** Determines the type of animation used */
-  hasBounce: PropTypes.bool,
+  hasBounce: PropTypes__default["default"].bool,
+
   /** Determines the type of animation used */
-  hasPush: PropTypes.bool,
+  hasPush: PropTypes__default["default"].bool,
+
   /** Determines the direction of the animation */
-  position: PropTypes.oneOf(AVAILABLE_POSITIONS),
+  position: PropTypes__default["default"].oneOf(AVAILABLE_POSITIONS),
+
   /* eslint-enable react/no-unused-prop-types */
+
   /** A render prop, that renders the component to be animated */
-  children: PropTypes.func.isRequired
-};
+  children: PropTypes__default["default"].func.isRequired
+});
 
-BannerAnimator.defaultProps = {
+_defineProperty(BannerAnimator, "defaultProps", {
   isVisible: true,
@@ -672,3 +776,4 @@ hasBounce: true,
   position: positions.TOP
-};
+});
+
 BannerAnimator.__docgenInfo = {
@@ -734,4 +839,2 @@ "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
 
-var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 /**
@@ -760,57 +863,82 @@ * @typedef {Object} PresenterBag
 /** The minimum space between the notification and actions */
-var MIN_CONTENT_SPACING = 125;
+
+const MIN_CONTENT_SPACING = 125;
 /** The minimum width of the notification */
-var MIN_NOTIFICATION_WIDTH = 200;
+
+const MIN_NOTIFICATION_WIDTH = 200;
 /** The width of the notification at which actions will begin wrapping */
-var ACTIONS_WRAPPING_THRESHOLD = 300;
 
+const ACTIONS_WRAPPING_THRESHOLD = 300;
 /** @type {Component<BannerContainerProps, BannerContainerState>} */
-var BannerContainer = function BannerContainer(props) {
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray$1(_useState, 2),
-      isWrappingActions = _useState2[0],
-      setIsWrappingActions = _useState2[1];
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray$1(_useState3, 2),
-      isWrappingContent = _useState4[0],
-      setIsWrappingContent = _useState4[1];
+class BannerContainer extends React.Component {
+  constructor() {
+    super(...arguments);
 
-  var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray$1(_useState5, 2),
-      callBack = _useState6[0],
-      setCallBack = _useState6[1];
+    _defineProperty(this, "state", {
+      isWrappingActions: false,
+      isWrappingContent: false
+    });
 
-  /** @type {HTMLDivElement | undefined} */
+    _defineProperty(this, "content", void 0);
 
+    _defineProperty(this, "interactionsWrapper", void 0);
 
-  var content = React.useRef(null);
-  /** @type {HTMLDivElement | undefined} */
-  var interactionsWrapper = React.useRef(null);
-  /** @type {HTMLParagraphElement | undefined} */
-  var notification = React.useRef(null);
-  /** @type {number | undefined} */
-  var wrappingFrame = React.useRef(null);
+    _defineProperty(this, "notification", void 0);
 
-  /**
-   * @param {HTMLDivElement} element
-   */
-  var refContent = function refContent(element) {
-    content.current = element;
-  };
+    _defineProperty(this, "wrappingFrame", void 0);
 
-  /**
-   * @param {HTMLParagraphElement} element
-   */
-  var refNotification = function refNotification(element) {
-    notification.current = element;
-  };
+    _defineProperty(this, "refContent", element => {
+      this.content = element;
+    });
 
+    _defineProperty(this, "refNotification", element => {
+      // eslint-disable-next-line react/no-unused-class-component-methods
+      this.notification = element;
+    });
+
+    _defineProperty(this, "refInteractionsWrapper", element => {
+      this.interactionsWrapper = element;
+    });
+
+    _defineProperty(this, "handleResize", () => {
+      this.updateWrapping();
+    });
+
+    _defineProperty(this, "updateContentWrapping", callback => {
+      const update = {
+        isWrappingContent: this.shouldWrapContent()
+      };
+      this.setState(update, () => {
+        delete this.wrappingFrame;
+        if (callback) callback();
+      });
+    });
+
+    _defineProperty(this, "updateActionWrapping", callback => {
+      const update = {
+        isWrappingActions: this.shouldWrapActions()
+      };
+      this.setState(update, () => {
+        this.wrappingFrame = window.requestAnimationFrame(() => {
+          this.updateContentWrapping(callback);
+        });
+      });
+    });
+  }
+
+  componentDidMount() {
+    this.bindResize();
+    this.updateWrapping(this.props.onReady);
+  }
+
+  componentWillUnmount() {
+    this.unbindResize();
+    this.cancelWrappingUpdate();
+  }
   /**
    * @param {HTMLDivElement} element
    */
-  var refInteractionsWrapper = function refInteractionsWrapper(element) {
-    interactionsWrapper.current = element;
-  };
 
+
   /**
@@ -823,151 +951,165 @@ * Determines whether the content will overflow its container
    */
-  var willContentOverflow = function willContentOverflow(notificationWidth) {
-    if (!content.current || !interactionsWrapper.current) return false;
-
-    var contentWidth = content.offsetWidth;
-    var actionsWidth = interactionsWrapper.offsetWidth;
-    var contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
-
+  willContentOverflow(notificationWidth) {
+    const {
+      content,
+      interactionsWrapper
+    } = this;
+    if (!content || !interactionsWrapper) return false;
+    const contentWidth = content.offsetWidth;
+    const actionsWidth = interactionsWrapper.offsetWidth;
+    const contentChildrenWidth = notificationWidth + MIN_CONTENT_SPACING + actionsWidth;
     return contentChildrenWidth > contentWidth;
-  };
-
+  }
   /**
-   * Determines whether actions should wrap on the next repaint
+   * Determines whether content should wrap on the next repaint
    * @returns {boolean}
    */
-  var shouldWrapActions = function shouldWrapActions() {
-    if (!interactionsWrapper) return false;
-    var notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
 
-    return willContentOverflow(notificationWidth);
-  };
 
-  var updateActionWrapping = function updateActionWrapping(callBackParam) {
-    var update = { isWrappingActions: shouldWrapActions() };
-    setIsWrappingActions(update);
-    setCallBack(callBackParam);
-  };
-
+  shouldWrapContent() {
+    return this.willContentOverflow(MIN_NOTIFICATION_WIDTH);
+  }
   /**
-   * Asynchronously updates the wrapping behavior of the presenter
-   * @param {Function} callback
-   */
-  var updateWrapping = function updateWrapping(callback) {
-    if (wrappingFrame.current !== undefined) return;
-
-    wrappingFrame.current = window.requestAnimationFrame(function () {
-      updateActionWrapping(callback);
-    });
-  };
-
-  var handleResize = function handleResize() {
-    updateWrapping();
-  };
-
-  /**
-   * Determines whether content should wrap on the next repaint
+   * Determines whether actions should wrap on the next repaint
    * @returns {boolean}
    */
-  var shouldWrapContent = function shouldWrapContent() {
-    return willContentOverflow(MIN_NOTIFICATION_WIDTH);
-  };
 
-  /**
-   * @param {Function} callback
-   */
-  var updateContentWrapping = function updateContentWrapping(callback) {
-    var update = { isWrappingContent: shouldWrapContent() };
-    setIsWrappingContent(update);
-    setCallBack(callback);
-  };
 
+  shouldWrapActions() {
+    const {
+      interactionsWrapper
+    } = this;
+    if (!interactionsWrapper) return false;
+    const {
+      isWrappingActions
+    } = this.state;
+    const notificationWidth = isWrappingActions ? ACTIONS_WRAPPING_THRESHOLD + interactionsWrapper.offsetWidth * 2 : ACTIONS_WRAPPING_THRESHOLD;
+    return this.willContentOverflow(notificationWidth);
+  }
   /**
+   * Asynchronously updates the wrapping behavior of the presenter
    * @param {Function} callback
    */
 
-  var cancelWrappingUpdate = function cancelWrappingUpdate() {
-    if (wrappingFrame !== undefined) {
-      window.cancelAnimationFrame(wrappingFrame);
-    }
-  };
 
-  var bindResize = function bindResize() {
-    window.addEventListener("resize", handleResize);
-  };
+  updateWrapping(callback) {
+    if (this.wrappingFrame !== undefined) return;
+    this.wrappingFrame = window.requestAnimationFrame(() => {
+      this.updateActionWrapping(callback);
+    });
+  }
 
-  var unbindResize = function unbindResize() {
-    window.removeEventListener("resize", handleResize);
-  };
+  cancelWrappingUpdate() {
+    if (this.wrappingFrame !== undefined) {
+      window.cancelAnimationFrame(this.wrappingFrame);
+    }
+  }
 
-  /** @returns {any} */
-  var renderActions = function renderActions() {
-    var actions = props.actions;
+  bindResize() {
+    window.addEventListener("resize", this.handleResize);
+  }
 
-
-    if (typeof actions !== "function") return actions;
-
-    var actionsBag = { isWrappingContent: isWrappingContent, isWrappingActions: isWrappingActions };
-
-    return actions(actionsBag);
-  };
-
+  unbindResize() {
+    window.removeEventListener("resize", this.handleResize);
+  }
   /**
    * @returns {PresenterBag}
    */
-  var createPresenterBag = function createPresenterBag() {
+
+
+  createPresenterBag() {
+    const {
+      isWrappingContent
+    } = this.state;
+    const {
+      refContent,
+      refNotification,
+      refInteractionsWrapper
+    } = this;
     return {
-      isWrappingContent: isWrappingContent,
-      refContent: refContent,
-      refNotification: refNotification,
-      refInteractionsWrapper: refInteractionsWrapper,
-      actions: renderActions()
+      isWrappingContent,
+      refContent,
+      refNotification,
+      refInteractionsWrapper,
+      actions: this.renderActions()
     };
-  };
+  }
+  /** @returns {any} */
 
-  React.useEffect(function () {
-    if (isWrappingContent) {
-      // delete wrappingFrame;
-      if (callBack) callBack();
-    }
-  }, [isWrappingContent]);
 
-  React.useEffect(function () {
-    if (isWrappingActions) {
-      wrappingFrame.current = window.requestAnimationFrame(function () {
-        updateContentWrapping(callBack);
-      });
-    }
-  }, [isWrappingActions]);
-
-  React.useEffect(function () {
-    bindResize();
-    updateWrapping(props.onReady);
-    return function () {
-      unbindResize();
-      cancelWrappingUpdate();
+  renderActions() {
+    const {
+      actions
+    } = this.props;
+    if (typeof actions !== "function") return actions;
+    const {
+      isWrappingContent,
+      isWrappingActions
+    } = this.state;
+    const actionsBag = {
+      isWrappingContent,
+      isWrappingActions
     };
-  }, []);
+    return actions(actionsBag);
+  }
 
-  var renderPresenter = props.children;
+  render() {
+    const {
+      children: renderPresenter
+    } = this.props;
+    const presenterBag = this.createPresenterBag();
+    return renderPresenter(presenterBag);
+  }
 
-  var presenterBag = createPresenterBag();
+}
 
-  return renderPresenter(presenterBag);
-};
+_defineProperty(BannerContainer, "propTypes", {
+  /** Banner actions; Any JSX, or a render prop function */
+  actions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
 
-BannerContainer.displayName = "BannerContainer";
+  /** Called after the component has been mounted, and dynamically resized */
+  onReady: PropTypes__default["default"].func,
 
-BannerContainer.propTypes = {
-  /** Banner actions; Any JSX, or a render prop function */
-  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /** Called after the component has been mounted, and dynamically resized */
-  onReady: PropTypes.func,
   /** A render prop function to render a `BannerPresenter` */
-  children: PropTypes.func.isRequired
+  children: PropTypes__default["default"].func.isRequired
+});
+
+BannerContainer.__docgenInfo = {
+  "description": "@type {Component<BannerContainerProps, BannerContainerState>}",
+  "displayName": "BannerContainer",
+  "props": {
+    "actions": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "func"
+        }]
+      },
+      "required": false,
+      "description": "Banner actions; Any JSX, or a render prop function"
+    },
+    "onReady": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after the component has been mounted, and dynamically resized"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "A render prop function to render a `BannerPresenter`"
+    }
+  }
 };
 
 function stylesheet$1(props, themeData) {
-  var customStylesheet = props.stylesheet;
-
-  var styles = {
+  const {
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
     display: "flex"
@@ -989,23 +1131,22 @@ };
  */
+
 function BannerInteractions(props) {
-  var children = props.children,
-      customStylesheet = props.stylesheet;
-
-
-  return React__default.createElement(
-    "div",
-    { className: emotion.css(stylesheet$1({ stylesheet: customStylesheet }, {})) },
-    children
-  );
+  const {
+    children,
+    stylesheet: customStylesheet
+  } = props;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: emotion.css(stylesheet$1({
+      stylesheet: customStylesheet
+    }, {}))
+  }, children);
 }
-
 BannerInteractions.defaultProps = {
   isWrappingActions: false
 };
-
 BannerInteractions.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
-  isWrappingActions: PropTypes.bool,
-  children: PropTypes.node,
-  stylesheet: PropTypes.func
+  isWrappingActions: PropTypes__default["default"].bool,
+  children: PropTypes__default["default"].node,
+  stylesheet: PropTypes__default["default"].func
 };
@@ -1044,12 +1185,11 @@ BannerInteractions.__docgenInfo = {
 
-var _extends$1 = Object.assign || 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; };
-
-function stylesheet$2(props, themeData) {
-  var validTypes = Object.values(types);
-  var vars = constants(themeData);
-  var customStylesheet = props.stylesheet;
-
-  var styles = {
+function stylesheet(props, themeData) {
+  const validTypes = Object.values(types);
+  const vars = constants(themeData);
+  const {
+    stylesheet: customStylesheet
+  } = props;
+  const styles = {
     // .hig__banner
-    banner: _extends$1({
+    banner: _objectSpread2({
       display: "flex",
@@ -1060,14 +1200,11 @@ boxSizing: "border-box",
       borderStyle: "solid"
-
     }, validTypes.includes(props.type) && {
-      borderColor: themeData["banner." + vars.colorMapping[props.type] + ".borderColor"],
-      backgroundColor: themeData["banner." + vars.colorMapping[props.type] + ".backgroundColor"]
+      borderColor: themeData[`banner.${vars.colorMapping[props.type]}.borderColor`],
+      backgroundColor: themeData[`banner.${vars.colorMapping[props.type]}.backgroundColor`]
     }),
-
     bannerBackground: {
       backgroundColor: themeData["colorScheme.surface.level100"]
     },
-
     // .hig__banner__content
-    content: _extends$1({
+    content: _objectSpread2({
       display: "flex",
@@ -1078,5 +1215,4 @@ flexGrow: "1",
       justifyContent: "space-between",
-      margin: vars.bannerMessagePaddingY + " 0 0 " + vars.bannerContentPaddingX,
+      margin: `${vars.bannerMessagePaddingY} 0 0 ${vars.bannerContentPaddingX}`,
       overflow: "hidden"
-
     }, !props.isWrappingContent && {
@@ -1086,5 +1222,4 @@ flexDirection: "column",
     }),
-
     // .hig__banner__message
-    message: _extends$1({
+    message: _objectSpread2(_objectSpread2({
       minWidth: vars.bannerNotificationWidthMin,
@@ -1095,11 +1230,9 @@ maxWidth: vars.bannerNotificationWidthMax,
       textAlign: "left"
-
     }, props.hasActions && {
       marginRight: vars.bannerContentSpacingMin
-    }, props.isWrappingContent && {
+    }), props.isWrappingContent && {
       marginRight: 0
     }),
-
     // .hig__banner__dismiss-button
-    dismissButton: _extends$1({
+    dismissButton: _objectSpread2(_objectSpread2(_objectSpread2({
       display: "flex",
@@ -1110,18 +1243,14 @@ alignItems: "center",
       paddingRight: vars.bannerDismissPaddingRight
-
     }, props.hasActions && {
       paddingRight: vars.bannerDismissPaddingRightInteractive
-    }, props.isWrappingContent && {
+    }), props.isWrappingContent && {
       alignItems: "flex-start",
       paddingTop: vars.bannerDismissPaddingTopWrapping
-    }, {
-
+    }), {}, {
       "& svg": {
         cursor: "pointer"
       },
-
       "& svg *": {
         fill: themeData["colorScheme.icon.default"]
       },
-
       "&:hover svg *": {
@@ -1131,3 +1260,2 @@ fill: themeData["colorScheme.reference.accent"]
     }),
-
     // .hig__banner__interactions-wrapper
@@ -1139,5 +1267,4 @@ interactionsWrapper: {
     },
-
     // .hig__banner__icon-background
-    iconBackground: _extends$1({
+    iconBackground: _objectSpread2(_objectSpread2({
       display: "flex",
@@ -1151,6 +1278,5 @@ flexGrow: 0,
       margin: 0
-
     }, validTypes.includes(props.type) && {
-      backgroundColor: themeData["banner." + vars.colorMapping[props.type] + ".iconField.backgroundColor"]
-    }, {
+      backgroundColor: themeData[`banner.${vars.colorMapping[props.type]}.iconField.backgroundColor`]
+    }), {}, {
       "svg *": {
@@ -1164,8 +1290,9 @@ fill: "white"
 
-var _extends$2 = Object.assign || 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; };
-
-function _defineProperty$1(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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded$2 = ["type", "children"],
+      _excluded2 = ["isWrappingContent", "innerRef", "children", "stylesheet"],
+      _excluded3 = ["onClick", "stylesheet"],
+      _excluded4 = ["innerRef", "children", "stylesheet"],
+      _excluded5 = ["children"],
+      _excluded6 = ["innerRef", "children", "stylesheet"],
+      _excluded7 = ["type", "stylesheet"];
 /**
@@ -1189,34 +1316,27 @@ * @typedef {Object} StyledProps
  */
+
 function Wrapper(props) {
-  var type = props.type,
-      children = props.children,
-      otherProps = _objectWithoutProperties(props, ["type", "children"]);
+  const {
+    type,
+    children
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$2);
 
-  var className = otherProps.className;
-
-  var bannerClassName = utils.createCustomClassNames(className, "banner");
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.resolvedRoles;
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2(props, resolvedRoles).bannerBackground), className)
-        },
-        React__default.createElement(
-          "div",
-          {
-            role: "alert",
-            "aria-live": type === types.URGENT ? "assertive" : "polite",
-            className: emotion.cx(emotion.css(stylesheet$2(props, resolvedRoles).banner), bannerClassName)
-          },
-          children
-        )
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const bannerClassName = utils.createCustomClassNames(className, "banner");
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(stylesheet(props, resolvedRoles).bannerBackground), className)
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      role: "alert",
+      "aria-live": type === types.URGENT ? "assertive" : "polite",
+      className: emotion.cx(emotion.css(stylesheet(props, resolvedRoles).banner), bannerClassName)
+    }, children));
+  });
 }
-
 /**
@@ -1226,29 +1346,29 @@ * @param {StyledProps} props
  */
+
 function Content(_ref2) {
-  var isWrappingContent = _ref2.isWrappingContent,
-      innerRef = _ref2.innerRef,
-      children = _ref2.children,
-      customStylesheet = _ref2.stylesheet,
-      otherProps = _objectWithoutProperties(_ref2, ["isWrappingContent", "innerRef", "children", "stylesheet"]);
+  let {
+    isWrappingContent,
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
 
-  var className = otherProps.className;
-
-  var contentClassName = utils.createCustomClassNames(className, "content");
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref3) {
-      var resolvedRoles = _ref3.resolvedRoles;
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2({ isWrappingContent: isWrappingContent, stylesheet: customStylesheet }, resolvedRoles).content), contentClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const contentClassName = utils.createCustomClassNames(className, "content");
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref3 => {
+    let {
+      resolvedRoles
+    } = _ref3;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(stylesheet({
+        isWrappingContent,
+        stylesheet: customStylesheet
+      }, resolvedRoles).content), contentClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1263,34 +1383,32 @@ * @typedef {Object} DismissButtonProps
  */
+
 function DismissButton(_ref4) {
-  var onClick = _ref4.onClick,
-      customStylesheet = _ref4.stylesheet,
-      otherProps = _objectWithoutProperties(_ref4, ["onClick", "stylesheet"]);
+  let {
+    onClick,
+    stylesheet: customStylesheet
+  } = _ref4,
+      otherProps = _objectWithoutProperties(_ref4, _excluded3);
 
-  var className = otherProps.className;
-
-  var dismissClassName = utils.createCustomClassNames(className, "dismiss-button");
-  var dismissIconClassName = utils.createCustomClassNames(className, "dismiss-button-icon");
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref5) {
-      var resolvedRoles = _ref5.resolvedRoles,
-          metadata = _ref5.metadata;
-
-      var closeIcon = metadata.densityId === "medium-density" ? React__default.createElement(icons.CloseMUI, null) : React__default.createElement(icons.CloseSUI, null);
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).dismissButton), dismissClassName)
-        },
-        React__default.createElement(IconButton, _extends$2({}, otherProps, {
-          className: dismissIconClassName,
-          icon: closeIcon,
-          onClick: onClick
-        }))
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const dismissClassName = utils.createCustomClassNames(className, "dismiss-button");
+  const dismissIconClassName = utils.createCustomClassNames(className, "dismiss-button-icon");
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref5 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref5;
+    const closeIcon = metadata.densityId === "medium-density" ? /*#__PURE__*/React__default["default"].createElement(icons.CloseMUI, null) : /*#__PURE__*/React__default["default"].createElement(icons.CloseSUI, null);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).dismissButton), dismissClassName)
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({}, otherProps, {
+      className: dismissIconClassName,
+      icon: closeIcon,
+      onClick: onClick
+    })));
+  });
 }
-
 /**
@@ -1300,28 +1418,27 @@ * @param {StyledProps} props
  */
+
 function Notification(_ref6) {
-  var innerRef = _ref6.innerRef,
-      children = _ref6.children,
-      customStylesheet = _ref6.stylesheet,
-      otherProps = _objectWithoutProperties(_ref6, ["innerRef", "children", "stylesheet"]);
+  let {
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref6,
+      otherProps = _objectWithoutProperties(_ref6, _excluded4);
 
-  var className = otherProps.className;
-
-  var notifClassName = utils.createCustomClassNames(className, "message");
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref7) {
-      var resolvedRoles = _ref7.resolvedRoles;
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).message), notifClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const notifClassName = utils.createCustomClassNames(className, "message");
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref7 => {
+    let {
+      resolvedRoles
+    } = _ref7;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).message), notifClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1331,15 +1448,19 @@ * @param {StyledProps} props
  */
+
 function Message(_ref8) {
-  var children = _ref8.children,
-      otherProps = _objectWithoutProperties(_ref8, ["children"]);
+  let {
+    children
+  } = _ref8,
+      otherProps = _objectWithoutProperties(_ref8, _excluded5);
 
-  var className = otherProps.className;
+  const {
+    className
+  } = otherProps;
+  const notifClassName = utils.createCustomClassNames(className, "message-text");
 
-  var notifClassName = utils.createCustomClassNames(className, "message-text");
   if (typeof children === "string") {
-    return React__default.createElement(
-      Typography,
-      { className: notifClassName, variant: "body" },
-      children
-    );
+    return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+      className: notifClassName,
+      variant: "body"
+    }, children);
   }
@@ -1349,3 +1470,2 @@
 }
-
 /**
@@ -1355,28 +1475,27 @@ * @param {StyledProps} props
  */
+
 function InteractionsWrapper(_ref9) {
-  var innerRef = _ref9.innerRef,
-      children = _ref9.children,
-      customStylesheet = _ref9.stylesheet,
-      otherProps = _objectWithoutProperties(_ref9, ["innerRef", "children", "stylesheet"]);
+  let {
+    innerRef,
+    children,
+    stylesheet: customStylesheet
+  } = _ref9,
+      otherProps = _objectWithoutProperties(_ref9, _excluded6);
 
-  var className = otherProps.className;
-
-  var interactionClassName = utils.createCustomClassNames(className, "interactions-wrapper");
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref10) {
-      var resolvedRoles = _ref10.resolvedRoles;
-      return React__default.createElement(
-        "div",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2({ stylesheet: customStylesheet }, resolvedRoles).interactionsWrapper), interactionClassName),
-          ref: innerRef
-        },
-        children
-      );
-    }
-  );
+  const {
+    className
+  } = otherProps;
+  const interactionClassName = utils.createCustomClassNames(className, "interactions-wrapper");
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref10 => {
+    let {
+      resolvedRoles
+    } = _ref10;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx(emotion.css(stylesheet({
+        stylesheet: customStylesheet
+      }, resolvedRoles).interactionsWrapper), interactionClassName),
+      ref: innerRef
+    }, children);
+  });
 }
-
 /**
@@ -1387,48 +1506,50 @@ * @property {string} type
 function IconBackground(_ref11) {
-  var _iconNamesByType;
+  let {
+    type,
+    stylesheet: customStylesheet
+  } = _ref11,
+      otherProps = _objectWithoutProperties(_ref11, _excluded7);
 
-  var type = _ref11.type,
-      customStylesheet = _ref11.stylesheet,
-      otherProps = _objectWithoutProperties(_ref11, ["type", "stylesheet"]);
-
-  var className = otherProps.className;
-
-  var iconClassName = utils.createCustomClassNames(className, "icon-background");
-  var iconImageClassName = utils.createCustomClassNames(className, "icon-background-image");
-
-  var iconNamesByType = (_iconNamesByType = {}, _defineProperty$1(_iconNamesByType, types.PRIMARY, {
-    high: icons.Info16,
-    medium: icons.Info24
-  }), _defineProperty$1(_iconNamesByType, types.COMPLETE, {
-    high: icons.Complete16,
-    medium: icons.Complete24
-  }), _defineProperty$1(_iconNamesByType, types.WARNING, {
-    high: icons.Alert16,
-    medium: icons.Alert24
-  }), _defineProperty$1(_iconNamesByType, types.URGENT, {
-    high: icons.Error16,
-    medium: icons.Error24
-  }), _iconNamesByType);
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref12) {
-      var resolvedRoles = _ref12.resolvedRoles,
-          metadata = _ref12.metadata;
-
-      var density = metadata.densityId === "medium-density" ? "medium" : "high";
-      var Icon = iconNamesByType[type][density];
-      return React__default.createElement(
-        "figure",
-        {
-          className: emotion.cx(emotion.css(stylesheet$2({ type: type, stylesheet: customStylesheet }, resolvedRoles).iconBackground), iconClassName)
-        },
-        React__default.createElement(Icon, { className: iconImageClassName })
-      );
+  const {
+    className
+  } = otherProps;
+  const iconClassName = utils.createCustomClassNames(className, "icon-background");
+  const iconImageClassName = utils.createCustomClassNames(className, "icon-background-image");
+  const iconNamesByType = {
+    [types.PRIMARY]: {
+      high: icons.Info16,
+      medium: icons.Info24
+    },
+    [types.COMPLETE]: {
+      high: icons.Complete16,
+      medium: icons.Complete24
+    },
+    [types.WARNING]: {
+      high: icons.Alert16,
+      medium: icons.Alert24
+    },
+    [types.URGENT]: {
+      high: icons.Error16,
+      medium: icons.Error24
     }
-  );
+  };
+  return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref12 => {
+    let {
+      resolvedRoles,
+      metadata
+    } = _ref12;
+    const density = metadata.densityId === "medium-density" ? "medium" : "high";
+    const Icon = iconNamesByType[type][density];
+    return /*#__PURE__*/React__default["default"].createElement("figure", {
+      className: emotion.cx(emotion.css(stylesheet({
+        type,
+        stylesheet: customStylesheet
+      }, resolvedRoles).iconBackground), iconClassName)
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: iconImageClassName
+    }));
+  });
 }
 
-function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded$1 = ["type", "actions", "dismissButtonTitle", "onDismiss", "isWrappingContent", "refContent", "refNotification", "refInteractionsWrapper", "children", "stylesheet"];
 /**
@@ -1453,73 +1574,56 @@ * @typedef {Object} BannerPresenterProps
  */
+
 function BannerPresenter(props) {
-  var type = props.type,
-      actions = props.actions,
-      dismissButtonTitle = props.dismissButtonTitle,
-      onDismiss = props.onDismiss,
-      isWrappingContent = props.isWrappingContent,
-      refContent = props.refContent,
-      refNotification = props.refNotification,
-      refInteractionsWrapper = props.refInteractionsWrapper,
-      message = props.children,
-      customStylesheet = props.stylesheet,
-      otherProps = _objectWithoutProperties$1(props, ["type", "actions", "dismissButtonTitle", "onDismiss", "isWrappingContent", "refContent", "refNotification", "refInteractionsWrapper", "children", "stylesheet"]);
+  const {
+    type,
+    actions,
+    dismissButtonTitle,
+    onDismiss,
+    isWrappingContent,
+    refContent,
+    refNotification,
+    refInteractionsWrapper,
+    children: message,
+    stylesheet: customStylesheet
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-  var hasActions = React__default.Children.count(actions) > 0;
-  var className = otherProps.className;
-
-  return React__default.createElement(
-    Wrapper,
-    {
-      className: className,
-      type: type,
-      hasActions: hasActions,
-      isWrappingContent: isWrappingContent,
-      stylesheet: customStylesheet
-    },
-    React__default.createElement(IconBackground, {
-      className: className,
-      type: type,
-      stylesheet: customStylesheet
-    }),
-    React__default.createElement(
-      Content,
-      {
-        className: className,
-        isWrappingContent: true,
-        innerRef: refContent,
-        stylesheet: customStylesheet
-      },
-      React__default.createElement(
-        Notification,
-        {
-          className: className,
-          innerRef: refNotification,
-          stylesheet: customStylesheet
-        },
-        React__default.createElement(
-          Message,
-          { className: className },
-          message
-        )
-      ),
-      hasActions ? React__default.createElement(
-        InteractionsWrapper,
-        {
-          className: className,
-          innerRef: refInteractionsWrapper,
-          stylesheet: customStylesheet
-        },
-        actions
-      ) : null
-    ),
-    onDismiss ? React__default.createElement(DismissButton, {
-      className: className,
-      title: dismissButtonTitle,
-      onClick: onDismiss,
-      stylesheet: customStylesheet
-    }) : null
-  );
+  const hasActions = React__default["default"].Children.count(actions) > 0;
+  const {
+    className
+  } = otherProps;
+  return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+    className: className,
+    type: type,
+    hasActions: hasActions,
+    isWrappingContent: isWrappingContent,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React__default["default"].createElement(IconBackground, {
+    className: className,
+    type: type,
+    stylesheet: customStylesheet
+  }), /*#__PURE__*/React__default["default"].createElement(Content, {
+    className: className,
+    isWrappingContent: true,
+    innerRef: refContent,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React__default["default"].createElement(Notification, {
+    className: className,
+    innerRef: refNotification,
+    stylesheet: customStylesheet
+  }, /*#__PURE__*/React__default["default"].createElement(Message, {
+    className: className
+  }, message)), hasActions ? /*#__PURE__*/React__default["default"].createElement(InteractionsWrapper, {
+    className: className,
+    innerRef: refInteractionsWrapper,
+    stylesheet: customStylesheet
+  }, actions) : null), onDismiss ? /*#__PURE__*/React__default["default"].createElement(DismissButton, {
+    className: className,
+    title: dismissButtonTitle,
+    onClick: onDismiss,
+    stylesheet: customStylesheet
+  }) : null);
 }
+/** @type {BannerPresenterProps} */
 
-/** @type {BannerPresenterProps} */
 BannerPresenter.defaultProps = {
@@ -1531,24 +1635,32 @@ type: types.PRIMARY,
 };
-
 BannerPresenter.propTypes = {
   /** Indicates the style of banner */
-  type: PropTypes.oneOf(AVAILABLE_TYPES),
+  type: PropTypes__default["default"].oneOf(AVAILABLE_TYPES),
+
   /** Banner actions */
-  actions: PropTypes.node,
+  actions: PropTypes__default["default"].node,
+
   /** Accessibility text for the dismiss button */
-  dismissButtonTitle: PropTypes.string,
+  dismissButtonTitle: PropTypes__default["default"].string,
+
   /** Called when the banner is dismissed */
-  onDismiss: PropTypes.func,
+  onDismiss: PropTypes__default["default"].func,
+
   /** Determines whether the banner content wraps */
-  isWrappingContent: PropTypes.bool,
+  isWrappingContent: PropTypes__default["default"].bool,
+
   /** References content element */
-  refContent: PropTypes.func,
+  refContent: PropTypes__default["default"].func,
+
   /** References notification element */
-  refNotification: PropTypes.func,
+  refNotification: PropTypes__default["default"].func,
+
   /** References interactions wrapper element */
-  refInteractionsWrapper: PropTypes.func,
+  refInteractionsWrapper: PropTypes__default["default"].func,
+
   /** The displayed message */
-  children: PropTypes.node,
+  children: PropTypes__default["default"].node,
+
   /** Adds custom/overriding style */
-  stylesheet: PropTypes.func
+  stylesheet: PropTypes__default["default"].func
 };
@@ -1650,6 +1762,3 @@ BannerPresenter.__docgenInfo = {
 
-var _extends$3 = Object.assign || 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; };
-
-function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+const _excluded = ["children", "stylesheet"];
 /**
@@ -1670,84 +1779,97 @@ * @typedef {Object} BannerProps
 /** @type {Component<BannerProps>} */
-var Banner = function Banner(props) {
-  /**
-   * @param {import("./BannerContainer").PresenterBag} presenterBag
-   */
-  var renderPresenter = function renderPresenter(presenterBag) {
-    var presenterProps = _extends$3({}, props, presenterBag);
 
-    var children = presenterProps.children,
-        customStylesheet = presenterProps.stylesheet,
-        otherProps = _objectWithoutProperties$2(presenterProps, ["children", "stylesheet"]);
+class Banner extends React.Component {
+  constructor() {
+    super(...arguments);
 
-    return React__default.createElement(
-      BannerPresenter,
-      _extends$3({}, otherProps, { stylesheet: customStylesheet }),
-      children
-    );
-  };
+    _defineProperty(this, "props", void 0);
 
-  /**
-   * @param {import("./BannerAnimator").ContainerBag} containerBag
-   */
-  // eslint-disable-next-line react/prop-types
-  var renderContainer = function renderContainer(_ref) {
-    var handleReady = _ref.handleReady;
-    var actions = props.actions;
+    _defineProperty(this, "renderPresenter", presenterBag => {
+      const presenterProps = _objectSpread2(_objectSpread2({}, this.props), presenterBag);
 
+      const {
+        children,
+        stylesheet: customStylesheet
+      } = presenterProps,
+            otherProps = _objectWithoutProperties(presenterProps, _excluded);
 
-    return React__default.createElement(
-      BannerContainer,
-      { actions: actions, onReady: handleReady },
-      renderPresenter
-    );
-  };
+      return /*#__PURE__*/React__default["default"].createElement(BannerPresenter, _extends({}, otherProps, {
+        stylesheet: customStylesheet
+      }), children);
+    });
 
-  var isVisible = props.isVisible,
-      placement = props.placement;
+    _defineProperty(this, "renderContainer", _ref => {
+      let {
+        handleReady
+      } = _ref;
+      const {
+        actions
+      } = this.props;
+      const {
+        renderPresenter
+      } = this;
+      return /*#__PURE__*/React__default["default"].createElement(BannerContainer, {
+        actions: actions,
+        onReady: handleReady
+      }, renderPresenter);
+    });
+  }
 
-
-  return React__default.createElement(
-    BannerAnimator,
-    _extends$3({
+  render() {
+    const {
+      isVisible,
+      placement
+    } = this.props;
+    const {
+      renderContainer
+    } = this;
+    return /*#__PURE__*/React__default["default"].createElement(BannerAnimator, _extends({
       isVisible: isVisible
-    }, animatorPropsByPlacement[placement]),
-    renderContainer
-  );
-};
+    }, animatorPropsByPlacement[placement]), renderContainer);
+  }
 
-Banner.displayName = "Banner";
+}
 
-Banner.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
-Banner.AVAILABLE_TYPES = AVAILABLE_TYPES;
-Banner.placements = placements;
-Banner.types = types;
+_defineProperty(Banner, "AVAILABLE_PLACEMENTS", AVAILABLE_PLACEMENTS);
 
-Banner.Action = BannerAction;
-Banner.Interactions = BannerInteractions;
-Banner.Presenter = BannerPresenter;
+_defineProperty(Banner, "AVAILABLE_TYPES", AVAILABLE_TYPES);
 
-Banner.propTypes = {
+_defineProperty(Banner, "placements", placements);
+
+_defineProperty(Banner, "types", types);
+
+_defineProperty(Banner, "Action", BannerAction);
+
+_defineProperty(Banner, "Interactions", BannerInteractions);
+
+_defineProperty(Banner, "Presenter", BannerPresenter);
+
+_defineProperty(Banner, "propTypes", {
   /** Indicates the style of banner */
-  type: PropTypes.oneOf(AVAILABLE_TYPES),
+  type: PropTypes__default["default"].oneOf(AVAILABLE_TYPES),
+
   /** Determines the intended placement of banner */
-  placement: PropTypes.oneOf(AVAILABLE_PLACEMENTS),
-  /** The label of the message displayed */
-  label: PropTypes.string,
-  /** The ID used for ARIA labeling */
-  labelledBy: PropTypes.string,
+  placement: PropTypes__default["default"].oneOf(AVAILABLE_PLACEMENTS),
+
   /** Banner actions; Any JSX, or a render prop function */
-  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  actions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
+
   /** Accessibility text for the dismiss button */
-  dismissButtonTitle: PropTypes.string,
+  dismissButtonTitle: PropTypes__default["default"].string,
+
   /** Called when the banner is dismissed
    *  If this is not supplied the close button will not appear
    */
-  onDismiss: PropTypes.func,
+  onDismiss: PropTypes__default["default"].func,
+
   /** Animation; Determines the visibility of the banner */
-  isVisible: PropTypes.bool,
+  isVisible: PropTypes__default["default"].bool,
+
   /** The displayed message */
-  children: PropTypes.node,
+  children: PropTypes__default["default"].node,
+
   /* Adds custom/overriding style */
-  stylesheet: PropTypes.func
-};
+  stylesheet: PropTypes__default["default"].func
+});
+
 Banner.__docgenInfo = {
@@ -1775,16 +1897,2 @@ "description": "@type {Component<BannerProps>}",
     },
-    "label": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "The label of the message displayed"
-    },
-    "labelledBy": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "The ID used for ARIA labeling"
-    },
     "actions": {
@@ -1840,3 +1948,4 @@ "type": {
 
-exports.default = Banner;
+exports.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
+exports.AVAILABLE_TYPES = AVAILABLE_TYPES;
 exports.BannerAction = BannerAction;
@@ -1846,5 +1955,4 @@ exports.BannerAnimator = BannerAnimator;
 exports.BannerPresenter = BannerPresenter;
+exports["default"] = Banner;
 exports.placements = placements;
-exports.AVAILABLE_PLACEMENTS = AVAILABLE_PLACEMENTS;
 exports.types = types;
-exports.AVAILABLE_TYPES = AVAILABLE_TYPES;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/banner-v3.1.1](https://github.com/Autodesk/hig/compare/@hig/banner@3.1.0...@hig/banner@3.1.1) (2022-08-17)
+
+
+### Bug Fixes
+
+* revert to class components ([25e4cfd](https://github.com/Autodesk/hig/commit/25e4cfd))
+
 # [@hig/banner-v3.1.0](https://github.com/Autodesk/hig/compare/@hig/banner@3.0.0...@hig/banner@3.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/banner",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "HIG Banner",
@@ -21,8 +21,7 @@ "author": "Autodesk Inc.",
     "@hig/icon-button": "^3.1.0",
-    "@hig/icons": "^4.1.0",
+    "@hig/icons": "^4.1.2",
     "@hig/typography": "^2.1.0",
     "@hig/utils": "^0.4.1",
     "emotion": "^10.0.0",
-    "prop-types": "^15.7.1",
-    "react-lifecycles-compat": "^3.0.4"
+    "prop-types": "^15.7.1"
   },
@@ -37,4 +36,4 @@ "devDependencies": {
   "peerDependencies": {
-    "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.23.0",
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.1.0",
     "react": "^17.0.0"
@@ -41,0 +40,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

9

decreased by-10%

Lines of code

3366

increased by7.16%

Worsened metrics

Total package byte prevSize

110144

decreased by-4.84%

Dependency changes

• - Removedreact-lifecycles-compat@^3.0.4

• - Removed@hig/theme-data@2.26.0(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• Updated@hig/icons@^4.1.2