es-components/lib/index.js

import 'core-js/modules/es.function.name';
import _extends from '@babel/runtime-corejs2/helpers/extends';
import _objectWithoutProperties from '@babel/runtime-corejs2/helpers/objectWithoutProperties';
import _taggedTemplateLiteral from '@babel/runtime-corejs2/helpers/taggedTemplateLiteral';
import React, { useContext, useState, useRef, Children, useEffect, useReducer } from 'react';
import PropTypes from 'prop-types';
import styled, { ThemeContext, css, createGlobalStyle, withTheme, keyframes } from 'styled-components';
import _noop from 'lodash/noop';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _slicedToArray from '@babel/runtime-corejs2/helpers/slicedToArray';
import _defineProperty from '@babel/runtime-corejs2/helpers/defineProperty';
import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
import _spliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/splice';
import _indexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/index-of';
import _toConsumableArray from '@babel/runtime-corejs2/helpers/toConsumableArray';
import AnimateHeight from 'react-animate-height';
import ReactDOM from 'react-dom';
import { Manager, Reference, Popper } from 'react-popper';
import Transition from 'react-transition-group/Transition';
import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
import _setInterval from '@babel/runtime-corejs3/core-js-stable/set-interval';
import { useRootClose, Modal as Modal$1 } from 'react-overlays';
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
import _Object$assign from '@babel/runtime-corejs3/core-js-stable/object/assign';
import Modal$1$1 from 'react-modal';
import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
import _findIndex from 'lodash/findIndex';
import MaskedInput from 'react-text-mask';
import createautoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import _fillInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/fill';
import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
import _omit from 'lodash/omit';
import _pick from 'lodash/pick';
import { parse, isValid, format, isAfter, isBefore } from 'date-fns';
import ReactDatePicker from 'react-datepicker';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.regexp.to-string';
import _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
import _parseInt$1 from 'lodash/parseInt';
import _isFinite from 'lodash/isFinite';
import _findIndexInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find-index';
import formatMessage from 'format-message';
import { formatChildren } from 'format-message/react';
import 'core-js/modules/es.symbol';
import 'core-js/modules/es.symbol.description';
import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
import _classCallCheck from '@babel/runtime-corejs2/helpers/classCallCheck';
import _createClass from '@babel/runtime-corejs2/helpers/createClass';
import _possibleConstructorReturn from '@babel/runtime-corejs2/helpers/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime-corejs2/helpers/getPrototypeOf';
import _assertThisInitialized from '@babel/runtime-corejs2/helpers/assertThisInitialized';
import _inherits from '@babel/runtime-corejs2/helpers/inherits';

var regular = {
  'im-icon-accessibility': '600',
  'im-icon-add': '601',
  'im-icon-add-circle': '602',
  'im-icon-agent': '603',
  'im-icon-align-center': '604',
  'im-icon-align-justify': '605',
  'im-icon-align-left': '606',
  'im-icon-align-right': '607',
  'im-icon-archive': '608',
  'im-icon-arrow-down': '609',
  'im-icon-arrow-left': '60a',
  'im-icon-arrow-right': '60b',
  'im-icon-arrow-up': '60c',
  'im-icon-asterisk': '60d',
  'im-icon-attachment': '60e',
  'im-icon-bell': '60f',
  'im-icon-bicycle': '610',
  'im-icon-bold': '611',
  'im-icon-book': '612',
  'im-icon-bookmark': '613',
  'im-icon-boy': '614',
  'im-icon-briefcase': '615',
  'im-icon-bullhorn': '616',
  'im-icon-calendar': '617',
  'im-icon-camera': '618',
  'im-icon-certificate': '619',
  'im-icon-check-document': '61a',
  'im-icon-checkbox': '61b',
  'im-icon-checkbox-checked': '61c',
  'im-icon-chevron-down': '61d',
  'im-icon-chevron-left': '61e',
  'im-icon-chevron-right': '61f',
  'im-icon-chevron-up': '620',
  'im-icon-circle-arrow-down': '621',
  'im-icon-circle-arrow-left': '622',
  'im-icon-circle-arrow-right': '623',
  'im-icon-circle-arrow-up': '624',
  'im-icon-cog': '625',
  'im-icon-comment': '626',
  'im-icon-copy': '627',
  'im-icon-cut': '628',
  'im-icon-dashboard': '629',
  'im-icon-discussion': '62a',
  'im-icon-dollar-sign': '62b',
  'im-icon-double-chevron-down': '62c',
  'im-icon-double-chevron-left': '62d',
  'im-icon-double-chevron-right': '62e',
  'im-icon-double-chevron-up': '62f',
  'im-icon-download': '630',
  'im-icon-download-alt': '631',
  'im-icon-edit': '632',
  'im-icon-edit-document': '633',
  'im-icon-element-block': '634',
  'im-icon-element-page': '635',
  'im-icon-element-section': '636',
  'im-icon-envelope': '637',
  'im-icon-exclamation': '638',
  'im-icon-exclamation-circle': '639',
  'im-icon-exclamation-sign': '63a',
  'im-icon-export': '63b',
  'im-icon-external-link': '63c',
  'im-icon-eye-closed': '63d',
  'im-icon-eye-open': '63e',
  'im-icon-federal': '63f',
  'im-icon-file': '640',
  'im-icon-file-open': '641',
  'im-icon-fill': '642',
  'im-icon-film': '643',
  'im-icon-fire': '644',
  'im-icon-flag-empty': '645',
  'im-icon-flag-filled': '646',
  'im-icon-flash': '647',
  'im-icon-folder-close': '648',
  'im-icon-folder-open': '649',
  'im-icon-folder-up-level': '64a',
  'im-icon-font': '64b',
  'im-icon-form-agreement': '64c',
  'im-icon-form-checkbox': '64d',
  'im-icon-form-dropdown': '64e',
  'im-icon-form-number': '64f',
  'im-icon-form-radio': '650',
  'im-icon-form-text': '651',
  'im-icon-form-text-box': '652',
  'im-icon-fullscreen': '653',
  'im-icon-funnel': '654',
  'im-icon-girl': '655',
  'im-icon-globe': '656',
  'im-icon-hand-down': '657',
  'im-icon-hand-left': '658',
  'im-icon-hand-right': '659',
  'im-icon-hand-up': '65a',
  'im-icon-health': '65b',
  'im-icon-heart-empty': '65c',
  'im-icon-heart-filled': '65d',
  'im-icon-history': '65e',
  'im-icon-home': '65f',
  'im-icon-hourglass': '660',
  'im-icon-household': '661',
  'im-icon-inbox': '662',
  'im-icon-indent-left': '663',
  'im-icon-indent-right': '664',
  'im-icon-info': '665',
  'im-icon-info-circle': '666',
  'im-icon-italic': '667',
  'im-icon-leaf': '668',
  'im-icon-list': '669',
  'im-icon-list-numbered': '66a',
  'im-icon-list-thumbnails': '66b',
  'im-icon-list-unordered': '66c',
  'im-icon-lock': '66d',
  'im-icon-lock-open': '66e',
  'im-icon-log-in': '66f',
  'im-icon-log-out': '670',
  'im-icon-man': '671',
  'im-icon-map-marker': '672',
  'im-icon-medical': '673',
  'im-icon-menu-btn': '674',
  'im-icon-minus': '675',
  'im-icon-minus-circle': '676',
  'im-icon-move': '677',
  'im-icon-new-window': '678',
  'im-icon-no-symbol': '679',
  'im-icon-non-smoker': '67a',
  'im-icon-ok': '67b',
  'im-icon-ok-circle': '67c',
  'im-icon-options-horizontal': '67d',
  'im-icon-options-vertical': '67e',
  'im-icon-paragraph': '67f',
  'im-icon-paste': '680',
  'im-icon-phone': '681',
  'im-icon-picture': '682',
  'im-icon-piggy-bank': '683',
  'im-icon-play-circle': '684',
  'im-icon-power': '685',
  'im-icon-print': '686',
  'im-icon-push-pin': '687',
  'im-icon-question': '688',
  'im-icon-question-circle': '689',
  'im-icon-random': '68a',
  'im-icon-read-message': '68b',
  'im-icon-redo': '68c',
  'im-icon-refresh': '68d',
  'im-icon-remove': '68e',
  'im-icon-remove-circle': '68f',
  'im-icon-repeat': '690',
  'im-icon-resize-full': '691',
  'im-icon-resize-horizontal': '692',
  'im-icon-resize-small': '693',
  'im-icon-resize-vertical': '694',
  'im-icon-retweet': '695',
  'im-icon-road': '696',
  'im-icon-rx': '697',
  'im-icon-save': '698',
  'im-icon-screenshot': '699',
  'im-icon-search': '69a',
  'im-icon-share': '69b',
  'im-icon-shopping-cart': '69c',
  'im-icon-smoker': '69d',
  'im-icon-sort': '69e',
  'im-icon-sort-alpha': '69f',
  'im-icon-sort-alpha-reverse': '6a0',
  'im-icon-sort-ascending': '6a1',
  'im-icon-sort-descending': '6a2',
  'im-icon-sort-num': '6a3',
  'im-icon-sort-num-reverse': '6a4',
  'im-icon-speak-to-expert': '6a5',
  'im-icon-star-empty': '6a6',
  'im-icon-star-filled': '6a7',
  'im-icon-stats': '6a8',
  'im-icon-switch': '6a9',
  'im-icon-tag': '6aa',
  'im-icon-tags': '6ab',
  'im-icon-tasks': '6ac',
  'im-icon-text-color': '6ad',
  'im-icon-text-height': '6ae',
  'im-icon-text-size': '6af',
  'im-icon-text-width': '6b0',
  'im-icon-thumbnails': '6b1',
  'im-icon-thumbnails-large': '6b2',
  'im-icon-thumbs-down': '6b3',
  'im-icon-thumbs-up': '6b4',
  'im-icon-time': '6b5',
  'im-icon-transfer': '6b6',
  'im-icon-trash': '6b7',
  'im-icon-umbrella': '6b8',
  'im-icon-undo': '6b9',
  'im-icon-upload': '6ba',
  'im-icon-user': '6bb',
  'im-icon-user-shield': '6bc',
  'im-icon-users': '6bd',
  'im-icon-video': '6be',
  'im-icon-voice-check': '6bf',
  'im-icon-wallet': '6c0',
  'im-icon-woman': '6c1',
  'im-icon-wrench': '6c2',
  'im-icon-zoom-in': '6c3',
  'im-icon-zoom-out': '6c4',
  'im-icon-keyhole-shield': '6c5',
  'im-icon-security-checked': '6c6'
};

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  font-family: indv-mkt-icons !important;\n  font-size: ", ";\n  font-style: normal;\n  font-weight: inherit;\n  font-variant: normal;\n  line-height: 1;\n  speak: none;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: text-bottom;\n\n  &:before {\n    content: \"\\e", "\";\n  }\n"], ["\n  display: inline-block;\n  font-family: indv-mkt-icons !important;\n  font-size: ", ";\n  font-style: normal;\n  font-weight: inherit;\n  font-variant: normal;\n  line-height: 1;\n  speak: none;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  vertical-align: text-bottom;\n\n  &:before {\n    content: \"\\\\e", "\";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var StyledIcon = styled.i(_templateObject(), function (props) {
  return props.fontSize;
}, function (props) {
  return props.content;
});

function Icon(_ref) {
  var name = _ref.name,
      size = _ref.size,
      other = _objectWithoutProperties(_ref, ["name", "size"]);

  var iconName = "im-icon-".concat(name);
  var styledIconProps = {
    content: regular[iconName],
    fontSize: size !== undefined ? "".concat(size, "px") : 'inherit'
  };
  return React.createElement(StyledIcon, _extends({
    "aria-hidden": true
  }, styledIconProps, other));
}

Icon.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Name of the icon to display */
  name: PropTypes.string.isRequired,

  /** Specify icon size in pixels */
  size: PropTypes.number
} : {};
Icon.defaultProps = {
  size: undefined
};

var useTheme = function useTheme() {
  return useContext(ThemeContext);
};

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n    position: absolute !important;\n    left: -10000px;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n  "]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
// https://webaim.org/techniques/css/invisiblecontent/#absolutepositioning

function screenReaderOnly(Component) {
  var ScreenReaderOnly = styled(Component)(_templateObject$1());
  return ScreenReaderOnly;
}

function _templateObject$2() {
  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  display: flex;\n  font-weight: bold;\n  opacity: 0.2;\n  padding: 0;\n\n  &:hover,\n  &:focus {\n    opacity: 0.5;\n  }\n"]);

  _templateObject$2 = function _templateObject() {
    return data;
  };

  return data;
}
var DismissButtonBase = styled.button(_templateObject$2());
var ScreenReaderText = screenReaderOnly('span');
var DismissButton = React.forwardRef(function DismissButton(props, ref) {
  return React.createElement(DismissButtonBase, _extends({
    "aria-label": "Close",
    type: "button"
  }, props, {
    ref: ref
  }), React.createElement(Icon, {
    name: "remove"
  }), React.createElement(ScreenReaderText, null, "Close"));
});

function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 2px;\n  color: ", ";\n  display: flex;\n  margin-bottom: 25px;\n  padding: 15px;\n\n  a {\n    color: ", ";\n    text-decoration: underline;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n\n  button[aria-expanded] {\n    color: ", ";\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  align-self: center;\n  flex-grow: 1;\n  word-break: break-word;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  align-self: start;\n  color: ", ";\n  font-weight: normal;\n  opacity: 0.8;\n\n  i {\n    font-size: 27px;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$3() {
  var data = _taggedTemplateLiteral(["\n  align-self: start;\n  color: ", ";\n  display: none;\n\n  @media (min-width: ", ") {\n    display: inline;\n    margin-right: 8px;\n  }\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var NotificationIcon = styled(Icon)(_templateObject$3(), function (props) {
  return props.iconColor;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var Dismiss = styled(DismissButton)(_templateObject2(), function (props) {
  return props.color.textColor;
});
var ContentWrapper = styled.div(_templateObject3());

function NotificationContent(props) {
  var includeIcon = props.includeIcon,
      isDismissable = props.isDismissable,
      onDismiss = props.onDismiss,
      children = props.children,
      iconName = props.iconName,
      iconColor = props.iconColor,
      color = props.color,
      dismissNotification = props.dismissNotification;

  function dismiss() {
    onDismiss();
    dismissNotification();
  }

  return React.createElement(React.Fragment, null, includeIcon && React.createElement(NotificationIcon, {
    name: iconName,
    iconColor: iconColor,
    size: 28
  }), React.createElement(ContentWrapper, null, children), isDismissable && React.createElement(Dismiss, {
    onClick: dismiss,
    color: color
  }));
}

var Notification = styled.div(_templateObject4(), function (props) {
  return props.variant.bgColor;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.variant.textColor;
});
function useNotification() {
  var styleType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'base';
  return function BaseNotification(_ref) {
    var role = _ref.role,
        type = _ref.type,
        children = _ref.children,
        rest = _objectWithoutProperties(_ref, ["role", "type", "children"]);

    var theme = useTheme();
    var color = theme.notificationStyles[type][styleType];
    var iconName = theme.validationIconName[type];
    var iconColor = styleType === 'light' ? theme.colors[type] : theme.colors.white;

    var notificationContentProps = _objectSpread({
      color: color,
      iconName: iconName,
      iconColor: iconColor
    }, rest);

    var _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        isDismissed = _useState2[0],
        setIsDismissed = _useState2[1];

    function dismissNotification() {
      setIsDismissed(true);
    }

    return !isDismissed && React.createElement(Notification, {
      role: role,
      variant: color
    }, React.createElement(NotificationContent, _extends({
      dismissNotification: dismissNotification
    }, notificationContentProps), children));
  };
}

var DefaultNotification = useNotification();

function Notification$1(props) {
  return React.createElement(DefaultNotification, props);
}

Notification$1.propTypes = process.env.NODE_ENV !== "production" ? {
  /* The type of notification to render */
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,

  /* Display an icon in the notification on a screen >= 768px */
  includeIcon: PropTypes.bool,

  /* Display a dismiss button that will close the notification */
  isDismissable: PropTypes.bool,
  role: PropTypes.oneOf(['dialog', 'alert']),

  /* Function to execute when the dialog is closed */
  onDismiss: PropTypes.func,
  children: PropTypes.node
} : {};
Notification$1.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop
};

var Notification$2 = useNotification('light');

function LightNotification(props) {
  return React.createElement(Notification$2, props);
}

LightNotification.propTypes = process.env.NODE_ENV !== "production" ? {
  /* The type of notification to render */
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,

  /* Display an icon in the notification on a screen >= 768px */
  includeIcon: PropTypes.bool,

  /* Display a dismiss button that will close the notification */
  isDismissable: PropTypes.bool,
  role: PropTypes.oneOf(['dialog', 'alert']),

  /* Function to execute when the dialog is closed */
  onDismiss: PropTypes.func,
  children: PropTypes.node
} : {};
LightNotification.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop
};

var Notification$3 = useNotification('messageOnly');

function MessageNotification(props) {
  return React.createElement(Notification$3, props);
}

MessageNotification.propTypes = process.env.NODE_ENV !== "production" ? {
  /* The type of notification to render */
  type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,

  /* Display an icon in the notification on a screen >= 768px */
  includeIcon: PropTypes.bool,

  /* Display a dismiss button that will close the notification */
  isDismissable: PropTypes.bool,
  role: PropTypes.oneOf(['dialog', 'alert']),

  /* Function to execute when the dialog is closed */
  onDismiss: PropTypes.func,
  children: PropTypes.node
} : {};
MessageNotification.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop
};

var propTypes = process.env.NODE_ENV !== "production" ? {
  emphasizedText: PropTypes.string,
  text: PropTypes.string.isRequired
} : {};
var defaultProps = {
  emphasizedText: undefined
};
function InlineMessage(_ref) {
  var emphasizedText = _ref.emphasizedText,
      text = _ref.text;
  return React.createElement("span", null, emphasizedText !== undefined ? React.createElement("strong", null, emphasizedText) : null, ' ', text);
}
InlineMessage.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
InlineMessage.defaultProps = defaultProps;
function Message(_ref2) {
  var emphasizedText = _ref2.emphasizedText,
      text = _ref2.text;
  return React.createElement("span", null, emphasizedText !== undefined ? React.createElement(React.Fragment, null, React.createElement("strong", null, emphasizedText), React.createElement("br", null)) : null, text);
}
Message.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Message.defaultProps = defaultProps;

var DrawerContext = React.createContext({});

function generateAlphaName() {
  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  var text = '';

  for (var i = 0; i < 6; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
}

function useUniqueId(providedId) {
  var idRef = useRef(providedId || generateAlphaName());
  return idRef.current;
}

function _templateObject4$1() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n\n  > div {\n    border-bottom: 4px solid ", ";\n    padding: ", ";\n  }\n"]);

  _templateObject4$1 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$1() {
  var data = _taggedTemplateLiteral(["\n  margin-right: 0.4em;\n  position: relative;\n  top: -2px;\n"]);

  _templateObject3$1 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$1() {
  var data = _taggedTemplateLiteral(["\n  background: none;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  font-size: 18px;\n  justify-content: space-between;\n  padding: 10px 15px;\n  width: 100%;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"]);

  _templateObject2$1 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$4() {
  var data = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"]);

  _templateObject$4 = function _templateObject() {
    return data;
  };

  return data;
}
var PanelWrapper = styled.div(_templateObject$4(), function (props) {
  return props.theme.colors.gray3;
});
var PanelButton = styled.button(_templateObject2$1(), function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.brandColors.vbBlue;
});
var PanelIcon = styled(Icon)(_templateObject3$1());
var PanelBody = styled(function (_ref) {
  var noPadding = _ref.noPadding,
      rest = _objectWithoutProperties(_ref, ["noPadding"]);

  return React.createElement(AnimateHeight, rest);
})(_templateObject4$1(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.colors.gray3;
}, function (props) {
  return props.noPadding ? '0' : '10px 10px 10px 40px';
});

function DrawerPanel(props) {
  var children = props.children,
      isOpen = props.isOpen,
      noPadding = props.noPadding,
      onItemClick = props.onItemClick,
      title = props.title,
      titleAside = props.titleAside,
      other = _objectWithoutProperties(props, ["children", "isOpen", "noPadding", "onItemClick", "title", "titleAside"]);

  var _React$useContext = React.useContext(DrawerContext),
      openedIconName = _React$useContext.openedIconName,
      closedIconName = _React$useContext.closedIconName;

  var headingAriaId = "".concat(useUniqueId(other.id), "-heading");
  var regionAriaId = "".concat(useUniqueId(other.id), "-region");
  return React.createElement(PanelWrapper, other, React.createElement("div", {
    id: headingAriaId,
    role: "heading"
  }, React.createElement(PanelButton, {
    "aria-expanded": isOpen,
    "aria-controls": regionAriaId,
    onClick: function onClick() {
      return onItemClick();
    }
  }, React.createElement("span", null, React.createElement(PanelIcon, {
    name: isOpen ? openedIconName : closedIconName
  }), title), titleAside && React.createElement("aside", null, titleAside))), React.createElement(PanelBody, {
    "aria-labelledby": headingAriaId,
    duration: 300,
    height: isOpen ? 'auto' : 0,
    id: regionAriaId,
    noPadding: noPadding,
    role: "region"
  }, children));
}

DrawerPanel.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any.isRequired,

  /** Title text displayed next to the open/close icon */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,

  /** Aside text/content displayed on the right side of the panel title */
  titleAside: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

  /** @ignore */
  isOpen: PropTypes.bool,

  /** Removes the default padding from the panel body */
  noPadding: PropTypes.bool,

  /** @ignore */
  onItemClick: PropTypes.func
} : {};
DrawerPanel.defaultProps = {
  isOpen: false,
  noPadding: false,
  titleAside: undefined,
  onItemClick: _noop
};

function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$1(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject$5() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  box-shadow: 0 1px 1px ", ";\n  margin-bottom: 25px;\n"]);

  _templateObject$5 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledDrawer = styled.div(_templateObject$5(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray3;
}, function (props) {
  return props.theme.colors.boxShadowLight;
});

function Drawer(props) {
  var activeKeys = props.activeKeys,
      children = props.children,
      closedIconName = props.closedIconName,
      isAccordion = props.isAccordion,
      onActiveKeysChanged = props.onActiveKeysChanged,
      openedIconName = props.openedIconName,
      other = _objectWithoutProperties(props, ["activeKeys", "children", "closedIconName", "isAccordion", "onActiveKeysChanged", "openedIconName"]);

  function _onItemClick(key) {
    var nextActiveKeys = _toConsumableArray(activeKeys);

    if (isAccordion) {
      nextActiveKeys = nextActiveKeys[0] === key ? [] : [key];
    } else {
      var index = _indexOfInstanceProperty(nextActiveKeys).call(nextActiveKeys, key);

      var isOpen = index > -1;

      if (isOpen) {
        _spliceInstanceProperty(nextActiveKeys).call(nextActiveKeys, index, 1);
      } else {
        nextActiveKeys.push(key);
      }
    }

    onActiveKeysChanged(nextActiveKeys);
  }

  return React.createElement(DrawerContext.Provider, {
    value: {
      openedIconName: openedIconName,
      closedIconName: closedIconName
    }
  }, React.createElement(StyledDrawer, other, _mapInstanceProperty(Children).call(Children, children, function (child, index) {
    if (child) {
      // If there is no key provided, use the panel order as default key
      var key = child && child.key || String(index + 1);
      var isOpen = false;

      if (isAccordion) {
        isOpen = activeKeys[0] === key;
      } else {
        isOpen = _indexOfInstanceProperty(activeKeys).call(activeKeys, key) > -1;
      }

      var childProps = _objectSpread$1({}, child.props, {
        key: key,
        isOpen: isOpen,
        onItemClick: function onItemClick() {
          return _onItemClick(key);
        }
      });

      return React.cloneElement(child, childProps);
    }

    return null;
  })));
}

Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Set which panels are open */
  activeKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /** Usually only one or more Drawer.Panel elements */
  children: PropTypes.node,

  /** Override the default plus icon with another OE icon name */
  closedIconName: PropTypes.string,

  /** Only allows one DrawerPanel to be open at a time */
  isAccordion: PropTypes.bool,

  /** Function called when changing active keys */
  onActiveKeysChanged: PropTypes.func.isRequired,

  /** Override the default minus icon with another OE icon name */
  openedIconName: PropTypes.string
} : {};
Drawer.defaultProps = {
  activeKeys: [],
  isAccordion: false,
  closedIconName: 'add',
  openedIconName: 'minus',
  children: undefined
};
Drawer.Panel = DrawerPanel;

var OrientationContext = React.createContext('stacked');

function _templateObject2$2() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  flex: 0 0 auto;\n  font-size: 21.6px;\n  line-height: ", ";\n  margin: 0 0 10px 0;\n  width: 100%;\n"]);

  _templateObject2$2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$6() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  margin-bottom: 25px;\n  width: 100%;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n\n  ", ";\n"]);

  _templateObject$6 = function _templateObject() {
    return data;
  };

  return data;
}
var FieldsetBase = styled.div(_templateObject$6(), function (props) {
  return props.orientation === 'inline' && css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
});
var Legend = styled.div(_templateObject2$2(), function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
});

function Fieldset(props) {
  var legendContent = props.legendContent,
      children = props.children,
      other = _objectWithoutProperties(props, ["legendContent", "children"]);

  var legendId = legendContent ? generateAlphaName() : undefined;
  var orientation = React.useContext(OrientationContext);
  return React.createElement(FieldsetBase, _extends({
    role: "group",
    "aria-labelledby": legendId,
    orientation: orientation
  }, other), legendContent && React.createElement(Legend, {
    id: legendId
  }, legendContent), children);
}

Fieldset.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Determine whether or not to add a legend and what content to display  */
  legendContent: PropTypes.node,
  children: PropTypes.node
} : {};
Fieldset.defaultProps = {
  legendContent: null,
  children: undefined
};
Fieldset.Legend = Legend;

function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$2(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$2(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

var Fade = function Fade(_ref) {
  var children = _ref.children,
      duration = _ref.duration,
      opacity = _ref.opacity,
      otherProps = _objectWithoutProperties(_ref, ["children", "duration", "opacity"]);

  var transitionStyles = {
    transition: "opacity ".concat(duration, "ms linear"),
    opacity: 0
  };
  var stateStyles = {
    entering: {
      opacity: opacity
    },
    entered: {
      opacity: opacity
    }
  };
  return React.createElement(Transition, _extends({}, otherProps, {
    timeout: duration
  }), function (state, innerProps) {
    return React.cloneElement(children, _objectSpread$2({}, innerProps, {
      style: _objectSpread$2({}, children.props.style, {}, transitionStyles, {}, stateStyles[state])
    }));
  });
};

Fade.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any.isRequired,
  duration: PropTypes.number,
  opacity: PropTypes.number
} : {};
Fade.defaultProps = {
  duration: 150,
  opacity: 1
};

function _templateObject$7() {
  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  cursor: pointer;\n  color: ", ";\n  font-size: inherit;\n  line-height: ", ";\n  padding: 0;\n  text-decoration: underline;\n\n  &:hover,\n  &:focus,\n  &:active {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:active {\n    box-shadow: none;\n  }\n\n  &[disabled]:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"]);

  _templateObject$7 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledButton = styled.button(_templateObject$7(), function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.variant.hoverTextColor;
}, function (props) {
  return props.variant.textColor;
});
var LinkButton = React.forwardRef(function LinkButton(props, ref) {
  var children = props.children,
      styleType = props.styleType,
      other = _objectWithoutProperties(props, ["children", "styleType"]);

  var theme = useTheme();
  var variant = theme.buttonStyles.linkButton.variant[styleType];
  return React.createElement(StyledButton, _extends({
    ref: ref,
    variant: variant,
    type: "button"
  }, other), children);
});
LinkButton.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,

  /** Select the color style of the button, types come from theme buttonStyles.linkButton */
  styleType: PropTypes.string
} : {};
LinkButton.defaultProps = {
  styleType: 'default'
};

function _templateObject$8() {
  var data = _taggedTemplateLiteral(["\n  border-bottom: ", ";\n  border-bottom-color: ", ";\n  line-height: 1;\n  text-decoration: none;\n\n  &:hover,\n  :focus {\n    border-bottom: ", ";\n    border-bottom-color: ", ";\n  }\n"]);

  _templateObject$8 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledButton$1 = styled(LinkButton)(_templateObject$8(), function (props) {
  return !props.suppressUnderline && "1px dashed";
}, function (props) {
  return !props.suppressUnderline && props.variant.textColor;
}, function (props) {
  return !props.suppressUnderline && "1px solid";
}, function (props) {
  return !props.suppressUnderline && props.variant.textColor;
});
var PopoverLink = React.forwardRef(function PopoverLink(props, ref) {
  var children = props.children,
      styleType = props.styleType,
      suppressUnderline = props.suppressUnderline,
      other = _objectWithoutProperties(props, ["children", "styleType", "suppressUnderline"]);

  var theme = useTheme();
  var variant = theme.buttonStyles.linkButton.variant[styleType];
  return React.createElement(StyledButton$1, _extends({
    ref: ref,
    variant: variant,
    suppressUnderline: suppressUnderline
  }, other), children);
});
PopoverLink.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,

  /** Select the color style of the button, types come from theme */
  styleType: PropTypes.string,

  /** Hide underline from link. Useful for children like Icons */
  suppressUnderline: PropTypes.bool
} : {};
PopoverLink.defaultProps = {
  styleType: 'primary',
  suppressUnderline: false
};

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n  border-left-color: ", ";\n  border-width: 5px 0 5px 5px;\n  right: 0;\n"]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n  border-bottom-color: ", ";\n  border-width: 0 5px 5px;\n  top: 0;\n"]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  border-right-color: ", ";\n  border-width: 5px 5px 5px 0;\n  left: 0;\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  border-top-color: ", ";\n  border-width: 5px 5px 0;\n  bottom: 0;\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  padding: 0 5px;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  padding: 5px 0;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  padding: 0 5px;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$2() {
  var data = _taggedTemplateLiteral(["\n  padding: 5px 0;\n"]);

  _templateObject4$2 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$2() {
  var data = _taggedTemplateLiteral(["\n  border-color: transparent;\n  border-style: solid;\n  height: 0;\n  position: absolute;\n  width: 0;\n"]);

  _templateObject3$2 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$3() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: 2px;\n  color: ", ";\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: 15px;\n  line-height: ", ";\n  max-width: 250px;\n  padding: 3px 8px;\n  text-align: left;\n"]);

  _templateObject2$3 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$9() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 999;\n"]);

  _templateObject$9 = function _templateObject() {
    return data;
  };

  return data;
}
var TooltipBase = styled.div(_templateObject$9());
var TooltipInner = styled.div(_templateObject2$3(), function (props) {
  return props.theme.colors.softwareBlue;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
});
var TooltipArrowBase = styled.div(_templateObject3$2());
var TooltipTop = styled(TooltipBase)(_templateObject4$2());
var TooltipRight = styled(TooltipBase)(_templateObject5());
var TooltipBottom = styled(TooltipBase)(_templateObject6());
var TooltipLeft = styled(TooltipBase)(_templateObject7());
var TooltipArrowTop = styled(TooltipArrowBase)(_templateObject8(), function (props) {
  return props.theme.colors.softwareBlue;
});
var TooltipArrowRight = styled(TooltipArrowBase)(_templateObject9(), function (props) {
  return props.theme.colors.softwareBlue;
});
var TooltipArrowBottom = styled(TooltipArrowBase)(_templateObject10(), function (props) {
  return props.theme.colors.softwareBlue;
});
var TooltipArrowLeft = styled(TooltipArrowBase)(_templateObject11(), function (props) {
  return props.theme.colors.softwareBlue;
});
var ScreenReaderContent = screenReaderOnly('div');

function Tooltip(props) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      show = _useState2[0],
      setShow = _useState2[1];

  var name = props.name,
      disableHover = props.disableHover,
      disableFocus = props.disableFocus,
      position = props.position,
      content = props.content,
      styleType = props.styleType,
      children = props.children,
      other = _objectWithoutProperties(props, ["name", "disableHover", "disableFocus", "position", "content", "styleType", "children"]);

  var TooltipStyled;
  var TooltipArrow;
  var tooltipId = name ? "es-tooltip__".concat(name) : undefined;

  switch (position) {
    case 'right':
      TooltipStyled = TooltipRight;
      TooltipArrow = TooltipArrowRight;
      break;

    case 'bottom':
      TooltipStyled = TooltipBottom;
      TooltipArrow = TooltipArrowBottom;
      break;

    case 'left':
      TooltipStyled = TooltipLeft;
      TooltipArrow = TooltipArrowLeft;
      break;

    default:
      TooltipStyled = TooltipTop;
      TooltipArrow = TooltipArrowTop;
      break;
  }

  function showTooltip() {
    setShow(true);
  }

  function hideTooltip() {
    setShow(false);
  }

  function toggleShow() {
    setShow(!show);
  }

  function closeOnEscape(event) {
    if (event.keyCode === 27) {
      setShow(false);
    }
  }

  var descriptionId = "".concat(useUniqueId(other.id), "-description");
  return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref) {
    var ref = _ref.ref;
    return React.createElement(PopoverLink, {
      ref: ref,
      onBlur: hideTooltip,
      onFocus: !disableFocus ? showTooltip : undefined,
      onMouseEnter: !disableHover ? showTooltip : undefined,
      onMouseLeave: !disableHover ? hideTooltip : undefined,
      onKeyDown: closeOnEscape,
      onClick: toggleShow,
      "aria-describedby": descriptionId,
      styleType: styleType
    }, children);
  }), React.createElement(ScreenReaderContent, {
    id: descriptionId
  }, content), ReactDOM.createPortal(React.createElement(Popper, {
    placement: position
  }, function (_ref2) {
    var ref = _ref2.ref,
        style = _ref2.style,
        placement = _ref2.placement,
        arrowProps = _ref2.arrowProps;
    return React.createElement(Fade, {
      in: show,
      mountOnEnter: true,
      unmountOnExit: true
    }, React.createElement(TooltipStyled, _extends({
      ref: ref,
      role: "tooltip",
      id: tooltipId,
      style: style,
      "aria-live": "polite"
    }, other), React.createElement(TooltipArrow, {
      ref: arrowProps.ref,
      style: arrowProps.style
    }), React.createElement(TooltipInner, null, content)));
  }), document.querySelector('body')));
}

Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
  name: PropTypes.string.isRequired,
  children: PropTypes.any.isRequired,

  /** The text the tooltip displays */
  content: PropTypes.node.isRequired,

  /** Set the position of the tooltip over the content */
  position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),

  /** Disables the default show onHover functionality */
  disableHover: PropTypes.bool,

  /** Disables the default show onFocus functionality */
  disableFocus: PropTypes.bool,

  /** Select the color style of the button, types come from theme */
  styleType: PropTypes.string
} : {};
Tooltip.defaultProps = {
  position: 'top',
  disableHover: false,
  disableFocus: false,
  styleType: undefined
};

