es-components/lib/index.js

import 'core-js/modules/es.function.name';
import _extends from '@babel/runtime-corejs3/helpers/extends';
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
import React, { useContext, useState, useRef, Children, useCallback, useEffect, useReducer } from 'react';
import PropTypes from 'prop-types';
import styled, { ThemeContext, css, createGlobalStyle, ThemeProvider, 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-corejs3/helpers/slicedToArray';
import _defineProperty from '@babel/runtime-corejs3/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-corejs3/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 tinycolor from 'tinycolor2';
import 'get-root-node-polyfill/implement';
import _setTimeout from '@babel/runtime-corejs3/core-js-stable/set-timeout';
import _setInterval from '@babel/runtime-corejs3/core-js-stable/set-interval';
import { useRootClose } from 'react-overlays';
import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
import _taggedTemplateLiteral from '@babel/runtime-corejs3/helpers/taggedTemplateLiteral';
import _debounce from 'lodash/debounce';
import ReactModal from 'react-modal';
import 'core-js/modules/es.regexp.exec';
import 'core-js/modules/es.string.replace';
import _Object$assign from '@babel/runtime-corejs3/core-js-stable/object/assign';
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 _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
import 'regenerator-runtime/runtime';
import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
import _findIndex from 'lodash/findIndex';
import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
import 'core-js/modules/es.object.to-string';
import 'core-js/modules/es.regexp.to-string';
import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
import _classCallCheck from '@babel/runtime-corejs3/helpers/classCallCheck';
import _createClass from '@babel/runtime-corejs3/helpers/createClass';
import _assertThisInitialized from '@babel/runtime-corejs3/helpers/assertThisInitialized';
import _inherits from '@babel/runtime-corejs3/helpers/inherits';
import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime-corejs3/helpers/getPrototypeOf';
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 _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
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 _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 'core-js/modules/es.symbol';
import 'core-js/modules/es.symbol.description';
import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';

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',
  'im-icon-underline': '6c7',
  'im-icon-header': '6c8',
  'im-icon-hyperlink': '6c9',
  'im-icon-money': '6ca',
  'im-icon-profit': '6cb',
  'im-icon-cash-in-hand': '6cc',
  'im-icon-paycheque': '6cd',
  'im-icon-rod-of-asclepius': '6ce',
  'im-icon-tooth': '6cf',
  'im-icon-speech-bubble': '6d0',
  'im-icon-phone-analog': '6d1',
  'im-icon-map-with-marker': '6d2',
  'im-icon-sms': '6d3',
  'im-icon-mailbox-closed-flag-down': '6d4',
  'im-icon-moleskine': '6d5',
  'im-icon-alarm-clock': '6d6',
  'im-icon-stethoscope': '6d7',
  'im-icon-compass': '6d8',
  'im-icon-exit': '6d9',
  'im-icon-logout-rounded-left': '6da',
  'im-icon-bot': '6db',
  'im-icon-calculator': '6dc',
  'im-icon-divide': '6dd',
  'im-icon-clinic': '6de',
  'im-icon-hospital-3': '6df',
  'im-icon-trust': '6e0',
  'im-icon-clear-filters': '6e1',
  'im-icon-glasses': '6e2',
  'im-icon-purchase-order': '6e3',
  'im-icon-urgent-message': '6e4',
  'im-icon-desktop': '6e5',
  'im-icon-confusion': '6e6',
  'im-icon-idea': '6e7',
  'im-icon-spouse': '6e8',
  'im-icon-play': '6e9',
  'im-icon-pause': '6ea',
  'im-icon-skip-to-start': '6eb',
  'im-icon-reply-arrow': '6ec'
};