function _templateObject$a() {
  var data = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  border-radius: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: block;\n  outline: none;\n  overflow: visible;\n  padding: 0;\n  text-decoration: none;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    display: ", ";\n    width: ", ";\n  }\n\n  .es-button__display {\n    background-color: ", ";\n    border-color: transparent;\n    box-shadow: 0 4px 0 0 ", ";\n    border-radius: ", ";\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    font-family: inherit;\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n    min-width: 100px;\n    outline: none;\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    padding-top: ", ";\n    position: relative;\n    text-align: center;\n    text-transform: ", ";\n    transition: background-color 150ms linear, color 150ms linear;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  &:hover .es-button__display {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &:focus-within {\n    box-shadow: 0 2px 4px 4px ", ";\n  }\n\n  &:active {\n    box-shadow: none;\n  }\n\n  &&:active .es-button__display {\n    box-shadow: 0 0 0 0 transparent;\n    top: 4px;\n  }\n\n  &[disabled],\n  &[disabled] .es-button__display {\n    cursor: not-allowed;\n    opacity: 0.65;\n\n    > * {\n      pointer-events: none;\n    }\n  }\n\n  &[disabled]:hover .es-button__display {\n    background-color: ", ";\n  }\n"]);

  _templateObject$a = function _templateObject() {
    return data;
  };

  return data;
}
var StyledButton$2 = styled.button(_templateObject$a(), function (props) {
  return props.buttonSize.borderRadius;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.block ? 'block' : 'inline-block';
}, function (props) {
  return props.block ? '100%' : 'auto';
}, function (props) {
  return props.variant.bgColor;
}, function (props) {
  return props.variant.boxShadowColor;
}, function (props) {
  return props.buttonSize.borderRadius;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.buttonSize.fontSize;
}, function (props) {
  return props.buttonSize.fontWeight || 'normal';
}, function (props) {
  return props.buttonSize.lineHeight ? props.buttonSize.lineHeight : props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.buttonSize.paddingBottom;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.paddingTop;
}, function (props) {
  return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
}, function (props) {
  return props.variant.hoverBgColor;
}, function (props) {
  return props.variant.hoverTextColor;
}, function (props) {
  return props.theme.colors.inputFocus;
}, function (props) {
  return props.variant.bgColor;
});
var Button = React.forwardRef(function Button(props, ref) {
  var children = props.children,
      styleType = props.styleType,
      size = props.size,
      block = props.block,
      other = _objectWithoutProperties(props, ["children", "styleType", "size", "block"]);

  var theme = useTheme();
  var buttonSize = theme.buttonStyles.button.size[size];
  var variant = theme.buttonStyles.button.variant[styleType];
  return React.createElement(StyledButton$2, _extends({
    type: "button",
    block: block,
    buttonSize: buttonSize,
    variant: variant,
    ref: ref
  }, other), React.createElement("div", {
    className: "es-button__display"
  }, children));
});
Button.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,

  /** Select the color style of the button, types come from theme buttonStyles.button */
  styleType: PropTypes.string,
  size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),

  /** Make the button's width the size of it's parent container */
  block: PropTypes.bool
} : {};
Button.defaultProps = {
  styleType: 'default',
  block: false,
  size: 'default'
};

function _templateObject2$4() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  &::before,\n  &::after {\n    border: solid transparent;\n    content: '';\n    position: absolute;\n  }\n  &[data-placement*='bottom'] {\n    top: 0;\n    left: 0;\n    margin-top: -", "px;\n    &::before {\n      border-width: ", ";\n      border-color: transparent;\n      border-bottom-color: ", ";\n      margin-left: -", "px;\n    }\n    &::after {\n      border-width: ", ";\n      border-color: transparent;\n      border-bottom-color: ", ";\n      margin-left: -", "px;\n    }\n  }\n  &[data-placement*='top'] {\n    &::before {\n      border-width: ", "px;\n      border-color: transparent;\n      border-top-color: ", ";\n      margin-left: -", "px;\n    }\n    &::after {\n      border-width: ", "px;\n      border-color: transparent;\n      border-top-color: ", ";\n      margin-left: -", "px;\n    }\n  }\n  &[data-placement*='right'] {\n    margin-left: -", "px;\n    &::before {\n      border-width: ", ";\n      border-color: transparent;\n      border-right-color: ", ";\n      margin-top: -", "px;\n    }\n    &::after {\n      border-width: ", ";\n      border-color: transparent;\n      border-right-color: ", ";\n      margin-top: -", "px;\n    }\n  }\n  &[data-placement*='left'] {\n    right: 0;\n    &::before {\n      border-width: ", "px;\n      border-color: transparent;\n      border-left-color: ", ";\n      margin-top: -", "px;\n    }\n    &::after {\n      border-width: ", "px;\n      border-color: transparent;\n      border-left-color: ", ";\n      margin-top: -", "px;\n    }\n  }\n"]);

  _templateObject2$4 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$b() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid rgba(0, 0, 0, 0.3);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 2px;\n  margin: ", "px;\n  max-width: 350px;\n  min-width: 270px;\n  position: absolute;\n  text-align: center;\n  z-index: 5;\n"]);

  _templateObject$b = function _templateObject() {
    return data;
  };

  return data;
}
var PopperBox = styled.div(_templateObject$b(), function (props) {
  return props.arrowSize.marginSize;
});
var Arrow = styled.div(_templateObject2$4(), function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.arrowSize.bottomBorderWidth;
}, function (props) {
  return props.arrowSize.borderColor;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.bottomWidth;
}, function (props) {
  return props.hasTitle ? props.theme.colors.popoverHeader : props.theme.colors.white;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.borderColor;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.arrowSize.rightBorderWidth;
}, function (props) {
  return props.arrowSize.borderColor;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.rightWidth;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.borderColor;
}, function (props) {
  return props.arrowSize.borderSize;
}, function (props) {
  return props.arrowSize.size;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.arrowSize.size;
});
var arrowSizes = {
  sm: {
    size: '5',
    borderSize: '6',
    marginSize: '10',
    bottomWidth: '0 5px 5px',
    bottomBorderWidth: '0 6px 5px',
    rightWidth: '5px 5px 5px 0',
    rightBorderWidth: '6px 5px 6px 0',
    borderColor: 'rgba(0, 0, 0, 0.3)'
  },
  md: {
    size: '10',
    borderSize: '11',
    marginSize: '15',
    bottomWidth: '0 10px 10px',
    bottomBorderWidth: '0 11px 10px',
    rightWidth: '10px 10px 10px 0',
    rightBorderWidth: '11px 10px 11px 0',
    borderColor: 'rgba(0, 0, 0, 0.3)'
  },
  lg: {
    size: '20',
    borderSize: '21',
    marginSize: '30',
    bottomWidth: '0 20px 20px',
    bottomBorderWidth: '0 21px 20px',
    rightWidth: '20px 20px 20px 0',
    rightBorderWidth: '21px 20px 21px 0',
    borderColor: 'rgba(0, 0, 0, 0.3)'
  },
  none: {
    size: '0',
    borderSize: '0',
    marginSize: '10'
  }
};

function getArrowValues(size) {
  switch (size) {
    case 'sm':
      return arrowSizes.sm;

    case 'lg':
      return arrowSizes.lg;

    case 'none':
      return arrowSizes.none;

    default:
      return arrowSizes.md;
  }
}

function Popup(props) {
  var name = props.name,
      trigger = props.trigger,
      children = props.children,
      position = props.position,
      arrowSize = props.arrowSize,
      hasTitle = props.hasTitle,
      transitionIn = props.transitionIn,
      transitionTimeout = props.transitionTimeout,
      disableFlipping = props.disableFlipping,
      popperRef = props.popperRef;
  var arrowValues = getArrowValues(arrowSize);
  return React.createElement(Manager, null, React.createElement(Reference, null, function (_ref) {
    var ref = _ref.ref;
    return React.createElement("div", {
      className: "".concat(name, "-popper__trigger"),
      ref: ref
    }, trigger);
  }), ReactDOM.createPortal(React.createElement(Popper, {
    className: "".concat(name, "-popper"),
    placement: position,
    modifiers: {
      preventOverflow: {
        boundariesElement: document.body
      },
      flip: {
        enabled: !disableFlipping,
        behavior: ['left', 'right', 'top', 'bottom', 'top']
      }
    },
    innerRef: popperRef
  }, function (_ref2) {
    var ref = _ref2.ref,
        style = _ref2.style,
        placement = _ref2.placement,
        arrowProps = _ref2.arrowProps;
    return React.createElement(Fade, {
      in: transitionIn,
      duration: transitionTimeout,
      mountOnEnter: true,
      unmountOnExit: true
    }, React.createElement(PopperBox, {
      ref: ref,
      style: style,
      arrowSize: arrowValues
    }, children, React.createElement(Arrow, {
      ref: arrowProps.ref,
      "data-placement": placement,
      style: arrowProps.style,
      arrowSize: arrowValues,
      hasTitle: hasTitle
    })));
  }), document.querySelector('body')));
}

Popup.propTypes = process.env.NODE_ENV !== "production" ? {
  name: PropTypes.string,
  trigger: PropTypes.node,
  children: PropTypes.node,
  position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  arrowSize: PropTypes.oneOf(['sm', 'lg', 'none', 'default']),
  transitionIn: PropTypes.bool,
  transitionTimeout: PropTypes.number,
  hasTitle: PropTypes.bool,
  disableFlipping: PropTypes.bool,
  popperRef: PropTypes.func
} : {};
Popup.defaultProps = {
  name: '',
  trigger: undefined,
  children: undefined,
  position: 'bottom',
  arrowSize: 'default',
  transitionIn: false,
  transitionTimeout: 150,
  hasTitle: false,
  disableFlipping: false,
  popperRef: undefined
};

var RootCloseWrapper = function RootCloseWrapper(_ref) {
  var children = _ref.children,
      onRootClose = _ref.onRootClose,
      disabled = _ref.disabled;
  var ref = useRef();
  useRootClose(ref, onRootClose, {
    disabled: disabled
  });
  return React.createElement("div", {
    ref: ref,
    className: "root-close-wrapper"
  }, children);
};

function _templateObject8$1() {
  var data = _taggedTemplateLiteral(["\n  color: transparent;\n  flex: none;\n  height: 1px;\n  outline: 0;\n  width: 1px;\n"]);

  _templateObject8$1 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7$1() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n\n  flex: 0 1;\n  margin-left: auto;\n  padding: 8px;\n"]);

  _templateObject7$1 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6$1() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin: 5px 0;\n  width: auto;\n"]);

  _templateObject6$1 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$1() {
  var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  text-align: left;\n"]);

  _templateObject5$1 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$3() {
  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  color: ", ";\n  font-size: 18px;\n  font-weight: normal;\n  line-height: ", ";\n  padding: ", ";\n  text-align: right;\n"]);

  _templateObject4$3 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$3() {
  var data = _taggedTemplateLiteral(["\n  flex: 1 1;\n  font-size: 18px;\n  margin: 0;\n  padding: 8px 14px;\n  text-align: left;\n"]);

  _templateObject3$3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$5() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  justify-content: space-between;\n  line-height: ", ";\n  outline: none;\n"]);

  _templateObject2$5 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$c() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n"]);

  _templateObject$c = function _templateObject() {
    return data;
  };

  return data;
}
var Container = styled.div(_templateObject$c());
var PopoverHeader = styled.div(_templateObject2$5(), function (props) {
  return props.hasTitle ? props.theme.colors.popoverHeader : props.theme.colors.white;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
});
var TitleBar = styled.h3(_templateObject3$3());
var PopoverBody = styled.div(_templateObject4$3(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.hasAltCloseWithNoTitle ? '0 14px 8px' : '8px 14px';
});
var PopoverContent = styled.div(_templateObject5$1(), function (props) {
  return props.showCloseButton ? '8px' : '0';
});
var PopoverCloseButton = styled(Button)(_templateObject6$1());
var AltCloseButton = styled(DismissButton)(_templateObject7$1(), function (props) {
  return props.hasTitle ? props.theme.colors.white : props.theme.colors.black;
});
var CloseHelpText = styled.span(_templateObject8$1());

function Popover(props) {
  var name = props.name,
      title = props.title,
      content = props.content,
      placement = props.placement,
      arrowSize = props.arrowSize,
      renderTrigger = props.renderTrigger,
      hasCloseButton = props.hasCloseButton,
      hasAltCloseButton = props.hasAltCloseButton,
      disableRootClose = props.disableRootClose,
      disableFlipping = props.disableFlipping;
  var hasTitle = title !== undefined;
  var hasAltCloseWithNoTitle = !hasTitle && hasAltCloseButton;
  var showCloseButton = hasCloseButton && !hasAltCloseButton;
  var isFirstRun = useRef(true);
  var triggerBtnRef = useRef(null);

  var _popperRef = useRef(null);

  var contentRef = useRef(null);
  var escMsgRef = useRef(null);
  var closeBtnRef = useRef(null);
  var timeoutRef = useRef(null);

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isOpen = _useState2[0],
      setIsOpen = _useState2[1];

  function toggleShow(event) {
    event.preventDefault();
    event.stopPropagation();
    setIsOpen(!isOpen);
  }

  function hidePopover(event) {
    if (isOpen) {
      if (event.type !== 'click') {
        triggerBtnRef.current.focus();
      }

      setIsOpen(false);
    }
  }

  function hidePopOnScroll() {
    _setInterval(function () {
      if (_popperRef.current) {
        var bounds = _popperRef.current.getBoundingClientRect();

        var inViewport = bounds.top >= 0 && bounds.bottom <= window.innerHeight;

        if (!inViewport && isOpen) {
          setIsOpen(false);
        }
      }
    }, 100);
  }

  useEffect(function () {
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
    }

    if (isOpen) {
      timeoutRef.current = _setTimeout(function () {
        if (closeBtnRef.current) {
          closeBtnRef.current.focus();
        } else if (escMsgRef.current) {
          escMsgRef.current.focus();
        }
      }, 100);
    } else {
      triggerBtnRef.current.focus();
    }
  }, [isOpen]);
  useEffect(function () {
    if (isOpen) {
      window.addEventListener('scroll', hidePopOnScroll);
    }

    return function () {
      return window.removeEventListener('scroll', hidePopOnScroll);
    };
  }, [isOpen]);
  var closeButton = React.createElement(PopoverCloseButton, {
    onClick: toggleShow,
    ref: closeBtnRef
  }, "Close");
  var altCloseButton = React.createElement(AltCloseButton, {
    "aria-label": "Close",
    hasTitle: hasTitle,
    onClick: toggleShow,
    ref: closeBtnRef
  });
  return React.createElement(Container, null, React.createElement(Popup, {
    name: name,
    trigger: renderTrigger({
      ref: triggerBtnRef,
      toggleShow: toggleShow,
      isOpen: isOpen
    }),
    position: placement,
    arrowSize: arrowSize,
    transitionIn: isOpen,
    hasTitle: hasTitle,
    disableFlipping: disableFlipping,
    popperRef: function popperRef(elem) {
      _popperRef.current = elem;
    }
  }, React.createElement(RootCloseWrapper, {
    onRootClose: hidePopover,
    disabled: disableRootClose
  }, React.createElement("div", {
    role: "dialog",
    ref: contentRef
  }, React.createElement(PopoverHeader, {
    hasTitle: hasTitle
  }, hasTitle && React.createElement(TitleBar, null, title), hasAltCloseButton && altCloseButton, React.createElement(CloseHelpText, {
    tabIndex: -1,
    ref: escMsgRef,
    "aria-label": "Press escape to close the Popover"
  })), React.createElement(PopoverBody, {
    hasAltCloseWithNoTitle: hasAltCloseWithNoTitle
  }, React.createElement(PopoverContent, {
    showCloseButton: showCloseButton
  }, content), showCloseButton && closeButton)))));
}

Popover.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The name of the popover. Used for differentiating popovers */
  name: PropTypes.string.isRequired,

  /** The text displayed in the popover title section */
  title: PropTypes.string,

  /** The content displayed in the popover body */
  content: PropTypes.node.isRequired,

  /** The placement of the popover in relation to the link */
  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),

  /** The size of the arrow on the popover box */
  arrowSize: PropTypes.oneOf(['sm', 'lg', 'none', 'default']),

  /** Prevents popover from closing when clicked outside of it */
  disableRootClose: PropTypes.bool,

  /** Display a close button in the bottom right of the popover body */
  hasCloseButton: PropTypes.bool,

  /** Display a close ('x') button in the popover title bar */
  hasAltCloseButton: PropTypes.bool,

  /** Function returning a button component to be used as the popover trigger */
  renderTrigger: PropTypes.func.isRequired,

  /** Disables popovers ability to change position to stay in viewport */
  disableFlipping: PropTypes.bool
} : {};
Popover.defaultProps = {
  placement: 'bottom',
  arrowSize: 'default',
  disableRootClose: false,
  hasCloseButton: false,
  hasAltCloseButton: false,
  disableFlipping: false,
  title: undefined
};

function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys$3(source, true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys$3(source)).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

var DropIn = function DropIn(_ref) {
  var _context;

  var children = _ref.children,
      duration = _ref.duration,
      otherProps = _objectWithoutProperties(_ref, ["children", "duration"]);

  var transitionStyles = {
    opacity: 0,
    transform: "translate(0, -25%)",
    transition: _concatInstanceProperty(_context = "transform ".concat(duration, "ms ease-out, opacity ")).call(_context, duration, "ms linear")
  };
  var stateStyles = {
    entering: {
      opacity: 1,
      transform: "translate(0, 0)"
    },
    entered: {
      opacity: 1,
      transform: "translate(0, 0)"
    }
  };
  return React.createElement(Transition, _extends({}, otherProps, {
    timeout: duration
  }), function (state, innerProps) {
    return React.cloneElement(children, _objectSpread$3({}, innerProps, {
      style: _objectSpread$3({}, children.props.style, {}, transitionStyles, {}, stateStyles[state])
    }));
  });
};

DropIn.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any.isRequired,
  duration: PropTypes.number
} : {};
DropIn.defaultProps = {
  duration: 300
};

var ModalContext = React.createContext({});

function _templateObject$d() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-bottom: ", ";\n  color: ", ";\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: ", ";\n  font-weight: 300;\n  line-height: 1.1;\n  margin-bottom: 0.45em;\n  margin-top: 0;\n  padding-bottom: ", ";\n  padding: ", ";\n\n  small {\n    font-size: ", ";\n    line-height: 1;\n  }\n\n  @media (min-width: ", ") {\n    font-size: ", ";\n  }\n"]);

  _templateObject$d = function _templateObject() {
    return data;
  };

  return data;
}
var HeadingBase = styled.h1(_templateObject$d(), function (props) {
  return props.isKnockoutStyle && props.theme.colors.softwareBlue;
}, function (props) {
  return props.underlineColor && "2px solid ".concat(props.underlineColor, ";");
}, function (props) {
  return props.isKnockoutStyle ? 'white' : 'inherit';
}, function (props) {
  return props.adjustedSize > 2 ? props.theme.headingSize[props.adjustedSize] : "calc(".concat(props.theme.headingSize[props.adjustedSize], " - 6px);");
}, function (props) {
  return props.underlineColor && '0.22em';
}, function (props) {
  return props.isKnockoutStyle && '20px 15px';
}, function (props) {
  return props.adjustedSize > 3 ? '75%' : '65%';
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.headingSize[props.adjustedSize];
});

function Heading(_ref) {
  var children = _ref.children,
      level = _ref.level,
      size = _ref.size,
      isKnockoutStyle = _ref.isKnockoutStyle,
      underlineColor = _ref.underlineColor,
      other = _objectWithoutProperties(_ref, ["children", "level", "size", "isKnockoutStyle", "underlineColor"]);

  var adjustedSize = size || level;
  var hLevel = "h".concat(level);
  return React.createElement(HeadingBase, _extends({
    as: hLevel,
    adjustedSize: adjustedSize,
    isKnockoutStyle: isKnockoutStyle,
    underlineColor: underlineColor
  }, other), children);
}

Heading.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node,

  /** Heading level element */
  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,

  /** Override the default font size with another level */
  size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),

  /** Alternate knockout-style header with a solid background */
  isKnockoutStyle: PropTypes.bool,

  /** Include an underline with the provided color */
  underlineColor: PropTypes.string
} : {};
Heading.defaultProps = {
  children: undefined,
  size: undefined,
  isKnockoutStyle: false,
  underlineColor: null
};

function _templateObject3$4() {
  var data = _taggedTemplateLiteral(["\n  align-self: center;\n  color: ", ";\n  font-size: 18px;\n"]);

  _templateObject3$4 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$6() {
  var data = _taggedTemplateLiteral(["\n  margin: 0;\n"]);

  _templateObject2$6 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$e() {
  var data = _taggedTemplateLiteral(["\n  align-items: baseline;\n  border-bottom: 2px solid ", ";\n  color: ", ";\n  display: flex;\n  font-size: 26px;\n  justify-content: space-between;\n  padding: 15px;\n"]);

  _templateObject$e = function _templateObject() {
    return data;
  };

  return data;
}

var Header = styled.div(_templateObject$e(), function (props) {
  return props.theme.brandColors.vbMagenta;
}, function (props) {
  return props.theme.colors.gray9;
});
var Title = styled(Heading)(_templateObject2$6());
var DismissModal = styled(DismissButton)(_templateObject3$4(), function (props) {
  return props.theme.colors.black;
});

function ModalHeader(props) {
  var hideCloseButton = props.hideCloseButton,
      children = props.children,
      level = props.level,
      otherProps = _objectWithoutProperties(props, ["hideCloseButton", "children", "level"]);

  var _useContext = useContext(ModalContext),
      onHide = _useContext.onHide,
      ariaId = _useContext.ariaId;

  return React.createElement(Header, otherProps, React.createElement(Title, {
    id: ariaId,
    level: level
  }, children), !hideCloseButton && React.createElement(DismissModal, {
    onClick: onHide
  }));
}

ModalHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Specify whether the modal header should contain a close button */
  hideCloseButton: PropTypes.bool,
  children: PropTypes.any,
  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6])
} : {};
ModalHeader.defaultProps = {
  hideCloseButton: false,
  children: undefined,
  level: 4
};

function _templateObject$f() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  padding: 15px;\n"]);

  _templateObject$f = function _templateObject() {
    return data;
  };

  return data;
}

var ModalBody = styled.div(_templateObject$f(), function (props) {
  return props.theme.colors.gray9;
});

function _templateObject$g() {
  var data = _taggedTemplateLiteral(["\n  align-items: baseline;\n  display: flex;\n  padding: 15px 15px 55px;\n  text-align: right;\n\n  button {\n    width: auto;\n  }\n\n  @media (min-width: ", ") {\n    padding: 15px 15px 19px;\n  }\n"]);

  _templateObject$g = function _templateObject() {
    return data;
  };

  return data;
}

var ModalFooter = styled.div(_templateObject$g(), function (props) {
  return props.theme.screenSize.tablet;
});

function _templateObject5$2() {
  var data = _taggedTemplateLiteral(["\n  background-clip: padding-box;\n  background-color: ", ";\n  border-radius: 3px;\n  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: ", ";\n  outline: 0;\n  position: relative;\n  -webkit-overflow-scrolling: touch;\n"]);

  _templateObject5$2 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$4() {
  var data = _taggedTemplateLiteral(["\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n"]);

  _templateObject4$4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$5() {
  var data = _taggedTemplateLiteral(["\n  @media (min-width: ", ") {\n    margin: 20vh auto;\n    width: ", ";\n  }\n"]);

  _templateObject3$5 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$7() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    margin: 20vh auto;\n    width: ", ";\n  }\n"]);

  _templateObject2$7 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$h() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 1030;\n"]);

  _templateObject$h = function _templateObject() {
    return data;
  };

  return data;
}
var modalSize = {
  small: '300px',
  medium: '600px',
  large: '900px'
};
var modalStyle = {
  bottom: 0,
  left: 0,
  outline: 0,
  overflowX: 'hidden',
  overflowY: 'auto',
  position: 'fixed',
  right: 0,
  top: 0,
  zIndex: 1040
};
var Backdrop = styled.div(_templateObject$h(), function (props) {
  return props.theme.colors.black;
});
var ModalDialogMedium = styled.div(_templateObject2$7(), function (props) {
  return props.theme.screenSize.tablet;
}, modalSize.medium);
var ModalDialogSmall = styled(ModalDialogMedium)(_templateObject3$5(), function (props) {
  return props.theme.screenSize.phone;
}, modalSize.small);
var ModalDialogLarge = styled(ModalDialogMedium)(_templateObject4$4(), function (props) {
  return props.theme.screenSize.desktop;
}, modalSize.large);
var ModalContent = styled.div(_templateObject5$2(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.sizes.baseFontSize;
});

var BackdropFade = function BackdropFade(props) {
  return React.createElement(Fade, _extends({
    opacity: 0.5
  }, props));
};

var DialogDropIn = function DialogDropIn(props) {
  return React.createElement(DropIn, props);
};

function getModalBySize(size) {
  switch (size) {
    case 'small':
      return ModalDialogSmall;

    case 'large':
      return ModalDialogLarge;

    default:
      return ModalDialogMedium;
  }
}

function Modal(props) {
  var animation = props.animation,
      backdrop = props.backdrop,
      children = props.children,
      escapeExits = props.escapeExits,
      onEnter = props.onEnter,
      onExit = props.onExit,
      onHide = props.onHide,
      show = props.show,
      size = props.size,
      other = _objectWithoutProperties(props, ["animation", "backdrop", "children", "escapeExits", "onEnter", "onExit", "onHide", "show", "size"]);

  var ModalDialog = getModalBySize(size);
  var ariaId = useUniqueId(other.id);
  return React.createElement(ModalContext.Provider, {
    value: {
      onHide: onHide,
      ariaId: ariaId
    }
  }, React.createElement(Modal$1, {
    "aria-labelledby": ariaId,
    backdrop: backdrop,
    renderBackdrop: function renderBackdrop(backdropProps) {
      return React.createElement(Backdrop, backdropProps);
    },
    backdropTransition: animation ? BackdropFade : undefined,
    keyboard: escapeExits,
    onEnter: onEnter,
    onExit: onExit,
    onHide: onHide,
    show: show,
    style: modalStyle,
    transition: animation ? DialogDropIn : undefined
  }, React.createElement(ModalDialog, _extends({
    size: size
  }, other), React.createElement(RootCloseWrapper, {
    onRootClose: onHide,
    disabled: backdrop === 'static'
  }, React.createElement(ModalContent, null, children)))));
}

Modal.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Open and close the Modal with transitions. */
  animation: PropTypes.bool,

  /**
   * Include a backdrop component. Specify 'static' for a backdrop that doesn't
   * trigger an "onHide" when clicked.
   */
  backdrop: PropTypes.oneOf(['static', true, false]),

  /**
   * Usually contains a Modal.Title, Modal.Body, and Modal.Footer
   * but can contain any content
   */
  children: PropTypes.any,

  /** Set whether the Escape key exits the modal */
  escapeExits: PropTypes.bool,

  /** Callback fired when the Modal transitions in */
  onEnter: PropTypes.func,

  /** Callback fired when the modal transitions out */
  onExit: PropTypes.func,

  /**
   * A callback fired when the header closeButton or non-static backdrop is
   * clicked. Required if either are specified.
   */
  onHide: PropTypes.func,

  /** When `true` The modal will show itself. */
  show: PropTypes.bool,

  /** Sets the size of the modal */
  size: PropTypes.oneOf(['small', 'medium', 'large'])
} : {};
Modal.defaultProps = {
  animation: true,
  backdrop: true,
  escapeExits: true,
  onEnter: _noop,
  onExit: _noop,
  onHide: _noop,
  show: false,
  size: 'medium',
  children: undefined
};
Modal.Header = ModalHeader;
Modal.Body = ModalBody;
Modal.Footer = ModalFooter;

function _templateObject$i() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    flex-direction: row;\n  }\n"]);

  _templateObject$i = function _templateObject() {
    return data;
  };

  return data;
}
var ModalButtonContainer = styled.div(_templateObject$i(), function (props) {
  return props.theme.screenSize.tablet;
});

function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$4(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$4(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject11$1() {
  var data = _taggedTemplateLiteral(["\n  .ReactModal__Body--open {\n    overflow-y: hidden;\n  }\n\n  .ReactModal__Overlay--after-open {\n    background-color: rgba(0,0,0,0.3) !important;\n  }\n\n  .ReactModal__Overlay--before-close {\n    background-color: rgba(0,0,0,0) !important;\n  }\n"]);

  _templateObject11$1 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10$1() {
  var data = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: 1.5em;\n  position: relative;\n"]);

  _templateObject10$1 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9$1() {
  var data = _taggedTemplateLiteral(["\n  font-size: 12px;\n  margin-top: 2px;\n"]);

  _templateObject9$1 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8$2() {
  var data = _taggedTemplateLiteral(["\n  margin: 0;\n  max-width: 80%;\n  overflow: hidden;\n  padding: 1px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"]);

  _templateObject8$2 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7$2() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n"]);

  _templateObject7$2 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6$2() {
  var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n  opacity: 0.7;\n  padding: 16px;\n"]);

  _templateObject6$2 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$3() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex: 0 0 64px;\n  height: 64px;\n"]);

  _templateObject5$3 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$5() {
  var data = _taggedTemplateLiteral(["\n  height: 90vh;\n  margin-top: 10vh;\n  transform: translateY(100%);\n\n  &.ReactModal__Content--after-open {\n    transform: translateY(0%);\n  }\n\n  &.ReactModal__Content--before-close {\n    transform: translateY(100%);\n  }\n"]);

  _templateObject4$5 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$6() {
  var data = _taggedTemplateLiteral(["\n  margin-right: auto;\n  transform: translateX(-100%);\n\n  &.ReactModal__Content--after-open {\n    transform: translateX(0%);\n  }\n\n  &.ReactModal__Content--before-close {\n    transform: translateX(-100%);\n  }\n"]);

  _templateObject3$6 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$8() {
  var data = _taggedTemplateLiteral(["\n  margin-left: auto;\n  transform: translateX(100%);\n\n  &.ReactModal__Content--after-open {\n    transform: translateX(0%);\n  }\n\n  &.ReactModal__Content--before-close {\n    transform: translateX(100%);\n  }\n"]);

  _templateObject2$8 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$j() {
  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  box-shadow: 0 8px 8px ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 100px;\n  transition: transform 0.5s;\n  width: 100%;\n  will-change: transform;\n\n  &:focus {\n    outline-style: none;\n  }\n\n  @media (min-width: ", ") {\n    width: 900px;\n  }\n"]);

  _templateObject$j = function _templateObject() {
    return data;
  };

  return data;
}
var PaneBase = styled(Modal$1$1)(_templateObject$j(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.boxShadowDark;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var PaneRight = styled(PaneBase)(_templateObject2$8());
var PaneLeft = styled(PaneBase)(_templateObject3$6());
var PaneBottom = styled(PaneBase)(_templateObject4$5());
var Header$1 = styled.div(_templateObject5$3(), function (props) {
  return props.theme.colors.popoverHeader;
}, function (props) {
  return props.theme.colors.white;
});
var CloseLink = styled(LinkButton)(_templateObject6$2());
var TitleWrapper = styled.div(_templateObject7$2());
var TitleText = styled(Heading)(_templateObject8$2());
var SubTitle = styled.div(_templateObject9$1());
var Content = styled.div(_templateObject10$1());
var ScreenReaderText$1 = screenReaderOnly('span');
var defaultStyles = {
  overlay: {
    backgroundColor: 'rgba(0,0,0,0)',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    position: 'fixed',
    zIndex: '1000',
    transition: 'background-color 0.5s'
  },
  content: {}
};
var GlobalPaneStyles = createGlobalStyle(_templateObject11$1());

function getPane(direction) {
  switch (direction) {
    case 'bottom':
      return PaneBottom;

    case 'left':
      return PaneLeft;

    default:
      return PaneRight;
  }
}

function SlidingPane(_ref) {
  var isOpen = _ref.isOpen,
      title = _ref.title,
      subTitle = _ref.subTitle,
      shouldCloseOnEsc = _ref.shouldCloseOnEsc,
      onRequestClose = _ref.onRequestClose,
      onAfterOpen = _ref.onAfterOpen,
      children = _ref.children,
      closeIcon = _ref.closeIcon,
      closeIconScreenReaderText = _ref.closeIconScreenReaderText,
      from = _ref.from,
      headingLevel = _ref.headingLevel,
      headingSize = _ref.headingSize,
      closeTimeout = _ref.closeTimeout,
      overlayStyles = _ref.overlayStyles,
      contentStyles = _ref.contentStyles,
      appElement = _ref.appElement,
      rest = _objectWithoutProperties(_ref, ["isOpen", "title", "subTitle", "shouldCloseOnEsc", "onRequestClose", "onAfterOpen", "children", "closeIcon", "closeIconScreenReaderText", "from", "headingLevel", "headingSize", "closeTimeout", "overlayStyles", "contentStyles", "appElement"]);

  var Pane = getPane(from);
  var styles = {
    overlay: _objectSpread$4({}, defaultStyles.overlay, {}, overlayStyles),
    content: _objectSpread$4({}, defaultStyles.content, {}, contentStyles)
  };

  if (appElement) {
    Pane.setAppElement(appElement);
  } else {
    _Object$assign(rest, {
      ariaHideApp: false
    });
  }

  return React.createElement(React.Fragment, null, React.createElement(GlobalPaneStyles, null), React.createElement(Pane, _extends({
    style: styles,
    closeTimeoutMS: closeTimeout,
    isOpen: isOpen,
    onAfterOpen: onAfterOpen,
    onRequestClose: onRequestClose,
    shouldCloseOnEsc: shouldCloseOnEsc,
    contentLabel: "Modal \"".concat(title, "\"")
  }, rest), React.createElement(Header$1, null, React.createElement(CloseLink, {
    onClick: onRequestClose
  }, closeIcon || React.createElement(Icon, {
    name: "remove",
    size: 34
  }), React.createElement(ScreenReaderText$1, null, closeIconScreenReaderText)), React.createElement(TitleWrapper, null, React.createElement(TitleText, {
    level: headingLevel,
    size: headingSize
  }, title), React.createElement(SubTitle, null, subTitle))), React.createElement(Content, null, children)));
}
SlidingPane.propTypes = process.env.NODE_ENV !== "production" ? {
  isOpen: PropTypes.bool.isRequired,
  title: PropTypes.any,
  subTitle: PropTypes.any,
  shouldCloseOnEsc: PropTypes.bool,
  onRequestClose: PropTypes.func,
  onAfterOpen: PropTypes.func,
  children: PropTypes.any.isRequired,
  from: PropTypes.oneOf(['left', 'right', 'bottom']),
  closeIcon: PropTypes.any,
  closeIconScreenReaderText: PropTypes.string,
  headingLevel: Heading.propTypes.level,
  headingSize: Heading.propTypes.size,
  closeTimeout: PropTypes.number,
  overlayStyles: PropTypes.object,
  contentStyles: PropTypes.object,

  /** selector of application element (e.g. #root), for hiding of
   main content for screenreaders when pane is open */
  appElement: PropTypes.string
} : {};
SlidingPane.defaultProps = {
  /* Timeout is in milliseconds */
  closeTimeout: 500,
  from: 'right',
  headingLevel: 2,
  headingSize: 3,
  shouldCloseOnEsc: true,
  title: undefined,
  subTitle: undefined,
  onRequestClose: _noop,
  onAfterOpen: _noop,
  closeIcon: undefined,
  closeIconScreenReaderText: 'Close',
  overlayStyles: {},
  contentStyles: {},
  appElement: undefined
};

function _templateObject$k() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  cursor: pointer;\n  display: block;\n  font-family: inherit;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  min-width: 100px;\n  outline: none;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  text-align: center;\n  text-decoration: none;\n  text-transform: ", ";\n  transition: background-color 150ms linear, color 150ms linear;\n  white-space: nowrap;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    display: ", ";\n    width: ", ";\n  }\n\n  &:focus,\n  &:focus-within {\n    box-shadow: 0 0 3px 3px ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: 0.65;\n\n    > * {\n      pointer-events: none;\n    }\n  }\n\n  &[disabled]:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"]);

  _templateObject$k = function _templateObject() {
    return data;
  };

  return data;
}
var StyledButton$3 = styled.button(_templateObject$k(), function (props) {
  return props.variant.bgColor;
}, function (props) {
  return props.variant.borderColor;
}, function (props) {
  return props.buttonSize.borderRadius;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.buttonSize.fontSize;
}, function (props) {
  return props.buttonSize.fontWeight || 'normal';
}, function (props) {
  return props.buttonSize.lineHeight || props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.buttonSize.paddingBottom;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.paddingTop;
}, function (props) {
  return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.block ? 'block' : 'inline-block';
}, function (props) {
  return props.block ? '100%' : 'auto';
}, function (props) {
  return props.theme.colors.inputFocus;
}, function (props) {
  return props.variant.hoverBgColor;
}, function (props) {
  return props.variant.hoverTextColor;
}, function (props) {
  return props.variant.activeBgColor;
}, function (props) {
  return props.variant.activeTextColor;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.variant.bgColor;
});
var OutlineButton = React.forwardRef(function OutlineButton(props, ref) {
  var children = props.children,
      styleType = props.styleType,
      size = props.size,
      block = props.block,
      other = _objectWithoutProperties(props, ["children", "styleType", "size", "block"]);

  var theme = useTheme();
  var buttonSize = theme.buttonStyles.outlineButton.size[size];
  var variant = theme.buttonStyles.outlineButton.variant[styleType];
  return React.createElement(StyledButton$3, _extends({
    ref: ref,
    block: block,
    buttonSize: buttonSize,
    variant: variant,
    type: "button"
  }, other), children);
});
OutlineButton.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,

  /** Select the color style of the button, types come from theme buttonStyles.outlineButton */
  styleType: PropTypes.string,
  size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),

  /** Make the button's width the size of it's parent container */
  block: PropTypes.bool
} : {};
OutlineButton.defaultProps = {
  styleType: 'default',
  block: false,
  size: 'default'
};

function _templateObject2$9() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n"]);

  _templateObject2$9 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$l() {
  var data = _taggedTemplateLiteral(["\n  .es-button__display {\n    ", ";\n  }\n"]);

  _templateObject$l = function _templateObject() {
    return data;
  };

  return data;
}
var buttonMixin = css(["background-color:", ";color:", ";"], function (props) {
  return props.isPressed ? props.variant.hoverBgColor : props.variant.bgColor;
}, function (props) {
  return props.isPressed ? props.variant.activeTextColor : props.variant.textColor;
});
var StyledButton$4 = styled(Button)(_templateObject$l(), buttonMixin);
var StyledOutlineButton = styled(OutlineButton)(_templateObject2$9(), buttonMixin);

function ToggleButton(props) {
  var theme = useTheme();

  var _useState = useState(props.isPressed),
      _useState2 = _slicedToArray(_useState, 2),
      isPressed = _useState2[0],
      setIsPressed = _useState2[1];

  var prevPressedProp = useRef(props.isPressed);

  if (prevPressedProp.current !== props.isPressed) {
    prevPressedProp.current = props.isPressed;
    setIsPressed(props.isPressed);
  }

  function toggleButton(event) {
    setIsPressed(!isPressed);
    props.onClick(event);
  }

  var styleType = props.styleType,
      size = props.size,
      block = props.block,
      isOutline = props.isOutline,
      buttonProps = _objectWithoutProperties(props, ["styleType", "size", "block", "isOutline"]);

  var ToggleButtonType = isOutline ? StyledOutlineButton : StyledButton$4;
  var styles = isOutline ? theme.buttonStyles.outlineButton : theme.buttonStyles.button;
  return React.createElement(ToggleButtonType, _extends({}, buttonProps, {
    onClick: toggleButton,
    styleType: styleType,
    size: size,
    block: block,
    isOutline: isOutline,
    isPressed: isPressed,
    variant: styles.variant[styleType],
    "aria-pressed": isPressed
  }), props.children);
}

ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  styleType: PropTypes.string,
  size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
  block: PropTypes.bool,
  isOutline: PropTypes.bool,
  isPressed: PropTypes.bool
} : {};
ToggleButton.defaultProps = {
  styleType: 'default',
  size: 'default',
  block: false,
  isOutline: false,
  isPressed: false
};

var InlineContext = React.createContext(false);

function _templateObject4$6() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  flex-wrap: wrap;\n"]);

  _templateObject4$6 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$7() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  padding-left: 11px;\n  padding-right: 5px;\n  padding-top: ", ";\n"]);

  _templateObject3$7 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$a() {
  var data = _taggedTemplateLiteral(["\n  margin-left: auto;\n  margin-right: 4px;\n"]);

  _templateObject2$a = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$m() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: ", ";\n  position: absolute;\n  z-index: 999;\n"]);

  _templateObject$m = function _templateObject() {
    return data;
  };

  return data;
}
var StyledPanel = styled.div(_templateObject$m(), function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.isOpen ? 'block' : 'none';
});
var StyledDismissButton = styled(DismissButton)(_templateObject2$a());
var Header$2 = styled.header(_templateObject3$7(), function (props) {
  return props.hasHeaderContent ? '10px' : '0';
}, function (props) {
  return props.hasHeaderContent ? '5px' : '0';
});
var StyledChildrenContainer = styled.div(_templateObject4$6(), function (props) {
  return props.inline ? 'row' : 'column';
});

function MenuPanel(props) {
  function onEscape(_ref) {
    var keyCode = _ref.keyCode;

    if (keyCode === 27) {
      props.onClose();
    }
  }

  useEffect(function () {
    document.addEventListener('keydown', onEscape);
    return function removeKeydownListener() {
      document.removeEventListener('keydown', onEscape);
    };
  });

  var children = props.children,
      headerContent = props.headerContent,
      isOpen = props.isOpen,
      onClose = props.onClose,
      other = _objectWithoutProperties(props, ["children", "headerContent", "isOpen", "onClose"]);

  var hasHeaderContent = !!headerContent;
  var inline = useContext(InlineContext);
  return React.createElement(StyledPanel, _extends({
    isOpen: isOpen
  }, other), React.createElement(Header$2, {
    hasHeaderContent: hasHeaderContent
  }, hasHeaderContent && React.createElement("span", null, headerContent), React.createElement(StyledDismissButton, {
    onClick: onClose
  })), React.createElement(StyledChildrenContainer, {
    inline: inline
  }, children));
}

MenuPanel.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any.isRequired,
  headerContent: PropTypes.node,
  isOpen: PropTypes.bool,
  onClose: PropTypes.func.isRequired
} : {};
MenuPanel.defaultProps = {
  headerContent: null,
  isOpen: false
};

function _templateObject3$8() {
  var data = _taggedTemplateLiteral(["\n  padding: 15px 20px 0px 20px;\n"]);

  _templateObject3$8 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$b() {
  var data = _taggedTemplateLiteral(["\n  padding-left: 10px;\n"]);

  _templateObject2$b = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$n() {
  var data = _taggedTemplateLiteral(["\n  padding-top: ", ";\n  padding-bottom: ", ";\n  border-bottom: ", ";\n"]);

  _templateObject$n = function _templateObject() {
    return data;
  };

  return data;
}
var StyledMenuSection = styled.section(_templateObject$n(), function (props) {
  return !props.isFirst && !props.inline && !props.isOnlySection ? '20px' : '0px';
}, function (props) {
  return props.isLast ? '0px' : '20px';
}, function (props) {
  return !props.isLast && !props.inline ? "1px solid ".concat(props.theme.colors.gray5) : 'none';
});
var StyledHeader = styled.header(_templateObject2$b());
var StyledChildrenContainer$1 = styled.section(_templateObject3$8());

function MenuSection(props) {
  var title = props.title,
      children = props.children,
      isLast = props.isLast,
      isFirst = props.isFirst,
      isOnlySection = props.isOnlySection,
      other = _objectWithoutProperties(props, ["title", "children", "isLast", "isFirst", "isOnlySection"]);

  var inline = useContext(InlineContext);
  return React.createElement(StyledMenuSection, _extends({
    isLast: isLast,
    isFirst: isFirst,
    inline: inline,
    isOnlySection: isOnlySection
  }, other), title && React.createElement(StyledHeader, {
    "aria-label": title
  }, title), children && React.createElement(StyledChildrenContainer$1, null, children));
}

MenuSection.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  children: PropTypes.any,
  isLast: PropTypes.bool,
  isFirst: PropTypes.bool,
  isOnlySection: PropTypes.bool
} : {};
MenuSection.defaultProps = {
  title: undefined,
  children: undefined,
  isLast: false,
  isFirst: false,
  isOnlySection: false
};

function _templateObject$o() {
  var data = _taggedTemplateLiteral(["\n  background-color: black;\n  bottom: 0;\n  cursor: auto;\n  left: 0;\n  opacity: 0.5;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: auto;\n  display: ", ";\n"]);

  _templateObject$o = function _templateObject() {
    return data;
  };

  return data;
}
var Backdrop$1 = styled.div(_templateObject$o(), function (props) {
  return props.isMenuOpen ? 'inherit' : 'none';
});

function Menu(props) {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isMenuOpen = _useState2[0],
      setIsMenuOpen = _useState2[1];

  function toggleMenu() {
    setIsMenuOpen(!isMenuOpen);
  }

  function closeMenu() {
    setIsMenuOpen(false);
  }

  var inline = props.inline,
      children = props.children,
      buttonContent = props.buttonContent,
      openButtonType = props.openButtonType,
      rootClose = props.rootClose,
      hasBackdrop = props.hasBackdrop,
      headerContent = props.headerContent,
      other = _objectWithoutProperties(props, ["inline", "children", "buttonContent", "openButtonType", "rootClose", "hasBackdrop", "headerContent"]);

  return React.createElement(RootCloseWrapper, {
    onRootClose: closeMenu,
    disabled: !rootClose
  }, React.createElement("div", other, hasBackdrop && React.createElement(Backdrop$1, {
    isMenuOpen: isMenuOpen,
    onClick: closeMenu
  }), React.createElement(ToggleButton, {
    onClick: toggleMenu,
    isPressed: isMenuOpen,
    styleType: openButtonType,
    "aria-expanded": isMenuOpen
  }, buttonContent), React.createElement(InlineContext.Provider, {
    value: inline
  }, React.createElement(MenuPanel, {
    headerContent: headerContent,
    isOpen: isMenuOpen,
    onClose: closeMenu
  }, children))));
}

Menu.MenuSection = MenuSection;
Menu.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any.isRequired,
  buttonContent: PropTypes.any.isRequired,
  openButtonType: PropTypes.string,
  rootClose: PropTypes.bool,
  inline: PropTypes.bool,
  hasBackdrop: PropTypes.bool,
  headerContent: PropTypes.node
} : {};
Menu.defaultProps = {
  rootClose: false,
  openButtonType: 'default',
  inline: false,
  hasBackdrop: false,
  headerContent: undefined
};

function _templateObject$p() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-shadow: ", ";\n  color: ", ";\n  display: inline-block;\n  font-size: inherit;\n  line-height: ", ";\n  padding: 10px;\n  text-align: left;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (min-width: ", ") {\n    background-color: ", ";\n    border: ", ";\n    border-bottom-color: ", ";\n    box-shadow: none;\n    color: ", ";\n    padding: 10px 15px;\n    margin: 0 2px 0px 0;\n\n    &:hover,\n    &:focus {\n      background-color: ", ";\n    }\n  }\n"]);

  _templateObject$p = function _templateObject() {
    return data;
  };

  return data;
}
var TabButton = styled.button(_templateObject$p(), function (props) {
  return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
}, function (props) {
  return props.theme.colors.gray4;
}, function (props) {
  return props.selected ? '0 6px 12px rgba(0, 0, 0, 0.175)' : 'none';
}, function (props) {
  return props.selected ? props.theme.colors.black : props.theme.colors.primary;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.theme.screenSize.desktop;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.selected ? "1px solid ".concat(props.theme.colors.gray4) : '1px solid transparent';
}, function (props) {
  return props.selected ? ' transparent' : "".concat(props.theme.colors.gray4);
}, function (props) {
  return props.selected ? props.theme.colors.black : props.theme.colors.primary;
}, function (props) {
  return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
});
var AriaAnnouncer = screenReaderOnly('div');

function Tab(_ref) {
  var _context;

  var name = _ref.name,
      selected = _ref.selected,
      action = _ref.action,
      children = _ref.children,
      simpleName = _ref.simpleName,
      announcerText = _ref.announcerText,
      props = _objectWithoutProperties(_ref, ["name", "selected", "action", "children", "simpleName", "announcerText"]);

  return React.createElement(TabButton, _extends({
    onClick: function onClick() {
      return action(name, children, simpleName, announcerText);
    },
    selected: selected,
    "aria-label": "".concat(simpleName || name, " tab"),
    "aria-selected": selected,
    role: "tab"
  }, props), selected && (simpleName.length > 0 || announcerText.length > 0) && React.createElement(AriaAnnouncer, {
    id: "announcer",
    "aria-live": "assertive"
  }, _concatInstanceProperty(_context = "".concat(simpleName, " ")).call(_context, announcerText)), name);
}

Tab.propTypes = process.env.NODE_ENV !== "production" ? {
  /**
   * The name of the tab, and the displayed value
   */
  name: PropTypes.node.isRequired,

  /**
   * Whether the tab is selected and should be rendered to appear selected.
   */
  selected: PropTypes.bool,

  /**
   * The function to call when the tab is clicked
   */
  action: PropTypes.func,

  /**
   * Children to be rendered in the TabContent area.
   */
  children: PropTypes.node,

  /**
   * A simpler representation for screen readers.
   */
  simpleName: PropTypes.string,

  /*
  * Additional text to be read after the simple name
  */
  announcerText: PropTypes.string
} : {};
Tab.defaultProps = {
  selected: false,
  action: _noop,
  children: undefined,
  simpleName: '',
  announcerText: ''
};

function _templateObject2$c() {
  var data = _taggedTemplateLiteral(["\n  margin-top: -1px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"]);

  _templateObject2$c = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$q() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  font-size: inherit;\n  overflow: hidden;\n  @media (max-width: ", ") {\n    width: 100%;\n  }\n  @media (min-width: ", ") {\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n"]);

  _templateObject$q = function _templateObject() {
    return data;
  };

  return data;
}
var TabList = styled.div(_templateObject$q(), function (props) {
  return props.theme.screenSize.desktop;
}, function (props) {
  return props.theme.screenSize.desktop;
});
var TabContent = styled.div(_templateObject2$c(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray4;
});

function TabPanel(props) {
  var _context;

  var children = props.children,
      selectedKey = props.selectedKey,
      tabChanged = props.tabChanged,
      canTabChange = props.canTabChange;

  var _useState = useState(selectedKey),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  var selectedIndex = _findIndex(React.Children.toArray(children), function (child) {
    var key = selectedKey || value || value.key;
    return child.props.name.key ? child.props.name.key === key : child.props.name === key;
  });

  if (selectedIndex < 0) {
    selectedIndex = 0;
  }

  var elements = _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, index) {
    return React.cloneElement(child, {
      selected: index === selectedIndex,
      action: function action(header) {
        var canChange = canTabChange(header);

        if (canChange) {
          setValue(header);
          tabChanged(header);
        }
      }
    });
  });

  return React.createElement(React.Fragment, null, React.createElement(TabList, {
    role: "tablist"
  }, elements), React.createElement(TabContent, {
    role: "tabpanel"
  }, elements[selectedIndex].props.children));
}

function childrenRule(props, propName, component) {
  var children = props[propName];

  if (!_Array$isArray(children)) {
    children = [children];
  }

  if (!_everyInstanceProperty(children).call(children, function (child) {
    return child.type.name === 'Tab' || child.type.target === Tab;
  })) {
    return new Error('Tab Panel only accepts Tabs as direct descendants.');
  }

  return null;
}

TabPanel.propTypes = process.env.NODE_ENV !== "production" ? {
  /**
   * Makes sure immediate children are Tabs, as we cannot render anything else in the tab heading.
   */
  children: childrenRule,
  selectedKey: PropTypes.any,

  /**
   * Callback run before the selected tab has changed. The callback is given the name of the tab that is active and returns whether the tab change event should fire.
   */
  canTabChange: PropTypes.func,

  /**
   * Callback when the selected tab has changed. The callback is given the name of the tab that is active
   */
  tabChanged: PropTypes.func
} : {};
TabPanel.defaultProps = {
  children: undefined,
  selectedKey: '',
  tabChanged: _noop,
  canTabChange: function canTabChange() {
    return true;
  }
};
TabPanel.Tab = Tab;

function _templateObject$r() {
  var data = _taggedTemplateLiteral(["\n  > * {\n    display: block;\n    padding: 20px;\n\n    &:nth-child(even) {\n      background-color: ", ";\n    }\n\n    &:nth-child(odd) {\n      background-color: ", ";\n    }\n  }\n"]);

  _templateObject$r = function _templateObject() {
    return data;
  };

  return data;
}
var StripedContainerWrapper = styled.div(_templateObject$r(), function (props) {
  return props.evenColor;
}, function (props) {
  return props.oddColor;
});

function StripedContainer(props) {
  var _context;

  var theme = useTheme();
  return React.createElement(StripedContainerWrapper, {
    oddColor: theme.colors.gray2,
    evenColor: theme.colors.gray4
  }, _mapInstanceProperty(_context = React.Children).call(_context, props.children, function (child) {
    return React.cloneElement(child);
  }));
}

StripedContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node
} : {};
StripedContainer.defaultProps = {
  children: undefined
};

function _templateObject4$7() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject4$7 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$9() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject3$9 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$d() {
  var data = _taggedTemplateLiteral([""]);

  _templateObject2$d = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$s() {
  var data = _taggedTemplateLiteral(["\n  border-collapse: collapse;\n  border: 0;\n  border-spacing: 0;\n  margin: 0 0 25px 0;\n  padding: 0;\n  width: 100%;\n\n  caption {\n    padding-top: 8px;\n    padding-bottom: 8px;\n    color: ", ";\n    font-size: 1.3em;\n    margin: 0.5em 0;\n    text-align: left;\n  }\n\n  thead th {\n    border-bottom: 2px solid ", ";\n  }\n\n  tbody tr:not(:first-child) {\n    th,\n    td {\n      border-top: 1px solid ", ";\n    }\n  }\n\n  th {\n    font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n      sans-serif;\n    font-weight: bold;\n    line-height: ", ";\n    padding: ", ";\n    text-align: left;\n    vertical-align: bottom;\n  }\n\n  td {\n    line-height: ", ";\n    padding: ", ";\n    vertical-align: top;\n  }\n\n  && tbody {\n    ", ";\n\n    th {\n      vertical-align: top;\n    }\n  }\n\n  && tbody {\n    ", ";\n  }\n"]);

  _templateObject$s = function _templateObject() {
    return data;
  };

  return data;
}
var TableBase = styled.table(_templateObject$s(), function (props) {
  return props.theme.colors.gray8;
}, function (props) {
  return props.theme.colors.gray4;
}, function (props) {
  return props.theme.colors.gray4;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.cellPadding;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.cellPadding;
}, function (props) {
  return props.hasStripes && css(["tr:nth-of-type(odd){background-color:", ";}"], props.theme.colors.gray0);
}, function (props) {
  return props.hasHover && css(["tr:hover{background-color:", ";}"], props.theme.colors.gray1);
});

function Table(props) {
  var isCondensed = props.isCondensed,
      isRoomy = props.isRoomy,
      rest = _objectWithoutProperties(props, ["isCondensed", "isRoomy"]);

  var cellPadding = '8px';
  cellPadding = isCondensed ? '5px' : cellPadding;
  cellPadding = isRoomy ? '12px' : cellPadding;
  return React.createElement(TableBase, _extends({
    cellPadding: cellPadding
  }, rest));
} // kept to preserve backward-compatibility for now


var TableRow = styled.tr(_templateObject2$d());
var TableBodyCell = styled.td(_templateObject3$9());
var TableHeaderCell = styled.th(_templateObject4$7());
Table.Row = TableRow;
Table.Cell = TableBodyCell;
Table.HeaderCell = TableHeaderCell;
Table.propTypes = process.env.NODE_ENV !== "production" ? {
  /** adds a darker background to every other row */
  hasStripes: PropTypes.bool,

  /** adds a hover effect to rows */
  hasHover: PropTypes.bool,

  /** reduce cell padding for a smaller footprint */
  isCondensed: PropTypes.bool,

  /** increase cell padding for more white space */
  isRoomy: PropTypes.bool
} : {};
Table.defaultProps = {
  hasStripes: false,
  hasHover: false,
  isCondensed: false,
  isRoomy: false
};

function _templateObject$t() {
  var data = _taggedTemplateLiteral(["\n  tbody {\n    th {\n      font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n        sans-serif;\n      font-weight: normal;\n    }\n  }\n\n  &&& {\n    @media (max-width: ", ") {\n      background-color: ", ";\n\n      thead {\n        border: none;\n        clip: rect(0 0 0 0);\n        height: 1px;\n        margin: -1px;\n        overflow: hidden;\n        padding: 0;\n        position: absolute;\n        width: 1px;\n      }\n\n      tr {\n        background-color: ", ";\n        box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);\n        display: block;\n        margin: 0.625em;\n        padding: 0.35em;\n      }\n\n      td,\n      tbody th {\n        border-top: 1px solid ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0.625em;\n        text-align: right;\n\n        &:before {\n          content: attr(data-label);\n          font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma,\n            sans-serif;\n          font-weight: bold;\n          margin-right: 2em;\n          max-width: 25%;\n          text-align: left;\n        }\n\n        &:first-child {\n          border-top: 0;\n        }\n\n        &:last-child {\n          border-bottom: 0;\n        }\n      }\n    }\n  }\n"]);

  _templateObject$t = function _templateObject() {
    return data;
  };

  return data;
}
var TableBase$1 = styled(Table)(_templateObject$t(), function (props) {
  return props.theme.screenSize.phone;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray4;
});

function ResponsiveTable(props) {
  return React.createElement(TableBase$1, props);
}

var ValidationContext = React.createContext('default');

function _templateObject$u() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  margin-bottom: 25px;\n\n  >[role=\"group\"] {\n    margin-bottom: 0;\n  }\n\n  select {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  input:focus,\n  select:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  ", "\n  }\n\n  ", ";\n"]);

  _templateObject$u = function _templateObject() {
    return data;
  };

  return data;
}
var FlexControl = styled.div(_templateObject$u(), function (props) {
  return props.textColor;
}, function (props) {
  return props.borderColor;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.focusBorderColor;
}, function (props) {
  return props.focusBoxShadow;
}, function (props) {
  return props.hasValidationBorder && props.validationState !== 'default' && css(["border-bottom:2px solid ", ";box-shadow:inset 0 7px 6px -6px ", ";padding:15px ", ";margin-left:-", ";margin-right:-", ";"], props.theme.colors.gray4, props.textColor, props.borderOffset, props.borderOffset, props.borderOffset);
}, function (props) {
  return props.layoutOrientation === 'inline' && css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
});

function Control(props) {
  var validationState = props.validationState,
      hasValidationBorder = props.hasValidationBorder,
      orientation = props.orientation,
      borderOffset = props.borderOffset,
      children = props.children,
      other = _objectWithoutProperties(props, ["validationState", "hasValidationBorder", "orientation", "borderOffset", "children"]);

  var theme = useTheme();
  var textColor = theme.validationTextColor[validationState];
  return React.createElement(OrientationContext.Provider, {
    value: orientation
  }, React.createElement(FlexControl, _extends({
    textColor: textColor,
    borderOffset: borderOffset,
    validationState: validationState
  }, theme.validationInputColor[validationState], {
    layoutOrientation: orientation,
    hasValidationBorder: hasValidationBorder
  }, other), React.createElement(ValidationContext.Provider, {
    value: validationState
  }, children)));
}

Control.propTypes = process.env.NODE_ENV !== "production" ? {
  orientation: PropTypes.oneOf(['stacked', 'inline']),
  validationState: PropTypes.oneOf(['default', 'success', 'warning', 'danger']),

  /** Apply a top/bottom validation border to a control (usually checkbox/radios)  */
  hasValidationBorder: PropTypes.bool,

  /** Set the border offset to match container padding */
  borderOffset: PropTypes.string,
  children: PropTypes.node
} : {};
Control.defaultProps = {
  orientation: 'stacked',
  validationState: 'default',
  hasValidationBorder: false,
  borderOffset: '15px',
  children: null
};

function _templateObject2$e() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  color: inherit;\n  display: inline-flex;\n  margin-top: 5px;\n  margin-bottom: 10px;\n  width: 100%;\n"]);

  _templateObject2$e = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$v() {
  var data = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  font-size: 35px;\n  margin-right: 5px;\n"]);

  _templateObject$v = function _templateObject() {
    return data;
  };

  return data;
}
var ValidationIcon = styled(Icon)(_templateObject$v());
var HelpText = styled.div(_templateObject2$e());

function AdditionalHelp(_ref) {
  var children = _ref.children,
      hasValidationIcon = _ref.hasValidationIcon,
      props = _objectWithoutProperties(_ref, ["children", "hasValidationIcon"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  return React.createElement(HelpText, props, hasValidationIcon && children && validationState !== 'default' && React.createElement(ValidationIcon, {
    "aria-hidden": "true",
    name: theme.validationIconName[validationState]
  }), children);
}

AdditionalHelp.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any,

  /** use to show or hide an associated validation icon */
  hasValidationIcon: PropTypes.bool
} : {};
AdditionalHelp.defaultProps = {
  children: undefined,
  hasValidationIcon: true
};

function _templateObject$w() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  cursor: pointer;\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: ", ";\n  font-weight: bold;\n  line-height: ", ";\n  margin-bottom: 5px;\n  display: inline-block;\n\n  &[disabled] {\n    cursor: not-allowed;\n  }\n\n  @media (min-width: ", ") {\n    margin-right: 20px;\n  }\n"]);

  _templateObject$w = function _templateObject() {
    return data;
  };

  return data;
}
var Label = styled.label(_templateObject$w(), function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.theme.screenSize.tablet;
});