var StyledIcon = styled.i(["display:inline-block;font-family:bds-func-icons !important;font-size:", ";font-style:normal;font-weight:inherit;font-variant:normal;line-height:1;speak:none;text-decoration:none;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:text-bottom;&:before{content:\"\\e", "\";}"], 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 (
    /*#__PURE__*/
    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 _StyledDiv = styled("div")(function (p) {
  return {
    alignItems: 'center',
    display: 'flex',
    height: p._css,
    justifyContent: 'center',
    width: p._css2
  };
});

var _StyledImg = styled("img")({
  height: 'auto',
  maxWidth: '100%'
});

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

  return (
    /*#__PURE__*/
    React.createElement(_StyledDiv, _extends({}, props, {
      _css: size,
      _css2: size
    }),
    /*#__PURE__*/
    React.createElement(_StyledImg, {
      src: "https://bdaim-webexcdn-p.azureedge.net/es-assets/images/full-color-icons/".concat(name, ".svg"),
      alt: "".concat(name, " icon")
    }))
  );
}
FullColorIcon.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Name of the icon to display */
  name: PropTypes.string.isRequired,

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

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

// https://webaim.org/techniques/css/invisiblecontent/#absolutepositioning

function screenReaderOnly(Component) {
  var ScreenReaderOnly = styled(Component)(["position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden;"]);
  return ScreenReaderOnly;
}

var DismissButtonBase = styled.button(["background-color:transparent;border:0;cursor:pointer;display:flex;font-weight:bold;opacity:0.2;padding:0;&:hover,&:focus{opacity:0.5;}"]);
var ScreenReaderText = screenReaderOnly('span');
var DismissButton =
/*#__PURE__*/
React.forwardRef(function DismissButton(props, ref) {
  return (
    /*#__PURE__*/
    React.createElement(DismissButtonBase, _extends({
      "aria-label": "Close",
      type: "button"
    }, props, {
      ref: ref
    }),
    /*#__PURE__*/
    React.createElement(Icon, {
      name: "remove"
    }),
    /*#__PURE__*/
    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; }
var NotificationIcon = styled(Icon)(["align-self:start;color:", ";display:none;@media (min-width:", "){display:inline;margin-right:8px;}"], function (props) {
  return props.iconColor;
}, function (props) {
  return props.alwaysShowIcon ? 0 : props.theme.screenSize.tablet;
});
var Dismiss = styled(DismissButton)(["align-self:start;color:", ";font-weight:normal;opacity:0.8;i{font-size:27px;}"], function (props) {
  return props.color.textColor;
});
var ContentWrapper = styled.div(["align-self:center;flex-grow:1;word-break:break-word;"]);

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,
      alwaysShowIcon = props.alwaysShowIcon,
      rest = _objectWithoutProperties(props, ["includeIcon", "isDismissable", "onDismiss", "children", "iconName", "iconColor", "color", "dismissNotification", "alwaysShowIcon"]);

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

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

var Notification = styled.div(["align-items:center;background-color:", ";border-radius:2px;color:", ";display:flex;margin-bottom:25px;padding:15px;", " button[aria-expanded]{color:", ";}"], function (props) {
  return props.variant.bgColor;
}, function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.restyleAnchors ? "\n    a {\n      color: ".concat(props.variant.textColor, ";\n      text-decoration: underline;\n\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  ") : "";
}, 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,
        className = _ref.className,
        style = _ref.style,
        _ref$restyleAnchors = _ref.restyleAnchors,
        restyleAnchors = _ref$restyleAnchors === void 0 ? true : _ref$restyleAnchors,
        rest = _objectWithoutProperties(_ref, ["role", "type", "children", "className", "style", "restyleAnchors"]);

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

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

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

    function dismissNotification() {
      setIsDismissed(true);
    }

    return !isDismissed &&
    /*#__PURE__*/
    React.createElement(Notification, {
      variant: color,
      className: className,
      style: style,
      restyleAnchors: restyleAnchors
    },
    /*#__PURE__*/
    React.createElement(NotificationContent, _extends({
      dismissNotification: dismissNotification
    }, notificationContentProps), children));
  };
}

var DefaultNotification = useNotification();

function Notification$1(props) {
  return (
    /*#__PURE__*/
    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,

  /** Allows the icon to display at all resolutions */
  alwaysShowIcon: PropTypes.bool
} : {};
Notification$1.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop,
  alwaysShowIcon: false
};

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

function LightNotification(props) {
  return (
    /*#__PURE__*/
    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,

  /** Allows the icon to display at all resolutions */
  alwaysShowIcon: PropTypes.bool
} : {};
LightNotification.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop,
  alwaysShowIcon: false
};

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

function MessageNotification(props) {
  return (
    /*#__PURE__*/
    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,

  /** Allows the icon to display at all resolutions */
  alwaysShowIcon: PropTypes.bool
} : {};
MessageNotification.defaultProps = {
  includeIcon: false,
  isDismissable: false,
  children: null,
  role: 'dialog',
  onDismiss: _noop,
  alwaysShowIcon: false
};

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 (
    /*#__PURE__*/
    React.createElement("span", null, emphasizedText !== undefined ?
    /*#__PURE__*/
    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 (
    /*#__PURE__*/
    React.createElement("span", null, emphasizedText !== undefined ?
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement("strong", null, emphasizedText),
    /*#__PURE__*/
    React.createElement("br", null)) : null, text)
  );
}
Message.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Message.defaultProps = defaultProps;

var DrawerContext =
/*#__PURE__*/
React.createContext({});

var HeadingBase = styled.h1(["background-color:", ";border-bottom:", ";color:", ";font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-size:", ";font-weight:300;line-height:1.1;margin-bottom:0.45em;margin-top:0;padding-bottom:", ";padding:", ";small{font-size:", ";line-height:1;}@media (min-width:", "){font-size:", ";}"], function (props) {
  return props.isKnockoutStyle && props.theme.colors.primary;
}, function (props) {
  return props.underlineColor && "2px solid ".concat(props.underlineColor, ";");
}, function (props) {
  return props.isKnockoutStyle ? 'white' : 'inherit';
}, function (props) {
  return props.theme.font.headingMobile[props.adjustedSize];
}, 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.font.headingDesktop[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 (
    /*#__PURE__*/
    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
};
var PageHeading = function PageHeading(props) {
  return (
    /*#__PURE__*/
    React.createElement(Heading, _extends({
      isKnockoutStyle: true,
      level: 1
    }, props))
  );
};

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;
}

var PanelWrapper = styled.div(["border-bottom:1px solid ", ";"], function (props) {
  return props.theme.colors.gray3;
});
var PanelButton = styled.button(["background:none;border:0;color:", ";cursor:pointer;display:flex;font-size:18px;justify-content:space-between;padding:10px 15px;width:100%;@media (hover:hover),(-ms-high-contrast:none){&:hover{background-color:", ";color:", ";}}"], function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.theme.brandColors.brandPrimary1;
});
var PanelIcon = styled(Icon)(["margin-right:0.4em;position:relative;top:-2px;"]);
var PanelBody = styled(function (_ref) {
  var noPadding = _ref.noPadding,
      rest = _objectWithoutProperties(_ref, ["noPadding"]);

  return (
    /*#__PURE__*/
    React.createElement(AnimateHeight, rest)
  );
})(["background-color:", ";color:", ";> div{border-bottom:4px solid ", ";padding:", ";}"], 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,
      headingLevel = props.headingLevel,
      other = _objectWithoutProperties(props, ["children", "isOpen", "noPadding", "onItemClick", "title", "titleAside", "headingLevel"]);

  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 (
    /*#__PURE__*/
    React.createElement(PanelWrapper, other,
    /*#__PURE__*/
    React.createElement("div", {
      id: headingAriaId,
      role: "heading",
      "aria-level": headingLevel
    },
    /*#__PURE__*/
    React.createElement(PanelButton, {
      "aria-expanded": isOpen,
      "aria-controls": regionAriaId,
      onClick: function onClick() {
        return onItemClick();
      }
    },
    /*#__PURE__*/
    React.createElement("span", null,
    /*#__PURE__*/
    React.createElement(PanelIcon, {
      name: isOpen ? openedIconName : closedIconName
    }), title), titleAside &&
    /*#__PURE__*/
    React.createElement("aside", null, titleAside))),
    /*#__PURE__*/
    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,

  /** Set desired aria-level for heading */
  headingLevel: Heading.propTypes.level,

  /** @ignore */
  onItemClick: PropTypes.func
} : {};
DrawerPanel.defaultProps = {
  isOpen: false,
  noPadding: false,
  titleAside: undefined,
  headingLevel: 2,
  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; }
var StyledDrawer = styled.div(["background-color:", ";border-top:1px solid ", ";box-shadow:0 1px 1px ", ";margin-bottom:25px;"], 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 (
    /*#__PURE__*/
    React.createElement(DrawerContext.Provider, {
      value: {
        openedIconName: openedIconName,
        closedIconName: closedIconName
      }
    },
    /*#__PURE__*/
    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(_objectSpread$1({}, child.props), {}, {
          key: key,
          isOpen: isOpen,
          onItemClick: function onItemClick() {
            return _onItemClick(key);
          }
        });

        return (
          /*#__PURE__*/
          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 = /*#__PURE__*/
React.createContext('stacked');

var FieldsetBase = styled.div(["display:flex;flex-wrap:wrap;flex-direction:column;margin-bottom:25px;width:100%;> *:last-child{margin-bottom:0;}", ";"], function (props) {
  return props.orientation === 'inline' && css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
});
var Legend = styled.div(["color:", ";flex:0 0 auto;font-size:21.6px;line-height:", ";margin:0 0 10px 0;width:100%;"], function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.font.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 (
    /*#__PURE__*/
    React.createElement(FieldsetBase, _extends({
      role: "group",
      "aria-labelledby": legendId,
      orientation: orientation
    }, other), legendContent &&
    /*#__PURE__*/
    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 (
    /*#__PURE__*/
    React.createElement(Transition, _extends({}, otherProps, {
      timeout: duration
    }), function (state, innerProps) {
      return (
        /*#__PURE__*/
        React.cloneElement(children, _objectSpread$2(_objectSpread$2({}, innerProps), {}, {
          style: _objectSpread$2(_objectSpread$2(_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 darken(color, percent) {
  return tinycolor(color).darken(percent).toHexString();
}
function getTextColor(bgColor) {
  var darkestColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'black';
  var lightestColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'white';
  return tinycolor.readability(darkestColor, bgColor) > 10 ? darkestColor : lightestColor;
}

var StyledButton = styled.button(["background-color:transparent;border:none;box-shadow:none;cursor:pointer;color:", ";font-size:inherit;line-height:", ";padding:0;text-decoration:underline;&:hover,&:focus,&:active{color:", ";text-decoration:none;}&:active{box-shadow:none;}&[disabled]:hover{color:", ";text-decoration:underline;}"], function (props) {
  return props.variant.textColor;
}, function (props) {
  return props.theme.font.baseLineHeight;
}, function (props) {
  return darken(props.variant.textColor, 10);
}, function (props) {
  return props.variant.textColor;
});
var LinkButton =
/*#__PURE__*/
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 (
    /*#__PURE__*/
    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'
};

var StyledButton$1 = styled(LinkButton)(["text-decoration:", ";&:hover,:focus{text-decoration:", ";}"], function (props) {
  return props.suppressUnderline ? 'none' : "".concat(props.variant.textColor, " dashed underline");
}, function (props) {
  return props.suppressUnderline ? 'none' : "".concat(props.variant.textColor, " solid underline");
});
var PopoverLink =
/*#__PURE__*/
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 (
    /*#__PURE__*/
    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 useRootNode(initialRoot) {
  var _useState = useState(initialRoot),
      _useState2 = _slicedToArray(_useState, 2),
      rootNode = _useState2[0],
      setRootNode = _useState2[1];

  var nodeRef = useCallback(function (node) {
    if (!node) return;
    var foundRoot = node.getRootNode();
    var targetNode = foundRoot.body || foundRoot;
    if (initialRoot !== targetNode) setRootNode(targetNode);
  }, []);
  return [rootNode, nodeRef];
}
function useRootNodeLocator(initialRoot) {
  var _useRootNode = useRootNode(initialRoot),
      _useRootNode2 = _slicedToArray(_useRootNode, 2),
      rootNode = _useRootNode2[0],
      rootNodeRef = _useRootNode2[1];

  var RootNodeInput = useCallback(function () {
    return (
      /*#__PURE__*/
      React.createElement("input", {
        type: "hidden",
        ref: rootNodeRef
      })
    );
  }, []);
  return [rootNode, RootNodeInput];
}

var TooltipBase = styled.div(["position:absolute;z-index:999;"]);
var TooltipInner = styled.div(["background-color:", ";border-radius:2px;color:", ";font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-size:15px;line-height:", ";max-width:250px;padding:3px 8px;text-align:left;"], function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.font.baseLineHeight;
});
var TooltipArrowBase = styled.div(["border-color:transparent;border-style:solid;height:0;position:absolute;width:0;"]);
var TooltipTop = styled(TooltipBase)(["padding:5px 0;"]);
var TooltipRight = styled(TooltipBase)(["padding:0 5px;"]);
var TooltipBottom = styled(TooltipBase)(["padding:5px 0;"]);
var TooltipLeft = styled(TooltipBase)(["padding:0 5px;"]);
var TooltipArrowTop = styled(TooltipArrowBase)(["border-top-color:", ";border-width:5px 5px 0;bottom:0;"], function (props) {
  return props.theme.colors.primary;
});
var TooltipArrowRight = styled(TooltipArrowBase)(["border-right-color:", ";border-width:5px 5px 5px 0;left:0;"], function (props) {
  return props.theme.colors.primary;
});
var TooltipArrowBottom = styled(TooltipArrowBase)(["border-bottom-color:", ";border-width:0 5px 5px;top:0;"], function (props) {
  return props.theme.colors.primary;
});
var TooltipArrowLeft = styled(TooltipArrowBase)(["border-left-color:", ";border-width:5px 0 5px 5px;right:0;"], function (props) {
  return props.theme.colors.primary;
});
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;

  var _useRootNode = useRootNode(document.body),
      _useRootNode2 = _slicedToArray(_useRootNode, 2),
      rootNode = _useRootNode2[0],
      rootNodeRef = _useRootNode2[1];

  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 (
    /*#__PURE__*/
    React.createElement(Manager, null,
    /*#__PURE__*/
    React.createElement(Reference, null, function (_ref) {
      var _ref2 = _ref.ref;
      return (
        /*#__PURE__*/
        React.createElement(PopoverLink, {
          ref: function ref(el) {
            _ref2(el);

            rootNodeRef(el);
          },
          onBlur: hideTooltip,
          onFocus: !disableFocus ? showTooltip : undefined,
          onMouseEnter: !disableHover ? showTooltip : undefined,
          onMouseLeave: !disableHover ? hideTooltip : undefined,
          onKeyDown: closeOnEscape,
          onClick: toggleShow,
          "aria-describedby": descriptionId,
          styleType: styleType
        }, children)
      );
    }),
    /*#__PURE__*/
    React.createElement(ScreenReaderContent, {
      id: descriptionId
    }, content),
    /*#__PURE__*/
    ReactDOM.createPortal(
    /*#__PURE__*/
    React.createElement(Popper, {
      placement: position
    }, function (_ref3) {
      var ref = _ref3.ref,
          style = _ref3.style,
          placement = _ref3.placement,
          arrowProps = _ref3.arrowProps;
      return (
        /*#__PURE__*/
        React.createElement(Fade, {
          in: show,
          mountOnEnter: true,
          unmountOnExit: true
        },
        /*#__PURE__*/
        React.createElement(TooltipStyled, _extends({
          ref: ref,
          role: "tooltip",
          id: tooltipId,
          style: style,
          "aria-live": "polite"
        }, other),
        /*#__PURE__*/
        React.createElement(TooltipArrow, {
          ref: arrowProps.ref,
          style: arrowProps.style
        }),
        /*#__PURE__*/
        React.createElement(TooltipInner, null, content)))
      );
    }), rootNode))
  );
}

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
};

var StyledButton$2 = styled.button(["background-color:", ";border:2px solid transparent;border-color:", ";border-bottom-left-radius:", ";border-bottom-right-radius:", ";border-top-left-radius:", ";border-top-right-radius:", ";box-sizing:border-box;color:", ";cursor:pointer;display:", ";font-family:inherit;font-size:", ";font-weight:", ";line-height:", ";min-width:100px;padding-bottom:", ";padding-left:", ";padding-right:", ";padding-top:", ";position:relative;text-align:center;text-decoration:none;text-transform:", ";transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:", ";@media (min-width:", "){display:", ";width:", ";}@media (hover:hover),(-ms-high-contrast:none){&:hover{color:", ";background-color:", ";border-color:", ";text-decoration:none;}}&:focus{color:", ";background-color:", ";border-color:", ";box-shadow:0 1px 1px rgba(0,0,0,0.075),0 0 0 0.2rem ", ";outline:0;}&:active,&.pressed{color:", ";background-color:", ";border-color:", ";box-shadow:inset 0 3px 5px rgba(0,0,0,0.25);}&:active:focus,&.pressed:focus{box-shadow:inset 0 3px 5px rgba(0,0,0,0.25),0 0 0 0.2rem ", ";}&[disabled]{color:#ccc;cursor:not-allowed;background-color:#e6e6e6;border-color:#e6e6e6;&:hover{background-color:#e6e6e6;border-color:#e6e6e6;color:#ccc;}> *{pointer-events:none;}}"], function (props) {
  return props.colors.bgColor;
}, function (props) {
  return props.colors.bgColor;
}, function (props) {
  return props.borderRadii.bottomLeft;
}, function (props) {
  return props.borderRadii.bottomRight;
}, function (props) {
  return props.borderRadii.topLeft;
}, function (props) {
  return props.borderRadii.topRight;
}, function (props) {
  return props.colors.textColor;
}, function (props) {
  return props.mobileBlock ? 'block' : 'inline-block';
}, function (props) {
  return props.buttonSize.fontSize;
}, function (props) {
  return props.buttonSize.fontWeight || 'normal';
}, function (props) {
  return props.buttonSize.lineHeight ? props.buttonSize.lineHeight : props.theme.font.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.mobileBlock ? '100%' : 'auto';
}, 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.colors.hoverTextColor;
}, function (props) {
  return props.colors.hoverBgColor;
}, function (props) {
  return props.colors.hoverBorderColor;
}, function (props) {
  return props.colors.hoverTextColor;
}, function (props) {
  return props.colors.hoverBgColor;
}, function (props) {
  return props.colors.hoverBorderColor;
}, function (props) {
  return props.colors.focusBoxShadowColor;
}, function (props) {
  return props.colors.activeTextColor;
}, function (props) {
  return props.colors.activeBgColor;
}, function (props) {
  return props.colors.activeBorderColor;
}, function (props) {
  return props.colors.focusBoxShadowColor;
});
var Button =
/*#__PURE__*/
React.forwardRef(function Button(_ref, ref) {
  var children = _ref.children,
      styleType = _ref.styleType,
      size = _ref.size,
      block = _ref.block,
      mobileBlock = _ref.mobileBlock,
      flatLeftEdge = _ref.flatLeftEdge,
      flatRightEdge = _ref.flatRightEdge,
      other = _objectWithoutProperties(_ref, ["children", "styleType", "size", "block", "mobileBlock", "flatLeftEdge", "flatRightEdge"]);

  var theme = useTheme();
  var buttonSize = theme.buttonStyles.button.size[size];
  var variant = theme.buttonStyles.button.variant[styleType];
  var isInheritedStyle = styleType === 'inherited';
  var mobileBlockSetting = flatLeftEdge || flatRightEdge ? false : mobileBlock;
  var defaultRadius = buttonSize.borderRadius;
  var borderRadii = {
    topLeft: flatLeftEdge ? 0 : defaultRadius,
    topRight: flatRightEdge ? 0 : defaultRadius,
    bottomRight: flatRightEdge ? 0 : defaultRadius,
    bottomLeft: flatLeftEdge ? 0 : defaultRadius
  };

  function getButtonColors() {
    if (isInheritedStyle) {
      return {
        bgColor: 'inherited',
        textColor: 'inherited',
        borderColor: 'inherited',
        hoverBgColor: 'inherited',
        focusBoxShadowColor: theme.colors.gray4,
        activeBgColor: 'inherited',
        activeTextColor: 'inherited',
        activeBorderColor: 'inherited',
        hoverTextColor: 'inherited'
      };
    }

    var focusBoxShadowColor = tinycolor.mix(variant.bgColor, theme.colors.black, 14);
    focusBoxShadowColor.setAlpha(0.5);
    var calculatedButtonColors = {
      bgColor: variant.bgColor,
      textColor: getTextColor(variant.bgColor),
      borderColor: variant.bgColor,
      hoverBgColor: darken(variant.bgColor, 7.5),
      hoverBorderColor: darken(variant.bgColor, 9.9),
      focusBoxShadowColor: focusBoxShadowColor.toRgbString()
    };
    calculatedButtonColors.activeBgColor = darken(calculatedButtonColors.hoverBgColor, 2.5);
    calculatedButtonColors.activeTextColor = getTextColor(calculatedButtonColors.activeBgColor);
    calculatedButtonColors.activeBorderColor = darken(calculatedButtonColors.hoverBgColor, 5);
    calculatedButtonColors.hoverTextColor = getTextColor(calculatedButtonColors.hoverBgColor);
    return calculatedButtonColors;
  }

  var buttonColors = getButtonColors();
  return (
    /*#__PURE__*/
    React.createElement(StyledButton$2, _extends({
      type: "button",
      block: block,
      mobileBlock: mobileBlockSetting,
      buttonSize: buttonSize,
      colors: buttonColors,
      ref: ref,
      borderRadii: borderRadii
    }, other), 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,

  /** Override the default block mobile style */
  mobileBlock: PropTypes.bool,

  /** Styles the Button with a flat left edge */
  flatLeftEdge: PropTypes.bool,

  /** Styles the Button with a flat right edge */
  flatRightEdge: PropTypes.bool
} : {};
Button.defaultProps = {
  styleType: 'default',
  block: false,
  mobileBlock: true,
  size: 'default',
  flatLeftEdge: false,
  flatRightEdge: false
};

var PopperBox = styled.div(["border:1px solid rgba(0,0,0,0.3);box-shadow:0 5px 10px rgba(0,0,0,0.3);border-radius:2px;margin:", "px;max-width:350px;min-width:270px;position:absolute;text-align:center;z-index:99999;"], function (props) {
  return props.arrowSize.marginSize;
});
var Arrow = styled.div(["position:absolute;&::before,&::after{border:solid transparent;content:'';position:absolute;}&[data-placement*='bottom']{top:0;left:0;margin-top:-", "px;&::before{border-width:", ";border-color:transparent;border-bottom-color:", ";margin-left:-", "px;}&::after{border-width:", ";border-color:transparent;border-bottom-color:", ";margin-left:-", "px;}}&[data-placement*='top']{&::before{border-width:", "px;border-color:transparent;border-top-color:", ";margin-left:-", "px;}&::after{border-width:", "px;border-color:transparent;border-top-color:", ";margin-left:-", "px;}}&[data-placement*='right']{margin-left:-", "px;&::before{border-width:", ";border-color:transparent;border-right-color:", ";margin-top:-", "px;}&::after{border-width:", ";border-color:transparent;border-right-color:", ";margin-top:-", "px;}}&[data-placement*='left']{right:0;&::before{border-width:", "px;border-color:transparent;border-left-color:", ";margin-top:-", "px;}&::after{border-width:", "px;border-color:transparent;border-left-color:", ";margin-top:-", "px;}}"], 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.primary : 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,
      enableEvents = props.enableEvents,
      strategy = props.strategy;
  var arrowValues = getArrowValues(arrowSize);

  var _useRootNode = useRootNode(document.body),
      _useRootNode2 = _slicedToArray(_useRootNode, 2),
      rootNode = _useRootNode2[0],
      rootNodeRef = _useRootNode2[1];

  return (
    /*#__PURE__*/
    React.createElement(Manager, null,
    /*#__PURE__*/
    React.createElement(Reference, null, function (_ref) {
      var _ref2 = _ref.ref;
      return (
        /*#__PURE__*/
        React.createElement("div", {
          className: "".concat(name, "-popper__trigger"),
          ref: function ref(el) {
            _ref2(el);

            rootNodeRef(el);
          }
        }, trigger)
      );
    }),
    /*#__PURE__*/
    ReactDOM.createPortal(
    /*#__PURE__*/
    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,
      eventsEnabled: enableEvents,
      positionFixed: strategy === 'fixed'
    }, function (_ref3) {
      var ref = _ref3.ref,
          style = _ref3.style,
          placement = _ref3.placement,
          arrowProps = _ref3.arrowProps;
      return (
        /*#__PURE__*/
        React.createElement(Fade, {
          in: transitionIn,
          duration: transitionTimeout,
          mountOnEnter: true,
          unmountOnExit: true
        },
        /*#__PURE__*/
        React.createElement(PopperBox, {
          ref: ref,
          style: style,
          arrowSize: arrowValues
        }, children,
        /*#__PURE__*/
        React.createElement(Arrow, {
          ref: arrowProps.ref,
          "data-placement": placement,
          style: arrowProps.style,
          arrowSize: arrowValues,
          hasTitle: hasTitle
        })))
      );
    }), rootNode))
  );
}

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,
  enableEvents: PropTypes.bool,
  strategy: PropTypes.oneOf(['absolute', 'fixed'])
} : {};
Popup.defaultProps = {
  name: '',
  trigger: undefined,
  children: undefined,
  position: 'bottom',
  arrowSize: 'default',
  transitionIn: false,
  transitionTimeout: 150,
  hasTitle: false,
  disableFlipping: false,
  popperRef: undefined,
  enableEvents: true,
  strategy: 'absolute'
};

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

var Container = styled.div(["display:inline-block;"]);
var PopoverHeader = styled.div(["background-color:", ";color:", ";display:flex;justify-content:space-between;line-height:", ";outline:none;"], function (props) {
  return props.hasTitle ? props.theme.colors.primary : props.theme.colors.white;
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.font.baseLineHeight;
});
var TitleBar = styled.h3(["flex:1 1;font-size:18px;margin:0;padding:8px 14px;text-align:left;"]);
var PopoverBody = styled.div(["background:", ";color:", ";font-size:18px;font-weight:normal;line-height:", ";padding:", ";text-align:right;"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.font.baseLineHeight;
}, function (props) {
  return props.hasAltCloseWithNoTitle ? '0 14px 8px' : '8px 14px';
});
var PopoverContent = styled.div(["margin-bottom:", ";text-align:left;"], function (props) {
  return props.showCloseButton ? '8px' : '0';
});
var PopoverCloseButton = styled(Button)(["display:inline-block;margin:5px 0;width:auto;"]);
var AltCloseButton = styled(DismissButton)(["color:", ";flex:0 1;margin-left:auto;padding:8px;"], function (props) {
  return props.hasTitle ? props.theme.colors.white : props.theme.colors.black;
});
var CloseHelpText = styled.span(["color:transparent;flex:none;height:1px;outline:0;width:1px;"]);

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,
      enableEvents = props.enableEvents,
      strategy = props.strategy;
  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 =
  /*#__PURE__*/
  React.createElement(PopoverCloseButton, {
    onClick: toggleShow,
    ref: closeBtnRef
  }, "Close");
  var altCloseButton =
  /*#__PURE__*/
  React.createElement(AltCloseButton, {
    "aria-label": "Close",
    hasTitle: hasTitle,
    onClick: toggleShow,
    ref: closeBtnRef
  });
  return (
    /*#__PURE__*/
    React.createElement(Container, null,
    /*#__PURE__*/
    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;
      },
      enableEvents: enableEvents,
      strategy: strategy
    },
    /*#__PURE__*/
    React.createElement(RootCloseWrapper, {
      onRootClose: hidePopover,
      disabled: disableRootClose
    },
    /*#__PURE__*/
    React.createElement("div", {
      role: "dialog",
      ref: contentRef
    },
    /*#__PURE__*/
    React.createElement(PopoverHeader, {
      hasTitle: hasTitle
    }, hasTitle &&
    /*#__PURE__*/
    React.createElement(TitleBar, null, title), hasAltCloseButton && altCloseButton,
    /*#__PURE__*/
    React.createElement(CloseHelpText, {
      tabIndex: -1,
      ref: escMsgRef,
      "aria-label": "Press escape to close the Popover"
    })),
    /*#__PURE__*/
    React.createElement(PopoverBody, {
      hasAltCloseWithNoTitle: hasAltCloseWithNoTitle
    },
    /*#__PURE__*/
    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,

  /** Enable event handlers provided by Popper.js */
  enableEvents: PropTypes.bool,

  /** Sets the strategy for positioning the popover in Popper.js */
  strategy: PropTypes.oneOf(['absolute', 'fixed'])
} : {};
Popover.defaultProps = {
  placement: 'bottom',
  arrowSize: 'default',
  disableRootClose: false,
  hasCloseButton: false,
  hasAltCloseButton: false,
  disableFlipping: false,
  title: undefined,
  enableEvents: true,
  strategy: 'absolute'
};

var useDisableBodyScroll = function useDisableBodyScroll(shouldDisableScroll) {
  useEffect(function () {
    var newStyle = 'overflow: hidden;';

    var getCurrentStyle = function getCurrentStyle() {
      return document.body.getAttribute('style') || '';
    };

    var scrollDisabled = false;

    var disableScroll = function disableScroll() {
      var _context;

      scrollDisabled = true;
      document.body.setAttribute('style', _concatInstanceProperty(_context = "".concat(getCurrentStyle(), " ")).call(_context, newStyle));
    };

    var enableScroll = function enableScroll() {
      if (!scrollDisabled) return;
      scrollDisabled = false;
      document.body.setAttribute('style', // this will only replace one instance of newStyle, which is what we want.
      getCurrentStyle().replace(newStyle, ''));
    };

    if (shouldDisableScroll) {
      disableScroll();
    } else {
      enableScroll();
    }

    return enableScroll;
  }, [shouldDisableScroll]);
};

var ModalContext =
/*#__PURE__*/
React.createContext({});

var Header = styled.div(["align-items:baseline;background-color:", ";border-bottom:2px solid ", ";box-sizing:border-box;color:", ";display:flex;font-size:26px;justify-content:space-between;padding:15px;.small &{@media (min-width:", "){position:static;width:unset;}}.medium &{@media (min-width:", "){position:static;width:unset;}}.large &{@media (min-width:", "){position:static;width:unset;}}"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.brandColors.primary3;
}, function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.screenSize.phone;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.screenSize.desktop;
});
var Title = styled(Heading)(["margin:0;"]);
var DismissModal = styled(DismissButton)(["align-self:center;color:", ";font-size:18px;"], 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 (
    /*#__PURE__*/
    React.createElement(Header, otherProps,
    /*#__PURE__*/
    React.createElement(Title, {
      id: ariaId,
      level: level
    }, children), !hideCloseButton &&
    /*#__PURE__*/
    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]),
  ref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.any
  })])
} : {};
ModalHeader.defaultProps = {
  hideCloseButton: false,
  children: undefined,
  level: 4,
  ref: null
};

var ModalBody = styled.div(["color:", ";padding:15px;.small &{@media (min-width:", "){margin-top:unset;}}.medium &{@media (min-width:", "){margin-top:unset;}}.large &{@media (min-width:", "){margin-top:unset;}}"], function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.screenSize.phone;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.screenSize.desktop;
});

var ModalFooter = styled.div(["align-items:baseline;display:flex;padding:15px 15px 55px;text-align:right;button{width:auto;}@media (min-width:", "){padding:15px 15px 19px;}"], function (props) {
  return props.theme.screenSize.tablet;
});

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  .", " {\n    .background-overlay {\n      bottom: 0;\n      background-color: ", ";\n\n      left: 0;\n      max-height: 100%;\n      overflow-y: auto;\n      position: fixed;\n      right: 0;\n      top: 0;\n      transition: background-color ", "ms linear;\n      z-index: 1030;\n      -webkit-overflow-scrolling: touch;\n\n      &.ReactModal__Overlay--after-open {\n        ", "\n\n        &.ReactModal__Overlay--before-close {\n          background-color: ", ";\n        }\n      }\n    }\n\n    .modal-content {\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      margin: 0.5rem;\n      outline: 0;\n      opacity: 0;\n      position: absolute;\n      left: 0;\n      transform: translateY(0);\n      transition:\n        transform ", "ms ease-out ", "ms,\n        opacity ", "ms ease-out ", "ms;\n      ", ";\n\n      &.ReactModal__Content--after-open {\n        opacity: 1;\n        ", ";\n\n        &.ReactModal__Content--before-close {\n          opacity: 0;\n          ", ";\n        }\n      }\n\n      &.small {\n        @media (min-width: ", ") {\n          position: relative;\n          margin: ", "px auto;\n          width: ", ";\n        }\n      }\n\n      &.medium {\n        @media (min-width: ", ") {\n          position: relative;\n          margin: ", "px auto;\n          width: ", ";\n        }\n      }\n\n      &.large {\n        @media (min-width: ", ") {\n          position: relative;\n          margin: ", "px auto;\n          width: ", ";\n        }\n      }\n    }\n  }\n"]);

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

  return data;
}
var modalSize = {
  small: '300px',
  medium: '600px',
  large: '900px'
};
var animationTimeMs = 300;

var getModalMargin = function getModalMargin(windowHeight, modalHeight) {
  var fullMargin = windowHeight - modalHeight;
  var thirdTopMargin = fullMargin / 3;
  return Math.max(thirdTopMargin, 50);
};

var ModalStyles = createGlobalStyle(_templateObject(), function (_ref) {
  var theme = _ref.theme;
  return theme.portalClassName;
}, function (props) {
  var color = tinycolor(props.theme.colors.gray9);
  color.setAlpha(0);
  return color.toRgbString();
}, function () {
  return animationTimeMs / 2;
}, function (props) {
  if (!props.showBackdrop) return '';
  var color = tinycolor(props.theme.colors.gray9);
  color.setAlpha(0.5);
  return "background-color: ".concat(color.toRgbString(), ";");
}, function (props) {
  var color = tinycolor(props.theme.colors.gray9);
  color.setAlpha(0);
  return color.toRgbString();
}, function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.font.baseFontSize;
}, function () {
  return animationTimeMs;
}, function () {
  return animationTimeMs / 4;
}, function () {
  return animationTimeMs;
}, function () {
  return animationTimeMs / 4;
}, function (props) {
  return props.showAnimation ? "\n            transform: translateY(-50px);\n          " : '';
}, function (props) {
  return props.showAnimation ? "\n              transform: translateY(0);\n            " : '';
}, function (props) {
  return props.showAnimation ? "\n                transform: translateY(-50px);\n              " : '';
}, function (props) {
  return props.theme.screenSize.phone;
}, function (_ref2) {
  var theme = _ref2.theme;
  return getModalMargin(theme.windowHeight, theme.modalHeight);
}, modalSize.small, function (props) {
  return props.theme.screenSize.tablet;
}, function (_ref3) {
  var theme = _ref3.theme;
  return getModalMargin(theme.windowHeight, theme.modalHeight);
}, modalSize.medium, function (props) {
  return props.theme.screenSize.desktop;
}, function (_ref4) {
  var theme = _ref4.theme;
  return getModalMargin(theme.windowHeight, theme.modalHeight);
}, modalSize.large);

function Modal(_ref5) {
  var _context;

  var animation = _ref5.animation,
      backdrop = _ref5.backdrop,
      children = _ref5.children,
      escapeExits = _ref5.escapeExits,
      onEnter = _ref5.onEnter,
      onExit = _ref5.onExit,
      onHide = _ref5.onHide,
      show = _ref5.show,
      size = _ref5.size,
      parentSelector = _ref5.parentSelector,
      className = _ref5.className,
      overlayRef = _ref5.overlayRef,
      contentRef = _ref5.contentRef,
      other = _objectWithoutProperties(_ref5, ["animation", "backdrop", "children", "escapeExits", "onEnter", "onExit", "onHide", "show", "size", "parentSelector", "className", "overlayRef", "contentRef"]);

  var ariaId = useUniqueId(other.id);
  var portalClassName = "ReactModalPortal-".concat(useUniqueId());

  var _useRootNodeLocator = useRootNodeLocator(document.body),
      _useRootNodeLocator2 = _slicedToArray(_useRootNodeLocator, 2),
      rootNode = _useRootNodeLocator2[0],
      RootNodeLocator = _useRootNodeLocator2[1];

  var _useState = useState(300),
      _useState2 = _slicedToArray(_useState, 2),
      modalHeight = _useState2[0],
      setModalHeight = _useState2[1];

  var _useState3 = useState(show),
      _useState4 = _slicedToArray(_useState3, 2),
      shouldShow = _useState4[0],
      setShouldShow = _useState4[1];

  var _useState5 = useState(window.innerHeight),
      _useState6 = _slicedToArray(_useState5, 2),
      windowHeight = _useState6[0],
      setWindowHeight = _useState6[1];

  var modalRef = useRef(null);
  var innerContentRef = useRef(null);

  var callRef = function callRef(ref, element) {
    if (ref) {
      if (typeof ref === 'function') {
        ref(element);
      } else {
        // eslint-disable-next-line no-param-reassign
        ref.current = element;
      }
    }
  };

  var setContentRef = useCallback(function (contentElement) {
    callRef(contentRef, contentElement);
    innerContentRef.current = contentElement;
  });
  var modalHeightRef = useCallback(function (modalElement) {
    callRef(overlayRef, modalElement);
    var newHeight = 0;

    if (modalElement) {
      modalRef.current = modalElement;
      newHeight = modalElement.offsetHeight;
    }

    if (innerContentRef.current) {
      var contRefHeight = innerContentRef.current.offsetHeight;
      if (contRefHeight < newHeight) newHeight = contRefHeight;
    }

    setModalHeight(newHeight);
  });
  var modalParentSelector = parentSelector || useCallback(function () {
    return rootNode;
  }, [rootNode]);
  useEffect(function () {
    if (!animation || show) {
      setShouldShow(show);
      return _noop;
    }

    var mounted = true;

    _setTimeout(function () {
      if (!mounted) return;
      setShouldShow(false);
    }, animationTimeMs);

    return function () {
      mounted = false;
    };
  }, [show, animation]);
  useEffect(function () {
    var setHeight = _debounce(function () {
      return setWindowHeight(window.innerHeight);
    }, 100);

    window.addEventListener('resize', setHeight);
    return function () {
      return window.removeEventListener('resize', setHeight);
    };
  }, []);
  useEffect(function () {
    if (modalRef.current && modalRef.current.scroll) {
      modalRef.current.scroll(0, 0);
    }
  }, [modalRef.current]);
  useDisableBodyScroll(show);
  var shouldCloseOnOverlayClick = backdrop !== 'static' && backdrop;
  return (
    /*#__PURE__*/
    React.createElement(ThemeProvider, {
      theme: {
        modalHeight: modalHeight,
        windowHeight: windowHeight,
        portalClassName: portalClassName
      }
    },
    /*#__PURE__*/
    React.createElement(RootNodeLocator, null), shouldShow ?
    /*#__PURE__*/
    React.createElement(ModalStyles, {
      showAnimation: animation,
      showBackdrop: backdrop
    }) : null,
    /*#__PURE__*/
    React.createElement(ModalContext.Provider, {
      value: {
        onHide: onHide,
        ariaId: ariaId
      }
    },
    /*#__PURE__*/
    React.createElement(ReactModal, _extends({
      portalClassName: portalClassName,
      className: _concatInstanceProperty(_context = "".concat(className, " ")).call(_context, size, " modal-content"),
      overlayClassName: "background-overlay",
      closeTimeoutMS: animation ? animationTimeMs : null,
      isOpen: show,
      aria: {
        labelledby: ariaId
      },
      shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
      onRequestClose: onHide,
      onAfterOpen: onEnter,
      onAfterClose: onExit,
      shouldCloseOnEsc: escapeExits,
      parentSelector: modalParentSelector,
      contentRef: setContentRef,
      overlayRef: modalHeightRef
    }, other), 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.Header, 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']),

  /** Selects the parent */
  parentSelector: PropTypes.func,
  className: PropTypes.string,
  overlayRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.any
  })]),
  contentRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
    current: PropTypes.any
  })])
} : {};
Modal.defaultProps = {
  animation: true,
  backdrop: true,
  escapeExits: true,
  onEnter: _noop,
  onExit: _noop,
  onHide: _noop,
  show: false,
  size: 'medium',
  children: undefined,
  parentSelector: null,
  className: null,
  overlayRef: null,
  contentRef: null
};
Modal.Header = ModalHeader;
Modal.Body = ModalBody;
Modal.Footer = ModalFooter;

var ModalButtonContainer = styled.div(["display:flex;flex-direction:column;justify-content:flex-end;width:100%;@media (min-width:", "){flex-direction:row;}"], function (props) {
  return props.theme.screenSize.tablet;
});

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 _context; _forEachInstanceProperty(_context = ownKeys$3(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$3(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

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

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

  return data;
}
var PaneBase = styled(ReactModal)(["background:", ";box-shadow:0 8px 8px ", ";display:flex;flex-direction:column;height:100%;min-width:100px;transition:transform 0.5s;width:100%;will-change:transform;&:focus{outline-style:none;}@media (min-width:", "){width:", ";}"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.boxShadowDark;
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var PaneRight = styled(PaneBase)(["margin-left:auto;transform:translateX(100%);&.ReactModal__Content--after-open{transform:translateX(0%);}&.ReactModal__Content--before-close{transform:translateX(100%);}"]);
var PaneLeft = styled(PaneBase)(["margin-right:auto;transform:translateX(-100%);&.ReactModal__Content--after-open{transform:translateX(0%);}&.ReactModal__Content--before-close{transform:translateX(-100%);}"]);
var PaneBottom = styled(PaneBase)(["height:90vh;margin-top:10vh;transform:translateY(100%);&.ReactModal__Content--after-open{transform:translateY(0%);}&.ReactModal__Content--before-close{transform:translateY(100%);}"]);
var Header$1 = styled.div(["align-items:center;background-color:", ";color:", ";display:flex;flex:0 0 64px;height:64px;"], function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.white;
});
var CloseLink = styled(LinkButton)(["cursor:pointer;opacity:0.7;padding:16px;"]);
var TitleWrapper = styled.div(["display:flex;flex:1;flex-direction:column;min-width:0;"]);
var TitleText = styled(Heading)(["margin:0;max-width:80%;overflow:hidden;padding:1px;text-overflow:ellipsis;white-space:nowrap;"]);
var SubTitle = styled.div(["font-size:12px;margin-top:2px;"]);
var Content = styled.div(["flex:1 1 auto;overflow-y:auto;padding:1.5em;position:relative;"]);
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(_templateObject$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,
      parentSelector = _ref.parentSelector,
      rest = _objectWithoutProperties(_ref, ["isOpen", "title", "subTitle", "shouldCloseOnEsc", "onRequestClose", "onAfterOpen", "children", "closeIcon", "closeIconScreenReaderText", "from", "headingLevel", "headingSize", "closeTimeout", "overlayStyles", "contentStyles", "appElement", "parentSelector"]);

  var _useRootNodeLocator = useRootNodeLocator(document.body),
      _useRootNodeLocator2 = _slicedToArray(_useRootNodeLocator, 2),
      rootNode = _useRootNodeLocator2[0],
      RootNodeLocator = _useRootNodeLocator2[1];

  useDisableBodyScroll(isOpen);
  var modalParentSelector = parentSelector || useCallback(function () {
    return rootNode;
  }, [rootNode]);
  var Pane = getPane(from);
  var styles = {
    overlay: _objectSpread$3(_objectSpread$3({}, defaultStyles.overlay), overlayStyles),
    content: _objectSpread$3(_objectSpread$3({}, defaultStyles.content), contentStyles)
  };

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

  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement(GlobalPaneStyles, null),
    /*#__PURE__*/
    React.createElement(RootNodeLocator, null),
    /*#__PURE__*/
    React.createElement(Pane, _extends({
      style: styles,
      closeTimeoutMS: closeTimeout,
      isOpen: isOpen,
      onAfterOpen: onAfterOpen,
      onRequestClose: onRequestClose,
      shouldCloseOnEsc: shouldCloseOnEsc,
      contentLabel: "Modal \"".concat(title, "\""),
      parentSelector: modalParentSelector
    }, rest),
    /*#__PURE__*/
    React.createElement(Header$1, null,
    /*#__PURE__*/
    React.createElement(CloseLink, {
      onClick: onRequestClose
    }, closeIcon ||
    /*#__PURE__*/
    React.createElement(Icon, {
      name: "remove",
      size: 34
    }),
    /*#__PURE__*/
    React.createElement(ScreenReaderText$1, null, closeIconScreenReaderText)),
    /*#__PURE__*/
    React.createElement(TitleWrapper, null,
    /*#__PURE__*/
    React.createElement(TitleText, {
      level: headingLevel,
      size: headingSize
    }, title),
    /*#__PURE__*/
    React.createElement(SubTitle, null, subTitle))),
    /*#__PURE__*/
    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,
  parentSelector: PropTypes.func
} : {};
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,
  parentSelector: null
};

var StyledButton$3 = styled.button(["background-color:", ";border:2px solid ", ";border-radius:", ";box-sizing:border-box;color:", ";cursor:pointer;display:block;font-family:inherit;font-size:", ";font-weight:", ";line-height:", ";min-width:100px;outline:none;padding-bottom:", ";padding-left:", ";padding-right:", ";padding-top:", ";text-align:center;text-decoration:none;text-transform:", ";transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;@media (min-width:", "){display:", ";width:", ";}&:focus{box-shadow:0 0 0 0.2rem ", ";}@media (hover:hover),(-ms-high-contrast:none){&:hover{background-color:", ";color:", ";}}&:active,&.pressed{background-color:", ";color:", ";}&.pressed{box-shadow:inset 0 3px 5px rgba(0,0,0,0.25);}&:active:focus,&.pressed:focus{box-shadow:inset 0 3px 5px rgba(0,0,0,0.25),0 0 0 0.2rem ", ";}&[disabled]{background-color:#e6e6e6;border-color:#e6e6e6;color:#ccc;cursor:not-allowed;&:hover{background-color:#e6e6e6;border-color:#e6e6e6;color:#ccc;}> *{pointer-events:none;}}"], function (props) {
  return props.colors.bgColor;
}, function (props) {
  return props.colors.textColor;
}, function (props) {
  return props.buttonSize.borderRadius;
}, function (props) {
  return props.colors.textColor;
}, function (props) {
  return props.buttonSize.fontSize;
}, function (props) {
  return props.buttonSize.fontWeight || 'normal';
}, function (props) {
  return props.buttonSize.lineHeight || props.theme.font.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.colors.focusBoxShadowColor;
}, function (props) {
  return props.colors.textColor;
}, function (props) {
  return props.colors.hoverTextColor;
}, function (props) {
  return props.colors.textColor;
}, function (props) {
  return props.colors.hoverTextColor;
}, function (props) {
  return props.colors.focusBoxShadowColor;
});
var OutlineButton =
/*#__PURE__*/
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];
  var isInheritedStyle = styleType === 'inherited';
  var focusBoxShadowColor = tinycolor.mix(variant.bgColor, theme.colors.black, 14);
  focusBoxShadowColor.setAlpha(0.5);
  var buttonColors = {
    textColor: isInheritedStyle ? 'inherited' : variant.bgColor,
    bgColor: isInheritedStyle ? 'inherited' : theme.colors.white,
    hoverTextColor: isInheritedStyle ? 'inherited' : theme.colors.white,
    focusBoxShadowColor: isInheritedStyle ? theme.colors.gray4 : focusBoxShadowColor.toRgbString()
  };
  return (
    /*#__PURE__*/
    React.createElement(StyledButton$3, _extends({
      ref: ref,
      block: block,
      buttonSize: buttonSize,
      colors: buttonColors,
      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 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 ? OutlineButton : Button;
  var styles = isOutline ? theme.buttonStyles.outlineButton : theme.buttonStyles.button;
  return (
    /*#__PURE__*/
    React.createElement(ToggleButtonType, _extends({}, buttonProps, {
      onClick: toggleButton,
      styleType: styleType,
      size: size,
      block: block,
      isOutline: isOutline,
      className: isPressed ? "".concat(buttonProps.className || '', " pressed") : buttonProps.className,
      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 =
/*#__PURE__*/
React.createContext(false);

var StyledPanel = styled.div(["background-color:", ";display:", ";position:absolute;z-index:999;"], function (props) {
  return props.theme.colors.gray2;
}, function (props) {
  return props.isOpen ? 'block' : 'none';
});
var StyledDismissButton = styled(DismissButton)(["margin-left:auto;margin-right:4px;"]);
var Header$2 = styled.header(["align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:", ";padding-left:11px;padding-right:5px;padding-top:", ";"], function (props) {
  return props.hasHeaderContent ? '10px' : '0';
}, function (props) {
  return props.hasHeaderContent ? '5px' : '0';
});
var StyledChildrenContainer = styled.div(["display:flex;flex-direction:", ";flex-wrap:wrap;"], 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 (
    /*#__PURE__*/
    React.createElement(StyledPanel, _extends({
      isOpen: isOpen
    }, other),
    /*#__PURE__*/
    React.createElement(Header$2, {
      hasHeaderContent: hasHeaderContent
    }, hasHeaderContent &&
    /*#__PURE__*/
    React.createElement("span", null, headerContent),
    /*#__PURE__*/
    React.createElement(StyledDismissButton, {
      onClick: onClose
    })),
    /*#__PURE__*/
    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
};

var StyledMenuSection = styled.section(["padding-top:", ";padding-bottom:", ";border-bottom:", ";"], 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(["padding-left:10px;"]);
var StyledChildrenContainer$1 = styled.section(["padding:15px 20px 0px 20px;"]);

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 (
    /*#__PURE__*/
    React.createElement(StyledMenuSection, _extends({
      isLast: isLast,
      isFirst: isFirst,
      inline: inline,
      isOnlySection: isOnlySection
    }, other), title &&
    /*#__PURE__*/
    React.createElement(StyledHeader, {
      "aria-label": title
    }, title), children &&
    /*#__PURE__*/
    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
};

var Backdrop = styled.div(["background-color:black;bottom:0;cursor:auto;left:0;opacity:0.5;position:fixed;right:0;top:0;z-index:auto;display:", ";"], 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 (
    /*#__PURE__*/
    React.createElement(RootCloseWrapper, {
      onRootClose: closeMenu,
      disabled: !rootClose
    },
    /*#__PURE__*/
    React.createElement("div", other, hasBackdrop &&
    /*#__PURE__*/
    React.createElement(Backdrop, {
      isMenuOpen: isMenuOpen,
      onClick: closeMenu
    }),
    /*#__PURE__*/
    React.createElement(ToggleButton, {
      onClick: toggleMenu,
      isPressed: isMenuOpen,
      styleType: openButtonType,
      "aria-expanded": isMenuOpen
    }, buttonContent),
    /*#__PURE__*/
    React.createElement(InlineContext.Provider, {
      value: inline
    },
    /*#__PURE__*/
    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
};

var TabButton = styled.button(["background-color:", ";border:1px solid ", ";box-shadow:", ";color:", ";display:inline-block;font-size:inherit;line-height:", ";padding:10px;text-align:left;z-index:1;&:focus{outline:none;}@media (min-width:", "){background-color:", ";border:", ";border-bottom-color:", ";box-shadow:none;color:", ";padding:10px 15px;margin:0 2px 0px 0;&:hover,&:focus{background-color:", ";}}"], 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.font.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 (
    /*#__PURE__*/
    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) &&
    /*#__PURE__*/
    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: ''
};

var TabList = styled.div(["display:flex;flex-direction:column;font-size:inherit;overflow:hidden;@media (max-width:", "){width:100%;}@media (min-width:", "){flex-direction:row;justify-content:flex-start;}"], function (props) {
  return props.theme.screenSize.desktop;
}, function (props) {
  return props.theme.screenSize.desktop;
});
var TabContent = styled.div(["margin-top:-1px;background-color:", ";border-top:1px solid ", ";"], 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 (
      /*#__PURE__*/
      React.cloneElement(child, {
        selected: index === selectedIndex,
        action: function () {
          var _action = _asyncToGenerator(
          /*#__PURE__*/
          _regeneratorRuntime.mark(function _callee(header) {
            var canChange;
            return _regeneratorRuntime.wrap(function _callee$(_context2) {
              while (1) {
                switch (_context2.prev = _context2.next) {
                  case 0:
                    _context2.next = 2;
                    return canTabChange(header);

                  case 2:
                    canChange = _context2.sent;

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

                  case 4:
                  case "end":
                    return _context2.stop();
                }
              }
            }, _callee);
          }));

          function action(_x) {
            return _action.apply(this, arguments);
          }

          return action;
        }()
      })
    );
  });

  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement(TabList, {
      role: "tablist"
    }, elements),
    /*#__PURE__*/
    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;

var StripedContainerWrapper = styled.div(["> *{display:block;padding:20px;&:nth-child(even){background-color:", ";}&:nth-child(odd){background-color:", ";}}"], function (props) {
  return props.evenColor;
}, function (props) {
  return props.oddColor;
});

function StripedContainer(props) {
  var _context;

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

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

var Label = styled.label(["color:", ";cursor:pointer;font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-size:", ";font-weight:bold;line-height:", ";margin-bottom:5px;display:inline-block;&[disabled]{cursor:not-allowed;}@media (min-width:", "){margin-right:20px;}"], function (props) {
  return props.theme.colors.gray9;
}, function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.baseLineHeight;
}, function (props) {
  return props.theme.screenSize.tablet;
});

var PromptType = {
  readAloud: 'readAloud',
  doNotReadAloud: 'doNotReadAloud'
};

var IconWrapper = styled.div(["background-color:", ";padding:6px 0 0 6px;"], function (promptProps) {
  return promptProps.bannerBgColor;
});
var StyledIcon$1 = styled(Icon)(["name:", ";color:", ";padding-right:5px;"], function (promptProps) {
  return promptProps.iconName;
}, function (promptProps) {
  return promptProps.iconColor;
});
var ContentWrapper$1 = styled.div(["align-items:center;background-color:", ";color:black;border-radius:2px;display:block;margin-bottom:25px;padding:15px;"], function (promptProps) {
  return promptProps.bgColor;
});
var Content$1 = styled.div(["font-size:18px;align-self:center;word-break:break-word;"]);
var BannerLabel = styled(Label)(["letter-spacing:0.5px;font-size:20px;font-weight:500;color:", ";"], function (promptProps) {
  return promptProps.bannerTextColor;
});

var Prompt = function Prompt(props) {
  var isContentReadAloud = props.isContentReadAloud,
      children = props.children;
  var theme = useTheme();
  var promptStyles = isContentReadAloud ? theme.promptStyles[PromptType.readAloud] : theme.promptStyles[PromptType.doNotReadAloud];
  var inlineIconText = isContentReadAloud ?
  /*#__PURE__*/
  React.createElement(BannerLabel, {
    bannerTextColor: promptStyles.bannerTextColor
  }, "Read Aloud") :
  /*#__PURE__*/
  React.createElement(BannerLabel, {
    bannerTextColor: promptStyles.bannerTextColor
  }, "Do Not Read Aloud");
  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement(IconWrapper, {
      bannerBgColor: promptStyles.bannerBgColor,
      textColor: promptStyles.textColor
    },
    /*#__PURE__*/
    React.createElement(StyledIcon$1, {
      name: promptStyles.iconName,
      iconColor: promptStyles.iconColor,
      size: 30
    }), inlineIconText),
    /*#__PURE__*/
    React.createElement(ContentWrapper$1, {
      bgColor: promptStyles.bgColor
    },
    /*#__PURE__*/
    React.createElement(Content$1, null, children)))
  );
};

Prompt.defaultProps = {
  isContentReadAloud: true,
  children: null
};
Prompt.propTypes = process.env.NODE_ENV !== "production" ? {
  isContentReadAloud: PropTypes.bool,
  children: PropTypes.node
} : {};

var TableBase = styled.table(["border-collapse:collapse;border:0;border-spacing:0;margin:0 0 25px 0;padding:0;width:100%;caption{padding-top:8px;padding-bottom:8px;color:", ";font-size:1.3em;margin:0.5em 0;text-align:left;}thead th{border-bottom:2px solid ", ";}tbody tr:not(:first-child){th,td{border-top:1px solid ", ";}}th{font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-weight:bold;line-height:", ";padding:", ";text-align:left;vertical-align:bottom;}td{line-height:", ";padding:", ";vertical-align:top;}&& tbody{", ";th{vertical-align:top;}}&& tbody{", ";}"], 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.font.baseLineHeight;
}, function (props) {
  return props.cellPadding;
}, function (props) {
  return props.theme.font.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 (
    /*#__PURE__*/
    React.createElement(TableBase, _extends({
      cellPadding: cellPadding
    }, rest))
  );
} // kept to preserve backward-compatibility for now


var TableRow = styled.tr([""]);
var TableBodyCell = styled.td([""]);
var TableHeaderCell = styled.th([""]);
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
};

var TableBase$1 = styled(Table)(["tbody{th{font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-weight:normal;}}&&&{@media (max-width:", "){background-color:", ";thead{border:none;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}tr{background-color:", ";box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2);display:block;margin:0.625em;padding:0.35em;}td,tbody th{border-top:1px solid ", ";display:flex;justify-content:space-between;padding:0.625em;text-align:right;&:before{content:attr(data-label);font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-weight:bold;margin-right:2em;max-width:25%;text-align:left;}&:first-child{border-top:0;}&:last-child{border-bottom:0;}}}}"], 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 (
    /*#__PURE__*/
    React.createElement(TableBase$1, props)
  );
}

function _createSuper2(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !_Reflect$construct) return false;
    if (_Reflect$construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(_Reflect$construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = _Reflect$construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

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);

    var _super = _createSuper2(windowSize);

    function windowSize() {
      var _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 = _super.call.apply(_super, _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 (
          /*#__PURE__*/
          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;
}

var OuterWrapper = styled.div(["overflow:hidden;position:relative;"]);
var InnerWrapper = styled.div(["alignitems:center;display:flex;height:100%;position:relative;white-space:nowrap;z-index:0;"]);
var ScrollIcon = styled.div(["align-items:center;cursor:pointer;display:flex;height:100%;outline:0;position:absolute;top:0;z-index:1;"]);

var _StyledScrollIcon2 = styled(ScrollIcon)(["right:0;text-align:right;"]);

var _StyledScrollIcon = styled(ScrollIcon)(["left:0;text-align:left;"]);

var ArrowContainer = styled.div(["align-items:center;background-color:", ";border-radius:50%;box-shadow:0 1px 1px ", ";color:", ";display:flex;padding:0.5em;"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.boxShadowDark;
}, function (props) {
  return props.theme.colors.gray9;
});

var generateOnArrowKeyDownHandler = function generateOnArrowKeyDownHandler(onKeyDown) {
  return function (event) {
    var code = event.code.toLowerCase();

    if (code === 'enter' || code === 'space') {
      onKeyDown();
    }
  };
};

var ArrowLeft = function ArrowLeft(_ref) {
  var onClick = _ref.onClick;
  return (
    /*#__PURE__*/
    React.createElement(_StyledScrollIcon, {
      role: "button",
      tabIndex: 0,
      onClick: onClick,
      onKeyDown: generateOnArrowKeyDownHandler(onClick)
    },
    /*#__PURE__*/
    React.createElement(ArrowContainer, null,
    /*#__PURE__*/
    React.createElement(Icon, {
      name: "chevron-left"
    })))
  );
};

ArrowLeft.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func.isRequired
} : {};

var ArrowRight = function ArrowRight(_ref2) {
  var onClick = _ref2.onClick;
  return (
    /*#__PURE__*/
    React.createElement(_StyledScrollIcon2, {
      role: "button",
      tabIndex: 0,
      onClick: onClick,
      onKeyDown: generateOnArrowKeyDownHandler(onClick)
    },
    /*#__PURE__*/
    React.createElement(ArrowContainer, null,
    /*#__PURE__*/
    React.createElement(Icon, {
      name: "chevron-right"
    })))
  );
};

ArrowRight.propTypes = process.env.NODE_ENV !== "production" ? {
  onClick: PropTypes.func.isRequired
} : {};

function HorizontalScrollWrapper(_ref3) {
  var windowWidth = _ref3.windowWidth,
      children = _ref3.children,
      slideAmount = _ref3.slideAmount,
      otherProps = _objectWithoutProperties(_ref3, ["windowWidth", "children", "slideAmount"]);

  var rootRef = useRef(null);
  var menuRef = useRef(null);

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      rootWidth = _useState2[0],
      setRootWidth = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      menuWidth = _useState4[0],
      setMenuWidth = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      xPosition = _useState6[0],
      setXPosition = _useState6[1];

  var _useState7 = useState(0),
      _useState8 = _slicedToArray(_useState7, 2),
      cursorXPosition = _useState8[0],
      setCursorXPosition = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      hasOverflow = _useState10[0],
      setHasOverflow = _useState10[1];

  var _useState11 = useState(false),
      _useState12 = _slicedToArray(_useState11, 2),
      isDragging = _useState12[0],
      setIsDragging = _useState12[1];

  useEffect(function () {
    var currentRootWidth = rootRef.current ? rootRef.current.clientWidth : 0;
    var currentMenuWidth = menuRef.current ? menuRef.current.scrollWidth : 0;

    if (currentRootWidth <= currentMenuWidth) {
      setRootWidth(currentRootWidth);
      setMenuWidth(currentMenuWidth);
      setHasOverflow(true);
      var absoluteXPosition = Math.abs(xPosition);

      if (currentRootWidth + absoluteXPosition > currentMenuWidth) {
        var distance = Math.abs(currentMenuWidth - currentRootWidth + xPosition);
        setXPosition(xPosition + distance);
      }
    } else if (hasOverflow) {
      setHasOverflow(false);
    }
  }, [windowWidth, rootRef.current, menuRef.current]);

  var handleDownEvent = function handleDownEvent(downEvent) {
    if (!hasOverflow) return;
    var cursorX = 0;

    if (downEvent.type === 'mousedown') {
      cursorX = downEvent.pageX - xPosition;
    } else if (downEvent.type === 'touchstart') {
      var touchEvent = downEvent.changedTouches[0];
      cursorX = touchEvent.pageX - xPosition;
    }

    setCursorXPosition(cursorX);
    setIsDragging(true);
  };

  var handleMoveEvent = function handleMoveEvent(moveEvent) {
    if (!hasOverflow || !isDragging) return;
    var distance = 0;

    if (moveEvent.type === 'mousemove') {
      moveEvent.preventDefault();
      distance = moveEvent.pageX - cursorXPosition;
    } else if (moveEvent.type === 'touchmove') {
      var touchEvent = moveEvent.changedTouches[0];
      distance = touchEvent.pageX - cursorXPosition;
    }

    var newXPosition = (xPosition + distance) * 0.5;

    if (newXPosition > 0) {
      newXPosition = 0;
    }

    if (-newXPosition > menuWidth - rootWidth) {
      newXPosition = -(menuWidth - rootWidth);
    }

    setXPosition(newXPosition);
  };

  var handleUpEvent = function handleUpEvent() {
    if (!hasOverflow || !isDragging) return;
    setIsDragging(false);
  };

  var handleLeftClick = function handleLeftClick(event) {
    event.stopPropagation();
    event.preventDefault();
    var newXPosition = xPosition + slideAmount;

    if (newXPosition > 0) {
      newXPosition = 0;
    }

    setXPosition(newXPosition);
  };

  var handleRightClick = function handleRightClick(event) {
    event.stopPropagation();
    event.preventDefault();
    var newXPosition = xPosition - slideAmount;

    if (-newXPosition > menuWidth - rootWidth) {
      newXPosition = -(menuWidth - rootWidth);
    }

    setXPosition(newXPosition);
  };

  var handleKeyEvent = function handleKeyEvent(event) {
    var code = event.key.toLowerCase();
    if (code !== 'tab') return;
    var element = document.activeElement.parentElement;
    var style = window.getComputedStyle ? getComputedStyle(element, null) : element.currentStyle;
    var marginLeft = _parseInt(style.marginLeft, 10) || 0;
    var marginRight = _parseInt(style.marginRight, 10) || 0;
    var tabSlide = element.offsetWidth + marginLeft + marginRight;

    if (event.shiftKey) {
      var newXPosition = xPosition + tabSlide;

      if (newXPosition > 0) {
        newXPosition = 0;
      }

      setXPosition(newXPosition);
    } else {
      var _newXPosition = xPosition - tabSlide;

      if (-_newXPosition > menuWidth - rootWidth) {
        _newXPosition = -(menuWidth - rootWidth);
      }

      setXPosition(_newXPosition);
    }
  };

  return (
    /*#__PURE__*/
    React.createElement(OuterWrapper, _extends({
      ref: rootRef
    }, otherProps),
    /*#__PURE__*/
    React.createElement(InnerWrapper, {
      ref: menuRef,
      role: "presentation",
      onMouseDown: handleDownEvent,
      onMouseMove: handleMoveEvent,
      onMouseUp: handleUpEvent,
      onMouseLeave: handleUpEvent,
      onTouchStart: handleDownEvent,
      onTouchMove: handleMoveEvent,
      onTouchEnd: handleUpEvent,
      onKeyUp: handleKeyEvent,
      style: {
        transform: "translate3d(".concat(xPosition, "px, 0, 0)"),
        transition: "".concat(isDragging ? '' : 'transform 0.3s ease-in-out')
      }
    }, children), hasOverflow && xPosition < 0 &&
    /*#__PURE__*/
    React.createElement(ArrowLeft, {
      onClick: handleLeftClick
    }), hasOverflow && -xPosition < menuWidth - rootWidth &&
    /*#__PURE__*/
    React.createElement(ArrowRight, {
      onClick: handleRightClick
    }))
  );
}

HorizontalScrollWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
  /** @ignore */
  windowWidth: PropTypes.number,
  children: PropTypes.node,

  /** Set the number of pixels the contents will move when clicking left/right arrows */
  slideAmount: PropTypes.number
} : {};
HorizontalScrollWrapper.defaultProps = {
  windowWidth: undefined,
  children: null,
  slideAmount: 300
};
var HorizontalScrollWrapper$1 = withWindowSize(HorizontalScrollWrapper);

var SkeletonContainer = styled.div(["position:relative;background-color:", ";&::after{animation:loading-keyframes 2s linear infinite;background-size:50%;background-repeat:no-repeat;background-image:linear-gradient( -60deg,", " 0,", " 40%,", " 50%,", " 60%,", " 100% );content:'';display:block;height:100%;left:0;position:absolute;top:0;width:100%;}@keyframes loading-keyframes{0%{background-position:-150% 0;}75%{background-position:250% 0;}100%{background-position:250% 0;}}"], function (_ref) {
  var skeleton = _ref.theme.skeleton;
  return skeleton.shimmerColor;
}, function (_ref2) {
  var skeleton = _ref2.theme.skeleton;
  return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
}, function (_ref3) {
  var skeleton = _ref3.theme.skeleton;
  return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
}, function (_ref4) {
  var skeleton = _ref4.theme.skeleton;
  return tinycolor(skeleton.shimmerColor).setAlpha(0.8).toRgbString();
}, function (_ref5) {
  var skeleton = _ref5.theme.skeleton;
  return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
}, function (_ref6) {
  var skeleton = _ref6.theme.skeleton;
  return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
});
var SkeletonShape = styled.div(["background-color:", ";"], function (_ref7) {
  var skeleton = _ref7.theme.skeleton;
  return skeleton.shapeColor;
});

var LoadingSkeleton = function LoadingSkeleton(_ref8) {
  var shapeColor = _ref8.shapeColor,
      shimmerColor = _ref8.shimmerColor,
      props = _objectWithoutProperties(_ref8, ["shapeColor", "shimmerColor"]);

  var theme = useTheme();
  var colors = theme.colors;
  var shimmer = shimmerColor || colors.white;
  var shape = shapeColor || colors.gray3;
  var skeleton = {
    shimmerColor: shimmer,
    shapeColor: shape
  };
  return (
    /*#__PURE__*/
    React.createElement(ThemeProvider, {
      theme: {
        skeleton: skeleton
      }
    },
    /*#__PURE__*/
    React.createElement(SkeletonContainer, props))
  );
};

LoadingSkeleton.propTypes = process.env.NODE_ENV !== "production" ? {
  shapeColor: PropTypes.string,
  shimmerColor: PropTypes.string
} : {};
LoadingSkeleton.defaultProps = {
  shapeColor: null,
  shimmerColor: null
};
LoadingSkeleton.Shape = SkeletonShape;

var ValidationContext = /*#__PURE__*/
React.createContext('default');

var FlexControl = styled.div(["color:", ";display:flex;flex-wrap:wrap;flex-direction:column;margin-bottom:25px;>[role=\"group\"]{margin-bottom:0;}select{border-color:", ";box-shadow:", ";}input:focus,select:focus{border-color:", ";box-shadow:", ";}", "}", ";"], 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 (
    /*#__PURE__*/
    React.createElement(OrientationContext.Provider, {
      value: orientation
    },
    /*#__PURE__*/
    React.createElement(FlexControl, _extends({
      textColor: textColor,
      borderOffset: borderOffset,
      validationState: validationState
    }, theme.validationInputColor[validationState], {
      layoutOrientation: orientation,
      hasValidationBorder: hasValidationBorder
    }, other),
    /*#__PURE__*/
    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
};

var ValidationIcon = styled(Icon)(["align-self:flex-start;font-size:35px;margin-right:5px;"]);
var HelpText = styled.div(["align-items:center;color:inherit;display:inline-flex;margin-top:5px;margin-bottom:10px;width:100%;"]);

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

  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  return (
    /*#__PURE__*/
    React.createElement(HelpText, props, hasValidationIcon && children && validationState !== 'default' &&
    /*#__PURE__*/
    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
};

var InputBase = styled.input(["border:1px solid ", ";border-radius:2px;box-shadow:", ";box-sizing:border-box;color:", ";font-size:", ";font-weight:normal;height:39px;line-height:", ";min-width:0;padding:6px 12px;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;width:100%;&:focus{border-color:", ";box-shadow:", ";outline:0;}&:disabled{background-color:", ";cursor:not-allowed;}&:read-only{background-color:", ";cursor:text;}"], function (props) {
  return props.borderColor;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.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 defaultBorderRadius = '2px';
var AddOn = styled.div(["background-color:", ";border:1px solid ", ";border-radius:", ";box-sizing:border-box;color:", ";display:flex;flex-direction:column;height:39px;justify-content:center;line-height:1;margin:0;outline:0;padding:6px 11px;"], 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)(["border-bottom-right-radius:0;border-right:none;border-top-right-radius:0;"]);
var Append = styled(AddOn)(["border-bottom-left-radius:0;border-left:none;border-top-left-radius:0;"]);
var InputWrapper = styled.div(["display:flex;"]);

var defaultBorderRadius$1 = '2px';
var TextboxBase = styled(InputBase)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";border-top-left-radius:", ";border-top-right-radius:", ";display:table-cell;-webkit-appearance:none;"], 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 =
/*#__PURE__*/
React.forwardRef(function Textbox(props, ref) {
  var prependIconName = props.prependIconName,
      appendIconName = props.appendIconName,
      type = props.type,
      additionalTextProps = _objectWithoutProperties(props, ["prependIconName", "appendIconName", "type"]);

  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 (
    /*#__PURE__*/
    React.createElement(InputWrapper, null, hasPrepend &&
    /*#__PURE__*/
    React.createElement(Prepend, {
      addOnTextColor: addOnTextColor,
      addOnBgColor: addOnBgColor,
      "aria-hidden": "true",
      onClick: focusInput
    },
    /*#__PURE__*/
    React.createElement(Icon, {
      "aria-hidden": "true",
      name: prependIconName,
      size: 18
    })),
    /*#__PURE__*/
    React.createElement(TextboxBase, _extends({
      hasAppend: hasAppend,
      hasPrepend: hasPrepend,
      ref: inputRef,
      type: type
    }, additionalTextProps, theme.validationInputColor[validationState])), hasAppend &&
    /*#__PURE__*/
    React.createElement(Append, {
      addOnTextColor: addOnTextColor,
      addOnBgColor: addOnBgColor,
      "aria-hidden": "true",
      onClick: focusInput
    },
    /*#__PURE__*/
    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,

  /** The type attribute for the textboxa */
  type: PropTypes.string
} : {};
Textbox.defaultProps = {
  prependIconName: undefined,
  appendIconName: undefined,
  type: 'text'
};

var TextareaBase = styled.textarea(["border:1px solid ", ";border-radius:2px;box-shadow:", ";box-sizing:border-box;color:", ";font-size:", ";font-weight:normal;line-height:", ";min-width:0;padding:6px 12px;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;&:focus{border-color:", ";box-shadow:", ";outline:0;}&:disabled{background-color:", ";cursor:not-allowed;}&:read-only{background-color:", ";cursor:text;}"], function (props) {
  return props.borderColor;
}, function (props) {
  return props.boxShadow;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.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 =
/*#__PURE__*/
React.forwardRef(function Textarea(props, ref) {
  var theme = useTheme();
  var validationState = React.useContext(ValidationContext);
  return (
    /*#__PURE__*/
    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 =
/*#__PURE__*/
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 (
    /*#__PURE__*/
    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 (
          /*#__PURE__*/
          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
};

var StyledButton$4 = styled(Button)(["background-color:", ";border-color:", ";color:", ";@media (hover:hover),(-ms-high-contrast:none){&:hover{background-color:", ";border-color:", ";}}"], function (props) {
  return props.defaultStyle.bgColor;
}, function (props) {
  return props.defaultStyle.bgColor;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.hoverStyle.bgColor;
}, function (props) {
  return props.hoverStyle.bgColor;
});
var ActionButton =
/*#__PURE__*/
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 (
    /*#__PURE__*/
    React.createElement(StyledButton$4, _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 SplitButton = styled(Button)(["", " ", " min-width:10px;padding-left:8px;padding-right:6px;span{margin-left:0;}"], function (props) {
  return props.flatLeftEdge && "\n    border-left: solid 1px ".concat(props.theme.colors.gray9, ";\n  ");
}, function (props) {
  return props.flatRightEdge && "\n    border-right: solid 1px ".concat(props.theme.colors.gray9, ";\n  ");
});
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:0;padding:10px 20px;text-align:left;text-decoration:none;&: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) {
  var rootNode = node.getRootNode();
  return rootNode.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);

  var rootNode = node.getRootNode();

  function handleArrowMovementKeys(event) {
    if (event.keyCode === UP_ARROW_CODE) {
      if (isCurrentlyActive(firstFocusable)) {
        lastFocusable.focus();
        event.preventDefault();
      } else {
        var index = _indexOfInstanceProperty(focusables).call(focusables, rootNode.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, rootNode.activeElement);

        focusableElements[_index + 1].focus();

        event.preventDefault();
      }
    }
  }

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

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

var _StyledDiv$1 = styled("div")(["position:relative;"]);

function DropdownButton(_ref) {
  var id = _ref.id,
      rootClose = _ref.rootClose,
      children = _ref.children,
      buttonValue = _ref.buttonValue,
      manualButtonValue = _ref.manualButtonValue,
      shouldCloseOnButtonClick = _ref.shouldCloseOnButtonClick,
      shouldUpdateButtonValue = _ref.shouldUpdateButtonValue,
      styleType = _ref.styleType,
      inline = _ref.inline,
      flatLeftEdge = _ref.flatLeftEdge,
      flatRightEdge = _ref.flatRightEdge,
      otherProps = _objectWithoutProperties(_ref, ["id", "rootClose", "children", "buttonValue", "manualButtonValue", "shouldCloseOnButtonClick", "shouldUpdateButtonValue", "styleType", "inline", "flatLeftEdge", "flatRightEdge"]);

  var ActivationButton = flatLeftEdge || flatRightEdge ? SplitButton : Button;

  var _useState = useState(buttonValue),
      _useState2 = _slicedToArray(_useState, 2),
      buttonStateValue = _useState2[0],
      setButtonStateValue = _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(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) {
    return function (event) {
      if (shouldUpdateButtonValue) {
        setButtonStateValue(buttonProps.children);
      }

      if (shouldCloseOnButtonClick) {
        closeDropdown();
      }

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

  return (
    /*#__PURE__*/
    React.createElement(_StyledRootCloseWrapper, {
      onRootClose: closeDropdown,
      disabled: !rootClose,
      _css: inline ? 'inline-flex' : 'block'
    },
    /*#__PURE__*/
    React.createElement("div", {
      ref: buttonDropdown,
      role: "combobox",
      "aria-controls": panelId,
      "aria-expanded": isOpen,
      "aria-haspopup": "listbox"
    },
    /*#__PURE__*/
    React.createElement(ActivationButton, _extends({}, otherProps, {
      flatLeftEdge: flatLeftEdge,
      flatRightEdge: flatRightEdge,
      onClick: toggleDropdown,
      "aria-haspopup": "true",
      "aria-pressed": isOpen,
      className: isOpen ? "".concat(otherProps && otherProps.className, " pressed") : otherProps.className,
      ref: triggerButton,
      styleType: styleType
    }), manualButtonValue || buttonStateValue,
    /*#__PURE__*/
    React.createElement(Caret, null)),
    /*#__PURE__*/
    React.createElement(_StyledDiv$1, null,
    /*#__PURE__*/
    React.createElement(ButtonPanel, {
      isOpen: isOpen,
      id: panelId
    },
    /*#__PURE__*/
    React.createElement(ButtonPanelChildrenContainer, null, _mapInstanceProperty(Children).call(Children, children, function (child) {
      var onClickHandler = handleDropdownItemClick(child.props);
      var newProps = {
        onClick: onClickHandler,
        role: 'option'
      };
      return (
        /*#__PURE__*/
        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,

  /** Styles the Button with a flat left edge */
  flatLeftEdge: PropTypes.bool,

  /** Styles the Button with a flat right edge */
  flatRightEdge: PropTypes.bool
} : {};
DropdownButton.defaultProps = {
  buttonValue: undefined,
  manualButtonValue: undefined,
  shouldUpdateButtonValue: false,
  shouldCloseOnButtonClick: false,
  styleType: 'default',
  rootClose: false,
  inline: false,
  id: undefined,
  flatLeftEdge: false,
  flatRightEdge: false
};

var Container$1 = styled.div(["align-items:center;display:flex;flex-direction:column;max-width:", ";"], function (props) {
  return props.maxWidth;
});
var StyledIconButton = styled(OutlineButton)(["background-color:", ";border-radius:50%;border-width:3px;color:", ";display:inline-block;font-weight:normal;min-width:0;padding:13px 14px;width:auto;-webkit-tap-highlight-color:transparent;"], function (props) {
  return props.isHighlighted && props.activeColor;
}, function (props) {
  return props.isHighlighted && props.theme.colors.white;
});
var IncompleteButton = styled(StyledIconButton)(["background-color:", ";border-left:3px dashed ", ";color:", ";transform:rotate(45deg);&:hover,&:active{background-color:", ";color:", ";}& i{transform:rotate(-45deg) translate(-1px,1px);}"], function (props) {
  return props.isHighlighted ? props.theme.colors.gray5 : props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray5;
}, function (props) {
  return props.isHighlighted ? props.theme.colors.white : props.theme.colors.gray5;
}, function (props) {
  return props.theme.colors.gray6;
}, function (props) {
  return props.theme.colors.white;
});
var IconText = styled.span(["font-size:", "px;font-weight:", ";margin-top:6px;max-width:", ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], function (props) {
  return props.fontSize;
}, function (props) {
  return props.isHighlighted ? 'bold' : 'normal';
}, function (props) {
  return props.maxWidth;
});

function IconButton(_ref) {
  var iconName = _ref.iconName,
      iconSize = _ref.iconSize,
      childrenFontSize = _ref.childrenFontSize,
      isHighlighted = _ref.isHighlighted,
      isIncomplete = _ref.isIncomplete,
      disabled = _ref.disabled,
      maxWidth = _ref.maxWidth,
      onClick = _ref.onClick,
      styleType = _ref.styleType,
      children = _ref.children,
      otherProps = _objectWithoutProperties(_ref, ["iconName", "iconSize", "childrenFontSize", "isHighlighted", "isIncomplete", "disabled", "maxWidth", "onClick", "styleType", "children"]);

  var CurrentButton = isIncomplete ? IncompleteButton : StyledIconButton;
  var theme = useTheme();
  var textId = generateAlphaName();
  var buttonStyle = theme.buttonStyles.outlineButton.variant[styleType];
  return (
    /*#__PURE__*/
    React.createElement(Container$1, _extends({
      maxWidth: maxWidth
    }, otherProps),
    /*#__PURE__*/
    React.createElement(CurrentButton, {
      onClick: onClick,
      styleType: styleType,
      isHighlighted: isHighlighted,
      disabled: disabled,
      activeColor: buttonStyle.bgColor,
      "aria-describedby": textId
    },
    /*#__PURE__*/
    React.createElement(Icon, {
      name: iconName,
      size: iconSize
    })),
    /*#__PURE__*/
    React.createElement(IconText, {
      id: textId,
      isHighlighted: isHighlighted,
      maxWidth: maxWidth,
      fontSize: childrenFontSize
    }, children))
  );
}

IconButton.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Used to specify the icon used within the button */
  iconName: PropTypes.string.isRequired,

  /** The font size of the inner icon */
  iconSize: PropTypes.number,

  /** The font size of the text displayed below the icon */
  childrenFontSize: PropTypes.number,

  /** Determines whether the icon is shown with a solid background by default */
  isHighlighted: PropTypes.bool,

  /** Displays the icon with a style representing an incomplete state */
  isIncomplete: PropTypes.bool,

  /** Disables the click event on the button */
  disabled: PropTypes.bool,

  /** Sets the max width for the button, affects text ellipsis */
  maxWidth: PropTypes.string,

  /** Onclick function used by the button */
  onClick: PropTypes.func,

  /** OutlineButton styleType (from theme) used for the icon */
  styleType: PropTypes.string,

  /** Content to be displayed below the icon */
  children: PropTypes.node
} : {};
IconButton.defaultProps = {
  isHighlighted: false,
  isIncomplete: false,
  iconSize: 45,
  childrenFontSize: 18,
  disabled: false,
  maxWidth: undefined,
  onClick: function onClick() {},
  styleType: 'magenta',
  children: undefined
};

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; }
var AnswerLabel = styled.label(["flex-grow:1;@media (min-width:", "){flex-grow:0;min-width:", ";}"], function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return props.itemWidth;
});
var AnswerDisplay = styled.div(["background-color:", ";border-color:transparent;box-shadow:0 4px 0 0 ", ";color:", ";font-weight:", ";font-size:", ";line-height:", ";margin-bottom:4px;margin-top:0;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";text-align:center;text-transform:", ";transition:background-color 250ms linear,color 250ms linear;user-select:none;&:active{background-color:", ";box-shadow:0 0 0 0 transparent;color:", ";margin-bottom:0;margin-top:4px;}@media (hover:hover),(-ms-high-contrast:none){&:hover{background-color:", ";color:", ";}}&[disabled]{cursor:not-allowed;opacity:0.65;> *{pointer-events:none;}}"], function (props) {
  return props.buttonStyle.bgColor;
}, function (props) {
  return darken(props.buttonStyle.bgColor, 10);
}, function (props) {
  return getTextColor(props.buttonStyle.bgColor);
}, 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 darken(props.buttonStyle.bgColor, 8);
}, function (props) {
  return getTextColor(props.buttonStyle.bgColor);
}, function (props) {
  return darken(props.buttonStyle.bgColor, 8);
}, function (props) {
  return getTextColor(props.buttonStyle.bgColor);
});
var OutlineAnswerDisplay = styled(AnswerDisplay)(["background-color:", ";border:2px solid ", ";box-shadow:none;box-sizing:border-box;color:", ";margin:0;&:active{margin:0;}"], function (props) {
  return props.isChecked ? props.buttonStyle.bgColor : props.theme.colors.white;
}, function (props) {
  return props.buttonStyle.borderColor || props.buttonStyle.bgColor;
}, function (props) {
  return props.isChecked ? props.theme.colors.white : props.buttonStyle.bgColor;
});
var AnswerInput = styled.input(["clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;&:focus + div{background-color:", ";color:", ";}"], function (props) {
  return darken(props.buttonStyle.bgColor, 8);
}, function (props) {
  return getTextColor(props.buttonStyle.bgColor);
});

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].bgColor;
  var selectedStyles = theme.buttonStyles[buttonType].variant[selectedType];
  var unSelectedStyles = theme.buttonStyles[buttonType].variant[variant];

  if (isOutline && validationState !== 'default') {
    selectedStyles = _objectSpread$4(_objectSpread$4({}, selectedStyles), {}, {
      borderColor: validationBorder
    });
    unSelectedStyles = _objectSpread$4(_objectSpread$4({}, 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 (
    /*#__PURE__*/
    React.createElement(AnswerLabel, labelProps,
    /*#__PURE__*/
    React.createElement(AnswerInput, _extends({
      type: "radio",
      name: name,
      id: id,
      buttonStyle: buttonStyle
    }, radioProps)),
    /*#__PURE__*/
    React.createElement(Display, buttonProps, children))
  );
}

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 _context3; _forEachInstanceProperty(_context3 = ownKeys$5(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$5(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,
      onChange = _ref.onChange,
      rest = _objectWithoutProperties(_ref, ["name", "disableAllOptions", "selectedValue", "children", "onChange"]);

  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 (
      /*#__PURE__*/
      React.cloneElement(child, _objectSpread$5({
        key: key,
        name: name,
        disabled: disabled,
        checked: checked,
        onChange: onChange
      }, 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,

  /** Function to change selected value */
  onChange: PropTypes.func
} : {};
RadioGroup.defaultProps = {
  selectedValue: undefined,
  disableAllOptions: false,
  onChange: _noop
};

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(["display:flex;flex-wrap:nowrap;", ";"], function (props) {
  return props.isOutline && outlineStyles;
});

function AnswerGroup(props) {
  return (
    /*#__PURE__*/
    React.createElement(AnswerSet, {
      isOutline: props.isOutline
    },
    /*#__PURE__*/
    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 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 _context; _forEachInstanceProperty(_context = ownKeys$6(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$6(source)).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }

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)(["align-self:flex-start;cursor:pointer;display:flex;font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-size:", ";font-weight:normal;line-height:", ";margin-right:15px;margin-bottom:10px;position:relative;padding:10px 0 10px 10px;text-transform:none;&:hover > .es-radio__fill:before{", ";}@media (min-width:", "){padding:5px 0;}"], function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.baseLineHeight;
}, function (props) {
  return !props.checked && radioFill(props.hoverFillColor);
}, function (props) {
  return props.theme.screenSize.tablet;
});
var RadioInput = styled.input(["clip:rect(0,0,0,0);pointer-events:none;position:absolute;&:focus ~ .es-radio__fill{box-shadow:0 0 3px 3px ", ";}"], function (props) {
  return props.theme.colors.inputFocus;
});
var RadioDisplay = styled.span(["border:3px solid ", ";border-radius:50%;box-sizing:border-box;height:25px;margin-right:8px;min-width:25px;&:before{", ";}"], function (props) {
  return props.borderColor;
}, function (props) {
  return radioFill(_fillInstanceProperty(props));
});
function RadioButton(_ref) {
  var children = _ref.children,
      className = _ref.className,
      radioProps = _objectWithoutProperties(_ref, ["children", "className"]);

  var id = useUniqueId(radioProps.id);
  var isChecked = radioProps.checked;
  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
  };

  var inputProps = _objectSpread$6(_objectSpread$6({}, radioProps), {}, {
    checked: isChecked
  });

  return (
    /*#__PURE__*/
    React.createElement(RadioLabel, _extends({
      className: className
    }, labelProps),
    /*#__PURE__*/
    React.createElement(RadioInput, _extends({
      type: "radio",
      id: id
    }, inputProps)),
    /*#__PURE__*/
    React.createElement(RadioDisplay, {
      className: "es-radio__fill",
      borderColor: fill,
      fill: radioDisplayFill
    }), children)
  );
}
RadioButton.propTypes = process.env.NODE_ENV !== "production" ? {
  /** supports styled-component usage, applies to the wrapping Label */
  className: PropTypes.string,
  children: PropTypes.any
} : {};
RadioButton.defaultProps = {
  className: undefined,
  children: undefined
};

var DropdownBase = styled.select(["background-color:", ";border:1px solid ", ";border-radius:2px;box-shadow:", ";box-sizing:border-box;color:", ";flex:auto;font-size:", ";font-weight:normal;height:39px;min-width:100px;padding:6px 12px;transition:border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;&:focus{border-color:", ";box-shadow:", ";outline:0;}&:disabled{background-color:", ";cursor:not-allowed;}"], 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.font.baseFontSize;
}, function (props) {
  return props.focusBorderColor;
}, function (props) {
  return props.focusBoxShadow;
}, function (props) {
  return props.theme.colors.gray2;
});

function Dropdown(props) {
  return (
    /*#__PURE__*/
    React.createElement(DropdownBase, props)
  );
}

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)(["font-size:", ";font-family:'Source Sans Pro','Segoe UI',Segoe,Calibri,Tahoma,sans-serif;font-size:", ";font-weight:normal;line-height:", ";margin-left:-10px;min-height:25px;padding:10px 0 10px 42px;position:relative;@media (min-width:", "){margin-left:0;padding:5px 0 5px 32px;}.es-checkbox__fill{background-color:", ";border-color:", ";&:after{border-color:", ";}}&:hover .es-checkbox__fill:after{border-color:", ";}&[disabled] .es-checkbox__fill{background-color:", ";border-color:", ";cursor:not-allowed;outline:0;&:after{border-color:", ";}}"], function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.baseFontSize;
}, function (props) {
  return props.theme.font.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(["clip:rect(0,0,0,0);pointer-events:none;position:absolute;&:focus ~ .es-checkbox__fill{box-shadow:0 0 3px 3px ", ";&:after{border-color:", ";}}"], 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(["background:", ";border:3px solid ", ";border-radius:4px;box-sizing:border-box;cursor:pointer;height:25px;left:10px;position:absolute;top:0.55em;transition:all 0.25s linear,box-shadow 0.15s linear;width:25px;@media (min-width:", "){left:0;top:0.35em;}&:after{background:transparent;border:3px solid ", ";border-right:none;border-top:none;box-sizing:border-box;content:'';display:block;height:9px;margin:3px 0 0 2px;transform:rotate(-45deg);transition:border 0.25s linear;width:15px;}"], 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 validationState = React.useContext(ValidationContext);
  return (
    /*#__PURE__*/
    React.createElement(CheckboxLabel, {
      validationState: validationState,
      checked: checkboxProps.checked,
      disabled: checkboxProps.disabled
    },
    /*#__PURE__*/
    React.createElement(CheckboxInput, _extends({
      type: "checkbox"
    }, checkboxProps)),
    /*#__PURE__*/
    React.createElement(CheckboxDisplay, {
      className: "es-checkbox__fill"
    }), children)
  );
}

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

var Label$1 = styled(CheckboxLabel)(["font-weight:bold;margin-bottom:10px;padding:10px 0 10px 62px;@media (min-width:", "){margin-left:0;padding:5px 0 5px 52px;}", ""], function (props) {
  return props.theme.screenSize.tablet;
}, function (_ref) {
  var textOnHover = _ref.textOnHover;
  return textOnHover && "\n    &:hover {\n      .es-checkbox__text {\n        opacity: 1;\n        transition: visibility 0s linear 10ms, opacity 10ms;\n        visibility: visible;\n      }\n    }\n  ";
});
var Well = styled.div(["background-color:", ";border:solid 1px ", ";border-radius:2px;display:inline-block;height:45px;left:10px;margin-right:6px;position:absolute;top:-1px;width:45px;@media (min-width:", "){left:0;top:-6px;}"], function (props) {
  return props.theme.colors.gray1;
}, function (props) {
  return props.theme.colors.gray3;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var Display = styled(CheckboxDisplay)(["&&{left:10px;top:10px;}"]);
var Text = styled.span(["", ""], function (_ref2) {
  var textOnHover = _ref2.textOnHover,
      theme = _ref2.theme;
  return textOnHover && "\n    @media (min-width: ".concat(theme.screenSize.tablet, ") {\n      opacity: 0;\n      transition: visibility 0s linear 500ms, opacity 500ms;\n      visibility: hidden;\n    }\n  ");
});

function CheckAllBox(_ref3) {
  var children = _ref3.children,
      checkboxProps = _objectWithoutProperties(_ref3, ["children"]);

  var validationState = React.useContext(ValidationContext);
  return (
    /*#__PURE__*/
    React.createElement(Label$1, {
      validationState: validationState,
      checked: checkboxProps.checked,
      disabled: checkboxProps.disabled
    },
    /*#__PURE__*/
    React.createElement(Well, null,
    /*#__PURE__*/
    React.createElement(CheckboxInput, _extends({
      type: "checkbox"
    }, checkboxProps)),
    /*#__PURE__*/
    React.createElement(Display, {
      className: "es-checkbox__fill"
    })),
    /*#__PURE__*/
    React.createElement(Text, {
      className: "es-checkbox__text",
      textOnHover: checkboxProps.textOnHover
    }, children))
  );
}

CheckAllBox.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.any,
  textOnHover: PropTypes.bool
} : {};
CheckAllBox.defaultProps = {
  textOnHover: false,
  children: undefined
};

var Spacer = styled.div(["margin-left:", ";"], function (props) {
  return props.bumpRight ? '10px' : '0';
});

function CheckboxGroup(_ref) {
  var _context;

  var onChange = _ref.onChange,
      disableAllOptions = _ref.disableAllOptions,
      options = _ref.options,
      checkAllText = _ref.checkAllText,
      textOnHoverCheckAll = _ref.textOnHoverCheckAll;

  var _useState = useState(_mapInstanceProperty(_context = _filterInstanceProperty(options).call(options, function (o) {
    return o.checked;
  })).call(_context, function (o) {
    return o.value;
  }) || []),
      _useState2 = _slicedToArray(_useState, 2),
      selectedValues = _useState2[0],
      setSelectedValues = _useState2[1];

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

  var handleCheckAll = function handleCheckAll() {
    var updatedValues = [];

    if (!checkAll) {
      updatedValues = _mapInstanceProperty(options).call(options, function (o) {
        return o.value;
      });
      setCheckAll(true);
    } else {
      setCheckAll(false);
    }

    setSelectedValues(updatedValues);
    onChange(updatedValues);
  };

  var handleCheckboxChange = function handleCheckboxChange(ev) {
    var updatedValues = [];

    if (_includesInstanceProperty(selectedValues).call(selectedValues, ev.target.value)) {
      updatedValues = _filterInstanceProperty(selectedValues).call(selectedValues, function (val) {
        return val !== ev.target.value;
      });
    } else {
      var _context2;

      updatedValues = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(selectedValues), [ev.target.value]);
    }

    setSelectedValues(updatedValues);
    onChange(updatedValues);
  };

  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null, checkAllText &&
    /*#__PURE__*/
    React.createElement(CheckAllBox, {
      onChange: handleCheckAll,
      checked: checkAll,
      disabled: disableAllOptions
    }, checkAllText), _mapInstanceProperty(options).call(options, function (option) {
      return (
        /*#__PURE__*/
        React.createElement(Spacer, {
          bumpRight: Boolean(checkAllText),
          key: option.value
        },
        /*#__PURE__*/
        React.createElement(Checkbox, {
          name: option.name,
          value: option.value,
          checked: _includesInstanceProperty(selectedValues).call(selectedValues, option.value),
          disabled: disableAllOptions || option.disabled,
          onChange: handleCheckboxChange
        }, option.content || option.value))
      );
    }))
  );
}

CheckboxGroup.propTypes = process.env.NODE_ENV !== "production" ? {
  /** change handler */
  onChange: PropTypes.func.isRequired,

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

  /** array of checkbox objects defined by this shape */
  options: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string,
    value: PropTypes.string.isRequired,
    content: PropTypes.any,
    checked: PropTypes.bool,
    disabled: PropTypes.bool
  })),

  /** display an optional "Check All" checkbox with this value */
  checkAllText: PropTypes.string,

  /** display the "Check All" text on hover */
  textOnHoverCheckAll: PropTypes.bool
} : {};
CheckboxGroup.defaultProps = {
  checkAllText: undefined,
  textOnHoverCheckAll: false,
  disableAllOptions: false,
  options: []
};

var Directions = {
  'top': 'column-reverse',
  'bottom': 'column',
  'right': 'row',
  'left': 'row-reverse'
};
var Padding = {
  'top': '0 0 0.5rem',
  'bottom': '2.25rem 0 0',
  'right': '0 0 0.5rem',
  'left': '0 1rem 0 0'
};
var primary = "#0073b6";
var primaryLight = "#ededed";
var success = "#298544";
var successLight = "#69aa7c";
var warning = "#c25400";
var warningLight = "#d4874d";
var danger = "#cc0000";
var dangerLight = "#db4d4d";

function Type(type, light) {
  switch (type) {
    case "primary":
      return light ? primaryLight : primary;

    case "success":
      return light ? successLight : success;

    case "warning":
      return light ? warningLight : warning;

    case "danger":
      return light ? dangerLight : danger;

    default:
      return light ? primaryLight : primary;
  }
}

var SwitchBase = styled.div(["margin:0 auto 10px;display:flex;"]);
var SwitchLabel = styled.label(["flex-direction:", ";text-align:", ";justify-content:", ";cursor:", ";display:flex;position:relative:padding:5px 0;transition:all .25s linear;&:hover{span{&::before{box-shadow:", ";}}input[type=\"checkbox\"]:checked ~ span::before{box-shadow:", ";}}"], function (props) {
  return Directions[props.direction];
}, function (props) {
  return props.direction === 'top' || props.direction === 'bottom' ? 'center' : 'left';
}, function (props) {
  return props.direction === 'left' ? 'flex-end' : 'normal';
}, function (props) {
  return props.isDisabled ? 'not-allowed' : 'pointer';
}, function (props) {
  return props.isDisabled ? '0' : 'inset 0 3px 3px rgba(0,0,0,0.4)';
}, function (props) {
  return props.isDisabled ? '0' : 'inset 0 3px 3px rgba(0,0,0,0.7)';
});
var SwitchInput = styled.input(["overflow:visible;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;position:absolute;clip:rect(0,0,0,0);pointer-events:none;box-sizing:border-box;padding:0;&:focus ~ span::after{box-shadow:0 0 3px 3px #83bffc;}&:checked ~ span{&::before{background:", ";}&::after{background:#f4f4f4;left:28px;}}"], function (props) {
  return Type(props.styleType, false);
});
var SwitchLabelText = styled.span(["padding:", ";flex-grow:1;color:", ";"], function (props) {
  return Padding[props.direction];
}, function (props) {
  return props.type === 'primary' ? '#000' : Type(props.type, false);
});
var SwitchCheck = styled.span(["order:-2;position:relative;width:64px;&::before{background:", ";border-radius:11px;content:\"\";display:block;height:25px;left:3px;outline:none;position:absolute;top:.2rem;width:54px;z-index:5;transition:background-color .25s linear,border .25s linear,box-shadow .25s linear;}&::after{background:#f4f4f4;box-shadow:0 2px 6px #444;display:block;position:absolute;content:\"\";border-radius:100%;height:30px;width:30px;top:0;left:0;transform:all .18s linear;z-index:7;}"], function (props) {
  return Type(props.type, true);
});
var SwitchOffText = styled.span(["order:", ";padding:", ";;vertical-align:middle;"], function (props) {
  return props.direction === 'left' || props.direction === 'top' ? '-1' : '-3';
}, function (props) {
  return props.offText === '' ? '0' : '0 1rem 0 1rem';
});
var SwitchOnText = styled.span(["order:", ";padding:", ";vertical-align:middle;"], function (props) {
  return props.direction === 'left' || props.direction === 'top' ? '-3' : '-1';
}, function (props) {
  return props.onText === '' ? '0' : '0 1rem 0 0.75rem';
});

function Switch(_ref) {
  var type = _ref.type,
      label = _ref.label,
      direction = _ref.direction,
      ariaLabel = _ref.ariaLabel,
      onText = _ref.onText,
      offText = _ref.offText,
      checked = _ref.checked,
      onChange = _ref.onChange,
      disabled = _ref.disabled,
      switchProps = _objectWithoutProperties(_ref, ["type", "label", "direction", "ariaLabel", "onText", "offText", "checked", "onChange", "disabled"]);

  var _useState = useState(checked),
      _useState2 = _slicedToArray(_useState, 2),
      isToggled = _useState2[0],
      setIsToggled = _useState2[1];

  function handleToggle(event) {
    setIsToggled(!isToggled);
    onChange(event);
  }

  return (
    /*#__PURE__*/
    React.createElement(SwitchBase, _extends({
      type: type
    }, switchProps),
    /*#__PURE__*/
    React.createElement(SwitchLabel, {
      isDisabled: disabled,
      direction: direction,
      onChange: handleToggle
    },
    /*#__PURE__*/
    React.createElement(SwitchInput, {
      disabled: disabled,
      styleType: type,
      type: "checkbox",
      checked: isToggled,
      "aria-label": ariaLabel
    }),
    /*#__PURE__*/
    React.createElement(SwitchLabelText, {
      direction: direction,
      type: type
    }, label),
    /*#__PURE__*/
    React.createElement(SwitchOffText, {
      direction: direction,
      offText: offText
    }, offText),
    /*#__PURE__*/
    React.createElement(SwitchCheck, {
      type: type
    }),
    /*#__PURE__*/
    React.createElement(SwitchOnText, {
      direction: direction,
      onText: onText
    }, onText)))
  );
}

Switch.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The type attribute for the switch */
  type: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),

  /** The label text for the switch */
  label: PropTypes.string,

  /** The location of the label */
  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),

  /** Accessibility label for the checkbox */
  ariaLabel: PropTypes.string,

  /** This text goes on the right of the switch, denoting the 'on' position */
  onText: PropTypes.string,

  /** This text goes on the left of the switch, denoting the 'off' position */
  offText: PropTypes.string,

  /** Initial state of the toggle switch */
  checked: PropTypes.bool,

  /** Function for what happens when the switch is toggled */
  onChange: PropTypes.func,

  /** Determines whether the switch is disabled */
  disabled: PropTypes.bool
} : {};
Switch.defaultProps = {
  type: 'primary',
  label: '',
  direction: 'right',
  ariaLabel: '',
  onText: '',
  offText: '',
  checked: false,
  onChange: _noop,
  disabled: false
};

var StyledAnchor = styled.a(["background-color:transparent;box-sizing:border-box;color:", ";text-decoration:underline;&:hover{color:", ";text-decoration:none;}"], function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.theme.colors.primaryHover;
});

function Anchor(_ref) {
  var props = _Object$assign({}, _ref);

  return (
    /*#__PURE__*/
    React.createElement(StyledAnchor, props)
  );
}

var VerticalNavigation = styled.nav(["background-color:", ";box-shadow:2px 2px 5px ", ";ul{list-style:none;margin:0;padding:0;}"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.gray6;
});
var HorizontalNavigation = styled.nav(["background-color:", ";ul{display:flex;list-style:none;margin:0;padding:0;}"], 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 (
      /*#__PURE__*/
      React.createElement(OrientedNavigation, {
        className: "es-sidenav"
      },
      /*#__PURE__*/
      React.createElement("ul", null, _mapInstanceProperty(_context = React.Children).call(_context, children, function (child) {
        return (
          /*#__PURE__*/
          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;
}

var NavItemWrapper = styled.li(["background-color:", ";color:", ";cursor:pointer;line-height:", ";min-width:75px;padding:0;&:hover{background-color:", ";color:", ";> i{color:", ";}}", " ", ";"], function (props) {
  return props.theme.colors.white;
}, function (props) {
  return props.theme.colors.black;
}, function (props) {
  return props.theme.font.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)(["border-bottom:", " ", ";padding-left:", ";&:hover{border-", ":4px solid ", ";padding-left:0;}", " ", ";"], function (props) {
  return props.isVertical ? 'none' : '2px solid';
}, function (props) {
  return props.theme.colors.gray5;
}, function (props) {
  return props.isVertical ? '4px' : '0';
}, function (props) {
  return props.isVertical ? 'left' : 'bottom';
}, function (props) {
  return props.theme.colors.primary;
}, function (props) {
  return props.isActive && css(["background-color:", ";border-", ":4px solid ", ";color:", ";padding-left:0;> i{color:", ";}&:hover{background-color:", ";border-", ":4px solid ", ";color:", ";> i{color:", ";}}"], props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.primary3, props.theme.colors.black, props.theme.brandColors.primary3, props.theme.colors.gray1, props.isVertical ? 'left' : 'bottom', props.theme.brandColors.primary3, props.theme.colors.black, props.theme.brandColors.primary3);
}, function (props) {
  return props.isDisabled && css(["padding-left:0;&:hover{border-left:none;}"]);
});
var NavIcon = styled(Icon)(["align-self:flex-end;"]);
var NavigationAnchor = styled.a(["align-content:center;background-color:transparent;box-sizing:border-box;border:0;color:inherit;cursor:inherit;display:flex;font-size:inherit;height:100%;padding:10px;text-decoration:none;width:100%;"]);
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 =
    /*#__PURE__*/
    React.createElement(NavigationAnchor, _extends({
      as: child.type,
      style: {
        justifyContent: isVertical ? 'space-between' : 'center'
      }
    }, rest),
    /*#__PURE__*/
    React.createElement("span", null, grandChildren), isVertical ?
    /*#__PURE__*/
    React.createElement(NavIcon, {
      name: "chevron-right"
    }) : null);
    return (
      /*#__PURE__*/
      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 (
    /*#__PURE__*/
    React.createElement(Navigation, props)
  );
}

SideNav.Item = useNavigationItem('vertical');

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

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

HorizontalNav.Item = useNavigationItem('horizontal');

function useWindowWidth() {
  var getMediaWidth = function getMediaWidth() {
    return (// https://stackoverflow.com/a/6850319
      window.innerWidth > 0 ? window.innerWidth : window.screen.width
    );
  };

  var _React$useState = React.useState(getMediaWidth()),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      width = _React$useState2[0],
      setWidth = _React$useState2[1];

  React.useEffect(function () {
    var handleResize = function handleResize() {
      return setWidth(getMediaWidth());
    };

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

function _templateObject$2() {
  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$2 = function _templateObject() {
    return data;
  };

  return data;
}
var DatepickerStyles = createGlobalStyle(_templateObject$2(), function (_ref) {
  var theme = _ref.theme;
  return theme.colors.gray5;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.colors.gray5;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.colors.white;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.gray5;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.colors.white;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.colors.gray5;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.gray9;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.colors.boxShadowLight;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.colors.white;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.datepickerColors.navArrow;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.datepickerColors.navArrowHover;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.colors.gray3;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.datepickerColors.navArrow;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.datepickerColors.navArrowHover;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.colors.gray3;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.datepickerColors.dpBackground;
}, function (_ref22) {
  var theme = _ref22.theme;
  return theme.colors.gray5;
}, function (_ref23) {
  var theme = _ref23.theme;
  return theme.colors.gray5;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.colors.gray1;
}, function (_ref25) {
  var theme = _ref25.theme;
  return theme.datepickerColors.selected;
}, function (_ref26) {
  var theme = _ref26.theme;
  return theme.datepickerColors.selected;
}, function (_ref27) {
  var theme = _ref27.theme;
  return theme.colors.gray2;
}, function (_ref28) {
  var theme = _ref28.theme;
  return theme.colors.gray2;
}, function (_ref29) {
  var theme = _ref29.theme;
  return theme.colors.gray1;
}, function (_ref30) {
  var theme = _ref30.theme;
  return theme.colors.white;
}, function (_ref31) {
  var theme = _ref31.theme;
  return theme.colors.gray9;
}, function (_ref32) {
  var theme = _ref32.theme;
  return theme.colors.gray3;
}, function (_ref33) {
  var theme = _ref33.theme;
  return theme.datepickerColors.highlight;
}, function (_ref34) {
  var theme = _ref34.theme;
  return theme.colors.white;
}, function (_ref35) {
  var theme = _ref35.theme;
  return theme.datepickerColors.highlightHover;
}, function (_ref36) {
  var theme = _ref36.theme;
  return theme.colors.gray9;
}, function (_ref37) {
  var theme = _ref37.theme;
  return theme.datepickerColors.selected;
}, function (_ref38) {
  var theme = _ref38.theme;
  return theme.colors.white;
}, function (_ref39) {
  var theme = _ref39.theme;
  return theme.datepickerColors.hover;
}, function (_ref40) {
  var theme = _ref40.theme;
  return theme.datepickerColors.keyboard;
}, function (_ref41) {
  var theme = _ref41.theme;
  return theme.colors.white;
}, function (_ref42) {
  var theme = _ref42.theme;
  return theme.datepickerColors.hover;
}, function (_ref43) {
  var theme = _ref43.theme;
  return theme.datepickerColors.inRange;
}, function (_ref44) {
  var theme = _ref44.theme;
  return theme.colors.gray9;
}, function (_ref45) {
  var theme = _ref45.theme;
  return theme.colors.gray3;
}, function (_ref46) {
  var theme = _ref46.theme;
  return theme.colors.gray9;
}, function (_ref47) {
  var theme = _ref47.theme;
  return theme.colors.gray5;
}, function (_ref48) {
  var theme = _ref48.theme;
  return theme.colors.white;
}, function (_ref49) {
  var theme = _ref49.theme;
  return theme.colors.gray5;
}, function (_ref50) {
  var theme = _ref50.theme;
  return theme.colors.gray3;
}, function (_ref51) {
  var theme = _ref51.theme;
  return theme.colors.gray1;
}, function (_ref52) {
  var theme = _ref52.theme;
  return theme.colors.gray5;
}, function (_ref53) {
  var theme = _ref53.theme;
  return theme.colors.gray3;
}, function (_ref54) {
  var theme = _ref54.theme;
  return theme.datepickerColors.selected;
}, function (_ref55) {
  var theme = _ref55.theme;
  return theme.colors.white;
}, function (_ref56) {
  var theme = _ref56.theme;
  return theme.colors.gray1;
}, function (_ref57) {
  var theme = _ref57.theme;
  return theme.colors.gray5;
}, function (_ref58) {
  var theme = _ref58.theme;
  return theme.colors.boxShadowDark;
}, function (_ref59) {
  var theme = _ref59.theme;
  return theme.datepickerColors.navArrow;
}, function (_ref60) {
  var theme = _ref60.theme;
  return theme.datepickerColors.navArrowHover;
}, function (_ref61) {
  var theme = _ref61.theme;
  return theme.colors.gray3;
}, function (_ref62) {
  var theme = _ref62.theme;
  return theme.datepickerColors.navArrow;
}, function (_ref63) {
  var theme = _ref63.theme;
  return theme.datepickerColors.navArrowHover;
}, function (_ref64) {
  var theme = _ref64.theme;
  return theme.colors.gray3;
});

/* 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 (
    /*#__PURE__*/
    React.createElement(Textbox, _extends({
      prependIconName: "calendar",
      type: "date",
      value: normalizeDateString(props.selectedDate)
    }, props))
  );
}

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

var DateTextbox =
/*#__PURE__*/
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 =
  /*#__PURE__*/
  React.createElement(_StyledMaskedTextbox, _extends({
    maskType: "date",
    placeholder: props.placeholder,
    prependIconName: "calendar",
    ref: inputRef
  }, textboxProps));
  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement(DatepickerStyles, null), props.suppressDatepicker ? textbox :
    /*#__PURE__*/
    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(_objectSpread$7({}, props), {}, {
    selectedDate: selectedDate,
    onChange: props.onChange ? dateSelected : _noop
  });

  return (
    /*#__PURE__*/
    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 onNonNumericHandler(event) {
  // prevent other normally allowed numeric keys: e, +, -, .
  if (event.keyCode === 69 || event.keyCode === 187 || event.keyCode === 189 || event.keyCode === 190) {
    event.preventDefault();
  }
}

var DayInput = styled(InputBase)(["appearance:textfield;flex:1 0 35px;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0;}"]);

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 (
    /*#__PURE__*/
    React.createElement(DayInput, _extends({
      type: "number",
      inputmode: "numeric",
      pattern: "[0-9]*",
      min: "1",
      max: "31",
      onKeyDown: onNonNumericHandler,
      onChange: onDayChange,
      placeholder: "Day",
      value: value
    }, theme.validationInputColor[validationState], props))
  );
}

var MonthDropdown = styled(Dropdown)(["flex:3 1 100px;"]);

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 (
    /*#__PURE__*/
    React.createElement(MonthDropdown, _extends({
      onChange: onMonthChange
    }, theme.validationInputColor[validationState], {
      value: month
    }, props), selectOptionText &&
    /*#__PURE__*/
    React.createElement("option", {
      value: "none"
    }, selectOptionText), _mapInstanceProperty(monthNames).call(monthNames, function (value, index) {
      return (
        /*#__PURE__*/
        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
};

var YearInput = styled(InputBase)(["appearance:textfield;flex:2 0 40px;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0;}"]);

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 (
    /*#__PURE__*/
    React.createElement(YearInput, _extends({
      type: "number",
      inputmode: "numeric",
      pattern: "[0-9]*",
      onChange: onYearChange,
      onKeyDown: onNonNumericHandler,
      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; }
var Wrapper = styled.div(["display:flex;&& > *{margin-right:2px;}@media (min-width:", "){max-width:350px;}"], 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(_objectSpread$8({}, state), {}, {
        day: action.value
      });

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

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

    default:
      throw new Error();
  }
}

function DateInput(_ref) {
  var _context4;

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

  var _useReducer = useReducer(reducer, {
    day: defaultValue ? defaultValue.getDate() : defaultDay,
    month: defaultValue ? defaultValue.getMonth() + 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(target.getRootNode().activeElement)) {
        onBlur(event);
      }
    }, 0);
  }

  return (
    /*#__PURE__*/
    React.createElement(Wrapper, _extends({
      tabIndex: "-1"
    }, props, {
      onBlur: onBlurComponent
    }), _mapInstanceProperty(_context4 = React.Children).call(_context4, children, function (child, index) {
      return index === 0 ?
      /*#__PURE__*/
      React.cloneElement(child, {
        id: id,
        onChange: onChangeDatePart,
        date: createDate(state.year, state.month, state.day).value
      }) :
      /*#__PURE__*/
      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),

  /** Set the default day of the month */
  defaultDay: PropTypes.string
} : {};
DateInput.defaultProps = {
  id: undefined,
  maxDate: undefined,
  minDate: undefined,
  defaultValue: undefined,
  defaultDay: '',
  onBlur: _noop
};
DateInput.Day = Day;
DateInput.Month = Month;
DateInput.Year = Year;

var IncrementerWrapper = styled.div(["align-items:flex-start;display:flex;"]);
var IncrementerTextbox = styled(InputBase)(["margin:0 10px;min-width:60px;padding-right:12px;text-align:center;@media (min-width:", "){width:60px;}-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&::-ms-clear{display:none;}"], function (props) {
  return props.theme.screenSize.tablet;
});
var IncrementerButton = styled(Button)(["min-width:0;.es-button__display{min-width:0;}"]);

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
      };
  }

  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 (
    /*#__PURE__*/
    React.createElement(IncrementerWrapper, null,
    /*#__PURE__*/
    React.createElement(IncrementerButton, {
      as: RenderedButton,
      styleType: "primary",
      onClick: decrementValue,
      disabled: isDecrementDisabled
    },
    /*#__PURE__*/
    React.createElement(ScreenReaderButtonText, null, "Decrement value by", decrementAmount),
    /*#__PURE__*/
    React.createElement(Icon, {
      name: "minus",
      size: 22
    })),
    /*#__PURE__*/
    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
    })),
    /*#__PURE__*/
    React.createElement(IncrementerButton, {
      as: RenderedButton,
      styleType: "primary",
      onClick: incrementValue,
      disabled: isIncrementDisabled
    },
    /*#__PURE__*/
    React.createElement(ScreenReaderButtonText, null, "Increment value by", incrementAmount),
    /*#__PURE__*/
    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 (
        /*#__PURE__*/
        React.cloneElement(action, {
          styleType: _styleType
        })
      );
    }

    var styleType = action.props.isPrimary ? 'primary' : 'default';
    return (
      /*#__PURE__*/
      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; }
var Container$2 = styled.div(["flex-basis:100%;"]);
var CallToActionContainer = styled.div(["display:flex;justify-content:flex-end;"]);

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(_objectSpread$9({}, rest), {}, {
    isDismissable: false
  });

  return (
    /*#__PURE__*/
    React.createElement(React.Fragment, null,
    /*#__PURE__*/
    React.createElement(Notification$1, props,
    /*#__PURE__*/
    React.createElement(Container$2, null, nonActions)),
    /*#__PURE__*/
    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; }
var Container$3 = styled.div(["flex-basis:100%;"]);
var CallToActionContainer$1 = styled.div(["display:flex;justify-content:flex-end;"]);

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(_objectSpread$a({}, rest), {}, {
    isDismissable: false
  });

  return (
    /*#__PURE__*/
    React.createElement(LightNotification, props,
    /*#__PURE__*/
    React.createElement(Container$3, null, nonActions,
    /*#__PURE__*/
    React.createElement(CallToActionContainer$1, null, actions)))
  );
}

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

var ActionButton$1 = styled(Button)([":not(:first-of-type){margin-left:15px;}"]);
function Action(_ref) {
  var isPrimary = _ref.isPrimary,
      children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["isPrimary", "children"]);

  return (
    /*#__PURE__*/
    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
};

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(["align-items:flex-start;background-image:linear-gradient( to right,", " 0%,", " ", "%,", " ", "%,", " 100% );background-size:100% ", "px;background-position:0 ", "px;background-repeat:no-repeat;counter-reset:progress-tracker-counter;display:flex;flex-flow:row nowrap;justify-content:space-between;margin-left:0;padding-left:0;width:100%;@media (min-width:", "){background-position:center ", "px;background-size:", "% ", "px;}"], 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(["align-items:center;background:none;border:none;counter-increment:progress-tracker-counter;display:flex;flex-flow:column nowrap;font-family:'Source Sans Pro',sans-serif;margin-top:", "px;padding:0;text-align:center;&:active,&:hover,&:focus{outline:none;}@media (min-width:", "){font-size:18px;margin-top:0;margin:0 auto;}span{color:", ";display:none;font-size:18px;line-height:1.1em;@media (min-width:", "){display:inline;font-weight:normal;}}&::before{background-color:white;border:", ";border-radius:", "px;box-shadow:0 0 0 3px white;box-sizing:border-box;color:", ";content:counter(progress-tracker-counter);display:block;font-size:", "px;height:", "px;line-height:1em;margin-bottom:5px;text-align:center;width:", "px;position:relative;@media (min-width:", "){border-radius:", "px;border-width:3px;font-size:", "px;font-weight:normal;height:", "px;line-height:1.7em;width:", "px;}}"], 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)(["cursor:pointer;&:hover{&::before{box-shadow:rgba(0,0,0,0.35) 0 0 3px 1px;}}&:active,&:hover,&:focus{span{text-decoration:underline;}}"]);
var PastProgressButton = styled(BasicProgressButton)(["cursor:pointer;&:hover{&::before{box-shadow:rgba(0,0,0,0.35) 0 0 3px 1px;}}&:active,&:hover,&:focus{span{text-decoration:underline;}}&:focus{&::before{box-shadow:", " 0 0 4px 2px;}span{outline:1px dotted ", ";}}&::before{border-color:", ";@media (min-width:", "){border-width:5px;font-weight:bold;line-height:1.5em;}}span{@media (min-width:", "){font-weight:bold;}}"], 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 NonNavigablePastProgressButton = styled(BasicProgressButton)(["&::before{border-color:", ";@media (min-width:", "){border-width:5px;font-weight:bold;line-height:1.5em;}}span{@media (min-width:", "){font-weight:bold;}}"], 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)(["margin-top:0;&::before{border:5px solid ", ";border-radius:", "px;color:", ";font-size:", "px;font-weight:bold;height:", "px;line-height:1.5em;width:", "px;@media (min-width:", "){border-width:5px;font-size:", "px;height:", "px;line-height:1.5em;width:", "px;}}span{color:", ";display:inline;font-weight:bold;@media (min-width:", "){font-weight:bold;}}"], function (props) {
  return props.theme.brandColors.primary3;
}, ACTIVE, function (props) {
  return props.theme.brandColors.primary3;
}, 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.primary3;
}, function (props) {
  return props.theme.screenSize.tablet;
});
var ProgressLi = styled.li(["display:flex;list-style-type:none;max-width:", "%;align-items:center;&:first-child{&,& button{align-items:flex-start;text-align:left;}}&:last-child{&,& button{align-items:flex-end;text-align:right;}}@media (min-width:", "){width:", "%;&:first-child,&:last-child{&,& button{align-items:center;text-align:center;}}}"], function (props) {
  return getProgressItemWidthPercentage(props.numberOfSteps - 1);
}, function (props) {
  return props.theme.screenSize.tablet;
}, function (props) {
  return getProgressItemWidthPercentage(props.numberOfSteps);
});

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

    case stepStates.pastStep:
      return showNav ? PastProgressButton : NonNavigablePastProgressButton;

    case stepStates.clickableFutureStep:
      return showNav ? FutureProgressButton : BasicProgressButton;

    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,
      showNav = _ref.showNav;
  var itemType;

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

  var ProgressItemType = getProgressItemType(itemType, showNav);
  var listItemProps = {
    numberOfSteps: numberOfSteps,
    disabled: !isPastStep && !canClickFutureStep,
    onClick: onPastStepClicked
  };
  return (
    /*#__PURE__*/
    React.createElement(ProgressLi, {
      numberOfSteps: numberOfSteps
    },
    /*#__PURE__*/
    React.createElement(ProgressItemType, listItemProps,
    /*#__PURE__*/
    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,
  showNav: PropTypes.bool
} : {};
ProgressItem.defaultProps = {
  onPastStepClicked: function onPastStepClicked() {},
  label: '',
  canClickFutureStep: false,
  showNav: true
};

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

    isPastStep = !(step.active || !isPastStep);
    return (
      /*#__PURE__*/
      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,
        showNav: showNav
      })
    );
  });
};

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,
      showNav = _ref.showNav;
  return (
    /*#__PURE__*/
    React.createElement(ProgressContainer, {
      "data-testid": "progress-tracker",
      activeStepIndex: getIndexOfActiveStep(steps),
      numberOfSteps: steps.length
    }, getMappedSteps(steps, onPastStepClicked, onFutureStepClicked, showNav))
  );
}

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

/* eslint-disable react/prop-types */
formatMessage.setup({
  missingTranslation: 'ignore'
});
var HelpContent = styled(Modal.Body)(["max-height:750px;overflow-y:scroll;ul{display:block;list-style-type:disc;margin-bottom:10px;margin-left:0;margin-right:0;padding-left:40px;ul{list-style-type:circle;}}"]);
var CautionRating = styled.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);background-size:100% 100%;height:30px;width:150px;"]);
var StarRating = styled.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);background-color:#ffc436;height:28px;"]);
var RatingTable = styled(Table)(["border:1px solid black;text-align:left;margin:15px 0px;thead{font-weight:bold;}th,td{border:1px solid black;padding:8px;vertical-align:middle;}td{height:63px;}"]);
function StarRatingExplanation(props) {
  return (
    /*#__PURE__*/
    React.createElement(Modal, {
      show: props.show,
      size: "large",
      onHide: props.closeModal,
      parentSelector: function parentSelector() {
        return props.parentNode;
      }
    },
    /*#__PURE__*/
    React.createElement(Modal.Header, null, formatMessage('Plan Ratings')),
    /*#__PURE__*/
    React.createElement(HelpContent, null,
    /*#__PURE__*/
    React.createElement("p", null, formatMessage('The Overall Plan Rating combines scores, as rated by Medicare, for the types of services each plan offers.')),
    /*#__PURE__*/
    React.createElement(RatingTable, null,
    /*#__PURE__*/
    React.createElement("thead", null,
    /*#__PURE__*/
    React.createElement("tr", null,
    /*#__PURE__*/
    React.createElement("th", null, formatMessage('Legend')),
    /*#__PURE__*/
    React.createElement("th", null, formatMessage('Description')))),
    /*#__PURE__*/
    React.createElement("tbody", null,
    /*#__PURE__*/
    React.createElement("tr", null,
    /*#__PURE__*/
    React.createElement("td", null,
    /*#__PURE__*/
    React.createElement(CautionRating, null)),
    /*#__PURE__*/
    React.createElement("td", null, formatMessage('Caution - The plan has received low summary ratings from Medicare three years in a row.'))),
    /*#__PURE__*/
    React.createElement("tr", null,
    /*#__PURE__*/
    React.createElement("td", null,
    /*#__PURE__*/
    React.createElement(StarRating, null)),
    /*#__PURE__*/
    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."))))),
    /*#__PURE__*/
    React.createElement("strong", null, formatMessage('What is being measured?')),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>For plans covering health services</s>, the overall score for quality of those services covers <s>36 different topics in 5 categories:</s>', {
      s: function s(_ref) {
        var children = _ref.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    }),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Staying healthy: screenings, tests, and vaccines:</s> Includes how often members got various screening tests, vaccines, and other check-ups that help them stay healthy.', {
      s: function s(_ref2) {
        var children = _ref2.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Managing chronic (long-term) conditions:</s> Includes how often members with different conditions got certain tests and treatments that help them manage their condition.', {
      s: function s(_ref3) {
        var children = _ref3.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Ratings of health plan responsiveness and care:</s> Includes ratings of member satisfaction with the plan.', {
      s: function s(_ref4) {
        var children = _ref4.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Member complaints, problems getting services, and choosing to leave the plan:</s> 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.', {
      s: function s(_ref5) {
        var children = _ref5.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Health plan customer service:</s> Includes how well the plan handles calls and makes decisions about member appeals for health coverage.', {
      s: function s(_ref6) {
        var children = _ref6.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })))),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>For plans covering drug services,</s> the overall score for quality of those services covers <s>17 different topics in 4 categories:</s>', {
      s: function s(_ref7) {
        var children = _ref7.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    }),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Drug plan customer service:</s> Includes how well the plan handles calls and makes decisions about member appeals for drug coverage.', {
      s: function s(_ref8) {
        var children = _ref8.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Member complaints, problems getting services, and choosing to leave the plan:</s>  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.', {
      s: function s(_ref9) {
        var children = _ref9.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich("<s>Member experience with plan's drug services:</s> Includes ratings of member satisfaction with the plan.", {
      s: function s(_ref10) {
        var children = _ref10.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>Drug pricing and patient safety:</s> 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.', {
      s: function s(_ref11) {
        var children = _ref11.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    })))),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('<s>For plans covering both health and drug services,</s> the overall score for quality of those services covers <s>all of the 53 topics listed above.</s>', {
      s: function s(_ref12) {
        var children = _ref12.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    }))),
    /*#__PURE__*/
    React.createElement("p", null,
    /*#__PURE__*/
    React.createElement("strong", null, formatMessage('Where does the information for the Overall Plan Rating come from?'))),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('For quality of <s>health services</s>, the information comes from sources that include:', {
      s: function s(_ref13) {
        var children = _ref13.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    }),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage('Member surveys done by Medicare')),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage('Information from clinicians')),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage('Information submitted by the plans')),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities")))),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage.rich('For quality of <s>drug services</s>, the information comes from sources that include:', {
      s: function s(_ref14) {
        var children = _ref14.children;
        return (
          /*#__PURE__*/
          React.createElement("strong", {
            key: "bold"
          }, children)
        );
      }
    }),
    /*#__PURE__*/
    React.createElement("ul", null,
    /*#__PURE__*/
    React.createElement("li", null, formatMessage('Member surveys done by Medicare')),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage('Reviews of billing and other information that plans submit to Medicare')),
    /*#__PURE__*/
    React.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities"))))),
    /*#__PURE__*/
    React.createElement("p", null,
    /*#__PURE__*/
    React.createElement("strong", null, formatMessage('Why is the Overall Plan Rating important?'))),
    /*#__PURE__*/
    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.')),
    /*#__PURE__*/
    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.'))),
    /*#__PURE__*/
    React.createElement(Modal.Footer, null,
    /*#__PURE__*/
    React.createElement(ModalButtonContainer, null,
    /*#__PURE__*/
    React.createElement(Button, {
      onClick: props.closeModal
    }, formatMessage('Close')))))
  );
}

formatMessage.setup({
  missingTranslation: 'ignore'
});
var StarContainer = styled.div(["background-color:", ";display:flex;flex-direction:column;height:21px;margin-top:3px;width:133px;"], function (props) {
  return !props.isPoorPerformer ? props.theme.colors.gray5 : 'transparent';
});
var StarRatingLink = styled(LinkButton)(["color:", ";border-bottom:1px dashed;text-decoration:none;&:hover,&:focus{color:", ";border-bottom:1px solid;}"], function (props) {
  return props.theme.colors.gray8;
}, function (props) {
  return props.theme.colors.gray8;
});
var StarFill = styled.span(["background-color:#ffc436;display:block;height:21px;margin-left:2px;width:", ";"], function (props) {
  return props.fillWidth;
});
var StarOverlay = styled.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);height:25px;margin-top:-23px;"]);
var PoorPerformerOverlay = styled.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/poor-performer-mask.svg);background-size:100% 100%;height:30px;margin-top:-5px;"]);

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 _useRootNode = useRootNode(document.body),
      _useRootNode2 = _slicedToArray(_useRootNode, 2),
      rootNode = _useRootNode2[0],
      rootNodeRef = _useRootNode2[1];

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

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

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() {}
};

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.primary1, props.theme.brandColors.primary2, props.theme.brandColors.primary3, props.theme.brandColors.primary1);
};

var SpinnerSvg = styled.svg(["animation:", " 1.4s linear infinite;@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){animation:", " 1.4s linear infinite;}"], rotatorAnimation, ieAnimation);
var SpinnerCircle = styled.circle(["stroke:", ";stroke-dasharray:187;stroke-dashoffset:37.4;transform-origin:center;animation:", " 1.4s ease-in-out infinite,", " 3.5s ease-in-out infinite;"], function (props) {
  return props.theme.brandColors.secondary1;
}, 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 (
    /*#__PURE__*/
    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 &&
    /*#__PURE__*/
    React.createElement("title", {
      id: titleId
    }, title), description &&
    /*#__PURE__*/
    React.createElement("desc", {
      id: descId
    }, description),
    /*#__PURE__*/
    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 _templateObject$3() {
  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$3 = function _templateObject() {
    return data;
  };

  return data;
}
var StyleReset = createGlobalStyle(_templateObject$3());

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, Anchor, AnswerButton, AnswerGroup, Button, CallToAction, Checkbox, CheckboxGroup, Control, DateInput, DatePicker, Drawer, Dropdown, DropdownButton, Fade, Fieldset, FullColorIcon, Heading, HorizontalNav, HorizontalScrollWrapper$1 as HorizontalScrollWrapper, Icon, IconButton, Incrementer, InlineMessage, Label, LightCallToAction, LightNotification, LinkButton, LoadingSkeleton, MaskedTextbox, Menu, Message, MessageNotification, Modal, ModalButtonContainer, Notification$1 as Notification, OutlineButton, PageHeading, Popover, PopoverLink, ProgressTracker$1 as ProgressTracker, Prompt, RadioButton, RadioGroup, ResponsiveTable, SideNav, SlidingPane, Spinner, StarRating$1 as StarRating, StarRatingExplanation, StripedContainer, StyleReset, Switch, TabPanel, Table, Textarea, Textbox, ToggleButton, Tooltip, generateAlphaName, isValidEmail, screenReaderOnly, useTheme, useWindowWidth, withWindowSize };