function _templateObject$x() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 2px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  height: 39px;\n  line-height: ", ";\n  min-width: 0;\n  padding: 6px 12px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n  width: 100%;\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    background-color: ", ";\n    cursor: text;\n  }\n"]);

  _templateObject$x = function _templateObject() {
    return data;
  };

  return data;
}
var InputBase = styled.input(_templateObject$x(), function (props) {
  return props.borderColor;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.focusBorderColor;
}, function (props) {
  return props.focusBoxShadow;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.colors.gray2;
});

function _templateObject4$8() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n"]);

  _templateObject4$8 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$a() {
  var data = _taggedTemplateLiteral(["\n  border-bottom-left-radius: 0;\n  border-left: none;\n  border-top-left-radius: 0;\n"]);

  _templateObject3$a = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$f() {
  var data = _taggedTemplateLiteral(["\n  border-bottom-right-radius: 0;\n  border-right: none;\n  border-top-right-radius: 0;\n"]);

  _templateObject2$f = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$y() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 39px;\n  justify-content: center;\n  line-height: 1;\n  margin: 0;\n  outline: 0;\n  padding: 6px 11px;\n"]);

  _templateObject$y = function _templateObject() {
    return data;
  };

  return data;
}
var defaultBorderRadius = '2px';
var AddOn = styled.button(_templateObject$y(), function (props) {
  return props.addOnBgColor;
}, function (props) {
  return props.addOnBgColor === props.theme.colors.gray3 ? props.theme.colors.gray5 : props.addOnBgColor;
}, defaultBorderRadius, function (props) {
  return props.addOnTextColor;
});
var Prepend = styled(AddOn)(_templateObject2$f());
var Append = styled(AddOn)(_templateObject3$a());
var InputWrapper = styled.div(_templateObject4$8());

function _templateObject$z() {
  var data = _taggedTemplateLiteral(["\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  display: table-cell;\n  -webkit-appearance: none;\n"]);

  _templateObject$z = function _templateObject() {
    return data;
  };

  return data;
}
var defaultBorderRadius$1 = '2px';
var TextboxBase = styled(InputBase)(_templateObject$z(), function (props) {
  return props.hasPrepend ? '0' : defaultBorderRadius$1;
}, function (props) {
  return props.hasAppend ? '0' : defaultBorderRadius$1;
}, function (props) {
  return props.hasPrepend ? '0' : defaultBorderRadius$1;
}, function (props) {
  return props.hasAppend ? '0' : defaultBorderRadius$1;
});
var Textbox = React.forwardRef(function Textbox(props, ref) {
  var prependIconName = props.prependIconName,
      appendIconName = props.appendIconName,
      additionalTextProps = _objectWithoutProperties(props, ["prependIconName", "appendIconName"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  var inputRef = React.useRef();
  React.useImperativeHandle(ref, function () {
    return inputRef.current;
  });
  var hasPrepend = !!prependIconName;
  var hasAppend = !!appendIconName;
  var hasValidationState = validationState !== 'default';
  var addOnTextColor = hasValidationState ? theme.colors.white : theme.colors.gray8;
  var addOnBgColor = hasValidationState ? theme.validationTextColor[validationState] : theme.colors.gray3;

  function focusInput() {
    inputRef.current.focus();
  }

  return React.createElement(InputWrapper, null, hasPrepend && React.createElement(Prepend, {
    addOnTextColor: addOnTextColor,
    addOnBgColor: addOnBgColor,
    "aria-hidden": "true",
    onClick: focusInput,
    type: "button"
  }, React.createElement(Icon, {
    "aria-hidden": "true",
    name: prependIconName,
    size: 18
  })), React.createElement(TextboxBase, _extends({
    hasAppend: hasAppend,
    hasPrepend: hasPrepend,
    ref: inputRef
  }, additionalTextProps, theme.validationInputColor[validationState])), hasAppend && React.createElement(Append, {
    addOnTextColor: addOnTextColor,
    addOnBgColor: addOnBgColor,
    "aria-hidden": "true",
    onClick: focusInput,
    type: "button"
  }, React.createElement(Icon, {
    "aria-hidden": "true",
    name: appendIconName,
    size: 18
  })));
});
Textbox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Content to prepend input box with */
  prependIconName: PropTypes.string,

  /** Content to append to input box */
  appendIconName: PropTypes.string
} : {};
Textbox.defaultProps = {
  prependIconName: undefined,
  appendIconName: undefined
};

function _templateObject$A() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  border-radius: 2px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-size: ", ";\n  font-weight: normal;\n  line-height: ", ";\n  min-width: 0;\n  padding: 6px 12px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  &:read-only {\n    background-color: ", ";\n    cursor: text;\n  }\n"]);

  _templateObject$A = function _templateObject() {
    return data;
  };

  return data;
}
var TextareaBase = styled.textarea(_templateObject$A(), function (props) {
  return props.borderColor;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.focusBorderColor;
}, function (props) {
  return props.focusBoxShadow;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.colors.gray2;
});
var Textarea = React.forwardRef(function Textarea(props, ref) {
  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  return React.createElement(TextareaBase, _extends({
    ref: ref
  }, props, theme.validationInputColor[validationState]));
});

var inputMask = {
  date: {
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
    pipe: createautoCorrectedDatePipe('mm/dd/yyyy'),
    showMask: false,
    keepCharPositions: true,
    placeholderChar: "\u2000",
    title: 'Enter month, day, and 4-digit year'
  },
  dollar: {
    mask: createNumberMask({
      prefix: '$'
    })
  },
  phone: {
    mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    showMask: false,
    keepCharPositions: true,
    placeholderChar: "\u2000",
    title: 'Enter area code and phone number'
  },
  ssnum: {
    mask: [/\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    showMask: false,
    keepCharPositions: true,
    placeholderChar: "\u2000",
    title: 'Enter 9-digit social security number'
  },
  zip: {
    mask: [/\d/, /\d/, /\d/, /\d/, /\d/],
    guide: false,
    title: 'Enter 5-digit zip code'
  }
};

var MaskedTextbox = React.forwardRef(function MaskedTextbox(props, ref) {
  var maskType = props.maskType,
      customMask = props.customMask,
      additionalTextProps = _objectWithoutProperties(props, ["maskType", "customMask"]);

  var inputRef = React.useRef();
  React.useImperativeHandle(ref, function () {
    return inputRef.current;
  });
  var maskArgs = maskType === 'custom' && customMask ? customMask : inputMask[maskType];
  return React.createElement(MaskedInput, _extends({
    render: function render(maskRef, textboxProps) {
      var setRef = function setRef(inputElement) {
        // we need to set both the mask ref and the passed in ref
        maskRef(inputElement);
        inputRef.current = inputElement;
      };

      return React.createElement(Textbox, _extends({
        ref: setRef
      }, textboxProps));
    }
  }, maskArgs, {
    type: "text"
  }, additionalTextProps));
});
MaskedTextbox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Sets a mask type on the input */
  maskType: PropTypes.oneOf(['date', 'dollar', 'phone', 'ssnum', 'zip', 'custom']).isRequired,

  /** Provide a custom mask */
  customMask: PropTypes.shape({
    mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]).isRequired,
    guide: PropTypes.bool,
    placeholderChar: PropTypes.string,
    keepCharPositions: PropTypes.bool,
    pipe: PropTypes.func,
    showMask: PropTypes.bool
  })
} : {};
MaskedTextbox.defaultProps = {
  customMask: undefined
};

function _templateObject$B() {
  var data = _taggedTemplateLiteral(["\n  .es-button__display {\n    background-color: ", ";\n    box-shadow: 0 4px 0 0 ", ";\n    color: ", ";\n    transition: background-color 120ms linear, color 120ms linear;\n  }\n\n  &:hover .es-button__display {\n    background-color: ", ";\n    box-shadow: 0 4px 0 0 ", ";\n    color: ", ";\n  }\n"]);

  _templateObject$B = function _templateObject() {
    return data;
  };

  return data;
}
var StyledButton$5 = styled(Button)(_templateObject$B(), function (props) {
  return props.defaultStyle.bgColor;
}, function (props) {
  return props.defaultStyle.boxShadowColor;
}, function (props) {
  return props.defaultStyle.textColor;
}, function (props) {
  return props.hoverStyle.bgColor;
}, function (props) {
  return props.hoverStyle.hoverBgColor;
}, function (props) {
  return props.hoverStyle.textColor;
});
var ActionButton = React.forwardRef(function ActionButton(props, ref) {
  var children = props.children,
      styleType = props.styleType,
      other = _objectWithoutProperties(props, ["children", "styleType"]);

  var theme = useTheme();
  var defaultStyle = theme.buttonStyles.button.variant.default;
  var hoverStyle = theme.buttonStyles.button.variant[styleType];
  return React.createElement(StyledButton$5, _extends({
    ref: ref,
    defaultStyle: defaultStyle,
    hoverStyle: hoverStyle,
    styleType: styleType,
    type: "button"
  }, other), children);
});
ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node.isRequired,

  /** Select the color style of the button, types come from theme buttonStyles.button */
  styleType: PropTypes.string
} : {};
ActionButton.defaultProps = {
  styleType: 'primary'
};

var Caret = styled.span(["border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px dashed;display:inline-block;height:0;margin-left:5px;vertical-align:middle;width:0;"]);
var ButtonPanel = styled.div(["background-color:", ";border:1px solid ", ";display:", ";margin-top:3px;position:relative;z-index:999;@media (min-width:", "){position:absolute;}"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray3;
}, function (props) {
  return props.isOpen ? 'block' : 'none';
}, function (props) {
  return props.theme.screenSize.tablet;
});
var ButtonPanelChildrenContainer = styled.div(["display:flex;flex-direction:column;"]);
var StyledButtonLink = styled(LinkButton)(["color:black;margin-bottom:0px;text-align:left;text-decoration:none;padding:10px 20px;&:active,&:focus,&:hover{background-color:", ";color:white;}"], function (props) {
  return props.theme.colors.primary;
});
var TAB_KEY_CODE = 9;
var UP_ARROW_CODE = 38;
var DOWN_ARROW_CODE = 40;

function getFocusables(node) {
  var focusableElements = node.querySelectorAll('button');
  var firstFocusable = focusableElements[0];
  var lastFocusable = focusableElements[focusableElements.length - 1];
  return {
    focusableElements: focusableElements,
    firstFocusable: firstFocusable,
    lastFocusable: lastFocusable
  };
}

function isCurrentlyActive(node) {
  return document.activeElement === node;
}

function focusTrap(node) {
  var _getFocusables = getFocusables(node),
      firstFocusable = _getFocusables.firstFocusable,
      lastFocusable = _getFocusables.lastFocusable;

  function handleTabFocus(event) {
    if (event.key === 'Tab' || event.keyCode === TAB_KEY_CODE) {
      if (event.shiftKey) {
        if (isCurrentlyActive(firstFocusable)) {
          lastFocusable.focus();
          event.preventDefault();
        }
      } else if (isCurrentlyActive(lastFocusable)) {
        firstFocusable.focus();
        event.preventDefault();
      }
    }
  }

  node.addEventListener('keydown', handleTabFocus);
  return function removeKeydownListener() {
    node.removeEventListener('keydown', handleTabFocus);
  };
}

function arrowMovement(node) {
  var _getFocusables2 = getFocusables(node),
      focusableElements = _getFocusables2.focusableElements,
      firstFocusable = _getFocusables2.firstFocusable,
      lastFocusable = _getFocusables2.lastFocusable;

  var focusables = _toConsumableArray(focusableElements);

  function handleArrowMovementKeys(event) {
    if (event.keyCode === UP_ARROW_CODE) {
      if (isCurrentlyActive(firstFocusable)) {
        lastFocusable.focus();
        event.preventDefault();
      } else {
        var index = _indexOfInstanceProperty(focusables).call(focusables, document.activeElement);

        focusables[index - 1].focus();
        event.preventDefault();
      }
    }

    if (event.keyCode === DOWN_ARROW_CODE) {
      if (isCurrentlyActive(lastFocusable)) {
        firstFocusable.focus();
        event.preventDefault();
      } else {
        var _index = _indexOfInstanceProperty(focusables).call(focusables, document.activeElement);

        focusableElements[_index + 1].focus();

        event.preventDefault();
      }
    }
  }

  node.addEventListener('keydown', handleArrowMovementKeys);
  return function removeArrowMovementListener() {
    node.removeEventListener('keydown', handleArrowMovementKeys);
  };
}

var _StyledDiv = styled.div(["display:", ";flex-direction:column;position:relative;"], function (p) {
  return p._css;
});

var _StyledDiv2 = styled.div(["position:relative;"]);

function DropdownButton(props) {
  var _useState = useState(props.buttonValue),
      _useState2 = _slicedToArray(_useState, 2),
      buttonValue = _useState2[0],
      setButtonValue = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isOpen = _useState4[0],
      setIsOpen = _useState4[1];

  var initialRender = useRef(true);
  var buttonDropdown = useRef();
  var triggerButton = useRef();
  var panelId = useUniqueId(props.id);
  useEffect(function () {
    var removeFocusTrapListener = focusTrap(buttonDropdown.current);
    var removeArrowMovementListener = arrowMovement(buttonDropdown.current);
    return function removeListeners() {
      removeFocusTrapListener();
      removeArrowMovementListener();
    };
  }, [isOpen]);
  useEffect(function () {
    if (!initialRender.current) {
      triggerButton.current.focus();
    }

    initialRender.current = false;
  }, [isOpen]);

  var toggleDropdown = function toggleDropdown() {
    return setIsOpen(!isOpen);
  };

  function closeDropdown() {
    if (isOpen) {
      setIsOpen(false);
    }
  }

  function handleDropdownItemClick(buttonProps) {
    var shouldCloseOnButtonClick = props.shouldCloseOnButtonClick,
        shouldUpdateButtonValue = props.shouldUpdateButtonValue;
    return function (event) {
      if (shouldUpdateButtonValue) {
        setButtonValue(buttonProps.children);
      }

      if (shouldCloseOnButtonClick) {
        closeDropdown();
      }

      buttonProps.onClick(event, buttonProps.name);
    };
  }

  var rootClose = props.rootClose,
      children = props.children,
      manualButtonValue = props.manualButtonValue,
      styleType = props.styleType,
      inline = props.inline,
      otherProps = _objectWithoutProperties(props, ["rootClose", "children", "manualButtonValue", "styleType", "inline"]);

  return React.createElement(RootCloseWrapper, {
    onRootClose: closeDropdown,
    disabled: !rootClose
  }, React.createElement(_StyledDiv, {
    ref: buttonDropdown,
    role: "combobox",
    "aria-controls": panelId,
    "aria-expanded": isOpen,
    "aria-haspopup": "listbox",
    _css: inline ? 'inline-flex' : 'block'
  }, React.createElement(Button, _extends({}, otherProps, {
    onClick: toggleDropdown,
    "aria-haspopup": "true",
    "aria-pressed": isOpen,
    ref: triggerButton,
    styleType: styleType
  }), manualButtonValue || buttonValue, React.createElement(Caret, null)), React.createElement(_StyledDiv2, null, React.createElement(ButtonPanel, {
    isOpen: isOpen,
    id: panelId
  }, React.createElement(ButtonPanelChildrenContainer, null, _mapInstanceProperty(Children).call(Children, children, function (child) {
    var onClickHandler = handleDropdownItemClick(child.props);
    var newProps = {
      onClick: onClickHandler,
      role: 'option'
    };
    return React.cloneElement(child, newProps);
  }))))));
}

DropdownButton.Button = StyledButtonLink;
DropdownButton.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Content shown in the button */
  buttonValue: PropTypes.any,

  /**
   * Defines what value should be displayed on the button.
   * Overrides the stored state value, and renders shouldUpdateButtonValue
   * useless
   */
  manualButtonValue: PropTypes.node,
  children: PropTypes.any.isRequired,

  /**
   * Defines if the buttons value should update to the last pressed,
   * childs value.
   */
  shouldUpdateButtonValue: PropTypes.bool,

  /** Defines if the dropdown should close when any child button is clicked */
  shouldCloseOnButtonClick: PropTypes.bool,

  /**
   * Defines whether the dropdown will close when any other element on the page is clicked.
   * Uses RootCloseWrapper from React-Overlay
   */
  rootClose: PropTypes.bool,

  /** Select the color style of the button, types come from theme */
  styleType: PropTypes.string,

  /** Display the dropdown button inline */
  inline: PropTypes.bool,
  id: PropTypes.string
} : {};
DropdownButton.defaultProps = {
  buttonValue: undefined,
  manualButtonValue: undefined,
  shouldUpdateButtonValue: false,
  shouldCloseOnButtonClick: false,
  styleType: 'default',
  rootClose: false,
  inline: false,
  id: undefined
};

function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$5(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$5(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject4$9() {
  var data = _taggedTemplateLiteral(["\n  clip-path: inset(100%);\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n\n  &:focus + div {\n    background-color: ", ";\n    color: ", ";\n  }\n"]);

  _templateObject4$9 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$b() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 2px solid ", ";\n  box-shadow: ", "\n    ", ";\n  box-sizing: border-box;\n  color: ", ";\n  margin: 0;\n\n  &:active {\n    margin: 0;\n  }\n"]);

  _templateObject3$b = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$g() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-color: transparent;\n  box-shadow: 0 4px 0 0 ", ";\n  color: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  margin-bottom: 4px;\n  margin-top: 0;\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  text-align: center;\n  text-transform: ", ";\n  transition: background-color 250ms linear, color 250ms linear;\n  user-select: none;\n\n  &:active {\n    background-color: ", ";\n    box-shadow: 0 0 0 0 transparent;\n    color: ", ";\n    margin-bottom: 0;\n    margin-top: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: 0.65;\n\n    > * {\n      pointer-events: none;\n    }\n  }\n"]);

  _templateObject2$g = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$C() {
  var data = _taggedTemplateLiteral(["\n  flex-grow: 1;\n\n  @media (min-width: ", ") {\n    flex-grow: 0;\n    min-width: ", ";\n  }\n"]);

  _templateObject$C = function _templateObject() {
    return data;
  };

  return data;
}
var AnswerLabel = styled.label(_templateObject$C(), function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.itemWidth;
});
var AnswerDisplay = styled.div(_templateObject2$g(), function (props) {
  return props.buttonStyle.bgColor;
}, function (props) {
  return props.buttonStyle.boxShadowColor;
}, function (props) {
  return props.buttonStyle.textColor;
}, function (props) {
  return props.buttonSize.fontWeight || 'normal';
}, function (props) {
  return props.buttonSize.fontSize;
}, function (props) {
  return props.buttonSize.lineHeight;
}, function (props) {
  return props.buttonSize.paddingTop;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.paddingBottom;
}, function (props) {
  return props.buttonSize.paddingSides;
}, function (props) {
  return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
}, function (props) {
  return props.buttonStyle.activeBgColor;
}, function (props) {
  return props.buttonStyle.activeTextColor;
}, function (props) {
  return props.buttonStyle.hoverBgColor;
}, function (props) {
  return props.buttonStyle.hoverTextColor;
});
var OutlineAnswerDisplay = styled(AnswerDisplay)(_templateObject3$b(), function (props) {
  return props.isChecked ? props.buttonStyle.hoverBgColor : props.buttonStyle.bgColor;
}, function (props) {
  return props.buttonStyle.borderColor;
}, function (props) {
  return props.isChecked ? '0 0 0 0' : 'none';
}, function (props) {
  return props.isChecked && props.buttonStyle.boxShadowColor;
}, function (props) {
  return props.isChecked ? props.buttonStyle.hoverTextColor : props.buttonStyle.textColor;
});
var AnswerInput = styled.input(_templateObject4$9(), function (props) {
  return props.buttonStyle.activeBgColor;
}, function (props) {
  return props.buttonStyle.activeTextColor;
});

function AnswerButton(_ref) {
  var name = _ref.name,
      children = _ref.children,
      itemWidth = _ref.itemWidth,
      styleType = _ref.styleType,
      selectedType = _ref.selectedType,
      size = _ref.size,
      isOutline = _ref.isOutline,
      checked = _ref.checked,
      radioProps = _objectWithoutProperties(_ref, ["name", "children", "itemWidth", "styleType", "selectedType", "size", "isOutline", "checked"]);

  var id = useUniqueId(radioProps.id);
  var isChecked = radioProps.checked || radioProps.defaultChecked;
  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  var buttonType = isOutline ? 'outlineButton' : 'button';
  var buttonSize = theme.buttonStyles[buttonType].size[size];
  var variant = validationState !== 'default' && !isOutline ? validationState : styleType;
  var validationBorder = theme.buttonStyles[buttonType].variant[validationState].borderColor;
  var selectedStyles = theme.buttonStyles[buttonType].variant[selectedType];
  var unSelectedStyles = theme.buttonStyles[buttonType].variant[variant];

  if (isOutline && validationState !== 'default') {
    selectedStyles = _objectSpread$5({}, selectedStyles, {
      borderColor: validationBorder
    });
    unSelectedStyles = _objectSpread$5({}, unSelectedStyles, {
      borderColor: validationBorder
    });
  }

  var buttonStyle = isChecked ? selectedStyles : unSelectedStyles;
  var buttonProps = {
    disabled: radioProps.disabled,
    isChecked: isChecked,
    buttonStyle: buttonStyle,
    buttonSize: buttonSize
  };
  var labelProps = {
    disabled: radioProps.disabled,
    itemWidth: itemWidth,
    htmlFor: id,
    validationState: validationState
  };
  var Display = isOutline ? OutlineAnswerDisplay : AnswerDisplay;
  return React.createElement(AnswerLabel, labelProps, React.createElement(AnswerInput, _extends({
    type: "radio",
    name: name,
    id: id,
    buttonStyle: buttonStyle
  }, radioProps)), React.createElement(Display, buttonProps, children));
}

function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys$6(source, true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys$6(source)).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function RadioGroup(_ref) {
  var _context;

  var name = _ref.name,
      disableAllOptions = _ref.disableAllOptions,
      selectedValue = _ref.selectedValue,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["name", "disableAllOptions", "selectedValue", "children"]);

  return _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, index) {
    var _context2;

    var key = _concatInstanceProperty(_context2 = "".concat(name, "-option-")).call(_context2, index + 1);

    var disabled = disableAllOptions || child.props.disabled;
    var checked = selectedValue === child.props.value;
    return React.cloneElement(child, _objectSpread$6({
      key: key,
      name: name,
      disabled: disabled,
      defaultChecked: checked
    }, rest));
  });
}

RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The name of the radio group */
  name: PropTypes.string.isRequired,

  /** Selected option for the radio group */
  selectedValue: PropTypes.any,

  /** Disable all radio buttons */
  disableAllOptions: PropTypes.bool
} : {};
RadioGroup.defaultProps = {
  selectedValue: undefined,
  disableAllOptions: false
};

function _templateObject$D() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n\n  ", ";\n"]);

  _templateObject$D = function _templateObject() {
    return data;
  };

  return data;
}
var outlineStyles = css(["> label:first-child > div{border-radius:4px 0 0 4px;}> label:last-child > div{border-left:none;border-radius:0 4px 4px 0;}> label:not(:first-child):not(:last-child) > div{border-left:1px;}"]);
var AnswerSet = styled.div(_templateObject$D(), function (props) {
  return props.isOutline && outlineStyles;
});

function AnswerGroup(props) {
  return React.createElement(AnswerSet, {
    isOutline: props.isOutline
  }, React.createElement(RadioGroup, props));
}

AnswerGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The name of the answer group */
  name: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,

  /** The width of each item when not in mobile view */
  itemWidth: PropTypes.string,

  /** Select the color style of the buttons, types come from theme */
  styleType: PropTypes.string,

  /** Select the color style of the selected button, types come from theme */
  selectedType: PropTypes.string,

  /** Set the button size, sizes come from theme (buttonStyles) */
  size: PropTypes.string,

  /** Set if the items should have a flat outline style */
  isOutline: PropTypes.bool,

  /** Disable all radio buttons */
  disableAllOptions: PropTypes.bool,

  /** Selected option for the answer group */
  selectedValue: PropTypes.any
} : {};
AnswerGroup.defaultProps = {
  styleType: 'default',
  selectedType: 'success',
  size: 'default',
  itemWidth: '100px',
  isOutline: false,
  disableAllOptions: false,
  selectedValue: undefined
};

function getRadioFillVariables(isChecked, isDisabled, validationState, colors) {
  var isNotDisabled = !isDisabled;
  var isValid = validationState === 'default';

  if (isDisabled) {
    return {
      fill: colors.gray5
    };
  }

  if (isNotDisabled && !isValid) {
    return {
      fill: colors[validationState],
      hover: colors.gray3
    };
  }

  if (isChecked && isNotDisabled) {
    return {
      fill: colors.primary
    };
  }

  return {
    fill: colors.gray8,
    hover: colors.gray3
  };
}

function _templateObject3$c() {
  var data = _taggedTemplateLiteral(["\n  border: 3px solid ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  height: 25px;\n  margin-right: 8px;\n  min-width: 25px;\n\n  &:before {\n    ", ";\n  }\n"]);

  _templateObject3$c = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$h() {
  var data = _taggedTemplateLiteral(["\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n  position: absolute;\n\n  &:focus ~ .es-radio__fill {\n    box-shadow: 0 0 3px 3px ", ";\n  }\n"]);

  _templateObject2$h = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$E() {
  var data = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  cursor: pointer;\n  display: flex;\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: ", ";\n  font-weight: normal;\n  line-height: ", ";\n  margin-right: 15px;\n  margin-bottom: 10px;\n  position: relative;\n  padding: 10px 0 10px 10px;\n  text-transform: none;\n\n  &:hover .es-radio__fill:before {\n    ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding: 5px 0;\n  }\n"]);

  _templateObject$E = function _templateObject() {
    return data;
  };

  return data;
}

function radioFill(color) {
  return "\n    background-color: ".concat(color, ";\n    border-radius: 50%;\n    content: '';\n    display: block;\n    height: 13px;\n    left: 3px;\n    position: relative;\n    width: 13px;\n    top: 3px;\n    transition: background 0.25s linear;\n  ");
}

var RadioLabel = styled(Label)(_templateObject$E(), function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return !props.checked && radioFill(props.hoverFillColor);
}, function (props) {
  return props.theme.screenSize.tablet;
});
var RadioInput = styled.input(_templateObject2$h(), function (props) {
  return props.theme.colors.inputFocus;
});
var RadioDisplay = styled.span(_templateObject3$c(), function (props) {
  return props.borderColor;
}, function (props) {
  return radioFill(_fillInstanceProperty(props));
});
function RadioButton(_ref) {
  var children = _ref.children,
      radioProps = _objectWithoutProperties(_ref, ["children"]);

  var id = useUniqueId(radioProps.id);
  var isChecked = radioProps.checked || radioProps.defaultChecked;
  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);

  var _getRadioFillVariable = getRadioFillVariables(isChecked, radioProps.disabled, validationState, theme.colors),
      hover = _getRadioFillVariable.hover,
      fill = _fillInstanceProperty(_getRadioFillVariable);

  var radioDisplayFill = isChecked ? fill : theme.colors.white;
  var labelProps = {
    disabled: radioProps.disabled,
    htmlFor: id,
    hoverFillColor: hover,
    validationState: validationState,
    checked: isChecked
  };
  return React.createElement(RadioLabel, labelProps, React.createElement(RadioInput, _extends({
    type: "radio",
    id: id
  }, radioProps)), React.createElement(RadioDisplay, {
    className: "es-radio__fill",
    borderColor: fill,
    fill: radioDisplayFill
  }), children);
}
RadioButton.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any
} : {};
RadioButton.defaultProps = {
  children: undefined
};

function _templateObject$F() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  flex: auto;\n  font-size: ", ";\n  font-weight: normal;\n  height: 39px;\n  min-width: 100px;\n  padding: 6px 12px;\n  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: ", ";\n    outline: 0;\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n"]);

  _templateObject$F = function _templateObject() {
    return data;
  };

  return data;
}
var DropdownBase = styled.select(_templateObject$F(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray5;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.focusBorderColor;
}, function (props) {
  return props.focusBoxShadow;
}, function (props) {
  return props.theme.colors.gray2;
});

function Dropdown(props) {
  return React.createElement(DropdownBase, props);
}

function _templateObject3$d() {
  var data = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 3px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  cursor: pointer;\n  height: 25px;\n  left: 10px;\n  position: absolute;\n  top: 0.55em;\n  transition: all 0.25s linear, box-shadow 0.15s linear;\n  width: 25px;\n\n  @media (min-width: ", ") {\n    left: 0;\n    top: 0.35em;\n  }\n\n  &:after {\n    background: transparent;\n    border: 3px solid ", ";\n    border-right: none;\n    border-top: none;\n    box-sizing: border-box;\n    content: '';\n    display: block;\n    height: 9px;\n    margin: 3px 0 0 2px;\n    transform: rotate(-45deg);\n    transition: border 0.25s linear;\n    width: 15px;\n  }\n"]);

  _templateObject3$d = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$i() {
  var data = _taggedTemplateLiteral(["\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n  position: absolute;\n\n  &:focus ~ .es-checkbox__fill {\n    box-shadow: 0 0 3px 3px ", ";\n    &:after {\n      border-color: ", ";\n    }\n  }\n"]);

  _templateObject2$i = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$G() {
  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n  font-size: ", ";\n  font-weight: normal;\n  line-height: ", ";\n  margin-left: -10px;\n  min-height: 25px;\n  padding: 10px 0 10px 42px;\n  position: relative;\n\n  @media (min-width: ", ") {\n    margin-left: 0;\n    padding: 5px 0 5px 32px;\n  }\n\n  > .es-checkbox__fill {\n    background-color: ", ";\n    border-color: ", ";\n\n    &:after {\n      border-color: ", ";\n    }\n  }\n\n  &:hover > .es-checkbox__fill:after {\n    border-color: ", ";\n  }\n\n  &[disabled] > .es-checkbox__fill {\n    background-color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n    outline: 0;\n\n    &:after {\n      border-color: ", ";\n    }\n  }\n"]);

  _templateObject$G = function _templateObject() {
    return data;
  };

  return data;
}

var backgroundColorSelect = function backgroundColorSelect(checked, theme, validationState) {
  if (checked) {
    return validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
  }

  return theme.colors.white;
};

var CheckboxLabel = styled(Label)(_templateObject$G(), function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseFontSize;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (_ref) {
  var checked = _ref.checked,
      theme = _ref.theme,
      validationState = _ref.validationState;
  return backgroundColorSelect(checked, theme, validationState);
}, function (_ref2) {
  var checked = _ref2.checked,
      theme = _ref2.theme,
      validationState = _ref2.validationState;
  return checked && validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
}, function (props) {
  return props.theme.colors.white;
}, function (_ref3) {
  var checked = _ref3.checked,
      theme = _ref3.theme;
  return checked ? theme.colors.white : theme.colors.gray3;
}, function (_ref4) {
  var checked = _ref4.checked,
      theme = _ref4.theme;
  return checked ? theme.colors.gray5 : theme.colors.white;
}, function (props) {
  return props.theme.colors.gray5;
}, function (props) {
  return props.theme.colors.white;
});
var CheckboxInput = styled.input(_templateObject2$i(), function (props) {
  return props.theme.colors.inputFocus;
}, function (_ref5) {
  var checked = _ref5.checked,
      theme = _ref5.theme;
  return checked ? theme.colors.white : theme.colors.gray3;
});
var CheckboxDisplay = styled.span(_templateObject3$d(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray8;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.colors.white;
});

function Checkbox(_ref6) {
  var children = _ref6.children,
      checkboxProps = _objectWithoutProperties(_ref6, ["children"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  return React.createElement(CheckboxLabel, {
    validationState: validationState,
    checked: checkboxProps.checked,
    disabled: checkboxProps.disabled
  }, React.createElement(CheckboxInput, _extends({
    type: "checkbox",
    focusBorderColor: theme.colors.inputFocus
  }, checkboxProps)), React.createElement(CheckboxDisplay, {
    className: "es-checkbox__fill"
  }), children);
}

Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any
} : {};
Checkbox.defaultProps = {
  children: undefined
};

function _templateObject2$j() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ul {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);

  _templateObject2$j = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$H() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: 2px 2px 5px ", ";\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"]);

  _templateObject$H = function _templateObject() {
    return data;
  };

  return data;
}
var VerticalNavigation = styled.nav(_templateObject$H(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray6;
});
var HorizontalNavigation = styled.nav(_templateObject2$j(), function (props) {
  return props.theme.colors.white;
});
function useNavigation(orientation) {
  var OrientedNavigation = orientation === 'horizontal' ? HorizontalNavigation : VerticalNavigation;

  function Navigation(props) {
    var _context;

    var useAltStyle = props.useAltStyle,
        children = props.children;

    var _React$useState = React.useState(props.selected),
        _React$useState2 = _slicedToArray(_React$useState, 2),
        selected = _React$useState2[0],
        setSelected = _React$useState2[1];

    React.useEffect(function () {
      setSelected(props.selected);
    }, [props.selected]);
    return React.createElement(OrientedNavigation, {
      className: "es-sidenav"
    }, React.createElement("ul", null, _mapInstanceProperty(_context = React.Children).call(_context, children, function (child) {
      return React.cloneElement(child, {
        useAltStyle: useAltStyle,
        highlightedId: selected
      });
    })));
  }

  Navigation.propTypes = process.env.NODE_ENV !== "production" ? {
    /** Use the alternate nav style */
    useAltStyle: PropTypes.bool,
    children: PropTypes.node.isRequired,

    /** Set the selected nav item by id, controlled mode */
    selected: PropTypes.string
  } : {};
  Navigation.defaultProps = {
    useAltStyle: false,
    selected: undefined
  };
  return Navigation;
}

function _templateObject4$a() {
  var data = _taggedTemplateLiteral(["\n  align-content: center;\n  background-color: transparent;\n  border: 0;\n  color: inherit;\n  cursor: inherit;\n  display: flex;\n  font-size: inherit;\n  height: 100%;\n  justify-content: ", ";\n  padding: 0;\n  text-decoration: none;\n  width: 100%;\n"]);

  _templateObject4$a = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$e() {
  var data = _taggedTemplateLiteral(["\n  align-self: flex-end;\n"]);

  _templateObject3$e = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$k() {
  var data = _taggedTemplateLiteral(["\n  ", "\n\n  ", " ", ";\n"]);

  _templateObject2$k = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$I() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  line-height: ", ";\n  min-width: 75px;\n  padding: 10px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n\n    > i {\n      color: ", ";\n    }\n  }\n\n  ", " ", ";\n"]);

  _templateObject$I = function _templateObject() {
    return data;
  };

  return data;
}
var NavItemWrapper = styled.li(_templateObject$I(), function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.sizes.baseLineHeight;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.isActive && css(["background-color:", ";color:", ";&:hover{background-color:", ";color:", ";> i{color:", ";}}"], props.theme.colors.primary, props.theme.colors.white, props.theme.colors.primary, props.theme.colors.white, props.theme.colors.white);
}, function (props) {
  return props.isDisabled && css(["background-color:", ";color:", ";cursor:not-allowed;> span{pointer-events:none;}> i{color:", ";}&:hover{background-color:", ";color:", ";> i{color:", ";}}"], props.theme.colors.gray1, props.theme.colors.gray6, props.theme.colors.gray1, props.theme.colors.gray1, props.theme.colors.gray6, props.theme.colors.gray1);
});
var AltNavItemWrapper = styled(NavItemWrapper)(_templateObject2$k(), function (props) {
  return css(["border-bottom:", " ", ";&:hover{border-", ":4px solid ", ";padding-left:", ";padding-bottom:", ";}"], props.isVertical ? 'none' : '2px solid', props.theme.colors.gray5, props.isVertical ? 'left' : 'bottom', props.theme.colors.primary, props.isVertical ? '6px' : '10px', props.isVertical ? '10px' : '6px');
}, function (props) {
  return props.isActive && css(["background-color:", ";border-", ":4px solid ", ";color:", ";padding-left:", ";padding-bottom:", ";> i{color:", ";}&:hover{background-color:", ";border-", ":4px solid ", ";color:", ";> i{color:", ";}}"], props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.vbMagenta, props.theme.colors.black, props.isVertical ? '6px' : '10px', props.isVertical ? '10px' : '6px', props.theme.brandColors.vbMagenta, props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.vbMagenta, props.theme.colors.black, props.theme.brandColors.vbMagenta);
}, function (props) {
  return props.isDisabled && css(["&:hover{border-left:none;padding-left:10px;}"]);
});
var NavIcon = styled(Icon)(_templateObject3$e());
var NavigationAnchor = styled.a(_templateObject4$a(), function (props) {
  return props.isVertical ? 'space-between' : 'center';
});
function useNavigationItem(orientation) {
  function NavItem(props) {
    var highlightedId = props.highlightedId,
        id = props.id,
        isDisabled = props.isDisabled,
        useAltStyle = props.useAltStyle,
        children = props.children;
    var isActive = id === highlightedId;
    var Wrapper = useAltStyle ? AltNavItemWrapper : NavItemWrapper;
    var isVertical = orientation === 'vertical';
    var child = React.Children.only(children);

    var _child$props = child.props,
        grandChildren = _child$props.children,
        rest = _objectWithoutProperties(_child$props, ["children"]);

    var styledChild = React.createElement(NavigationAnchor, _extends({
      as: child.type,
      isVertical: isVertical
    }, rest), React.createElement("span", null, grandChildren), isVertical ? React.createElement(NavIcon, {
      name: "chevron-right"
    }) : null);
    return React.createElement(Wrapper, {
      className: "es-sidenav__navitem",
      isActive: isActive,
      isDisabled: isDisabled,
      isVertical: isVertical
    }, styledChild);
  }

  NavItem.propTypes = process.env.NODE_ENV !== "production" ? {
    /** @ignore */
    useAltStyle: PropTypes.bool,

    /** Item content */
    children: PropTypes.any,

    /** @ignore */
    highlightedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

    /** Each item must have a unique identifier */
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,

    /** Disable the nav item to render it un-clickable */
    isDisabled: PropTypes.bool
  } : {};
  NavItem.defaultProps = {
    useAltStyle: false,
    isDisabled: false,
    children: undefined,
    highlightedId: undefined
  };
  return NavItem;
}

var Navigation = useNavigation('vertical');

function SideNav(props) {
  return React.createElement(Navigation, props);
}

SideNav.Item = useNavigationItem('vertical');

var Navigation$1 = useNavigation('horizontal');

function HorizontalNav(props) {
  return React.createElement(Navigation$1, props);
}

HorizontalNav.Item = useNavigationItem('horizontal');

function useWindowWidth() {
  var _React$useState = React.useState(document.body.clientWidth),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      width = _React$useState2[0],
      setWidth = _React$useState2[1];

  React.useEffect(function () {
    var handleResize = function handleResize() {
      return setWidth(document.body.clientWidth);
    };

    window.addEventListener('resize', handleResize);
    return function () {
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  return width;
}

function _templateObject$J() {
  var data = _taggedTemplateLiteral(["\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow {\n      margin-left: -8px;\n      position: absolute;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      box-sizing: content-box;\n      position: absolute;\n      border: 8px solid transparent;\n      height: 0;\n      width: 1px;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      content: \"\";\n      z-index: -1;\n      border-width: 8px;\n      left: -8px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n      top: 0;\n      margin-top: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n      border-top: none;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n      top: -1px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n      bottom: 1px;\n      margin-bottom: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      border-bottom: none;\n      border-top-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      bottom: -1px;\n      border-top-color: ", ";\n  }\n  .react-datepicker-wrapper {\n      display: inline-block;\n  }\n  .react-datepicker {\n      font-size: 18px;\n      background-color: ", ";\n      border: solid 1px ", ";\n      border-radius: 4px;\n      color: ", ";\n      box-shadow: 0 5px 10px ", ";\n      display: inline-block;\n      position: relative;\n  }\n  .react-datepicker--time-only .react-datepicker__triangle {\n    left: 35px;\n  }\n  .react-datepicker--time-only .react-datepicker__time-container {\n    border-left: 0;\n  }\n  .react-datepicker--time-only .react-datepicker__time {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker--time-only .react-datepicker__time-box {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker__triangle {\n      position: absolute;\n      left: 50px;\n  }\n  .react-datepicker-popper {\n      z-index: 1060;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] {\n    margin-top: 12px;\n  }\n    .react-datepicker-popper[data-placement^=\"top\"] {\n    margin-bottom: 6px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"] {\n      margin-left: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"] .react-datepicker__triangle {\n      left: auto;\n      right: 42px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] {\n      margin-right: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] .react-datepicker__triangle {\n      left: 42px;\n      right: auto;\n  }\n  .react-datepicker__header {\n      text-align: center;\n      background-color: ", ";\n      border-top-left-radius: 4px;\n      border-top-right-radius: 4px;\n      padding-top: 10px;\n      position: relative;\n  }\n  .react-datepicker__header--time {\n    padding-bottom: 8px;\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n  .react-datepicker__year-dropdown-container--select,\n  .react-datepicker__month-dropdown-container--select,\n  .react-datepicker__month-year-dropdown-container--select,\n  .react-datepicker__year-dropdown-container--scroll,\n  .react-datepicker__month-dropdown-container--scroll,\n  .react-datepicker__month-year-dropdown-container--scroll {\n      display: inline-block;\n      margin: 0 2px;\n  }\n  .react-datepicker__current-month,\n  .react-datepicker-time__header {\n      margin-top: 0;\n      color: ", ";\n      font-weight: bold;\n      font-size: 18px;\n  }\n  .react-datepicker-time__header {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation {\n      background-color: transparent;\n      line-height: 1.7rem;\n      text-align: center;\n      cursor: pointer;\n      position: absolute;\n      top: 10px;\n      padding: 0;\n      height: 10px;\n      width: 0;\n      border: 0.45rem solid transparent;\n      z-index: 1;\n      text-indent: -999em;\n      overflow: hidden;\n  }\n  .react-datepicker__navigation--previous {\n      left: 10px;\n      border-right-color: ", ";\n  }\n  .react-datepicker__navigation--previous:hover {\n      border-right-color: ", ";\n  }\n  .react-datepicker__navigation--previous--disabled,\n  .react-datepicker__navigation--previous--disabled:hover {\n    border-right-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__navigation--next {\n      right: 10px;\n      border-left-color: ", ";\n  }\n  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n      right: 110px;\n  }\n  .react-datepicker__navigation--next:hover {\n      border-left-color: ", ";\n  }\n  .react-datepicker__navigation--next--disabled,\n  .react-datepicker__navigation--next--disabled:hover {\n    border-left-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__navigation--years {\n      position: relative;\n      top: 0;\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n  }\n  .react-datepicker__navigation--years-previous {\n      top: 4px;\n      border-top-color: ", ";\n  }\n  .react-datepicker__navigation--years-previous:hover {\n      border-top-color: ", ";\n  }\n  .react-datepicker__navigation--years-upcoming {\n      top: -4px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker__navigation--years-upcoming:hover {\n      border-bottom-color: ", ";\n  }\n  .react-datepicker__month-container {\n      float: left;\n  }\n  .react-datepicker__month {\n      margin: 0.4rem;\n      text-align: center;\n  }\n  .react-datepicker__time-container {\n      float: right;\n      border-left: 1px solid ", ";\n  }\n  .react-datepicker__time-container--with-today-button {\n      display: inline;\n      border: 1px solid ", ";\n      border-radius: 0.3rem;\n      position: absolute;\n      right: -72px;\n      top: 0;\n  }\n  .react-datepicker__time-container .react-datepicker__time {\n      font-size: 14px;\n      position: relative;\n      background: white;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n      width: 102px;\n      overflow-x: hidden;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n      list-style: none;\n      margin: 0;\n      height: 204px;\n      overflow-y: scroll;\n      padding: 0;\n      width: 100%;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n      padding: 5px 10px;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n      cursor: pointer;\n      background-color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n      background-color: ", ";\n      color: white;\n      font-weight: bold;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n      color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n      cursor: default;\n      background-color: transparent;\n  }\n  .react-datepicker__week-number {\n      color: ", ";\n      display: inline-block;\n      width: 1.7rem;\n      line-height: 1.7rem;\n      text-align: center;\n      margin: 0.166rem;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable {\n      cursor: pointer;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n      border-radius: 0.3rem;\n      background-color: ", ";\n  }\n  .react-datepicker__day-names,\n  .react-datepicker__week {\n      white-space: nowrap;\n  }\n  .react-datepicker__day-names {\n      font-weight: bold;\n  }\n  .react-datepicker__day-names .react-datepicker__day-name {\n      color: ", ";\n  }\n  .react-datepicker__day-name,\n  .react-datepicker__day,\n  .react-datepicker__time-name {\n      color: ", ";\n      display: inline-block;\n      width: 1.9rem;\n      line-height: 1.9rem;\n      text-align: center;\n      margin: 0.2rem;\n  }\n  .react-datepicker__day {\n      cursor: pointer;\n  }\n  .react-datepicker__day:hover {\n      border-radius: 0.3rem;\n      background-color: ", ";\n  }\n  .react-datepicker__day--today {\n      font-weight: bold;\n  }\n  .react-datepicker__day--highlighted {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--highlighted:hover {\n      background-color: ", ";\n      color: ", "\n  }\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--selected:hover,\n  .react-datepicker__day--in-selecting-range:hover,\n  .react-datepicker__day--in-range:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__day--keyboard-selected {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--keyboard-selected:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--disabled {\n      cursor: default;\n      color: ", ";\n  }\n  .react-datepicker__day--disabled:hover {\n      background-color: transparent;\n  }\n  .react-datepicker__input-container {\n      position: relative;\n      display: inline-block;\n  }\n  .react-datepicker__year-read-view,\n  .react-datepicker__month-read-view,\n  .react-datepicker__month-year-read-view {\n      border: 1px solid transparent;\n      color: ", ";\n  }\n  .react-datepicker__year-read-view:hover,\n  .react-datepicker__month-read-view:hover,\n  .react-datepicker__month-year-read-view:hover {\n      cursor: pointer;\n  }\n  .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n      border-top-color: ", ";\n  }\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n      border-top-color: ", ";\n      float: right;\n      margin-left: 20px;\n      top: 5px;\n      position: relative;\n      border-width: 0.45rem;\n  }\n  .react-datepicker__year-dropdown,\n  .react-datepicker__month-dropdown,\n  .react-datepicker__month-year-dropdown {\n      background-color: ", ";\n      position: absolute;\n      width: 50%;\n      left: 25%;\n      top: 30px;\n      z-index: 1;\n      text-align: center;\n      border-radius: 0.3rem;\n      border: 1px solid ", ";\n  }\n  .react-datepicker__year-dropdown:hover,\n  .react-datepicker__month-dropdown:hover,\n  .react-datepicker__month-year-dropdown:hover {\n      cursor: pointer;\n  }\n  .react-datepicker__year-dropdown--scrollable,\n  .react-datepicker__month-dropdown--scrollable,\n  .react-datepicker__month-year-dropdown--scrollable {\n      height: 150px;\n      overflow-y: scroll;\n  }\n  .react-datepicker__year-option,\n  .react-datepicker__month-option,\n  .react-datepicker__month-year-option {\n      line-height: 20px;\n      width: 100%;\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n  }\n  .react-datepicker__year-option:first-of-type,\n  .react-datepicker__month-option:first-of-type,\n  .react-datepicker__month-year-option:first-of-type {\n      border-top-left-radius: 0.3rem;\n      border-top-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:last-of-type,\n  .react-datepicker__month-option:last-of-type,\n  .react-datepicker__month-year-option:last-of-type {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      border-bottom-left-radius: 0.3rem;\n      border-bottom-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:hover,\n  .react-datepicker__month-option:hover,\n  .react-datepicker__month-year-option:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__year-option--selected,\n  .react-datepicker__month-option--selected,\n  .react-datepicker__month-year-option--selected {\n      position: absolute;\n      left: 15px;\n  }\n  .react-datepicker__close-icon {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      display: inline-block;\n      height: 0;\n      outline: 0;\n      padding: 0;\n      vertical-align: middle;\n  }\n  .react-datepicker__close-icon::after {\n      background-color: ", ";\n      border-radius: 50%;\n      bottom: 0;\n      box-sizing: border-box;\n      color: ", void 0, ";\n      border-top: 1px solid ", ";\n      cursor: pointer;\n      text-align: center;\n      font-weight: bold;\n      padding: 5px 0;\n      clear: left;\n  }\n  .react-datepicker__portal {\n      position: fixed;\n      width: 100vw;\n      height: 100vh;\n      background-color: ", ";\n      left: 0;\n      top: 0;\n      justify-content: center;\n      align-items: center;\n      display: flex;\n      z-index: 2147483647;\n  }\n  .react-datepicker__portal .react-datepicker__day-name,\n  .react-datepicker__portal .react-datepicker__day,\n  .react-datepicker__portal .react-datepicker__time-name {\n      width: 3rem;\n      line-height: 3rem;\n  }\n  @media (max-width: 400px),\n  (max-height: 550px) {\n      .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n          width: 2rem;\n          line-height: 2rem;\n      }\n  }\n  .react-datepicker__portal .react-datepicker__current-month,\n  .react-datepicker__portal .react-datepicker-time__header {\n      font-size: 1.44rem;\n  }\n  .react-datepicker__portal .react-datepicker__navigation {\n      border: 0.81rem solid transparent;\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous {\n      border-right-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous:hover {\n      border-right-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous--disabled,\n  .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {\n    border-right-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next {\n      border-left-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next:hover {\n      border-left-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next--disabled,\n  .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {\n    border-left-color: ", ";\n    cursor: default;\n  }\n"], ["\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow {\n      margin-left: -8px;\n      position: absolute;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      box-sizing: content-box;\n      position: absolute;\n      border: 8px solid transparent;\n      height: 0;\n      width: 1px;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      content: \"\";\n      z-index: -1;\n      border-width: 8px;\n      left: -8px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle {\n      top: 0;\n      margin-top: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle,\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n      border-top: none;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] .react-datepicker__triangle::before {\n      top: -1px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n      bottom: 1px;\n      margin-bottom: -8px;\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle,\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow,\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      border-bottom: none;\n      border-top-color: ", ";\n  }\n  .react-datepicker-popper[data-placement^=\"top\"] .react-datepicker__triangle::before,\n  .react-datepicker__year-read-view--down-arrow::before,\n  .react-datepicker__month-read-view--down-arrow::before,\n  .react-datepicker__month-year-read-view--down-arrow::before {\n      bottom: -1px;\n      border-top-color: ", ";\n  }\n  .react-datepicker-wrapper {\n      display: inline-block;\n  }\n  .react-datepicker {\n      font-size: 18px;\n      background-color: ", ";\n      border: solid 1px ", ";\n      border-radius: 4px;\n      color: ", ";\n      box-shadow: 0 5px 10px ", ";\n      display: inline-block;\n      position: relative;\n  }\n  .react-datepicker--time-only .react-datepicker__triangle {\n    left: 35px;\n  }\n  .react-datepicker--time-only .react-datepicker__time-container {\n    border-left: 0;\n  }\n  .react-datepicker--time-only .react-datepicker__time {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker--time-only .react-datepicker__time-box {\n    border-radius: 0.3rem;\n  }\n  .react-datepicker__triangle {\n      position: absolute;\n      left: 50px;\n  }\n  .react-datepicker-popper {\n      z-index: 1060;\n  }\n  .react-datepicker-popper[data-placement^=\"bottom\"] {\n    margin-top: 12px;\n  }\n    .react-datepicker-popper[data-placement^=\"top\"] {\n    margin-bottom: 6px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"] {\n      margin-left: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"right\"] .react-datepicker__triangle {\n      left: auto;\n      right: 42px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] {\n      margin-right: 8px;\n  }\n  .react-datepicker-popper[data-placement^=\"left\"] .react-datepicker__triangle {\n      left: 42px;\n      right: auto;\n  }\n  .react-datepicker__header {\n      text-align: center;\n      background-color: ", ";\n      border-top-left-radius: 4px;\n      border-top-right-radius: 4px;\n      padding-top: 10px;\n      position: relative;\n  }\n  .react-datepicker__header--time {\n    padding-bottom: 8px;\n    padding-left: 5px;\n    padding-right: 5px;\n  }\n  .react-datepicker__year-dropdown-container--select,\n  .react-datepicker__month-dropdown-container--select,\n  .react-datepicker__month-year-dropdown-container--select,\n  .react-datepicker__year-dropdown-container--scroll,\n  .react-datepicker__month-dropdown-container--scroll,\n  .react-datepicker__month-year-dropdown-container--scroll {\n      display: inline-block;\n      margin: 0 2px;\n  }\n  .react-datepicker__current-month,\n  .react-datepicker-time__header {\n      margin-top: 0;\n      color: ", ";\n      font-weight: bold;\n      font-size: 18px;\n  }\n  .react-datepicker-time__header {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation {\n      background-color: transparent;\n      line-height: 1.7rem;\n      text-align: center;\n      cursor: pointer;\n      position: absolute;\n      top: 10px;\n      padding: 0;\n      height: 10px;\n      width: 0;\n      border: 0.45rem solid transparent;\n      z-index: 1;\n      text-indent: -999em;\n      overflow: hidden;\n  }\n  .react-datepicker__navigation--previous {\n      left: 10px;\n      border-right-color: ", ";\n  }\n  .react-datepicker__navigation--previous:hover {\n      border-right-color: ", ";\n  }\n  .react-datepicker__navigation--previous--disabled,\n  .react-datepicker__navigation--previous--disabled:hover {\n    border-right-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__navigation--next {\n      right: 10px;\n      border-left-color: ", ";\n  }\n  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {\n      right: 110px;\n  }\n  .react-datepicker__navigation--next:hover {\n      border-left-color: ", ";\n  }\n  .react-datepicker__navigation--next--disabled,\n  .react-datepicker__navigation--next--disabled:hover {\n    border-left-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__navigation--years {\n      position: relative;\n      top: 0;\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n  }\n  .react-datepicker__navigation--years-previous {\n      top: 4px;\n      border-top-color: ", ";\n  }\n  .react-datepicker__navigation--years-previous:hover {\n      border-top-color: ", ";\n  }\n  .react-datepicker__navigation--years-upcoming {\n      top: -4px;\n      border-bottom-color: ", ";\n  }\n  .react-datepicker__navigation--years-upcoming:hover {\n      border-bottom-color: ", ";\n  }\n  .react-datepicker__month-container {\n      float: left;\n  }\n  .react-datepicker__month {\n      margin: 0.4rem;\n      text-align: center;\n  }\n  .react-datepicker__time-container {\n      float: right;\n      border-left: 1px solid ", ";\n  }\n  .react-datepicker__time-container--with-today-button {\n      display: inline;\n      border: 1px solid ", ";\n      border-radius: 0.3rem;\n      position: absolute;\n      right: -72px;\n      top: 0;\n  }\n  .react-datepicker__time-container .react-datepicker__time {\n      font-size: 14px;\n      position: relative;\n      background: white;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n      width: 102px;\n      overflow-x: hidden;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {\n      list-style: none;\n      margin: 0;\n      height: 204px;\n      overflow-y: scroll;\n      padding: 0;\n      width: 100%;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {\n      padding: 5px 10px;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {\n      cursor: pointer;\n      background-color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {\n      background-color: ", ";\n      color: white;\n      font-weight: bold;\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {\n      color: ", ";\n  }\n  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {\n      cursor: default;\n      background-color: transparent;\n  }\n  .react-datepicker__week-number {\n      color: ", ";\n      display: inline-block;\n      width: 1.7rem;\n      line-height: 1.7rem;\n      text-align: center;\n      margin: 0.166rem;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable {\n      cursor: pointer;\n  }\n  .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {\n      border-radius: 0.3rem;\n      background-color: ", ";\n  }\n  .react-datepicker__day-names,\n  .react-datepicker__week {\n      white-space: nowrap;\n  }\n  .react-datepicker__day-names {\n      font-weight: bold;\n  }\n  .react-datepicker__day-names .react-datepicker__day-name {\n      color: ", ";\n  }\n  .react-datepicker__day-name,\n  .react-datepicker__day,\n  .react-datepicker__time-name {\n      color: ", ";\n      display: inline-block;\n      width: 1.9rem;\n      line-height: 1.9rem;\n      text-align: center;\n      margin: 0.2rem;\n  }\n  .react-datepicker__day {\n      cursor: pointer;\n  }\n  .react-datepicker__day:hover {\n      border-radius: 0.3rem;\n      background-color: ", ";\n  }\n  .react-datepicker__day--today {\n      font-weight: bold;\n  }\n  .react-datepicker__day--highlighted {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--highlighted:hover {\n      background-color: ", ";\n      color: ", "\n  }\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--selected:hover,\n  .react-datepicker__day--in-selecting-range:hover,\n  .react-datepicker__day--in-range:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__day--keyboard-selected {\n      border-radius: 0.3rem;\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--keyboard-selected:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n      background-color: ", ";\n      color: ", ";\n  }\n  .react-datepicker__day--disabled {\n      cursor: default;\n      color: ", ";\n  }\n  .react-datepicker__day--disabled:hover {\n      background-color: transparent;\n  }\n  .react-datepicker__input-container {\n      position: relative;\n      display: inline-block;\n  }\n  .react-datepicker__year-read-view,\n  .react-datepicker__month-read-view,\n  .react-datepicker__month-year-read-view {\n      border: 1px solid transparent;\n      color: ", ";\n  }\n  .react-datepicker__year-read-view:hover,\n  .react-datepicker__month-read-view:hover,\n  .react-datepicker__month-year-read-view:hover {\n      cursor: pointer;\n  }\n  .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {\n      border-top-color: ", ";\n  }\n  .react-datepicker__year-read-view--down-arrow,\n  .react-datepicker__month-read-view--down-arrow,\n  .react-datepicker__month-year-read-view--down-arrow {\n      border-top-color: ", ";\n      float: right;\n      margin-left: 20px;\n      top: 5px;\n      position: relative;\n      border-width: 0.45rem;\n  }\n  .react-datepicker__year-dropdown,\n  .react-datepicker__month-dropdown,\n  .react-datepicker__month-year-dropdown {\n      background-color: ", ";\n      position: absolute;\n      width: 50%;\n      left: 25%;\n      top: 30px;\n      z-index: 1;\n      text-align: center;\n      border-radius: 0.3rem;\n      border: 1px solid ", ";\n  }\n  .react-datepicker__year-dropdown:hover,\n  .react-datepicker__month-dropdown:hover,\n  .react-datepicker__month-year-dropdown:hover {\n      cursor: pointer;\n  }\n  .react-datepicker__year-dropdown--scrollable,\n  .react-datepicker__month-dropdown--scrollable,\n  .react-datepicker__month-year-dropdown--scrollable {\n      height: 150px;\n      overflow-y: scroll;\n  }\n  .react-datepicker__year-option,\n  .react-datepicker__month-option,\n  .react-datepicker__month-year-option {\n      line-height: 20px;\n      width: 100%;\n      display: block;\n      margin-left: auto;\n      margin-right: auto;\n  }\n  .react-datepicker__year-option:first-of-type,\n  .react-datepicker__month-option:first-of-type,\n  .react-datepicker__month-year-option:first-of-type {\n      border-top-left-radius: 0.3rem;\n      border-top-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:last-of-type,\n  .react-datepicker__month-option:last-of-type,\n  .react-datepicker__month-year-option:last-of-type {\n      -webkit-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n      border-bottom-left-radius: 0.3rem;\n      border-bottom-right-radius: 0.3rem;\n  }\n  .react-datepicker__year-option:hover,\n  .react-datepicker__month-option:hover,\n  .react-datepicker__month-year-option:hover {\n      background-color: ", ";\n  }\n  .react-datepicker__year-option--selected,\n  .react-datepicker__month-option--selected,\n  .react-datepicker__month-year-option--selected {\n      position: absolute;\n      left: 15px;\n  }\n  .react-datepicker__close-icon {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      display: inline-block;\n      height: 0;\n      outline: 0;\n      padding: 0;\n      vertical-align: middle;\n  }\n  .react-datepicker__close-icon::after {\n      background-color: ", ";\n      border-radius: 50%;\n      bottom: 0;\n      box-sizing: border-box;\n      color: ", ";\n      content: \"\\00d7\";\n      cursor: pointer;\n      font-size: 12px;\n      height: 16px;\n      width: 16px;\n      line-height: 1;\n      margin: -8px auto 0;\n      padding: 2px;\n      position: absolute;\n      right: 7px;\n      text-align: center;\n      top: 50%;\n  }\n  .react-datepicker__today-button {\n      background: ", ";\n      border-top: 1px solid ", ";\n      cursor: pointer;\n      text-align: center;\n      font-weight: bold;\n      padding: 5px 0;\n      clear: left;\n  }\n  .react-datepicker__portal {\n      position: fixed;\n      width: 100vw;\n      height: 100vh;\n      background-color: ", ";\n      left: 0;\n      top: 0;\n      justify-content: center;\n      align-items: center;\n      display: flex;\n      z-index: 2147483647;\n  }\n  .react-datepicker__portal .react-datepicker__day-name,\n  .react-datepicker__portal .react-datepicker__day,\n  .react-datepicker__portal .react-datepicker__time-name {\n      width: 3rem;\n      line-height: 3rem;\n  }\n  @media (max-width: 400px),\n  (max-height: 550px) {\n      .react-datepicker__portal .react-datepicker__day-name,\n      .react-datepicker__portal .react-datepicker__day,\n      .react-datepicker__portal .react-datepicker__time-name {\n          width: 2rem;\n          line-height: 2rem;\n      }\n  }\n  .react-datepicker__portal .react-datepicker__current-month,\n  .react-datepicker__portal .react-datepicker-time__header {\n      font-size: 1.44rem;\n  }\n  .react-datepicker__portal .react-datepicker__navigation {\n      border: 0.81rem solid transparent;\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous {\n      border-right-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous:hover {\n      border-right-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--previous--disabled,\n  .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {\n    border-right-color: ", ";\n    cursor: default;\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next {\n      border-left-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next:hover {\n      border-left-color: ", ";\n  }\n  .react-datepicker__portal .react-datepicker__navigation--next--disabled,\n  .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {\n    border-left-color: ", ";\n    cursor: default;\n  }\n"]);

  _templateObject$J = function _templateObject() {
    return data;
  };

  return data;
}
function DatepickerStyles() {
  var _useTheme = useTheme(),
      colors = _useTheme.colors,
      dpColors = _useTheme.datepickerColors;

  var Styles = createGlobalStyle(_templateObject$J(), colors.gray5, dpColors.dpBackground, colors.gray5, colors.white, colors.gray5, colors.white, colors.gray5, colors.gray9, colors.boxShadowLight, dpColors.dpBackground, colors.white, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.dpBackground, dpColors.dpBackground, dpColors.dpBackground, dpColors.dpBackground, colors.gray5, colors.gray5, colors.gray1, dpColors.selected, dpColors.selected, colors.gray2, colors.gray2, colors.gray1, colors.white, colors.gray9, colors.gray3, dpColors.highlight, colors.white, dpColors.highlightHover, colors.gray9, dpColors.selected, colors.white, dpColors.hover, dpColors.keyboard, colors.white, dpColors.hover, dpColors.inRange, colors.gray9, colors.gray3, colors.gray9, colors.gray5, colors.white, colors.gray5, colors.gray3, colors.gray1, colors.gray5, colors.gray3, dpColors.selected, colors.white, colors.gray1, colors.gray5, colors.boxShadowDark, dpColors.navArrow, dpColors.navArrowHover, colors.gray3, dpColors.navArrow, dpColors.navArrowHover, colors.gray3);
  return React.createElement(Styles, null);
}

/* https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx */
/* https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/methods/placements.js */

var popperPlacementPositions = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'];
var reactDatePickerPropTypes = {
  adjustDateOnChange: PropTypes.bool,
  allowSameDay: PropTypes.bool,
  autoComplete: PropTypes.string,
  autoFocus: PropTypes.bool,
  calendarClassName: PropTypes.string,
  calendarContainer: PropTypes.func,
  children: PropTypes.node,
  className: PropTypes.string,
  customInput: PropTypes.element,
  customInputRef: PropTypes.string,
  // eslint-disable-next-line react/no-unused-prop-types
  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  dateFormatCalendar: PropTypes.string,
  dayClassName: PropTypes.func,
  disabled: PropTypes.bool,
  disabledKeyboardNavigation: PropTypes.bool,
  dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
  endDate: PropTypes.instanceOf(Date),
  excludeDates: PropTypes.array,
  filterDate: PropTypes.func,
  fixedHeight: PropTypes.bool,
  formatWeekNumber: PropTypes.func,
  highlightDates: PropTypes.array,
  id: PropTypes.string,
  includeDates: PropTypes.array,
  includeTimes: PropTypes.array,
  injectTimes: PropTypes.array,
  inline: PropTypes.bool,
  isClearable: PropTypes.bool,
  locale: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    locale: PropTypes.object
  })]),
  maxDate: PropTypes.instanceOf(Date),
  minDate: PropTypes.instanceOf(Date),
  monthsShown: PropTypes.number,
  name: PropTypes.string,
  onBlur: PropTypes.func,
  onChange: PropTypes.func.isRequired,
  onSelect: PropTypes.func,
  onWeekSelect: PropTypes.func,
  onClickOutside: PropTypes.func,
  onChangeRaw: PropTypes.func,
  onFocus: PropTypes.func,
  onInputClick: PropTypes.func,
  onKeyDown: PropTypes.func,
  onMonthChange: PropTypes.func,
  onYearChange: PropTypes.func,
  onInputError: PropTypes.func,
  open: PropTypes.bool,
  openToDate: PropTypes.instanceOf(Date),
  peekNextMonth: PropTypes.bool,
  placeholderText: PropTypes.string,
  popperContainer: PropTypes.func,
  popperClassName: PropTypes.string,
  // <PopperComponent/> props
  popperModifiers: PropTypes.object,
  // <PopperComponent/> props
  popperPlacement: PropTypes.oneOf(popperPlacementPositions),
  // <PopperComponent/> props
  popperProps: PropTypes.object,
  preventOpenOnFocus: PropTypes.bool,
  readOnly: PropTypes.bool,
  required: PropTypes.bool,
  scrollableYearDropdown: PropTypes.bool,
  scrollableMonthYearDropdown: PropTypes.bool,
  selected: PropTypes.instanceOf(Date),
  selectsEnd: PropTypes.bool,
  selectsStart: PropTypes.bool,
  showMonthDropdown: PropTypes.bool,
  showMonthYearDropdown: PropTypes.bool,
  showWeekNumbers: PropTypes.bool,
  showYearDropdown: PropTypes.bool,
  strictParsing: PropTypes.bool,
  forceShowMonthNavigation: PropTypes.bool,
  showDisabledMonthNavigation: PropTypes.bool,
  startDate: PropTypes.instanceOf(Date),
  startOpen: PropTypes.bool,
  tabIndex: PropTypes.number,
  timeCaption: PropTypes.string,
  title: PropTypes.string,
  todayButton: PropTypes.node,
  useWeekdaysShort: PropTypes.bool,
  formatWeekDay: PropTypes.func,
  value: PropTypes.string,
  weekLabel: PropTypes.string,
  withPortal: PropTypes.bool,
  yearDropdownItemNumber: PropTypes.number,
  shouldCloseOnSelect: PropTypes.bool,
  showTimeInput: PropTypes.bool,
  showMonthYearPicker: PropTypes.bool,
  showTimeSelect: PropTypes.bool,
  showTimeSelectOnly: PropTypes.bool,
  timeFormat: PropTypes.string,
  timeIntervals: PropTypes.number,
  minTime: PropTypes.instanceOf(Date),
  maxTime: PropTypes.instanceOf(Date),
  excludeTimes: PropTypes.array,
  useShortMonthInDropdown: PropTypes.bool,
  clearButtonTitle: PropTypes.string,
  previousMonthButtonLabel: PropTypes.string,
  nextMonthButtonLabel: PropTypes.string,
  timeInputLabel: PropTypes.string,
  renderCustomHeader: PropTypes.func,
  renderDayContents: PropTypes.func,
  inlineFocusSelectedMonth: PropTypes.bool,
  onDayMouseEnter: PropTypes.func,
  onMonthMouseLeave: PropTypes.func
};

function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$7(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$7(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
var STRING_FORMAT = 'yyyy-MM-dd';

function normalizeDateString(date) {
  var stringFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : STRING_FORMAT;

  if (typeof date === 'string') {
    var parsedDate = parse(date, stringFormat, new Date());
    return isValid(parsedDate) ? format(parsedDate, stringFormat) : '';
  }

  return isValid(date) ? format(date, stringFormat) : '';
}

function normalizeDate(date) {
  if (typeof date === 'string') {
    var parsedDate = parse(date, STRING_FORMAT, new Date());
    return isValid(parsedDate) ? parsedDate : null;
  }

  return isValid(date) ? date : null;
}
/* eslint-disable react/prop-types */


function NativeDatePicker(props) {
  return React.createElement(Textbox, _extends({
    prependIconName: "calendar",
    type: "date",
    value: normalizeDateString(props.selectedDate)
  }, props));
}

var _StyledMaskedTextbox = styled(MaskedTextbox)(["max-width:265px;"]);

var DateTextbox = React.forwardRef(function DateTextbox(props, ref) {
  var inputRef = React.useRef();
  React.useImperativeHandle(ref, function () {
    return {
      focus: function focus() {
        inputRef.current.focus();
      }
    };
  });
  /* eslint-disable react/forbid-foreign-prop-types */

  var datepickerProps = _pick(props, _Object$keys(reactDatePickerPropTypes));

  var textboxProps = _omit(props, _Object$keys(reactDatePickerPropTypes));
  /* eslint-enable react/forbid-foreign-prop-types */


  var textbox = React.createElement(_StyledMaskedTextbox, _extends({
    maskType: "date",
    placeholder: props.placeholder,
    prependIconName: "calendar",
    ref: inputRef
  }, textboxProps));
  return React.createElement(React.Fragment, null, React.createElement(DatepickerStyles, null), props.suppressDatepicker ? textbox : React.createElement(ReactDatePicker, _extends({
    customInput: textbox,
    placeholderText: props.placeholder,
    selected: normalizeDate(props.selectedDate)
  }, datepickerProps)));
});
/* eslint-enable react/prop-types */

var DatePicker = function DatePicker(props) {
  var normalizedDateFromProps = props.selectedDate ? normalizeDate(props.selectedDate) : null;

  var _useState = useState(normalizedDateFromProps),
      _useState2 = _slicedToArray(_useState, 2),
      selectedDate = _useState2[0],
      setSelectedDate = _useState2[1];

  function dateSelected(dateOrEvent) {
    if (dateOrEvent) {
      if (isValid(dateOrEvent)) {
        setSelectedDate(dateOrEvent);
      } else {
        var normalizedDate = normalizeDate(dateOrEvent.target.value);
        setSelectedDate(normalizedDate);
      }
    } else {
      setSelectedDate(null);
    }
  }

  useEffect(function () {
    if (normalizeDateString(selectedDate) !== normalizeDateString(props.selectedDate)) {
      props.onChange(selectedDate);
    }
  }, [selectedDate]);
  var windowWidth = useWindowWidth();
  var theme = useTheme();
  var phoneWidth = _parseInt(theme.screenSize.phone, 10) || 0;
  var userAgent = navigator.userAgent.toLowerCase();
  var isAndroid = _indexOfInstanceProperty(userAgent).call(userAgent, 'android') > -1;
  var DatePickerInput = props.allowNativeDatepickerOnMobile && windowWidth <= phoneWidth && !isAndroid ? NativeDatePicker : DateTextbox;

  var actualProps = _objectSpread$7({}, props, {
    selectedDate: selectedDate,
    onChange: props.onChange ? dateSelected : _noop
  });

  return React.createElement(DatePickerInput, actualProps);
};

DatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
  suppressDatepicker: PropTypes.bool,
  allowNativeDatepickerOnMobile: PropTypes.bool,
  selectedDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
  onChange: PropTypes.func
} : {};
DatePicker.defaultProps = {
  suppressDatepicker: false,
  allowNativeDatepickerOnMobile: true,
  selectedDate: '',
  onChange: undefined
};

function _templateObject$K() {
  var data = _taggedTemplateLiteral(["\n  appearance: textfield;\n  flex: 1 0 35px;\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n"]);

  _templateObject$K = function _templateObject() {
    return data;
  };

  return data;
}
var DayInput = styled(InputBase)(_templateObject$K());

function Day(_ref) {
  var onChange = _ref.onChange,
      date = _ref.date,
      props = _objectWithoutProperties(_ref, ["onChange", "date"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);

  var _React$useState = React.useState(date ? date.getDate() : ''),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  function onDayChange(event) {
    var day = event.target.value;
    day = day.length > 2 ? _sliceInstanceProperty(day).call(day, 0, 2) : day;
    setValue(day);
    onChange('day', day);
  }

  return React.createElement(DayInput, _extends({
    type: "number",
    inputmode: "numeric",
    pattern: "[0-9]*",
    min: "1",
    max: "31",
    onChange: onDayChange,
    placeholder: "Day",
    value: value
  }, theme.validationInputColor[validationState], props));
}

function _templateObject$L() {
  var data = _taggedTemplateLiteral(["\n  flex: 3 1 100px;\n"]);

  _templateObject$L = function _templateObject() {
    return data;
  };

  return data;
}
var MonthDropdown = styled(Dropdown)(_templateObject$L());

function Month(_ref) {
  var onChange = _ref.onChange,
      monthNames = _ref.monthNames,
      selectOptionText = _ref.selectOptionText,
      date = _ref.date,
      props = _objectWithoutProperties(_ref, ["onChange", "monthNames", "selectOptionText", "date"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);

  var _React$useState = React.useState(date ? date.getMonth() + 1 : ''),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      month = _React$useState2[0],
      setMonth = _React$useState2[1];

  function onMonthChange(event) {
    setMonth(event.target.value);
    onChange('month', event.target.value);
  }

  return React.createElement(MonthDropdown, _extends({
    onChange: onMonthChange
  }, theme.validationInputColor[validationState], {
    value: month
  }, props), selectOptionText && React.createElement("option", {
    value: "none"
  }, selectOptionText), _mapInstanceProperty(monthNames).call(monthNames, function (value, index) {
    return React.createElement("option", {
      value: index + 1,
      key: value
    }, value);
  }));
}

Month.propTypes = process.env.NODE_ENV !== "production" ? {
  /** array of month names */
  monthNames: PropTypes.array,

  /** adds an unselected option at the top */
  selectOptionText: PropTypes.string
} : {};
Month.defaultProps = {
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  selectOptionText: undefined
};

function _templateObject$M() {
  var data = _taggedTemplateLiteral(["\n  appearance: textfield;\n  flex: 2 0 40px;\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    appearance: none;\n    margin: 0;\n  }\n"]);

  _templateObject$M = function _templateObject() {
    return data;
  };

  return data;
}
var YearInput = styled(InputBase)(_templateObject$M());

function Year(_ref) {
  var onChange = _ref.onChange,
      date = _ref.date,
      props = _objectWithoutProperties(_ref, ["onChange", "date"]);

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);

  var _React$useState = React.useState(date ? date.getFullYear() : ''),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  function onYearChange(event) {
    var year = event.target.value;
    year = year.length > 4 ? _sliceInstanceProperty(year).call(year, 0, 4) : year;
    setValue(year);
    onChange('year', year);
  }

  return React.createElement(YearInput, _extends({
    type: "number",
    inputmode: "numeric",
    pattern: "[0-9]*",
    onChange: onYearChange,
    placeholder: "Year",
    value: value
  }, theme.validationInputColor[validationState], props));
}

function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty(_context5 = ownKeys$8(source, true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context6; _forEachInstanceProperty(_context6 = ownKeys$8(source)).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject$N() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n\n  && > * {\n    margin-right: 2px;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 350px;\n  }\n"]);

  _templateObject$N = function _templateObject() {
    return data;
  };

  return data;
}
var Wrapper = styled.div(_templateObject$N(), function (props) {
  return props.theme.screenSize.tablet;
});

function cleanZeroes(day) {
  var cleanDay = day;

  while (cleanDay.charAt(0) === '0') {
    cleanDay = cleanDay.substr(1);
  }

  return cleanDay;
}

function reducer(state, action) {
  switch (action.type) {
    case 'day_updated':
      return _objectSpread$8({}, state, {
        day: action.value
      });

    case 'month_updated':
      return _objectSpread$8({}, state, {
        month: action.value
      });

    case 'year_updated':
      return _objectSpread$8({}, state, {
        year: action.value
      });

    default:
      throw new Error();
  }
}

function DateInput(_ref) {
  var _context4;

  var children = _ref.children,
      defaultValue = _ref.defaultValue,
      id = _ref.id,
      maxDate = _ref.maxDate,
      minDate = _ref.minDate,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      props = _objectWithoutProperties(_ref, ["children", "defaultValue", "id", "maxDate", "minDate", "onBlur", "onChange"]);

  var _useReducer = useReducer(reducer, {
    day: defaultValue ? defaultValue.getDate() : '',
    month: defaultValue ? defaultValue.getMonth() + 1 : 1,
    year: defaultValue ? defaultValue.getFullYear().toString() : ''
  }),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  var hasDayElement = useRef(false);
  useEffect(function () {
    var _context;

    _forEachInstanceProperty(_context = React.Children).call(_context, children, function (child) {
      if (child.type === Month && !state.month) {
        if (child.props.selectOptionText) {
          dispatch({
            type: 'month_updated',
            value: 'none'
          });
        }
      }

      if (child.type === Day) {
        hasDayElement.current = true;
      }
    });
  }, []);

  function createDate(year, month, day) {
    var _context2, _context3;

    var cleanDay = day ? cleanZeroes(day.toString()) : day;
    var date = new Date(_concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(year, "/")).call(_context3, month, "/")).call(_context2, cleanDay));
    var dateIsValid = month !== 'none' && year.length === 4 && (hasDayElement.current ? date.getDate().toString() === cleanDay : true) && (month ? (date.getMonth() + 1).toString() === month.toString() : true) && date.getFullYear().toString() === year.toString();
    var isInRange = dateIsValid && (minDate ? isAfter(date, minDate) : true) && (maxDate ? isBefore(date, maxDate) : true);
    return {
      value: dateIsValid ? date : undefined,
      isInRange: isInRange
    };
  }

  function onChangeDatePart(datePart, value) {
    switch (datePart) {
      case 'day':
        onChange(createDate(state.year, state.month, value));
        dispatch({
          type: 'day_updated',
          value: value
        });
        return;

      case 'month':
        onChange(createDate(state.year, value, state.day));
        dispatch({
          type: 'month_updated',
          value: value
        });
        return;

      case 'year':
        onChange(createDate(value, state.month, state.day));
        dispatch({
          type: 'year_updated',
          value: value
        });
        return;

      default:
        throw new Error();
    }
  }

  function onBlurComponent(event) {
    var target = event.currentTarget;

    _setTimeout(function () {
      if (!target.contains(document.activeElement)) {
        onBlur(event);
      }
    }, 0);
  }

  return React.createElement(Wrapper, _extends({
    tabIndex: "-1"
  }, props, {
    onBlur: onBlurComponent
  }), _mapInstanceProperty(_context4 = React.Children).call(_context4, children, function (child, index) {
    return index === 0 ? React.cloneElement(child, {
      id: id,
      onChange: onChangeDatePart,
      date: createDate(state.year, state.month, state.day).value
    }) : React.cloneElement(child, {
      onChange: onChangeDatePart,
      date: createDate(state.year, state.month, state.day).value
    });
  }));
}

DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
  id: PropTypes.string,
  children: PropTypes.node.isRequired,

  /** set the minimum valid date */
  maxDate: PropTypes.instanceOf(Date),

  /** set the maximum valid date */
  minDate: PropTypes.instanceOf(Date),

  /** returns an object (value, isInRange) */
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func,

  /** set the Date value of the component */
  defaultValue: PropTypes.instanceOf(Date)
} : {};
DateInput.defaultProps = {
  id: undefined,
  maxDate: undefined,
  minDate: undefined,
  defaultValue: undefined,
  onBlur: _noop
};
DateInput.Day = Day;
DateInput.Month = Month;
DateInput.Year = Year;

function _templateObject3$f() {
  var data = _taggedTemplateLiteral(["\n  min-width: 0;\n\n  .es-button__display {\n    min-width: 0;\n  }\n"]);

  _templateObject3$f = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$l() {
  var data = _taggedTemplateLiteral(["\n  margin: 0 10px;\n  min-width: 60px;\n  padding-right: 12px;\n  text-align: center;\n\n  @media (min-width: ", ") {\n    width: 60px;\n  }\n\n  /* Hides browser-specific number controls */\n  -moz-appearance: textfield;\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &::-ms-clear {\n    display: none;\n  }\n"]);

  _templateObject2$l = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$O() {
  var data = _taggedTemplateLiteral(["\n  align-items: flex-start;\n  display: flex;\n"]);

  _templateObject$O = function _templateObject() {
    return data;
  };

  return data;
}
var IncrementerWrapper = styled.div(_templateObject$O());
var IncrementerTextbox = styled(InputBase)(_templateObject2$l(), function (props) {
  return props.theme.screenSize.tablet;
});
var IncrementerButton = styled(Button)(_templateObject3$f());

function determineIsDisabled(threshold, newValue) {
  return _isFinite(threshold) && newValue === threshold;
}

function sanitizeValue(val, lower, upper) {
  var enteredValue = _parseInt$1(val);

  if (_isFinite(enteredValue)) {
    if (upper !== null && enteredValue > upper) {
      return upper;
    }

    if (lower !== null && enteredValue < lower) {
      return lower;
    }

    return enteredValue;
  }

  return lower > 0 ? lower : 0;
}

function updateCountReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {
        count: sanitizeValue(_parseInt$1(state.count) + _parseInt$1(action.amount), action.lower, action.upper)
      };

    case 'decrement':
      return {
        count: sanitizeValue(_parseInt$1(state.count) - _parseInt$1(action.amount), action.lower, action.upper)
      };

    case 'set':
      return {
        count: action.amount
      };

    default:
  }

  return null;
}

var ScreenReaderButtonText = screenReaderOnly('span');

function Incrementer(_ref) {
  var startingValue = _ref.startingValue,
      incrementAmount = _ref.incrementAmount,
      decrementAmount = _ref.decrementAmount,
      upperThreshold = _ref.upperThreshold,
      lowerThreshold = _ref.lowerThreshold,
      useOutlineButton = _ref.useOutlineButton,
      onValueUpdated = _ref.onValueUpdated,
      other = _objectWithoutProperties(_ref, ["startingValue", "incrementAmount", "decrementAmount", "upperThreshold", "lowerThreshold", "useOutlineButton", "onValueUpdated"]);

  var theme = useTheme();
  var initialRender = useRef(true);

  var _React$useReducer = React.useReducer(updateCountReducer, {
    count: startingValue === null ? '' : startingValue
  }),
      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
      state = _React$useReducer2[0],
      dispatch = _React$useReducer2[1];

  var isIncrementDisabled = determineIsDisabled(upperThreshold, state.count);
  var isDecrementDisabled = determineIsDisabled(lowerThreshold, state.count);
  React.useEffect(function () {
    if (!initialRender.current) {
      onValueUpdated(state.count);
    }

    initialRender.current = false;
  }, [state.count]);

  function setValue(event) {
    dispatch({
      type: 'set',
      amount: event.target.value
    });
  }

  function decrementValue() {
    dispatch({
      type: 'decrement',
      amount: decrementAmount,
      lower: lowerThreshold,
      upper: upperThreshold
    });
  }

  function incrementValue() {
    dispatch({
      type: 'increment',
      amount: incrementAmount,
      lower: lowerThreshold,
      upper: upperThreshold
    });
  }

  function handleOnBlur(event) {
    var sanitizedValue = sanitizeValue(event.target.value, lowerThreshold, upperThreshold);

    if (event.target.value !== sanitizedValue) {
      dispatch({
        type: 'set',
        amount: sanitizedValue
      });
    }
  }

  function shortcutKeys(event) {
    if (upperThreshold && event.keyCode === 35) {
      dispatch({
        type: 'set',
        amount: upperThreshold
      });
    }

    if (lowerThreshold && event.keyCode === 36) {
      dispatch({
        type: 'set',
        amount: lowerThreshold
      });
    }
  }

  var RenderedButton = useOutlineButton ? OutlineButton : Button;
  return React.createElement(IncrementerWrapper, null, React.createElement(IncrementerButton, {
    as: RenderedButton,
    styleType: "primary",
    onClick: decrementValue,
    disabled: isDecrementDisabled
  }, React.createElement(ScreenReaderButtonText, null, "Decrement value by", decrementAmount), React.createElement(Icon, {
    name: "minus",
    size: 22
  })), React.createElement(IncrementerTextbox, _extends({}, theme.validationInputColor.default, other, {
    type: "number",
    role: "spinbutton",
    max: upperThreshold,
    min: lowerThreshold,
    step: incrementAmount,
    value: state.count,
    "aria-valuemin": lowerThreshold,
    "aria-valuemax": upperThreshold,
    "aria-valuenow": state.count,
    onKeyDown: shortcutKeys,
    onChange: setValue,
    onBlur: handleOnBlur
  })), React.createElement(IncrementerButton, {
    as: RenderedButton,
    styleType: "primary",
    onClick: incrementValue,
    disabled: isIncrementDisabled
  }, React.createElement(ScreenReaderButtonText, null, "Increment value by", incrementAmount), React.createElement(Icon, {
    name: "add",
    size: 22
  })));
}

Incrementer.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The starting value, 'null' is allowed for a blank value */
  startingValue: PropTypes.number,

  /** The amount to increment the value by */
  incrementAmount: PropTypes.number,

  /** The amount to decrement the value by */
  decrementAmount: PropTypes.number,

  /** The highest value the incrementer can be incremented to */
  upperThreshold: PropTypes.number,

  /** The lowest value the incrementer can be decremented to */
  lowerThreshold: PropTypes.number,

  /** Use outline button styles */
  useOutlineButton: PropTypes.bool,

  /** Function to execute with the new value */
  onValueUpdated: PropTypes.func
} : {};
Incrementer.defaultProps = {
  startingValue: 0,
  incrementAmount: 1,
  decrementAmount: 1,
  onValueUpdated: _noop,
  upperThreshold: null,
  lowerThreshold: null,
  useOutlineButton: false
};

function getCallToActionChildren(children) {
  var _context;

  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
  var allChildren = React.Children.toArray(children);

  var actions = _mapInstanceProperty(_context = _filterInstanceProperty(allChildren).call(allChildren, function (child) {
    return child.type.name === 'Action';
  })).call(_context, function (action) {
    if (type === 'light') {
      var _styleType = action.props.isPrimary ? 'primary' : 'darkDefault';

      return React.cloneElement(action, {
        styleType: _styleType
      });
    }

    var styleType = action.props.isPrimary ? 'primary' : 'default';
    return React.cloneElement(action, {
      styleType: styleType
    });
  });

  var nonActions = _filterInstanceProperty(allChildren).call(allChildren, function (child) {
    return child.type.name !== 'Action';
  });

  return {
    actions: actions,
    nonActions: nonActions
  };
}

function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$9(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$9(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject2$m() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"]);

  _templateObject2$m = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$P() {
  var data = _taggedTemplateLiteral(["\n  flex-basis: 100%;\n"]);

  _templateObject$P = function _templateObject() {
    return data;
  };

  return data;
}
var Container$1 = styled.div(_templateObject$P());
var CallToActionContainer = styled.div(_templateObject2$m());

function CallToAction(_ref) {
  var children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["children"]);

  var _getCallToActionChild = getCallToActionChildren(children),
      actions = _getCallToActionChild.actions,
      nonActions = _getCallToActionChild.nonActions;

  var props = _objectSpread$9({}, rest, {
    isDismissable: false
  });

  return React.createElement(React.Fragment, null, React.createElement(Notification$1, props, React.createElement(Container$1, null, nonActions)), React.createElement(CallToActionContainer, null, actions));
}

CallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any
} : {};
CallToAction.defaultProps = {
  children: undefined
};

function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { keys.push.apply(keys, _Object$getOwnPropertySymbols(object)); } if (enumerableOnly) keys = _filterInstanceProperty(keys).call(keys, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }

function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys$a(source, true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$a(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _templateObject2$n() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"]);

  _templateObject2$n = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$Q() {
  var data = _taggedTemplateLiteral(["\n  flex-basis: 100%;\n"]);

  _templateObject$Q = function _templateObject() {
    return data;
  };

  return data;
}
var Container$2 = styled.div(_templateObject$Q());
var CallToActionContainer$1 = styled.div(_templateObject2$n());

function LightCallToAction(_ref) {
  var children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["children"]);

  var _getCallToActionChild = getCallToActionChildren(children, 'light'),
      actions = _getCallToActionChild.actions,
      nonActions = _getCallToActionChild.nonActions;

  var props = _objectSpread$a({}, rest, {
    isDismissable: false
  });

  return React.createElement(LightNotification, props, React.createElement(Container$2, null, nonActions, React.createElement(CallToActionContainer$1, null, actions)));
}

LightCallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any
} : {};
LightCallToAction.defaultProps = {
  children: undefined
};

function _templateObject$R() {
  var data = _taggedTemplateLiteral(["\n  :not(:first-of-type) {\n    margin-left: 15px;\n  }\n"]);

  _templateObject$R = function _templateObject() {
    return data;
  };

  return data;
}
var ActionButton$1 = styled(Button)(_templateObject$R());
function Action(_ref) {
  var isPrimary = _ref.isPrimary,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["isPrimary", "children"]);

  return React.createElement(ActionButton$1, rest, children);
}
Action.propTypes = process.env.NODE_ENV !== "production" ? {
  isPrimary: PropTypes.bool,
  children: PropTypes.node
} : {};
Action.defaultProps = {
  isPrimary: false,
  children: null
};

var sizes = {
  ACTIVE: 45,
  INACTIVE: 20,
  DESKTOP: 41,
  TRACKING_LINE_HEIGHT: 3
};

function _templateObject6$3() {
  var data = _taggedTemplateLiteral(["\n  list-style-type: none;\n  max-width: ", "%;\n  align-items: center;\n\n  &:first-child {\n    &,\n    & button {\n      align-items: flex-start;\n      text-align: left;\n    }\n  }\n\n  &:last-child {\n    &,\n    & button {\n      align-items: flex-end;\n      text-align: right;\n    }\n  }\n\n  @media (min-width: ", ") {\n    width: ", "%;\n\n    &:first-child,\n    &:last-child {\n      &,\n      & button {\n        align-items: center;\n        text-align: center;\n      }\n    }\n  }\n"]);

  _templateObject6$3 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5$4() {
  var data = _taggedTemplateLiteral(["\n  margin-top: 0;\n\n  &::before {\n    border: 5px solid ", ";\n    border-radius: ", "px;\n    color: ", ";\n    font-size: ", "px;\n    font-weight: bold;\n    height: ", "px;\n    line-height: 1.5em;\n    width: ", "px;\n\n    @media (min-width: ", ") {\n      border-width: 5px;\n      font-size: ", "px;\n      height: ", "px;\n      line-height: 1.5em;\n      width: ", "px;\n    }\n  }\n\n  span {\n    color: ", ";\n    display: inline;\n    font-weight: bold;\n\n    @media (min-width: ", ") {\n      font-weight: bold;\n    }\n  }\n"]);

  _templateObject5$4 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$b() {
  var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  &:hover {\n    &::before {\n      box-shadow: rgba(0, 0, 0, 0.35) 0 0 3px 1px;\n    }\n  }\n\n  &:active,\n  &:hover,\n  &:focus {\n    span {\n      text-decoration: underline;\n    }\n  }\n\n  &:focus {\n    &::before {\n      box-shadow: ", " 0 0 4px 2px;\n    }\n    span {\n      outline: 1px dotted ", ";\n    }\n  }\n\n  &::before {\n    border-color: ", ";\n    @media (min-width: ", ") {\n      border-width: 5px;\n      font-weight: bold;\n      line-height: 1.5em;\n    }\n  }\n\n  span {\n    @media (min-width: ", ") {\n      font-weight: bold;\n    }\n  }\n"]);

  _templateObject4$b = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$g() {
  var data = _taggedTemplateLiteral(["\n  cursor: pointer;\n  &:hover {\n    &::before {\n      box-shadow: rgba(0, 0, 0, 0.35) 0 0 3px 1px;\n    }\n  }\n\n  &:active,\n  &:hover,\n  &:focus {\n    span {\n      text-decoration: underline;\n    }\n  }\n"]);

  _templateObject3$g = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$o() {
  var data = _taggedTemplateLiteral(["\n  align-items: center;\n  background: none;\n  border: none;\n  counter-increment: progress-tracker-counter;\n  display: flex;\n  flex-flow: column nowrap;\n  font-family: 'Source Sans Pro', sans-serif;\n  margin-top: ", "px;\n  padding: 0;\n  text-align: center;\n\n  &:active,\n  &:hover,\n  &:focus {\n    outline: none;\n  }\n\n  @media (min-width: ", ") {\n    font-size: 18px;\n    margin-top: 0;\n    width: 100%;\n  }\n\n  span {\n    color: ", ";\n    display: none;\n    font-size: 18px;\n    line-height: 1.1em;\n\n    @media (min-width: ", ") {\n      display: inline;\n      font-weight: normal;\n    }\n  }\n\n  &::before {\n    background-color: white;\n    border: ", ";\n    border-radius: ", "px;\n    box-shadow: 0 0 0 3px white;\n    box-sizing: border-box;\n    color: ", ";\n    content: counter(progress-tracker-counter);\n    display: block;\n    font-size: ", "px;\n    height: ", "px;\n    line-height: 1em;\n    margin-bottom: 5px;\n    text-align: center;\n    width: ", "px;\n    position: relative;\n\n    @media (min-width: ", ") {\n      border-radius: ", "px;\n      border-width: 3px;\n      font-size: ", "px;\n      font-weight: normal;\n      height: ", "px;\n      line-height: 1.7em;\n      width: ", "px;\n    }\n  }\n"]);

  _templateObject2$o = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$S() {
  var data = _taggedTemplateLiteral(["\n  align-items: flex-start;\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", "\n      ", "%,\n    ", "\n      ", "%,\n    ", " 100%\n  );\n  background-size: 100% ", "px;\n  background-position: 0\n    ", "px;\n  background-repeat: no-repeat;\n  counter-reset: progress-tracker-counter;\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  margin-left: 0;\n  padding-left: 0;\n  width: 100%;\n\n  @media (min-width: ", ") {\n    background-position: center\n      ", "px;\n    background-size: ", "%\n      ", "px;\n  }\n"]);

  _templateObject$S = function _templateObject() {
    return data;
  };

  return data;
}
var ACTIVE = sizes.ACTIVE,
    INACTIVE = sizes.INACTIVE,
    DESKTOP = sizes.DESKTOP,
    TRACKING_LINE_HEIGHT = sizes.TRACKING_LINE_HEIGHT;

var getProgressLineBreakPercentage = function getProgressLineBreakPercentage(activeStepIndex, numberOfSteps) {
  return activeStepIndex / (numberOfSteps - 1) * 100;
};

var getProgressItemWidthPercentage = function getProgressItemWidthPercentage(baseAmount) {
  return 1 / baseAmount * 100;
};

var getCenterTopPosition = function getCenterTopPosition(containerHeight, itemHeight) {
  return containerHeight / 2 - itemHeight / 2;
};

var stepStates = {
  active: 'active',
  pastStep: 'isPastStep',
  clickableFutureStep: 'clickableFutureStep'
};
var ProgressContainer = styled.ol(_templateObject$S(), function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
}, function (props) {
  return props.theme.colors.gray5;
}, function (props) {
  return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
}, function (props) {
  return props.theme.colors.gray5;
}, function () {
  return TRACKING_LINE_HEIGHT;
}, function () {
  return getCenterTopPosition(ACTIVE, TRACKING_LINE_HEIGHT);
}, function (props) {
  return props.theme.screenSize.tablet;
}, function () {
  return getCenterTopPosition(DESKTOP, TRACKING_LINE_HEIGHT);
}, function (props) {
  return 100 - getProgressItemWidthPercentage(props.numberOfSteps);
}, function () {
  return TRACKING_LINE_HEIGHT;
});
ProgressContainer.propTypes = {
  activePercentage: PropTypes.number
};
var BasicProgressButton = styled.button(_templateObject2$o(), function () {
  return getCenterTopPosition(ACTIVE, INACTIVE);
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return "1px solid ".concat(props.theme.colors.gray5);
}, function () {
  return INACTIVE;
}, function (props) {
  return props.theme.colors.gray9;
}, function () {
  return INACTIVE * 0.8;
}, function () {
  return INACTIVE;
}, function () {
  return INACTIVE;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function () {
  return DESKTOP;
}, function () {
  return DESKTOP * 0.488;
}, function () {
  return DESKTOP;
}, function () {
  return DESKTOP;
});
var FutureProgressButton = styled(BasicProgressButton)(_templateObject3$g());
var PastProgressButton = styled(BasicProgressButton)(_templateObject4$b(), function (props) {
  return props.theme.colors.inputFocus;
}, function (props) {
  return props.theme.colors.inputFocus;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var ActiveProgressButton = styled(BasicProgressButton)(_templateObject5$4(), function (props) {
  return props.theme.brandColors.vbMagenta;
}, ACTIVE, function (props) {
  return props.theme.brandColors.vbMagenta;
}, ACTIVE * 0.488, ACTIVE, ACTIVE, function (props) {
  return props.theme.screenSize.tablet;
}, function () {
  return DESKTOP * 0.488;
}, function () {
  return DESKTOP;
}, function () {
  return DESKTOP;
}, function (props) {
  return props.theme.brandColors.vbMagenta;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var ProgressLi = styled.li(_templateObject6$3(), function (props) {
  return getProgressItemWidthPercentage(props.numberOfSteps - 1);
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return getProgressItemWidthPercentage(props.numberOfSteps);
});

function getProgressItemType(itemType) {
  switch (itemType) {
    case stepStates.active:
      return ActiveProgressButton;

    case stepStates.pastStep:
      return PastProgressButton;

    case stepStates.clickableFutureStep:
      return FutureProgressButton;

    default:
      return BasicProgressButton;
  }
}

function getStepState(isActiveStep, isPastStep, canClickFutureStep) {
  if (isActiveStep) {
    return stepStates.active;
  }

  if (isPastStep) {
    return stepStates.pastStep;
  }

  if (canClickFutureStep) {
    return stepStates.clickableFutureStep;
  }

  return stepStates.active;
}

function ProgressItem(_ref) {
  var active = _ref.active,
      isPastStep = _ref.isPastStep,
      numberOfSteps = _ref.numberOfSteps,
      onPastStepClicked = _ref.onPastStepClicked,
      canClickFutureStep = _ref.canClickFutureStep,
      label = _ref.label;
  var itemType;

  if (isPastStep || active || canClickFutureStep) {
    itemType = getStepState(active, isPastStep, canClickFutureStep);
  }

  var ProgressItemType = getProgressItemType(itemType);
  var listItemProps = {
    numberOfSteps: numberOfSteps,
    disabled: !isPastStep && !canClickFutureStep,
    onClick: onPastStepClicked
  };
  return React.createElement(ProgressLi, {
    numberOfSteps: numberOfSteps
  }, React.createElement(ProgressItemType, listItemProps, React.createElement("span", null, label)));
}
ProgressItem.propTypes = process.env.NODE_ENV !== "production" ? {
  active: PropTypes.bool.isRequired,
  isPastStep: PropTypes.bool.isRequired,
  numberOfSteps: PropTypes.number.isRequired,
  onPastStepClicked: PropTypes.func,
  label: PropTypes.string,
  canClickFutureStep: PropTypes.bool
} : {};
ProgressItem.defaultProps = {
  onPastStepClicked: function onPastStepClicked() {},
  label: '',
  canClickFutureStep: false
};

var getMappedSteps = function getMappedSteps(steps, _onPastStepClicked, _onFutureStepClicked) {
  var isPastStep = true;
  return _mapInstanceProperty(steps).call(steps, function (step, index) {
    var _context;

    isPastStep = !(step.active || !isPastStep);
    return React.createElement(ProgressItem
    /* eslint-disable react/no-array-index-key */
    , {
      key: _concatInstanceProperty(_context = "".concat(index, "-")).call(_context, step.label)
      /* eslint-enable */
      ,
      active: step.active,
      isPastStep: isPastStep,
      numberOfSteps: steps.length,
      onPastStepClicked: function onPastStepClicked() {
        return _onPastStepClicked(index);
      },
      canClickFutureStep: _onFutureStepClicked !== null && _onFutureStepClicked !== undefined,
      onFutureStepClicked: function onFutureStepClicked() {
        return _onFutureStepClicked(index);
      },
      label: step.label
    });
  });
};

var getIndexOfActiveStep = function getIndexOfActiveStep(steps) {
  return _findIndexInstanceProperty(steps).call(steps, function (step) {
    return step.active;
  });
};

function ProgressTracker(_ref) {
  var steps = _ref.steps,
      onPastStepClicked = _ref.onPastStepClicked,
      onFutureStepClicked = _ref.onFutureStepClicked;
  return React.createElement(ProgressContainer, {
    "data-testid": "progress-tracker",
    activeStepIndex: getIndexOfActiveStep(steps),
    numberOfSteps: steps.length
  }, getMappedSteps(steps, onPastStepClicked, onFutureStepClicked));
}

ProgressTracker.propTypes = process.env.NODE_ENV !== "production" ? {
  steps: PropTypes.arrayOf(PropTypes.shape({
    active: PropTypes.bool,
    label: PropTypes.string
  })),
  onPastStepClicked: PropTypes.func,
  onFutureStepClicked: PropTypes.func
} : {};
ProgressTracker.defaultProps = {
  steps: [],
  onPastStepClicked: function onPastStepClicked() {},
  onFutureStepClicked: null
};
var ProgressTracker$1 = withTheme(ProgressTracker);

function _templateObject4$c() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid black;\n  text-align: left;\n  margin: 15px 0px;\n  thead {\n    font-weight: bold;\n  }\n  th,\n  td {\n    border: 1px solid black;\n    padding: 8px;\n    vertical-align: middle;\n  }\n  td {\n    height: 63px;\n  }\n"]);

  _templateObject4$c = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$h() {
  var data = _taggedTemplateLiteral(["\n  background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);\n  background-color: #ffc436;\n  height: 28px;\n"]);

  _templateObject3$h = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$p() {
  var data = _taggedTemplateLiteral(["\n  background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);\n  background-size: 100% 100%;\n  height: 30px;\n  width: 150px;\n"]);

  _templateObject2$p = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$T() {
  var data = _taggedTemplateLiteral(["\n  ul {\n    display: block;\n    list-style-type: disc;\n    margin-bottom: 10px;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: 40px;\n    ul {\n      list-style-type: circle;\n    }\n  }\n"]);

  _templateObject$T = function _templateObject() {
    return data;
  };

  return data;
}
var HelpContent = styled(Modal.Body)(_templateObject$T());
var CautionRating = styled.div(_templateObject2$p());
var StarRating = styled.div(_templateObject3$h());
var RatingTable = styled(Table)(_templateObject4$c());
function StarRatingExplanation(props) {
  return React.createElement(Modal, {
    show: props.show,
    size: "large",
    onHide: props.closeModal
  }, React.createElement(Modal.Header, null, formatMessage('Plan Ratings')), React.createElement(HelpContent, null, React.createElement("p", null, formatMessage('The Overall Plan Rating combines scores, as rated by Medicare, for the types of services each plan offers.')), React.createElement(RatingTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, formatMessage('Legend')), React.createElement("th", null, formatMessage('Description')))), React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", null, React.createElement(CautionRating, null)), React.createElement("td", null, formatMessage('Caution - The plan has received low summary ratings from Medicare three years in a row.'))), React.createElement("tr", null, React.createElement("td", null, React.createElement(StarRating, null)), React.createElement("td", null, formatMessage("The plan has been given a 5 out 5 stars rating. People with Medicare can switch into these plans at any time during the year, even if it's not during an enrollment period."))))), React.createElement("strong", null, formatMessage('What is being measured?')), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering health services</0>, the overall score for quality of those services covers <0>36 different topics in 5 categories:</0>'), [React.createElement("strong", {
    key: "bold"
  })]), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>Staying healthy: screenings, tests, and vaccines:</0> Includes how often members got various screening tests, vaccines, and other check-ups that help them stay healthy.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Managing chronic (long-term) conditions:</0> Includes how often members with different conditions got certain tests and treatments that help them manage their condition.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Ratings of health plan responsiveness and care:</0> Includes ratings of member satisfaction with the plan.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Member complaints, problems getting services, and choosing to leave the plan:</0> Includes how often members filed complaints against the plan and how often members choose to leave the plan. Includes how often Medicare found problems with the plan.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Health plan customer service:</0> Includes how well the plan handles calls and makes decisions about member appeals for health coverage.'), [React.createElement("strong", {
    key: "bold"
  })])))), React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering drug services,</0> the overall score for quality of those services covers <0>17 different topics in 4 categories:</0>'), [React.createElement("strong", {
    key: "bold"
  })]), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('<0>Drug plan customer service:</0> Includes how well the plan handles calls and makes decisions about member appeals for drug coverage.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Member complaints, problems getting services, and choosing to leave the plan:</0>  Includes how often members filed complaints about the plan and how often members choose to leave the plan. Includes how often Medicare found problems with the plan.'), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage("<0>Member experience with plan's drug services:</0> Includes ratings of member satisfaction with the plan."), [React.createElement("strong", {
    key: "bold"
  })])), React.createElement("li", null, formatChildren(formatMessage('<0>Drug pricing and patient safety:</0> Includes how well the plan prices prescriptions and provides updated and accurate pricing information for the Medicare website. Includes information on how often members with certain medical conditions get prescription drugs that are considered safer and clinically recommended for their condition. Includes information on whether members are taking certain medications as directed.'), [React.createElement("strong", {
    key: "bold"
  })])))), React.createElement("li", null, formatChildren(formatMessage('<0>For plans covering both health and drug services,</0> the overall score for quality of those services covers <0>all of the 53 topics listed above.</0>'), [React.createElement("strong", {
    key: "bold"
  })]))), React.createElement("p", null, React.createElement("strong", null, formatMessage('Where does the information for the Overall Plan Rating come from?'))), React.createElement("ul", null, React.createElement("li", null, formatChildren(formatMessage('For quality of <0>health services</0>, the information comes from sources that include:'), [React.createElement("strong", {
    key: "bold"
  })]), React.createElement("ul", null, React.createElement("li", null, formatMessage('Member surveys done by Medicare')), React.createElement("li", null, formatMessage('Information from clinicians')), React.createElement("li", null, formatMessage('Information submitted by the plans')), React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities")))), React.createElement("li", null, formatChildren(formatMessage('For quality of <0>drug services</0>, the information comes from sources that include:'), [React.createElement("strong", {
    key: "bold"
  })]), React.createElement("ul", null, React.createElement("li", null, formatMessage('Member surveys done by Medicare')), React.createElement("li", null, formatMessage('Reviews of billing and other information that plans submit to Medicare')), React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities"))))), React.createElement("p", null, React.createElement("strong", null, formatMessage('Why is the Overall Plan Rating important?'))), React.createElement("p", null, formatMessage('The Overall Plan Rating gives you a single summary score that makes it easy for you to compare plans based on quality and performance. Learn more about differences among plans by looking at the detailed ratings.')), React.createElement("p", null, formatMessage('Medicare evaluates plans based on a 5-Star rating system. Star Ratings are calculated each year and may change from one year to the next.'))), React.createElement(Modal.Footer, null, React.createElement(ModalButtonContainer, null, React.createElement(Button, {
    onClick: props.closeModal
  }, formatMessage('Close')))));
}

function _templateObject5$5() {
  var data = _taggedTemplateLiteral(["\n  background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);\n  background-size: 100% 100%;\n  height: 30px;\n  margin-top: -5px;\n"]);

  _templateObject5$5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4$d() {
  var data = _taggedTemplateLiteral(["\n  background-image: url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);\n  height: 25px;\n  margin-top: -23px;\n"]);

  _templateObject4$d = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3$i() {
  var data = _taggedTemplateLiteral(["\n  background-color: #ffc436;\n  display: block;\n  height: 21px;\n  margin-left: 2px;\n  width: ", ";\n"]);

  _templateObject3$i = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2$q() {
  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  border-bottom: 1px dashed;\n  text-decoration: none;\n  &:hover,\n  &:focus {\n    color: ", ";\n    border-bottom: 1px solid;\n  }\n"]);

  _templateObject2$q = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$U() {
  var data = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 21px;\n  margin-top: 3px;\n  width: 133px;\n"]);

  _templateObject$U = function _templateObject() {
    return data;
  };

  return data;
}
var StarContainer = styled.div(_templateObject$U(), function (props) {
  return !props.isPoorPerformer ? props.theme.colors.gray5 : 'transparent';
});
var StarRatingLink = styled(LinkButton)(_templateObject2$q(), function (props) {
  return props.theme.colors.gray8;
}, function (props) {
  return props.theme.colors.gray8;
});
var StarFill = styled.span(_templateObject3$i(), function (props) {
  return props.fillWidth;
});
var StarOverlay = styled.div(_templateObject4$d());
var PoorPerformerOverlay = styled.div(_templateObject5$5());

function getStarRatingBackgroundWidth(rating) {
  var starWidth = 20.2;
  var spaceWidth = 7;
  var ratingFloor = Math.floor(rating);
  var spaceNumber = ratingFloor === rating && rating !== 0 ? ratingFloor - 1 : ratingFloor;
  var spacingAmount = spaceWidth * spaceNumber;
  var width = starWidth * rating;
  return "".concat(width + spacingAmount, "px");
}

function getAriaText(isPoorPerformer, rating) {
  if (isPoorPerformer) {
    return formatMessage('CMS has indicated that this plan is a poor performer');
  }

  if (rating !== null) {
    return formatMessage("CMS has rated this plan {rating} out of five stars", {
      rating: rating
    });
  }

  return '';
}

function StarRating$1(_ref) {
  var rating = _ref.rating,
      isPoorPerformer = _ref.isPoorPerformer,
      onExplanationOpen = _ref.onExplanationOpen;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      showHelp = _useState2[0],
      updateShowHelp = _useState2[1];

  var ariaText = getAriaText(isPoorPerformer, rating);
  return React.createElement(React.Fragment, null, React.createElement(StarRatingLink, {
    onClick: function onClick() {
      if (onExplanationOpen) {
        onExplanationOpen();
      }

      updateShowHelp(true);
    }
  }, rating === null && React.createElement("span", null, formatMessage('Star Rating not available')), rating !== null && React.createElement(StarContainer, {
    "aria-label": ariaText,
    isPoorPerformer: isPoorPerformer
  }, !isPoorPerformer ? React.createElement("div", null, React.createElement(StarFill, {
    fillWidth: getStarRatingBackgroundWidth(rating)
  }), React.createElement(StarOverlay, null)) : React.createElement("div", null, React.createElement(PoorPerformerOverlay, null)))), React.createElement(StarRatingExplanation, {
    show: showHelp,
    closeModal: function closeModal() {
      return updateShowHelp(false);
    }
  }));
}

StarRating$1.propTypes = process.env.NODE_ENV !== "production" ? {
  rating: PropTypes.number.isRequired,
  isPoorPerformer: PropTypes.bool,
  onExplanationOpen: PropTypes.func
} : {};
StarRating$1.defaultProps = {
  isPoorPerformer: false,
  onExplanationOpen: function onExplanationOpen() {}
};

function _templateObject2$r() {
  var data = _taggedTemplateLiteral(["\n  stroke: ", ";\n  stroke-dasharray: 187;\n  stroke-dashoffset: 37.4;\n  transform-origin: center;\n  animation: ", " 1.4s ease-in-out infinite,\n    ", " 3.5s ease-in-out infinite;\n"]);

  _templateObject2$r = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$V() {
  var data = _taggedTemplateLiteral(["\n  animation: ", " 1.4s linear infinite;\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    animation: ", " 1.4s linear infinite;\n  }\n"]);

  _templateObject$V = function _templateObject() {
    return data;
  };

  return data;
}
var rotatorAnimation = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(270deg);}"]);
var ieAnimation = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
var dashAnimation = keyframes(["0%{stroke-dashoffset:187;}50%{stroke-dashoffset:37.4;transform:rotate(135deg);}100%{stroke-dashoffset:187;transform:rotate(450deg);}"]);

var colorsAnimation = function colorsAnimation(props) {
  return keyframes(["0%{stroke:", ";}40%{stroke:", ";}80%{stroke:", ";}100%{stroke:", ";}"], props.theme.brandColors.vbBlue, props.theme.brandColors.vbGreen, props.theme.brandColors.vbMagenta, props.theme.brandColors.vbBlue);
};

var SpinnerSvg = styled.svg(_templateObject$V(), rotatorAnimation, ieAnimation);
var SpinnerCircle = styled.circle(_templateObject2$r(), function (props) {
  return props.theme.colors.violet;
}, dashAnimation, colorsAnimation);

var Spinner = function Spinner(_ref) {
  var _context, _context2;

  var title = _ref.title,
      description = _ref.description,
      other = _objectWithoutProperties(_ref, ["title", "description"]);

  var titleId = title && "".concat(useUniqueId(other.id), "-title");
  var descId = description && "".concat(useUniqueId(other.id), "-desc");
  return React.createElement(SpinnerSvg, _extends({
    viewBox: "0 0 66 66",
    xmlns: "http://www.w3.org/2000/svg",
    role: "img",
    "aria-labelledby": _trimInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(titleId, " ")).call(_context2, descId)).call(_context)
  }, other), title && React.createElement("title", {
    id: titleId
  }, title), description && React.createElement("desc", {
    id: descId
  }, description), React.createElement(SpinnerCircle, {
    fill: "none",
    strokeWidth: "6",
    strokeLinecap: "round",
    cx: "33",
    cy: "33",
    r: "30"
  }));
}; // eslint-disable-next-line consistent-return


var descriptionTitleProp = process.env.NODE_ENV !== "production" ? function (props, propName, componentName) {
  if (!props.title && !props.description) {
    return new Error("You must provide a title, description, or both to ".concat(componentName, "."));
  }
} : {};
Spinner.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The title of the spinner for screen readers. This or `description` is
   * required */
  title: descriptionTitleProp,

  /** The description of the spinner for screen readers. This or `title` is
   * required */
  description: descriptionTitleProp
} : {};
Spinner.defaultProps = {
  title: '',
  description: ''
};

function getWindowSize() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      defaultWidth = _ref.defaultWidth,
      defaultHeight = _ref.defaultHeight;

  return {
    windowWidth: defaultWidth || document.body.clientWidth,
    windowHeight: defaultHeight || document.body.clientHeight
  };
}

function withWindowSize(ComponentClass) {
  var windowSize =
  /*#__PURE__*/
  function (_React$Component) {
    _inherits(windowSize, _React$Component);

    function windowSize() {
      var _getPrototypeOf2, _context;

      var _this;

      _classCallCheck(this, windowSize);

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(windowSize)).call.apply(_getPrototypeOf2, _concatInstanceProperty(_context = [this]).call(_context, args)));

      _defineProperty(_assertThisInitialized(_this), "state", getWindowSize(_this.props));

      _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
        var activeTag = document.activeElement.tagName.toLocaleLowerCase();

        if (activeTag === 'input' || activeTag === 'select') {
          return;
        }

        _this.setState(getWindowSize());
      });

      return _this;
    }

    _createClass(windowSize, [{
      key: "componentDidMount",
      value: function componentDidMount() {
        window.addEventListener('resize', this.handleResize);
      }
    }, {
      key: "componentWillUnmount",
      value: function componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
      }
    }, {
      key: "render",
      value: function render() {
        return React.createElement(ComponentClass, _extends({}, this.props, {
          windowWidth: this.state.windowWidth,
          windowHeight: this.state.windowHeight
        }));
      }
    }]);

    return windowSize;
  }(React.Component);

  _defineProperty(windowSize, "defaultProps", {
    defaultWidth: null,
    defaultHeight: null
  });

  windowSize.propTypes = process.env.NODE_ENV !== "production" ? {
    defaultWidth: PropTypes.number,
    defaultHeight: PropTypes.number
  } : {};
  return windowSize;
}

function _templateObject$W() {
  var data = _taggedTemplateLiteral(["\n  html, body, div, span, applet, object, iframe,\n  a, big, cite, code, del, dfn, em, img, ins, kbd,\n  q, s, samp, strike, tt, var,\n  b, u, i, center, fieldset, form, label, legend\n  table, caption, tbody, tfoot, thead, tr, th, td,\n  article, aside, canvas, details, embed,\n  figure, figcaption, footer, header, hgroup,\n  menu, nav, output, ruby, section, summary,\n  time, mark, audio, video {\n    border: 0;\n    font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n    font-size: 100%;\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n\n  ul, ol {\n    margin: 0 1em 25px;\n    padding-left: 1em;\n    list-style-position: outside;\n  }\n\n  input, button {\n    font: inherit;\n  }\n\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  small {\n    font-size: 85%;\n  }\n\n  strong, b {\n    font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n    font-weight: bold;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    color: inherit;\n    font: inherit;\n    font-family: 'Source Sans Pro', 'Segoe UI', Segoe, Calibri, Tahoma, sans-serif;\n    font-weight: 300;\n    line-height: 1.1;\n    margin-bottom: 0.45em;\n    margin-top: 0;\n  }\n\n  h1 {\n    font-size: 44.78976px;\n  }\n  h2 {\n    font-size: 37.3248px;\n  }\n  h3 {\n    font-size: 31.104px;\n  }\n  h4 {\n    font-size: 25.92px;\n  }\n  h5 {\n    font-size: 21.6px;\n  }\n  h6 {\n    font-size: 18px;\n  }\n"]);

  _templateObject$W = function _templateObject() {
    return data;
  };

  return data;
}
var StyleReset = createGlobalStyle(_templateObject$W());

function isValidEmail(emailAddress) {
  var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(emailAddress);
}

export { Action, ActionButton, AdditionalHelp, AnswerButton, AnswerGroup, Button, CallToAction, Checkbox, Control, DateInput, DatePicker, Drawer, Dropdown, DropdownButton, Fade, Fieldset, Heading, HorizontalNav, Icon, Incrementer, InlineMessage, Label, LightCallToAction, LightNotification, LinkButton, MaskedTextbox, Menu, Message, MessageNotification, Modal, ModalButtonContainer, Notification$1 as Notification, OutlineButton, Popover, PopoverLink, ProgressTracker$1 as ProgressTracker, RadioButton, RadioGroup, ResponsiveTable, SideNav, SlidingPane, Spinner, StarRating$1 as StarRating, StarRatingExplanation, StripedContainer, StyleReset, TabPanel, Table, Textarea, Textbox, ToggleButton, Tooltip, generateAlphaName, isValidEmail, screenReaderOnly, useTheme, useWindowWidth, withWindowSize };