UNPKG

es-components/cjs/index.js

Version:
313 kBJavaScriptView Raw
1'use strict';
2
3Object.defineProperty(exports, '__esModule', { value: true });
4
5function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
7require('core-js/modules/es.function.name');
8var _extends = _interopDefault(require('@babel/runtime-corejs3/helpers/extends'));
9var _objectWithoutProperties = _interopDefault(require('@babel/runtime-corejs3/helpers/objectWithoutProperties'));
10var React = require('react');
11var React__default = _interopDefault(React);
12var PropTypes = _interopDefault(require('prop-types'));
13var styled = require('styled-components');
14var styled__default = _interopDefault(styled);
15var _noop = _interopDefault(require('lodash/noop'));
16var _Object$defineProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-property'));
17var _Object$defineProperties = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-properties'));
18var _Object$getOwnPropertyDescriptors = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors'));
19var _forEachInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/for-each'));
20var _Object$getOwnPropertyDescriptor = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor'));
21var _filterInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/filter'));
22var _Object$getOwnPropertySymbols = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols'));
23var _Object$keys = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/keys'));
24var _slicedToArray = _interopDefault(require('@babel/runtime-corejs3/helpers/slicedToArray'));
25var _defineProperty = _interopDefault(require('@babel/runtime-corejs3/helpers/defineProperty'));
26var _mapInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/map'));
27var _spliceInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/splice'));
28var _indexOfInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/index-of'));
29var _toConsumableArray = _interopDefault(require('@babel/runtime-corejs3/helpers/toConsumableArray'));
30var AnimateHeight = _interopDefault(require('react-animate-height'));
31var ReactDOM = _interopDefault(require('react-dom'));
32var reactPopper = require('react-popper');
33var Transition = _interopDefault(require('react-transition-group/Transition'));
34var tinycolor = _interopDefault(require('tinycolor2'));
35require('get-root-node-polyfill/implement');
36var _setTimeout = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/set-timeout'));
37var _setInterval = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/set-interval'));
38var reactOverlays = require('react-overlays');
39var _concatInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/concat'));
40var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral'));
41var _debounce = _interopDefault(require('lodash/debounce'));
42var ReactModal = _interopDefault(require('react-modal'));
43require('core-js/modules/es.regexp.exec');
44require('core-js/modules/es.string.replace');
45var _Object$assign = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/assign'));
46var _everyInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/every'));
47var _Array$isArray = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/array/is-array'));
48var _regeneratorRuntime = _interopDefault(require('@babel/runtime-corejs3/regenerator'));
49require('regenerator-runtime/runtime');
50var _asyncToGenerator = _interopDefault(require('@babel/runtime-corejs3/helpers/asyncToGenerator'));
51var _findIndex = _interopDefault(require('lodash/findIndex'));
52var _parseInt = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/parse-int'));
53require('core-js/modules/es.object.to-string');
54require('core-js/modules/es.regexp.to-string');
55var _Reflect$construct = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/reflect/construct'));
56var _classCallCheck = _interopDefault(require('@babel/runtime-corejs3/helpers/classCallCheck'));
57var _createClass = _interopDefault(require('@babel/runtime-corejs3/helpers/createClass'));
58var _assertThisInitialized = _interopDefault(require('@babel/runtime-corejs3/helpers/assertThisInitialized'));
59var _inherits = _interopDefault(require('@babel/runtime-corejs3/helpers/inherits'));
60var _possibleConstructorReturn = _interopDefault(require('@babel/runtime-corejs3/helpers/possibleConstructorReturn'));
61var _getPrototypeOf = _interopDefault(require('@babel/runtime-corejs3/helpers/getPrototypeOf'));
62var MaskedInput = _interopDefault(require('react-text-mask'));
63var createautoCorrectedDatePipe = _interopDefault(require('text-mask-addons/dist/createAutoCorrectedDatePipe'));
64var createNumberMask = _interopDefault(require('text-mask-addons/dist/createNumberMask'));
65var _fillInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/fill'));
66var _includesInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/includes'));
67var _omit = _interopDefault(require('lodash/omit'));
68var _pick = _interopDefault(require('lodash/pick'));
69var dateFns = require('date-fns');
70var ReactDatePicker = _interopDefault(require('react-datepicker'));
71var _sliceInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/slice'));
72var _parseInt$1 = _interopDefault(require('lodash/parseInt'));
73var _isFinite = _interopDefault(require('lodash/isFinite'));
74var _findIndexInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/find-index'));
75var formatMessage = _interopDefault(require('format-message'));
76require('core-js/modules/es.symbol');
77require('core-js/modules/es.symbol.description');
78var _trimInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/trim'));
79
80var 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'
318};
319
320var StyledIcon = styled__default.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;
322}, function (props) {
return props.content;
324});
325
326function Icon(_ref) {
var name = _ref.name,
    size = _ref.size,
    other = _objectWithoutProperties(_ref, ["name", "size"]);
330
var iconName = "im-icon-".concat(name);
var styledIconProps = {
  content: regular[iconName],
  fontSize: size !== undefined ? "".concat(size, "px") : 'inherit'
};
return (
  /*#__PURE__*/
  React__default.createElement(StyledIcon, _extends({
    "aria-hidden": true
  }, styledIconProps, other))
);
342}
343
344Icon.propTypes = process.env.NODE_ENV !== "production" ? {
/** Name of the icon to display */
name: PropTypes.string.isRequired,
347
/** Specify icon size in pixels */
size: PropTypes.number
350} : {};
351Icon.defaultProps = {
size: undefined
353};
354
355var _StyledDiv = styled__default("div")(function (p) {
return {
  alignItems: 'center',
  display: 'flex',
  height: p._css,
  justifyContent: 'center',
  width: p._css2
};
363});
364
365var _StyledImg = styled__default("img")({
height: 'auto',
maxWidth: '100%'
368});
369
370function FullColorIcon(_ref) {
var name = _ref.name,
    size = _ref.size,
    props = _objectWithoutProperties(_ref, ["name", "size"]);
374
return (
  /*#__PURE__*/
  React__default.createElement(_StyledDiv, _extends({}, props, {
    _css: size,
    _css2: size
  }),
  /*#__PURE__*/
  React__default.createElement(_StyledImg, {
    src: "https://bdaim-webexcdn-p.azureedge.net/es-assets/images/full-color-icons/".concat(name, ".svg"),
    alt: "".concat(name, " icon")
  }))
);
387}
388FullColorIcon.propTypes = process.env.NODE_ENV !== "production" ? {
/** Name of the icon to display */
name: PropTypes.string.isRequired,
391
/** Specify icon size in pixels */
size: PropTypes.number
394} : {};
395FullColorIcon.defaultProps = {
size: undefined
397};
398
399var useTheme = function useTheme() {
return React.useContext(styled.ThemeContext);
401};
402
403// https://webaim.org/techniques/css/invisiblecontent/#absolutepositioning
404
405function screenReaderOnly(Component) {
var ScreenReaderOnly = styled__default(Component)(["position:absolute !important;left:-10000px;width:1px;height:1px;overflow:hidden;"]);
return ScreenReaderOnly;
408}
409
410var DismissButtonBase = styled__default.button(["background-color:transparent;border:0;cursor:pointer;display:flex;font-weight:bold;opacity:0.2;padding:0;&:hover,&:focus{opacity:0.5;}"]);
411var ScreenReaderText = screenReaderOnly('span');
412var DismissButton =
413/*#__PURE__*/
414React__default.forwardRef(function DismissButton(props, ref) {
return (
  /*#__PURE__*/
  React__default.createElement(DismissButtonBase, _extends({
    "aria-label": "Close",
    type: "button"
  }, props, {
    ref: ref
  }),
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "remove"
  }),
  /*#__PURE__*/
  React__default.createElement(ScreenReaderText, null, "Close"))
);
430});
431
432function 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; }
433
434function _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; }
435var NotificationIcon = styled__default(Icon)(["align-self:start;color:", ";display:none;@media (min-width:", "){display:inline;margin-right:8px;}"], function (props) {
return props.iconColor;
437}, function (props) {
return props.alwaysShowIcon ? 0 : props.theme.screenSize.tablet;
439});
440var Dismiss = styled__default(DismissButton)(["align-self:start;color:", ";font-weight:normal;opacity:0.8;i{font-size:27px;}"], function (props) {
return props.color.textColor;
442});
443var ContentWrapper = styled__default.div(["align-self:center;flex-grow:1;word-break:break-word;"]);
444
445function 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"]);
456
function dismiss() {
  onDismiss();
  dismissNotification();
}
461
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null, includeIcon &&
  /*#__PURE__*/
  React__default.createElement(NotificationIcon, {
    name: iconName,
    iconColor: iconColor,
    size: 28,
    alwaysShowIcon: alwaysShowIcon
  }),
  /*#__PURE__*/
  React__default.createElement(ContentWrapper, rest, children), isDismissable &&
  /*#__PURE__*/
  React__default.createElement(Dismiss, {
    onClick: dismiss,
    color: color
  }))
);
480}
481
482var Notification = styled__default.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;
484}, function (props) {
return props.variant.textColor;
486}, 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  ") : "";
488}, function (props) {
return props.variant.textColor;
490});
491function 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"]);
502
  var theme = useTheme();
  var color = theme.notificationStyles[type][styleType];
  var iconName = theme.validationIconName[type];
  var iconColor = styleType === 'base' ? theme.colors.white : theme.colors[type];
507
  var notificationContentProps = _objectSpread({
    color: color,
    iconName: iconName,
    iconColor: iconColor,
    role: role
  }, rest);
514
  var _useState = React.useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isDismissed = _useState2[0],
      setIsDismissed = _useState2[1];
519
  function dismissNotification() {
    setIsDismissed(true);
  }
523
  return !isDismissed &&
  /*#__PURE__*/
  React__default.createElement(Notification, {
    variant: color,
    className: className,
    style: style,
    restyleAnchors: restyleAnchors
  },
  /*#__PURE__*/
  React__default.createElement(NotificationContent, _extends({
    dismissNotification: dismissNotification
  }, notificationContentProps), children));
};
537}
538
539var DefaultNotification = useNotification();
540
541function Notification$1(props) {
return (
  /*#__PURE__*/
  React__default.createElement(DefaultNotification, props)
);
546}
547
548Notification$1.propTypes = process.env.NODE_ENV !== "production" ? {
/** The type of notification to render */
type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
551
/** Display an icon in the notification on a screen >= 768px */
includeIcon: PropTypes.bool,
554
/** Display a dismiss button that will close the notification */
isDismissable: PropTypes.bool,
role: PropTypes.oneOf(['dialog', 'alert']),
558
/** Function to execute when the dialog is closed */
onDismiss: PropTypes.func,
children: PropTypes.node,
562
/** Allows the icon to display at all resolutions */
alwaysShowIcon: PropTypes.bool
565} : {};
566Notification$1.defaultProps = {
includeIcon: false,
isDismissable: false,
children: null,
role: 'dialog',
onDismiss: _noop,
alwaysShowIcon: false
573};
574
575var Notification$2 = useNotification('light');
576
577function LightNotification(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Notification$2, props)
);
582}
583
584LightNotification.propTypes = process.env.NODE_ENV !== "production" ? {
/** The type of notification to render */
type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
587
/** Display an icon in the notification on a screen >= 768px */
includeIcon: PropTypes.bool,
590
/** Display a dismiss button that will close the notification */
isDismissable: PropTypes.bool,
role: PropTypes.oneOf(['dialog', 'alert']),
594
/** Function to execute when the dialog is closed */
onDismiss: PropTypes.func,
children: PropTypes.node,
598
/** Allows the icon to display at all resolutions */
alwaysShowIcon: PropTypes.bool
601} : {};
602LightNotification.defaultProps = {
includeIcon: false,
isDismissable: false,
children: null,
role: 'dialog',
onDismiss: _noop,
alwaysShowIcon: false
609};
610
611var Notification$3 = useNotification('messageOnly');
612
613function MessageNotification(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Notification$3, props)
);
618}
619
620MessageNotification.propTypes = process.env.NODE_ENV !== "production" ? {
/** The type of notification to render */
type: PropTypes.oneOf(['success', 'info', 'warning', 'danger', 'advisor']).isRequired,
623
/** Display an icon in the notification on a screen >= 768px */
includeIcon: PropTypes.bool,
626
/** Display a dismiss button that will close the notification */
isDismissable: PropTypes.bool,
role: PropTypes.oneOf(['dialog', 'alert']),
630
/** Function to execute when the dialog is closed */
onDismiss: PropTypes.func,
children: PropTypes.node,
634
/** Allows the icon to display at all resolutions */
alwaysShowIcon: PropTypes.bool
637} : {};
638MessageNotification.defaultProps = {
includeIcon: false,
isDismissable: false,
children: null,
role: 'dialog',
onDismiss: _noop,
alwaysShowIcon: false
645};
646
647var propTypes = process.env.NODE_ENV !== "production" ? {
emphasizedText: PropTypes.string,
text: PropTypes.string.isRequired
650} : {};
651var defaultProps = {
emphasizedText: undefined
653};
654function InlineMessage(_ref) {
var emphasizedText = _ref.emphasizedText,
    text = _ref.text;
return (
  /*#__PURE__*/
  React__default.createElement("span", null, emphasizedText !== undefined ?
  /*#__PURE__*/
  React__default.createElement("strong", null, emphasizedText) : null, ' ', text)
);
663}
664InlineMessage.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
665InlineMessage.defaultProps = defaultProps;
666function Message(_ref2) {
var emphasizedText = _ref2.emphasizedText,
    text = _ref2.text;
return (
  /*#__PURE__*/
  React__default.createElement("span", null, emphasizedText !== undefined ?
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement("strong", null, emphasizedText),
  /*#__PURE__*/
  React__default.createElement("br", null)) : null, text)
);
679}
680Message.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
681Message.defaultProps = defaultProps;
682
683var DrawerContext =
684/*#__PURE__*/
685React__default.createContext({});
686
687var HeadingBase = styled__default.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;
689}, function (props) {
return props.underlineColor && "2px solid ".concat(props.underlineColor, ";");
691}, function (props) {
return props.isKnockoutStyle ? 'white' : 'inherit';
693}, function (props) {
return props.theme.font.headingMobile[props.adjustedSize];
695}, function (props) {
return props.underlineColor && '0.22em';
697}, function (props) {
return props.isKnockoutStyle && '20px 15px';
699}, function (props) {
return props.adjustedSize > 3 ? '75%' : '65%';
701}, function (props) {
return props.theme.screenSize.tablet;
703}, function (props) {
return props.theme.font.headingDesktop[props.adjustedSize];
705});
706
707function 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"]);
714
var adjustedSize = size || level;
var hLevel = "h".concat(level);
return (
  /*#__PURE__*/
  React__default.createElement(HeadingBase, _extends({
    as: hLevel,
    adjustedSize: adjustedSize,
    isKnockoutStyle: isKnockoutStyle,
    underlineColor: underlineColor
  }, other), children)
);
726}
727
728Heading.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node,
730
/** Heading level element */
level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
733
/** Override the default font size with another level */
size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
736
/** Alternate knockout-style header with a solid background */
isKnockoutStyle: PropTypes.bool,
739
/** Include an underline with the provided color */
underlineColor: PropTypes.string
742} : {};
743Heading.defaultProps = {
children: undefined,
size: undefined,
isKnockoutStyle: false,
underlineColor: null
748};
749var PageHeading = function PageHeading(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Heading, _extends({
    isKnockoutStyle: true,
    level: 1
  }, props))
);
757};
758
759function generateAlphaName() {
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var text = '';
762
for (var i = 0; i < 6; i++) {
  text += possible.charAt(Math.floor(Math.random() * possible.length));
}
766
return text;
768}
769
770function useUniqueId(providedId) {
var idRef = React.useRef(providedId || generateAlphaName());
return idRef.current;
773}
774
775var PanelWrapper = styled__default.div(["border-bottom:1px solid ", ";"], function (props) {
return props.theme.colors.gray3;
777});
778var PanelButton = styled__default.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;
780}, function (props) {
return props.theme.colors.gray2;
782}, function (props) {
return props.theme.brandColors.brandPrimary1;
784});
785var PanelIcon = styled__default(Icon)(["margin-right:0.4em;position:relative;top:-2px;"]);
786var PanelBody = styled__default(function (_ref) {
var noPadding = _ref.noPadding,
    rest = _objectWithoutProperties(_ref, ["noPadding"]);
789
return (
  /*#__PURE__*/
  React__default.createElement(AnimateHeight, rest)
);
794})(["background-color:", ";color:", ";> div{border-bottom:4px solid ", ";padding:", ";}"], function (props) {
return props.theme.colors.white;
796}, function (props) {
return props.theme.colors.gray9;
798}, function (props) {
return props.theme.colors.gray3;
800}, function (props) {
return props.noPadding ? '0' : '10px 10px 10px 40px';
802});
803
804function 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"]);
813
var _React$useContext = React__default.useContext(DrawerContext),
    openedIconName = _React$useContext.openedIconName,
    closedIconName = _React$useContext.closedIconName;
817
var headingAriaId = "".concat(useUniqueId(other.id), "-heading");
var regionAriaId = "".concat(useUniqueId(other.id), "-region");
return (
  /*#__PURE__*/
  React__default.createElement(PanelWrapper, other,
  /*#__PURE__*/
  React__default.createElement("div", {
    id: headingAriaId,
    role: "heading",
    "aria-level": headingLevel
  },
  /*#__PURE__*/
  React__default.createElement(PanelButton, {
    "aria-expanded": isOpen,
    "aria-controls": regionAriaId,
    onClick: function onClick() {
      return onItemClick();
    }
  },
  /*#__PURE__*/
  React__default.createElement("span", null,
  /*#__PURE__*/
  React__default.createElement(PanelIcon, {
    name: isOpen ? openedIconName : closedIconName
  }), title), titleAside &&
  /*#__PURE__*/
  React__default.createElement("aside", null, titleAside))),
  /*#__PURE__*/
  React__default.createElement(PanelBody, {
    "aria-labelledby": headingAriaId,
    duration: 300,
    height: isOpen ? 'auto' : 0,
    id: regionAriaId,
    noPadding: noPadding,
    role: "region"
  }, children))
);
855}
856
857DrawerPanel.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any.isRequired,
859
/** Title text displayed next to the open/close icon */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired,
862
/** Aside text/content displayed on the right side of the panel title */
titleAside: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
865
/** @ignore */
isOpen: PropTypes.bool,
868
/** Removes the default padding from the panel body */
noPadding: PropTypes.bool,
871
/** Set desired aria-level for heading */
headingLevel: Heading.propTypes.level,
874
/** @ignore */
onItemClick: PropTypes.func
877} : {};
878DrawerPanel.defaultProps = {
isOpen: false,
noPadding: false,
titleAside: undefined,
headingLevel: 2,
onItemClick: _noop
884};
885
886function 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; }
887
888function _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; }
889var StyledDrawer = styled__default.div(["background-color:", ";border-top:1px solid ", ";box-shadow:0 1px 1px ", ";margin-bottom:25px;"], function (props) {
return props.theme.colors.white;
891}, function (props) {
return props.theme.colors.gray3;
893}, function (props) {
return props.theme.colors.boxShadowLight;
895});
896
897function 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"]);
905
function _onItemClick(key) {
  var nextActiveKeys = _toConsumableArray(activeKeys);
908
  if (isAccordion) {
    nextActiveKeys = nextActiveKeys[0] === key ? [] : [key];
  } else {
    var index = _indexOfInstanceProperty(nextActiveKeys).call(nextActiveKeys, key);
913
    var isOpen = index > -1;
915
    if (isOpen) {
      _spliceInstanceProperty(nextActiveKeys).call(nextActiveKeys, index, 1);
    } else {
      nextActiveKeys.push(key);
    }
  }
922
  onActiveKeysChanged(nextActiveKeys);
}
925
return (
  /*#__PURE__*/
  React__default.createElement(DrawerContext.Provider, {
    value: {
      openedIconName: openedIconName,
      closedIconName: closedIconName
    }
  },
  /*#__PURE__*/
  React__default.createElement(StyledDrawer, other, _mapInstanceProperty(React.Children).call(React.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;
940
      if (isAccordion) {
        isOpen = activeKeys[0] === key;
      } else {
        isOpen = _indexOfInstanceProperty(activeKeys).call(activeKeys, key) > -1;
      }
946
      var childProps = _objectSpread$1(_objectSpread$1({}, child.props), {}, {
        key: key,
        isOpen: isOpen,
        onItemClick: function onItemClick() {
          return _onItemClick(key);
        }
      });
954
      return (
        /*#__PURE__*/
        React__default.cloneElement(child, childProps)
      );
    }
960
    return null;
  })))
);
964}
965
966Drawer.propTypes = process.env.NODE_ENV !== "production" ? {
/** Set which panels are open */
activeKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
969
/** Usually only one or more Drawer.Panel elements */
children: PropTypes.node,
972
/** Override the default plus icon with another OE icon name */
closedIconName: PropTypes.string,
975
/** Only allows one DrawerPanel to be open at a time */
isAccordion: PropTypes.bool,
978
/** Function called when changing active keys */
onActiveKeysChanged: PropTypes.func.isRequired,
981
/** Override the default minus icon with another OE icon name */
openedIconName: PropTypes.string
984} : {};
985Drawer.defaultProps = {
activeKeys: [],
isAccordion: false,
closedIconName: 'add',
openedIconName: 'minus',
children: undefined
991};
992Drawer.Panel = DrawerPanel;
993
994var OrientationContext = /*#__PURE__*/
995React__default.createContext('stacked');
996
997var FieldsetBase = styled__default.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' && styled.css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
999});
1000var Legend = styled__default.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;
1002}, function (props) {
return props.theme.font.baseLineHeight;
1004});
1005
1006function Fieldset(props) {
var legendContent = props.legendContent,
    children = props.children,
    other = _objectWithoutProperties(props, ["legendContent", "children"]);
1010
var legendId = legendContent ? generateAlphaName() : undefined;
var orientation = React__default.useContext(OrientationContext);
return (
  /*#__PURE__*/
  React__default.createElement(FieldsetBase, _extends({
    role: "group",
    "aria-labelledby": legendId,
    orientation: orientation
  }, other), legendContent &&
  /*#__PURE__*/
  React__default.createElement(Legend, {
    id: legendId
  }, legendContent), children)
);
1025}
1026
1027Fieldset.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
1031} : {};
1032Fieldset.defaultProps = {
legendContent: null,
children: undefined
1035};
1036Fieldset.Legend = Legend;
1037
1038function 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; }
1039
1040function _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; }
1041
1042var Fade = function Fade(_ref) {
var children = _ref.children,
    duration = _ref.duration,
    opacity = _ref.opacity,
    otherProps = _objectWithoutProperties(_ref, ["children", "duration", "opacity"]);
1047
var transitionStyles = {
  transition: "opacity ".concat(duration, "ms linear"),
  opacity: 0
};
var stateStyles = {
  entering: {
    opacity: opacity
  },
  entered: {
    opacity: opacity
  }
};
return (
  /*#__PURE__*/
  React__default.createElement(Transition, _extends({}, otherProps, {
    timeout: duration
  }), function (state, innerProps) {
    return (
      /*#__PURE__*/
      React__default.cloneElement(children, _objectSpread$2(_objectSpread$2({}, innerProps), {}, {
        style: _objectSpread$2(_objectSpread$2(_objectSpread$2({}, children.props.style), transitionStyles), stateStyles[state])
      }))
    );
  })
);
1073};
1074
1075Fade.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any.isRequired,
duration: PropTypes.number,
opacity: PropTypes.number
1079} : {};
1080Fade.defaultProps = {
duration: 150,
opacity: 1
1083};
1084
1085function darken(color, percent) {
return tinycolor(color).darken(percent).toHexString();
1087}
1088function 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;
1092}
1093
1094var StyledButton = styled__default.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;
1096}, function (props) {
return props.theme.font.baseLineHeight;
1098}, function (props) {
return darken(props.variant.textColor, 10);
1100}, function (props) {
return props.variant.textColor;
1102});
1103var LinkButton =
1104/*#__PURE__*/
1105React__default.forwardRef(function LinkButton(props, ref) {
var children = props.children,
    styleType = props.styleType,
    other = _objectWithoutProperties(props, ["children", "styleType"]);
1109
var theme = useTheme();
var variant = theme.buttonStyles.linkButton.variant[styleType];
return (
  /*#__PURE__*/
  React__default.createElement(StyledButton, _extends({
    ref: ref,
    variant: variant,
    type: "button"
  }, other), children)
);
1120});
1121LinkButton.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node.isRequired,
1123
/** Select the color style of the button, types come from theme buttonStyles.linkButton */
styleType: PropTypes.string
1126} : {};
1127LinkButton.defaultProps = {
styleType: 'default'
1129};
1130
1131var StyledButton$1 = styled__default(LinkButton)(["text-decoration:", ";&:hover,:focus{text-decoration:", ";}"], function (props) {
return props.suppressUnderline ? 'none' : "".concat(props.variant.textColor, " dashed underline");
1133}, function (props) {
return props.suppressUnderline ? 'none' : "".concat(props.variant.textColor, " solid underline");
1135});
1136var PopoverLink =
1137/*#__PURE__*/
1138React__default.forwardRef(function PopoverLink(props, ref) {
var children = props.children,
    styleType = props.styleType,
    suppressUnderline = props.suppressUnderline,
    other = _objectWithoutProperties(props, ["children", "styleType", "suppressUnderline"]);
1143
var theme = useTheme();
var variant = theme.buttonStyles.linkButton.variant[styleType];
return (
  /*#__PURE__*/
  React__default.createElement(StyledButton$1, _extends({
    ref: ref,
    variant: variant,
    suppressUnderline: suppressUnderline
  }, other), children)
);
1154});
1155PopoverLink.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node.isRequired,
1157
/** Select the color style of the button, types come from theme */
styleType: PropTypes.string,
1160
/** Hide underline from link. Useful for children like Icons */
suppressUnderline: PropTypes.bool
1163} : {};
1164PopoverLink.defaultProps = {
styleType: 'primary',
suppressUnderline: false
1167};
1168
1169function useRootNode(initialRoot) {
var _useState = React.useState(initialRoot),
    _useState2 = _slicedToArray(_useState, 2),
    rootNode = _useState2[0],
    setRootNode = _useState2[1];
1174
var nodeRef = React.useCallback(function (node) {
  if (!node) return;
  var foundRoot = node.getRootNode();
  var targetNode = foundRoot.body || foundRoot;
  if (initialRoot !== targetNode) setRootNode(targetNode);
}, []);
return [rootNode, nodeRef];
1182}
1183function useRootNodeLocator(initialRoot) {
var _useRootNode = useRootNode(initialRoot),
    _useRootNode2 = _slicedToArray(_useRootNode, 2),
    rootNode = _useRootNode2[0],
    rootNodeRef = _useRootNode2[1];
1188
var RootNodeInput = React.useCallback(function () {
  return (
    /*#__PURE__*/
    React__default.createElement("input", {
      type: "hidden",
      ref: rootNodeRef
    })
  );
}, []);
return [rootNode, RootNodeInput];
1199}
1200
1201var TooltipBase = styled__default.div(["position:absolute;z-index:999;"]);
1202var TooltipInner = styled__default.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;
1204}, function (props) {
return props.theme.colors.white;
1206}, function (props) {
return props.theme.font.baseLineHeight;
1208});
1209var TooltipArrowBase = styled__default.div(["border-color:transparent;border-style:solid;height:0;position:absolute;width:0;"]);
1210var TooltipTop = styled__default(TooltipBase)(["padding:5px 0;"]);
1211var TooltipRight = styled__default(TooltipBase)(["padding:0 5px;"]);
1212var TooltipBottom = styled__default(TooltipBase)(["padding:5px 0;"]);
1213var TooltipLeft = styled__default(TooltipBase)(["padding:0 5px;"]);
1214var TooltipArrowTop = styled__default(TooltipArrowBase)(["border-top-color:", ";border-width:5px 5px 0;bottom:0;"], function (props) {
return props.theme.colors.primary;
1216});
1217var TooltipArrowRight = styled__default(TooltipArrowBase)(["border-right-color:", ";border-width:5px 5px 5px 0;left:0;"], function (props) {
return props.theme.colors.primary;
1219});
1220var TooltipArrowBottom = styled__default(TooltipArrowBase)(["border-bottom-color:", ";border-width:0 5px 5px;top:0;"], function (props) {
return props.theme.colors.primary;
1222});
1223var TooltipArrowLeft = styled__default(TooltipArrowBase)(["border-left-color:", ";border-width:5px 0 5px 5px;right:0;"], function (props) {
return props.theme.colors.primary;
1225});
1226var ScreenReaderContent = screenReaderOnly('div');
1227
1228function Tooltip(props) {
var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
1233
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"]);
1242
var TooltipStyled;
var TooltipArrow;
var tooltipId = name ? "es-tooltip__".concat(name) : undefined;
1246
var _useRootNode = useRootNode(document.body),
    _useRootNode2 = _slicedToArray(_useRootNode, 2),
    rootNode = _useRootNode2[0],
    rootNodeRef = _useRootNode2[1];
1251
switch (position) {
  case 'right':
    TooltipStyled = TooltipRight;
    TooltipArrow = TooltipArrowRight;
    break;
1257
  case 'bottom':
    TooltipStyled = TooltipBottom;
    TooltipArrow = TooltipArrowBottom;
    break;
1262
  case 'left':
    TooltipStyled = TooltipLeft;
    TooltipArrow = TooltipArrowLeft;
    break;
1267
  default:
    TooltipStyled = TooltipTop;
    TooltipArrow = TooltipArrowTop;
    break;
}
1273
function showTooltip() {
  setShow(true);
}
1277
function hideTooltip() {
  setShow(false);
}
1281
function toggleShow() {
  setShow(!show);
}
1285
function closeOnEscape(event) {
  if (event.keyCode === 27) {
    setShow(false);
  }
}
1291
var descriptionId = "".concat(useUniqueId(other.id), "-description");
return (
  /*#__PURE__*/
  React__default.createElement(reactPopper.Manager, null,
  /*#__PURE__*/
  React__default.createElement(reactPopper.Reference, null, function (_ref) {
    var _ref2 = _ref.ref;
    return (
      /*#__PURE__*/
      React__default.createElement(PopoverLink, {
        ref: function ref(el) {
          _ref2(el);
1304
          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__default.createElement(ScreenReaderContent, {
    id: descriptionId
  }, content),
  /*#__PURE__*/
  ReactDOM.createPortal(
  /*#__PURE__*/
  React__default.createElement(reactPopper.Popper, {
    placement: position
  }, function (_ref3) {
    var ref = _ref3.ref,
        style = _ref3.style,
        placement = _ref3.placement,
        arrowProps = _ref3.arrowProps;
    return (
      /*#__PURE__*/
      React__default.createElement(Fade, {
        in: show,
        mountOnEnter: true,
        unmountOnExit: true
      },
      /*#__PURE__*/
      React__default.createElement(TooltipStyled, _extends({
        ref: ref,
        role: "tooltip",
        id: tooltipId,
        style: style,
        "aria-live": "polite"
      }, other),
      /*#__PURE__*/
      React__default.createElement(TooltipArrow, {
        ref: arrowProps.ref,
        style: arrowProps.style
      }),
      /*#__PURE__*/
      React__default.createElement(TooltipInner, null, content)))
    );
  }), rootNode))
);
1357}
1358
1359Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
name: PropTypes.string.isRequired,
children: PropTypes.any.isRequired,
1362
/** The text the tooltip displays */
content: PropTypes.node.isRequired,
1365
/** Set the position of the tooltip over the content */
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
1368
/** Disables the default show onHover functionality */
disableHover: PropTypes.bool,
1371
/** Disables the default show onFocus functionality */
disableFocus: PropTypes.bool,
1374
/** Select the color style of the button, types come from theme */
styleType: PropTypes.string
1377} : {};
1378Tooltip.defaultProps = {
position: 'top',
disableHover: false,
disableFocus: false,
styleType: undefined
1383};
1384
1385var StyledButton$2 = styled__default.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;
1387}, function (props) {
return props.colors.bgColor;
1389}, function (props) {
return props.borderRadii.bottomLeft;
1391}, function (props) {
return props.borderRadii.bottomRight;
1393}, function (props) {
return props.borderRadii.topLeft;
1395}, function (props) {
return props.borderRadii.topRight;
1397}, function (props) {
return props.colors.textColor;
1399}, function (props) {
return props.mobileBlock ? 'block' : 'inline-block';
1401}, function (props) {
return props.buttonSize.fontSize;
1403}, function (props) {
return props.buttonSize.fontWeight || 'normal';
1405}, function (props) {
return props.buttonSize.lineHeight ? props.buttonSize.lineHeight : props.theme.font.baseLineHeight;
1407}, function (props) {
return props.buttonSize.paddingBottom;
1409}, function (props) {
return props.buttonSize.paddingSides;
1411}, function (props) {
return props.buttonSize.paddingSides;
1413}, function (props) {
return props.buttonSize.paddingTop;
1415}, function (props) {
return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
1417}, function (props) {
return props.mobileBlock ? '100%' : 'auto';
1419}, function (props) {
return props.theme.screenSize.tablet;
1421}, function (props) {
return props.block ? 'block' : 'inline-block';
1423}, function (props) {
return props.block ? '100%' : 'auto';
1425}, function (props) {
return props.colors.hoverTextColor;
1427}, function (props) {
return props.colors.hoverBgColor;
1429}, function (props) {
return props.colors.hoverBorderColor;
1431}, function (props) {
return props.colors.hoverTextColor;
1433}, function (props) {
return props.colors.hoverBgColor;
1435}, function (props) {
return props.colors.hoverBorderColor;
1437}, function (props) {
return props.colors.focusBoxShadowColor;
1439}, function (props) {
return props.colors.activeTextColor;
1441}, function (props) {
return props.colors.activeBgColor;
1443}, function (props) {
return props.colors.activeBorderColor;
1445}, function (props) {
return props.colors.focusBoxShadowColor;
1447});
1448var Button =
1449/*#__PURE__*/
1450React__default.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"]);
1459
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
};
1472
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'
    };
  }
1487
  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;
}
1504
var buttonColors = getButtonColors();
return (
  /*#__PURE__*/
  React__default.createElement(StyledButton$2, _extends({
    type: "button",
    block: block,
    mobileBlock: mobileBlockSetting,
    buttonSize: buttonSize,
    colors: buttonColors,
    ref: ref,
    borderRadii: borderRadii
  }, other), children)
);
1518});
1519Button.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node.isRequired,
1521
/** Select the color style of the button, types come from theme buttonStyles.button */
styleType: PropTypes.string,
size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
1525
/** Make the button's width the size of it's parent container */
block: PropTypes.bool,
1528
/** Override the default block mobile style */
mobileBlock: PropTypes.bool,
1531
/** Styles the Button with a flat left edge */
flatLeftEdge: PropTypes.bool,
1534
/** Styles the Button with a flat right edge */
flatRightEdge: PropTypes.bool
1537} : {};
1538Button.defaultProps = {
styleType: 'default',
block: false,
mobileBlock: true,
size: 'default',
flatLeftEdge: false,
flatRightEdge: false
1545};
1546
1547var PopperBox = styled__default.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;
1549});
1550var Arrow = styled__default.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;
1552}, function (props) {
return props.arrowSize.bottomBorderWidth;
1554}, function (props) {
return props.arrowSize.borderColor;
1556}, function (props) {
return props.arrowSize.borderSize;
1558}, function (props) {
return props.arrowSize.bottomWidth;
1560}, function (props) {
return props.hasTitle ? props.theme.colors.primary : props.theme.colors.white;
1562}, function (props) {
return props.arrowSize.size;
1564}, function (props) {
return props.arrowSize.borderSize;
1566}, function (props) {
return props.arrowSize.borderColor;
1568}, function (props) {
return props.arrowSize.borderSize;
1570}, function (props) {
return props.arrowSize.size;
1572}, function (props) {
return props.theme.colors.white;
1574}, function (props) {
return props.arrowSize.size;
1576}, function (props) {
return props.arrowSize.size;
1578}, function (props) {
return props.arrowSize.rightBorderWidth;
1580}, function (props) {
return props.arrowSize.borderColor;
1582}, function (props) {
return props.arrowSize.borderSize;
1584}, function (props) {
return props.arrowSize.rightWidth;
1586}, function (props) {
return props.theme.colors.white;
1588}, function (props) {
return props.arrowSize.size;
1590}, function (props) {
return props.arrowSize.borderSize;
1592}, function (props) {
return props.arrowSize.borderColor;
1594}, function (props) {
return props.arrowSize.borderSize;
1596}, function (props) {
return props.arrowSize.size;
1598}, function (props) {
return props.theme.colors.white;
1600}, function (props) {
return props.arrowSize.size;
1602});
1603var 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'
}
1639};
1640
1641function getArrowValues(size) {
switch (size) {
  case 'sm':
    return arrowSizes.sm;
1645
  case 'lg':
    return arrowSizes.lg;
1648
  case 'none':
    return arrowSizes.none;
1651
  default:
    return arrowSizes.md;
}
1655}
1656
1657function 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);
1671
var _useRootNode = useRootNode(document.body),
    _useRootNode2 = _slicedToArray(_useRootNode, 2),
    rootNode = _useRootNode2[0],
    rootNodeRef = _useRootNode2[1];
1676
return (
  /*#__PURE__*/
  React__default.createElement(reactPopper.Manager, null,
  /*#__PURE__*/
  React__default.createElement(reactPopper.Reference, null, function (_ref) {
    var _ref2 = _ref.ref;
    return (
      /*#__PURE__*/
      React__default.createElement("div", {
        className: "".concat(name, "-popper__trigger"),
        ref: function ref(el) {
          _ref2(el);
1689
          rootNodeRef(el);
        }
      }, trigger)
    );
  }),
  /*#__PURE__*/
  ReactDOM.createPortal(
  /*#__PURE__*/
  React__default.createElement(reactPopper.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__default.createElement(Fade, {
        in: transitionIn,
        duration: transitionTimeout,
        mountOnEnter: true,
        unmountOnExit: true
      },
      /*#__PURE__*/
      React__default.createElement(PopperBox, {
        ref: ref,
        style: style,
        arrowSize: arrowValues
      }, children,
      /*#__PURE__*/
      React__default.createElement(Arrow, {
        ref: arrowProps.ref,
        "data-placement": placement,
        style: arrowProps.style,
        arrowSize: arrowValues,
        hasTitle: hasTitle
      })))
    );
  }), rootNode))
);
1743}
1744
1745Popup.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'])
1758} : {};
1759Popup.defaultProps = {
name: '',
trigger: undefined,
children: undefined,
position: 'bottom',
arrowSize: 'default',
transitionIn: false,
transitionTimeout: 150,
hasTitle: false,
disableFlipping: false,
popperRef: undefined,
enableEvents: true,
strategy: 'absolute'
1772};
1773
1774var RootCloseWrapper = function RootCloseWrapper(_ref) {
var children = _ref.children,
    onRootClose = _ref.onRootClose,
    disabled = _ref.disabled,
    className = _ref.className;
var ref = React.useRef();
reactOverlays.useRootClose(ref, onRootClose, {
  disabled: disabled
});
return (
  /*#__PURE__*/
  React__default.createElement("div", {
    ref: ref,
    className: "root-close-wrapper ".concat(className)
  }, children)
);
1790};
1791
1792var Container = styled__default.div(["display:inline-block;"]);
1793var PopoverHeader = styled__default.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;
1795}, function (props) {
return props.theme.colors.white;
1797}, function (props) {
return props.theme.font.baseLineHeight;
1799});
1800var TitleBar = styled__default.h3(["flex:1 1;font-size:18px;margin:0;padding:8px 14px;text-align:left;"]);
1801var PopoverBody = styled__default.div(["background:", ";color:", ";font-size:18px;font-weight:normal;line-height:", ";padding:", ";text-align:right;"], function (props) {
return props.theme.colors.white;
1803}, function (props) {
return props.theme.colors.gray9;
1805}, function (props) {
return props.theme.font.baseLineHeight;
1807}, function (props) {
return props.hasAltCloseWithNoTitle ? '0 14px 8px' : '8px 14px';
1809});
1810var PopoverContent = styled__default.div(["margin-bottom:", ";text-align:left;"], function (props) {
return props.showCloseButton ? '8px' : '0';
1812});
1813var PopoverCloseButton = styled__default(Button)(["display:inline-block;margin:5px 0;width:auto;"]);
1814var AltCloseButton = styled__default(DismissButton)(["color:", ";flex:0 1;margin-left:auto;padding:8px;"], function (props) {
return props.hasTitle ? props.theme.colors.white : props.theme.colors.black;
1816});
1817var CloseHelpText = styled__default.span(["color:transparent;flex:none;height:1px;outline:0;width:1px;"]);
1818
1819function 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 = React.useRef(true);
var triggerBtnRef = React.useRef(null);
1837
var _popperRef = React.useRef(null);
1839
var contentRef = React.useRef(null);
var escMsgRef = React.useRef(null);
var closeBtnRef = React.useRef(null);
var timeoutRef = React.useRef(null);
1844
var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
1849
function toggleShow(event) {
  event.preventDefault();
  event.stopPropagation();
  setIsOpen(!isOpen);
}
1855
function hidePopover(event) {
  if (isOpen) {
    if (event.type !== 'click') {
      triggerBtnRef.current.focus();
    }
1861
    setIsOpen(false);
  }
}
1865
function hidePopOnScroll() {
  _setInterval(function () {
    if (_popperRef.current) {
      var bounds = _popperRef.current.getBoundingClientRect();
1870
      var inViewport = bounds.top >= 0 && bounds.bottom <= window.innerHeight;
1872
      if (!inViewport && isOpen) {
        setIsOpen(false);
      }
    }
  }, 100);
}
1879
React.useEffect(function () {
  if (isFirstRun.current) {
    isFirstRun.current = false;
    return;
  }
1885
  if (timeoutRef.current !== null) {
    clearTimeout(timeoutRef.current);
  }
1889
  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]);
React.useEffect(function () {
  if (isOpen) {
    window.addEventListener('scroll', hidePopOnScroll);
  }
1906
  return function () {
    return window.removeEventListener('scroll', hidePopOnScroll);
  };
}, [isOpen]);
var closeButton =
/*#__PURE__*/
React__default.createElement(PopoverCloseButton, {
  onClick: toggleShow,
  ref: closeBtnRef
}, "Close");
var altCloseButton =
/*#__PURE__*/
React__default.createElement(AltCloseButton, {
  "aria-label": "Close",
  hasTitle: hasTitle,
  onClick: toggleShow,
  ref: closeBtnRef
});
return (
  /*#__PURE__*/
  React__default.createElement(Container, null,
  /*#__PURE__*/
  React__default.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__default.createElement(RootCloseWrapper, {
    onRootClose: hidePopover,
    disabled: disableRootClose
  },
  /*#__PURE__*/
  React__default.createElement("div", {
    role: "dialog",
    ref: contentRef
  },
  /*#__PURE__*/
  React__default.createElement(PopoverHeader, {
    hasTitle: hasTitle
  }, hasTitle &&
  /*#__PURE__*/
  React__default.createElement(TitleBar, null, title), hasAltCloseButton && altCloseButton,
  /*#__PURE__*/
  React__default.createElement(CloseHelpText, {
    tabIndex: -1,
    ref: escMsgRef,
    "aria-label": "Press escape to close the Popover"
  })),
  /*#__PURE__*/
  React__default.createElement(PopoverBody, {
    hasAltCloseWithNoTitle: hasAltCloseWithNoTitle
  },
  /*#__PURE__*/
  React__default.createElement(PopoverContent, {
    showCloseButton: showCloseButton
  }, content), showCloseButton && closeButton)))))
);
1978}
1979
1980Popover.propTypes = process.env.NODE_ENV !== "production" ? {
/** The name of the popover. Used for differentiating popovers */
name: PropTypes.string.isRequired,
1983
/** The text displayed in the popover title section */
title: PropTypes.string,
1986
/** The content displayed in the popover body */
content: PropTypes.node.isRequired,
1989
/** The placement of the popover in relation to the link */
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
1992
/** The size of the arrow on the popover box */
arrowSize: PropTypes.oneOf(['sm', 'lg', 'none', 'default']),
1995
/** Prevents popover from closing when clicked outside of it */
disableRootClose: PropTypes.bool,
1998
/** Display a close button in the bottom right of the popover body */
hasCloseButton: PropTypes.bool,
2001
/** Display a close ('x') button in the popover title bar */
hasAltCloseButton: PropTypes.bool,
2004
/** Function returning a button component to be used as the popover trigger */
renderTrigger: PropTypes.func.isRequired,
2007
/** Disables popovers ability to change position to stay in viewport */
disableFlipping: PropTypes.bool,
2010
/** Enable event handlers provided by Popper.js */
enableEvents: PropTypes.bool,
2013
/** Sets the strategy for positioning the popover in Popper.js */
strategy: PropTypes.oneOf(['absolute', 'fixed'])
2016} : {};
2017Popover.defaultProps = {
placement: 'bottom',
arrowSize: 'default',
disableRootClose: false,
hasCloseButton: false,
hasAltCloseButton: false,
disableFlipping: false,
title: undefined,
enableEvents: true,
strategy: 'absolute'
2027};
2028
2029var useDisableBodyScroll = function useDisableBodyScroll(shouldDisableScroll) {
React.useEffect(function () {
  var newStyle = 'overflow: hidden;';
2032
  var getCurrentStyle = function getCurrentStyle() {
    return document.body.getAttribute('style') || '';
  };
2036
  var scrollDisabled = false;
2038
  var disableScroll = function disableScroll() {
    var _context;
2041
    scrollDisabled = true;
    document.body.setAttribute('style', _concatInstanceProperty(_context = "".concat(getCurrentStyle(), " ")).call(_context, newStyle));
  };
2045
  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, ''));
  };
2052
  if (shouldDisableScroll) {
    disableScroll();
  } else {
    enableScroll();
  }
2058
  return enableScroll;
}, [shouldDisableScroll]);
2061};
2062
2063var ModalContext =
2064/*#__PURE__*/
2065React__default.createContext({});
2066
2067var Header = styled__default.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;
2069}, function (props) {
return props.theme.brandColors.primary3;
2071}, function (props) {
return props.theme.colors.gray9;
2073}, function (props) {
return props.theme.screenSize.phone;
2075}, function (props) {
return props.theme.screenSize.tablet;
2077}, function (props) {
return props.theme.screenSize.desktop;
2079});
2080var Title = styled__default(Heading)(["margin:0;"]);
2081var DismissModal = styled__default(DismissButton)(["align-self:center;color:", ";font-size:18px;"], function (props) {
return props.theme.colors.black;
2083});
2084
2085function ModalHeader(props) {
var hideCloseButton = props.hideCloseButton,
    children = props.children,
    level = props.level,
    otherProps = _objectWithoutProperties(props, ["hideCloseButton", "children", "level"]);
2090
var _useContext = React.useContext(ModalContext),
    onHide = _useContext.onHide,
    ariaId = _useContext.ariaId;
2094
return (
  /*#__PURE__*/
  React__default.createElement(Header, otherProps,
  /*#__PURE__*/
  React__default.createElement(Title, {
    id: ariaId,
    level: level
  }, children), !hideCloseButton &&
  /*#__PURE__*/
  React__default.createElement(DismissModal, {
    onClick: onHide
  }))
);
2108}
2109
2110ModalHeader.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
})])
2118} : {};
2119ModalHeader.defaultProps = {
hideCloseButton: false,
children: undefined,
level: 4,
ref: null
2124};
2125
2126var ModalBody = styled__default.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;
2128}, function (props) {
return props.theme.screenSize.phone;
2130}, function (props) {
return props.theme.screenSize.tablet;
2132}, function (props) {
return props.theme.screenSize.desktop;
2134});
2135
2136var ModalFooter = styled__default.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;
2138});
2139
2140function _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"]);
2142
_templateObject = function _templateObject() {
  return data;
};
2146
return data;
2148}
2149var modalSize = {
small: '300px',
medium: '600px',
large: '900px'
2153};
2154var animationTimeMs = 300;
2155
2156var getModalMargin = function getModalMargin(windowHeight, modalHeight) {
var fullMargin = windowHeight - modalHeight;
var thirdTopMargin = fullMargin / 3;
return Math.max(thirdTopMargin, 50);
2160};
2161
2162var ModalStyles = styled.createGlobalStyle(_templateObject(), function (_ref) {
var theme = _ref.theme;
return theme.portalClassName;
2165}, function (props) {
var color = tinycolor(props.theme.colors.gray9);
color.setAlpha(0);
return color.toRgbString();
2169}, function () {
return animationTimeMs / 2;
2171}, function (props) {
if (!props.showBackdrop) return '';
var color = tinycolor(props.theme.colors.gray9);
color.setAlpha(0.5);
return "background-color: ".concat(color.toRgbString(), ";");
2176}, function (props) {
var color = tinycolor(props.theme.colors.gray9);
color.setAlpha(0);
return color.toRgbString();
2180}, function (props) {
return props.theme.colors.white;
2182}, function (props) {
return props.theme.font.baseFontSize;
2184}, function () {
return animationTimeMs;
2186}, function () {
return animationTimeMs / 4;
2188}, function () {
return animationTimeMs;
2190}, function () {
return animationTimeMs / 4;
2192}, function (props) {
return props.showAnimation ? "\n            transform: translateY(-50px);\n          " : '';
2194}, function (props) {
return props.showAnimation ? "\n              transform: translateY(0);\n            " : '';
2196}, function (props) {
return props.showAnimation ? "\n                transform: translateY(-50px);\n              " : '';
2198}, function (props) {
return props.theme.screenSize.phone;
2200}, function (_ref2) {
var theme = _ref2.theme;
return getModalMargin(theme.windowHeight, theme.modalHeight);
2203}, modalSize.small, function (props) {
return props.theme.screenSize.tablet;
2205}, function (_ref3) {
var theme = _ref3.theme;
return getModalMargin(theme.windowHeight, theme.modalHeight);
2208}, modalSize.medium, function (props) {
return props.theme.screenSize.desktop;
2210}, function (_ref4) {
var theme = _ref4.theme;
return getModalMargin(theme.windowHeight, theme.modalHeight);
2213}, modalSize.large);
2214
2215function Modal(_ref5) {
var _context;
2217
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"]);
2232
var ariaId = useUniqueId(other.id);
var portalClassName = "ReactModalPortal-".concat(useUniqueId());
2235
var _useRootNodeLocator = useRootNodeLocator(document.body),
    _useRootNodeLocator2 = _slicedToArray(_useRootNodeLocator, 2),
    rootNode = _useRootNodeLocator2[0],
    RootNodeLocator = _useRootNodeLocator2[1];
2240
var _useState = React.useState(300),
    _useState2 = _slicedToArray(_useState, 2),
    modalHeight = _useState2[0],
    setModalHeight = _useState2[1];
2245
var _useState3 = React.useState(show),
    _useState4 = _slicedToArray(_useState3, 2),
    shouldShow = _useState4[0],
    setShouldShow = _useState4[1];
2250
var _useState5 = React.useState(window.innerHeight),
    _useState6 = _slicedToArray(_useState5, 2),
    windowHeight = _useState6[0],
    setWindowHeight = _useState6[1];
2255
var modalRef = React.useRef(null);
var innerContentRef = React.useRef(null);
2258
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;
    }
  }
};
2269
var setContentRef = React.useCallback(function (contentElement) {
  callRef(contentRef, contentElement);
  innerContentRef.current = contentElement;
});
var modalHeightRef = React.useCallback(function (modalElement) {
  callRef(overlayRef, modalElement);
  var newHeight = 0;
2277
  if (modalElement) {
    modalRef.current = modalElement;
    newHeight = modalElement.offsetHeight;
  }
2282
  if (innerContentRef.current) {
    var contRefHeight = innerContentRef.current.offsetHeight;
    if (contRefHeight < newHeight) newHeight = contRefHeight;
  }
2287
  setModalHeight(newHeight);
});
var modalParentSelector = parentSelector || React.useCallback(function () {
  return rootNode;
}, [rootNode]);
React.useEffect(function () {
  if (!animation || show) {
    setShouldShow(show);
    return _noop;
  }
2298
  var mounted = true;
2300
  _setTimeout(function () {
    if (!mounted) return;
    setShouldShow(false);
  }, animationTimeMs);
2305
  return function () {
    mounted = false;
  };
}, [show, animation]);
React.useEffect(function () {
  var setHeight = _debounce(function () {
    return setWindowHeight(window.innerHeight);
  }, 100);
2314
  window.addEventListener('resize', setHeight);
  return function () {
    return window.removeEventListener('resize', setHeight);
  };
}, []);
React.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__default.createElement(styled.ThemeProvider, {
    theme: {
      modalHeight: modalHeight,
      windowHeight: windowHeight,
      portalClassName: portalClassName
    }
  },
  /*#__PURE__*/
  React__default.createElement(RootNodeLocator, null), shouldShow ?
  /*#__PURE__*/
  React__default.createElement(ModalStyles, {
    showAnimation: animation,
    showBackdrop: backdrop
  }) : null,
  /*#__PURE__*/
  React__default.createElement(ModalContext.Provider, {
    value: {
      onHide: onHide,
      ariaId: ariaId
    }
  },
  /*#__PURE__*/
  React__default.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)))
);
2370}
2371
2372Modal.propTypes = process.env.NODE_ENV !== "production" ? {
/** Open and close the Modal with transitions. */
animation: PropTypes.bool,
2375
/**
 * Include a backdrop component. Specify 'static' for a backdrop that doesn't
 * trigger an "onHide" when clicked.
 */
backdrop: PropTypes.oneOf(['static', true, false]),
2381
/**
 * Usually contains a Modal.Header, Modal.Body, and Modal.Footer
 * but can contain any content
 */
children: PropTypes.any,
2387
/** Set whether the Escape key exits the modal */
escapeExits: PropTypes.bool,
2390
/** Callback fired when the Modal transitions in */
onEnter: PropTypes.func,
2393
/** Callback fired when the modal transitions out */
onExit: PropTypes.func,
2396
/**
 * A callback fired when the header closeButton or non-static backdrop is
 * clicked. Required if either are specified.
 */
onHide: PropTypes.func,
2402
/** When `true` The modal will show itself. */
show: PropTypes.bool,
2405
/** Sets the size of the modal */
size: PropTypes.oneOf(['small', 'medium', 'large']),
2408
/** 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
})])
2418} : {};
2419Modal.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
2433};
2434Modal.Header = ModalHeader;
2435Modal.Body = ModalBody;
2436Modal.Footer = ModalFooter;
2437
2438var ModalButtonContainer = styled__default.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;
2440});
2441
2442function 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; }
2443
2444function _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; }
2445
2446function _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"]);
2448
_templateObject$1 = function _templateObject() {
  return data;
};
2452
return data;
2454}
2455var PaneBase = styled__default(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;
2457}, function (props) {
return props.theme.colors.boxShadowDark;
2459}, function (props) {
return props.theme.screenSize.tablet;
2461}, function (props) {
return props.theme.screenSize.tablet;
2463});
2464var PaneRight = styled__default(PaneBase)(["margin-left:auto;transform:translateX(100%);&.ReactModal__Content--after-open{transform:translateX(0%);}&.ReactModal__Content--before-close{transform:translateX(100%);}"]);
2465var PaneLeft = styled__default(PaneBase)(["margin-right:auto;transform:translateX(-100%);&.ReactModal__Content--after-open{transform:translateX(0%);}&.ReactModal__Content--before-close{transform:translateX(-100%);}"]);
2466var PaneBottom = styled__default(PaneBase)(["height:90vh;margin-top:10vh;transform:translateY(100%);&.ReactModal__Content--after-open{transform:translateY(0%);}&.ReactModal__Content--before-close{transform:translateY(100%);}"]);
2467var Header$1 = styled__default.div(["align-items:center;background-color:", ";color:", ";display:flex;flex:0 0 64px;height:64px;"], function (props) {
return props.theme.colors.primary;
2469}, function (props) {
return props.theme.colors.white;
2471});
2472var CloseLink = styled__default(LinkButton)(["cursor:pointer;opacity:0.7;padding:16px;"]);
2473var TitleWrapper = styled__default.div(["display:flex;flex:1;flex-direction:column;min-width:0;"]);
2474var TitleText = styled__default(Heading)(["margin:0;max-width:80%;overflow:hidden;padding:1px;text-overflow:ellipsis;white-space:nowrap;"]);
2475var SubTitle = styled__default.div(["font-size:12px;margin-top:2px;"]);
2476var Content = styled__default.div(["flex:1 1 auto;overflow-y:auto;padding:1.5em;position:relative;"]);
2477var ScreenReaderText$1 = screenReaderOnly('span');
2478var 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: {}
2490};
2491var GlobalPaneStyles = styled.createGlobalStyle(_templateObject$1());
2492
2493function getPane(direction) {
switch (direction) {
  case 'bottom':
    return PaneBottom;
2497
  case 'left':
    return PaneLeft;
2500
  default:
    return PaneRight;
}
2504}
2505
2506function 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"]);
2525
var _useRootNodeLocator = useRootNodeLocator(document.body),
    _useRootNodeLocator2 = _slicedToArray(_useRootNodeLocator, 2),
    rootNode = _useRootNodeLocator2[0],
    RootNodeLocator = _useRootNodeLocator2[1];
2530
useDisableBodyScroll(isOpen);
var modalParentSelector = parentSelector || React.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)
};
2540
if (appElement) {
  Pane.setAppElement(appElement);
} else {
  _Object$assign(rest, {
    ariaHideApp: false
  });
}
2548
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(GlobalPaneStyles, null),
  /*#__PURE__*/
  React__default.createElement(RootNodeLocator, null),
  /*#__PURE__*/
  React__default.createElement(Pane, _extends({
    style: styles,
    closeTimeoutMS: closeTimeout,
    isOpen: isOpen,
    onAfterOpen: onAfterOpen,
    onRequestClose: onRequestClose,
    shouldCloseOnEsc: shouldCloseOnEsc,
    contentLabel: "Modal \"".concat(title, "\""),
    parentSelector: modalParentSelector
  }, rest),
  /*#__PURE__*/
  React__default.createElement(Header$1, null,
  /*#__PURE__*/
  React__default.createElement(CloseLink, {
    onClick: onRequestClose
  }, closeIcon ||
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "remove",
    size: 34
  }),
  /*#__PURE__*/
  React__default.createElement(ScreenReaderText$1, null, closeIconScreenReaderText)),
  /*#__PURE__*/
  React__default.createElement(TitleWrapper, null,
  /*#__PURE__*/
  React__default.createElement(TitleText, {
    level: headingLevel,
    size: headingSize
  }, title),
  /*#__PURE__*/
  React__default.createElement(SubTitle, null, subTitle))),
  /*#__PURE__*/
  React__default.createElement(Content, null, children)))
);
2592}
2593SlidingPane.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,
2609
/** selector of application element (e.g. #root), for hiding of
 main content for screenreaders when pane is open */
appElement: PropTypes.string,
parentSelector: PropTypes.func
2614} : {};
2615SlidingPane.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
2632};
2633
2634var StyledButton$3 = styled__default.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;
2636}, function (props) {
return props.colors.textColor;
2638}, function (props) {
return props.buttonSize.borderRadius;
2640}, function (props) {
return props.colors.textColor;
2642}, function (props) {
return props.buttonSize.fontSize;
2644}, function (props) {
return props.buttonSize.fontWeight || 'normal';
2646}, function (props) {
return props.buttonSize.lineHeight || props.theme.font.baseLineHeight;
2648}, function (props) {
return props.buttonSize.paddingBottom;
2650}, function (props) {
return props.buttonSize.paddingSides;
2652}, function (props) {
return props.buttonSize.paddingSides;
2654}, function (props) {
return props.buttonSize.paddingTop;
2656}, function (props) {
return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
2658}, function (props) {
return props.theme.screenSize.tablet;
2660}, function (props) {
return props.block ? 'block' : 'inline-block';
2662}, function (props) {
return props.block ? '100%' : 'auto';
2664}, function (props) {
return props.colors.focusBoxShadowColor;
2666}, function (props) {
return props.colors.textColor;
2668}, function (props) {
return props.colors.hoverTextColor;
2670}, function (props) {
return props.colors.textColor;
2672}, function (props) {
return props.colors.hoverTextColor;
2674}, function (props) {
return props.colors.focusBoxShadowColor;
2676});
2677var OutlineButton =
2678/*#__PURE__*/
2679React__default.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"]);
2685
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__default.createElement(StyledButton$3, _extends({
    ref: ref,
    block: block,
    buttonSize: buttonSize,
    colors: buttonColors,
    type: "button"
  }, other), children)
);
2708});
2709OutlineButton.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node.isRequired,
2711
/** Select the color style of the button, types come from theme buttonStyles.outlineButton */
styleType: PropTypes.string,
size: PropTypes.oneOf(['lg', 'default', 'sm', 'xs']),
2715
/** Make the button's width the size of it's parent container */
block: PropTypes.bool
2718} : {};
2719OutlineButton.defaultProps = {
styleType: 'default',
block: false,
size: 'default'
2723};
2724
2725function ToggleButton(props) {
var theme = useTheme();
2727
var _useState = React.useState(props.isPressed),
    _useState2 = _slicedToArray(_useState, 2),
    isPressed = _useState2[0],
    setIsPressed = _useState2[1];
2732
var prevPressedProp = React.useRef(props.isPressed);
2734
if (prevPressedProp.current !== props.isPressed) {
  prevPressedProp.current = props.isPressed;
  setIsPressed(props.isPressed);
}
2739
function toggleButton(event) {
  setIsPressed(!isPressed);
  props.onClick(event);
}
2744
var styleType = props.styleType,
    size = props.size,
    block = props.block,
    isOutline = props.isOutline,
    buttonProps = _objectWithoutProperties(props, ["styleType", "size", "block", "isOutline"]);
2750
var ToggleButtonType = isOutline ? OutlineButton : Button;
var styles = isOutline ? theme.buttonStyles.outlineButton : theme.buttonStyles.button;
return (
  /*#__PURE__*/
  React__default.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)
);
2766}
2767
2768ToggleButton.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
2776} : {};
2777ToggleButton.defaultProps = {
styleType: 'default',
size: 'default',
block: false,
isOutline: false,
isPressed: false
2783};
2784
2785var InlineContext =
2786/*#__PURE__*/
2787React__default.createContext(false);
2788
2789var StyledPanel = styled__default.div(["background-color:", ";display:", ";position:absolute;z-index:999;"], function (props) {
return props.theme.colors.gray2;
2791}, function (props) {
return props.isOpen ? 'block' : 'none';
2793});
2794var StyledDismissButton = styled__default(DismissButton)(["margin-left:auto;margin-right:4px;"]);
2795var Header$2 = styled__default.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';
2797}, function (props) {
return props.hasHeaderContent ? '5px' : '0';
2799});
2800var StyledChildrenContainer = styled__default.div(["display:flex;flex-direction:", ";flex-wrap:wrap;"], function (props) {
return props.inline ? 'row' : 'column';
2802});
2803
2804function MenuPanel(props) {
function onEscape(_ref) {
  var keyCode = _ref.keyCode;
2807
  if (keyCode === 27) {
    props.onClose();
  }
}
2812
React.useEffect(function () {
  document.addEventListener('keydown', onEscape);
  return function removeKeydownListener() {
    document.removeEventListener('keydown', onEscape);
  };
});
2819
var children = props.children,
    headerContent = props.headerContent,
    isOpen = props.isOpen,
    onClose = props.onClose,
    other = _objectWithoutProperties(props, ["children", "headerContent", "isOpen", "onClose"]);
2825
var hasHeaderContent = !!headerContent;
var inline = React.useContext(InlineContext);
return (
  /*#__PURE__*/
  React__default.createElement(StyledPanel, _extends({
    isOpen: isOpen
  }, other),
  /*#__PURE__*/
  React__default.createElement(Header$2, {
    hasHeaderContent: hasHeaderContent
  }, hasHeaderContent &&
  /*#__PURE__*/
  React__default.createElement("span", null, headerContent),
  /*#__PURE__*/
  React__default.createElement(StyledDismissButton, {
    onClick: onClose
  })),
  /*#__PURE__*/
  React__default.createElement(StyledChildrenContainer, {
    inline: inline
  }, children))
);
2848}
2849
2850MenuPanel.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any.isRequired,
headerContent: PropTypes.node,
isOpen: PropTypes.bool,
onClose: PropTypes.func.isRequired
2855} : {};
2856MenuPanel.defaultProps = {
headerContent: null,
isOpen: false
2859};
2860
2861var StyledMenuSection = styled__default.section(["padding-top:", ";padding-bottom:", ";border-bottom:", ";"], function (props) {
return !props.isFirst && !props.inline && !props.isOnlySection ? '20px' : '0px';
2863}, function (props) {
return props.isLast ? '0px' : '20px';
2865}, function (props) {
return !props.isLast && !props.inline ? "1px solid ".concat(props.theme.colors.gray5) : 'none';
2867});
2868var StyledHeader = styled__default.header(["padding-left:10px;"]);
2869var StyledChildrenContainer$1 = styled__default.section(["padding:15px 20px 0px 20px;"]);
2870
2871function 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"]);
2878
var inline = React.useContext(InlineContext);
return (
  /*#__PURE__*/
  React__default.createElement(StyledMenuSection, _extends({
    isLast: isLast,
    isFirst: isFirst,
    inline: inline,
    isOnlySection: isOnlySection
  }, other), title &&
  /*#__PURE__*/
  React__default.createElement(StyledHeader, {
    "aria-label": title
  }, title), children &&
  /*#__PURE__*/
  React__default.createElement(StyledChildrenContainer$1, null, children))
);
2895}
2896
2897MenuSection.propTypes = process.env.NODE_ENV !== "production" ? {
title: PropTypes.string,
children: PropTypes.any,
isLast: PropTypes.bool,
isFirst: PropTypes.bool,
isOnlySection: PropTypes.bool
2903} : {};
2904MenuSection.defaultProps = {
title: undefined,
children: undefined,
isLast: false,
isFirst: false,
isOnlySection: false
2910};
2911
2912var Backdrop = styled__default.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';
2914});
2915
2916function Menu(props) {
var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isMenuOpen = _useState2[0],
    setIsMenuOpen = _useState2[1];
2921
function toggleMenu() {
  setIsMenuOpen(!isMenuOpen);
}
2925
function closeMenu() {
  setIsMenuOpen(false);
}
2929
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"]);
2938
return (
  /*#__PURE__*/
  React__default.createElement(RootCloseWrapper, {
    onRootClose: closeMenu,
    disabled: !rootClose
  },
  /*#__PURE__*/
  React__default.createElement("div", other, hasBackdrop &&
  /*#__PURE__*/
  React__default.createElement(Backdrop, {
    isMenuOpen: isMenuOpen,
    onClick: closeMenu
  }),
  /*#__PURE__*/
  React__default.createElement(ToggleButton, {
    onClick: toggleMenu,
    isPressed: isMenuOpen,
    styleType: openButtonType,
    "aria-expanded": isMenuOpen
  }, buttonContent),
  /*#__PURE__*/
  React__default.createElement(InlineContext.Provider, {
    value: inline
  },
  /*#__PURE__*/
  React__default.createElement(MenuPanel, {
    headerContent: headerContent,
    isOpen: isMenuOpen,
    onClose: closeMenu
  }, children))))
);
2970}
2971
2972Menu.MenuSection = MenuSection;
2973Menu.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
2981} : {};
2982Menu.defaultProps = {
rootClose: false,
openButtonType: 'default',
inline: false,
hasBackdrop: false,
headerContent: undefined
2988};
2989
2990var TabButton = styled__default.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;
2992}, function (props) {
return props.theme.colors.gray4;
2994}, function (props) {
return props.selected ? '0 6px 12px rgba(0, 0, 0, 0.175)' : 'none';
2996}, function (props) {
return props.selected ? props.theme.colors.black : props.theme.colors.primary;
2998}, function (props) {
return props.theme.font.baseLineHeight;
3000}, function (props) {
return props.theme.screenSize.desktop;
3002}, function (props) {
return props.theme.colors.white;
3004}, function (props) {
return props.selected ? "1px solid ".concat(props.theme.colors.gray4) : '1px solid transparent';
3006}, function (props) {
return props.selected ? ' transparent' : "".concat(props.theme.colors.gray4);
3008}, function (props) {
return props.selected ? props.theme.colors.black : props.theme.colors.primary;
3010}, function (props) {
return props.selected ? props.theme.colors.white : props.theme.colors.gray2;
3012});
3013var AriaAnnouncer = screenReaderOnly('div');
3014
3015function Tab(_ref) {
var _context;
3017
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"]);
3025
return (
  /*#__PURE__*/
  React__default.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__default.createElement(AriaAnnouncer, {
    id: "announcer",
    "aria-live": "assertive"
  }, _concatInstanceProperty(_context = "".concat(simpleName, " ")).call(_context, announcerText)), name)
);
3043}
3044
3045Tab.propTypes = process.env.NODE_ENV !== "production" ? {
/**
 * The name of the tab, and the displayed value
 */
name: PropTypes.node.isRequired,
3050
/**
 * Whether the tab is selected and should be rendered to appear selected.
 */
selected: PropTypes.bool,
3055
/**
 * The function to call when the tab is clicked
 */
action: PropTypes.func,
3060
/**
 * Children to be rendered in the TabContent area.
 */
children: PropTypes.node,
3065
/**
 * A simpler representation for screen readers.
 */
simpleName: PropTypes.string,
3070
/*
 * Additional text to be read after the simple name
 */
announcerText: PropTypes.string
3075} : {};
3076Tab.defaultProps = {
selected: false,
action: _noop,
children: undefined,
simpleName: '',
announcerText: ''
3082};
3083
3084var TabList = styled__default.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;
3086}, function (props) {
return props.theme.screenSize.desktop;
3088});
3089var TabContent = styled__default.div(["margin-top:-1px;background-color:", ";border-top:1px solid ", ";"], function (props) {
return props.theme.colors.white;
3091}, function (props) {
return props.theme.colors.gray4;
3093});
3094
3095function TabPanel(props) {
var _context;
3097
var children = props.children,
    selectedKey = props.selectedKey,
    tabChanged = props.tabChanged,
    canTabChange = props.canTabChange;
3102
var _useState = React.useState(selectedKey),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
3107
var selectedIndex = _findIndex(React__default.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;
});
3112
if (selectedIndex < 0) {
  selectedIndex = 0;
}
3116
var elements = _mapInstanceProperty(_context = React__default.Children).call(_context, children, function (child, index) {
  return (
    /*#__PURE__*/
    React__default.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);
3133
                case 2:
                  canChange = _context2.sent;
3136
                  if (canChange) {
                    setValue(header);
                    tabChanged(header);
                  }
3141
                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          }, _callee);
        }));
3149
        function action(_x) {
          return _action.apply(this, arguments);
        }
3153
        return action;
      }()
    })
  );
});
3159
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(TabList, {
    role: "tablist"
  }, elements),
  /*#__PURE__*/
  React__default.createElement(TabContent, {
    role: "tabpanel"
  }, elements[selectedIndex].props.children))
);
3172}
3173
3174function childrenRule(props, propName, component) {
var children = props[propName];
3176
if (!_Array$isArray(children)) {
  children = [children];
}
3180
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.');
}
3186
return null;
3188}
3189
3190TabPanel.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,
3196
/**
 * 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,
3201
/**
 * Callback when the selected tab has changed. The callback is given the name of the tab that is active
 */
tabChanged: PropTypes.func
3206} : {};
3207TabPanel.defaultProps = {
children: undefined,
selectedKey: '',
tabChanged: _noop,
canTabChange: function canTabChange() {
  return true;
}
3214};
3215TabPanel.Tab = Tab;
3216
3217var StripedContainerWrapper = styled__default.div(["> *{display:block;padding:20px;&:nth-child(even){background-color:", ";}&:nth-child(odd){background-color:", ";}}"], function (props) {
return props.evenColor;
3219}, function (props) {
return props.oddColor;
3221});
3222
3223function StripedContainer(props) {
var _context;
3225
var theme = useTheme();
return (
  /*#__PURE__*/
  React__default.createElement(StripedContainerWrapper, {
    oddColor: theme.colors.gray2,
    evenColor: theme.colors.gray4
  }, _mapInstanceProperty(_context = React__default.Children).call(_context, props.children, function (child) {
    return (
      /*#__PURE__*/
      React__default.cloneElement(child)
    );
  }))
);
3239}
3240
3241StripedContainer.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node
3243} : {};
3244StripedContainer.defaultProps = {
children: undefined
3246};
3247
3248var Label = styled__default.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;
3250}, function (props) {
return props.theme.font.baseFontSize;
3252}, function (props) {
return props.theme.font.baseLineHeight;
3254}, function (props) {
return props.theme.screenSize.tablet;
3256});
3257
3258var PromptType = {
readAloud: 'readAloud',
doNotReadAloud: 'doNotReadAloud'
3261};
3262
3263var IconWrapper = styled__default.div(["background-color:", ";padding:6px 0 0 6px;"], function (promptProps) {
return promptProps.bannerBgColor;
3265});
3266var StyledIcon$1 = styled__default(Icon)(["name:", ";color:", ";padding-right:5px;"], function (promptProps) {
return promptProps.iconName;
3268}, function (promptProps) {
return promptProps.iconColor;
3270});
3271var ContentWrapper$1 = styled__default.div(["align-items:center;background-color:", ";color:black;border-radius:2px;display:block;margin-bottom:25px;padding:15px;"], function (promptProps) {
return promptProps.bgColor;
3273});
3274var Content$1 = styled__default.div(["font-size:18px;align-self:center;word-break:break-word;"]);
3275var BannerLabel = styled__default(Label)(["letter-spacing:0.5px;font-size:20px;font-weight:500;color:", ";"], function (promptProps) {
return promptProps.bannerTextColor;
3277});
3278
3279var 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__default.createElement(BannerLabel, {
  bannerTextColor: promptStyles.bannerTextColor
}, "Read Aloud") :
/*#__PURE__*/
React__default.createElement(BannerLabel, {
  bannerTextColor: promptStyles.bannerTextColor
}, "Do Not Read Aloud");
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(IconWrapper, {
    bannerBgColor: promptStyles.bannerBgColor,
    textColor: promptStyles.textColor
  },
  /*#__PURE__*/
  React__default.createElement(StyledIcon$1, {
    name: promptStyles.iconName,
    iconColor: promptStyles.iconColor,
    size: 30
  }), inlineIconText),
  /*#__PURE__*/
  React__default.createElement(ContentWrapper$1, {
    bgColor: promptStyles.bgColor
  },
  /*#__PURE__*/
  React__default.createElement(Content$1, null, children)))
);
3314};
3315
3316Prompt.defaultProps = {
isContentReadAloud: true,
children: null
3319};
3320Prompt.propTypes = process.env.NODE_ENV !== "production" ? {
isContentReadAloud: PropTypes.bool,
children: PropTypes.node
3323} : {};
3324
3325var TableBase = styled__default.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;
3327}, function (props) {
return props.theme.colors.gray4;
3329}, function (props) {
return props.theme.colors.gray4;
3331}, function (props) {
return props.theme.font.baseLineHeight;
3333}, function (props) {
return props.cellPadding;
3335}, function (props) {
return props.theme.font.baseLineHeight;
3337}, function (props) {
return props.cellPadding;
3339}, function (props) {
return props.hasStripes && styled.css(["tr:nth-of-type(odd){background-color:", ";}"], props.theme.colors.gray0);
3341}, function (props) {
return props.hasHover && styled.css(["tr:hover{background-color:", ";}"], props.theme.colors.gray1);
3343});
3344
3345function Table(props) {
var isCondensed = props.isCondensed,
    isRoomy = props.isRoomy,
    rest = _objectWithoutProperties(props, ["isCondensed", "isRoomy"]);
3349
var cellPadding = '8px';
cellPadding = isCondensed ? '5px' : cellPadding;
cellPadding = isRoomy ? '12px' : cellPadding;
return (
  /*#__PURE__*/
  React__default.createElement(TableBase, _extends({
    cellPadding: cellPadding
  }, rest))
);
3359} // kept to preserve backward-compatibility for now
3360
3361
3362var TableRow = styled__default.tr([""]);
3363var TableBodyCell = styled__default.td([""]);
3364var TableHeaderCell = styled__default.th([""]);
3365Table.Row = TableRow;
3366Table.Cell = TableBodyCell;
3367Table.HeaderCell = TableHeaderCell;
3368Table.propTypes = process.env.NODE_ENV !== "production" ? {
/** adds a darker background to every other row */
hasStripes: PropTypes.bool,
3371
/** adds a hover effect to rows */
hasHover: PropTypes.bool,
3374
/** reduce cell padding for a smaller footprint */
isCondensed: PropTypes.bool,
3377
/** increase cell padding for more white space */
isRoomy: PropTypes.bool
3380} : {};
3381Table.defaultProps = {
hasStripes: false,
hasHover: false,
isCondensed: false,
isRoomy: false
3386};
3387
3388var TableBase$1 = styled__default(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;
3390}, function (props) {
return props.theme.colors.gray2;
3392}, function (props) {
return props.theme.colors.white;
3394}, function (props) {
return props.theme.colors.gray4;
3396});
3397
3398function ResponsiveTable(props) {
return (
  /*#__PURE__*/
  React__default.createElement(TableBase$1, props)
);
3403}
3404
3405function _createSuper2(Derived) {
function isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !_Reflect$construct) return false;
  if (_Reflect$construct.sham) return false;
  if (typeof Proxy === "function") return true;
3410
  try {
    Date.prototype.toString.call(_Reflect$construct(Date, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}
3418
return function () {
  var Super = _getPrototypeOf(Derived),
      result;
3422
  if (isNativeReflectConstruct()) {
    var NewTarget = _getPrototypeOf(this).constructor;
3425
    result = _Reflect$construct(Super, arguments, NewTarget);
  } else {
    result = Super.apply(this, arguments);
  }
3430
  return _possibleConstructorReturn(this, result);
};
3433}
3434
3435function getWindowSize() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    defaultWidth = _ref.defaultWidth,
    defaultHeight = _ref.defaultHeight;
3439
return {
  windowWidth: defaultWidth || document.body.clientWidth,
  windowHeight: defaultHeight || document.body.clientHeight
};
3444}
3445
3446function withWindowSize(ComponentClass) {
var windowSize =
/*#__PURE__*/
function (_React$Component) {
  _inherits(windowSize, _React$Component);
3451
  var _super = _createSuper2(windowSize);
3453
  function windowSize() {
    var _context;
3456
    var _this;
3458
    _classCallCheck(this, windowSize);
3460
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
3464
    _this = _super.call.apply(_super, _concatInstanceProperty(_context = [this]).call(_context, args));
3466
    _defineProperty(_assertThisInitialized(_this), "state", getWindowSize(_this.props));
3468
    _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
      var activeTag = document.activeElement.tagName.toLocaleLowerCase();
3471
      if (activeTag === 'input' || activeTag === 'select') {
        return;
      }
3475
      _this.setState(getWindowSize());
    });
3478
    return _this;
  }
3481
  _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__default.createElement(ComponentClass, _extends({}, this.props, {
          windowWidth: this.state.windowWidth,
          windowHeight: this.state.windowHeight
        }))
      );
    }
  }]);
3504
  return windowSize;
}(React__default.Component);
3507
_defineProperty(windowSize, "defaultProps", {
  defaultWidth: null,
  defaultHeight: null
});
3512
windowSize.propTypes = process.env.NODE_ENV !== "production" ? {
  defaultWidth: PropTypes.number,
  defaultHeight: PropTypes.number
} : {};
return windowSize;
3518}
3519
3520var OuterWrapper = styled__default.div(["overflow:hidden;position:relative;"]);
3521var InnerWrapper = styled__default.div(["alignitems:center;display:flex;height:100%;position:relative;white-space:nowrap;z-index:0;"]);
3522var ScrollIcon = styled__default.div(["align-items:center;cursor:pointer;display:flex;height:100%;outline:0;position:absolute;top:0;z-index:1;"]);
3523
3524var _StyledScrollIcon2 = styled__default(ScrollIcon)(["right:0;text-align:right;"]);
3525
3526var _StyledScrollIcon = styled__default(ScrollIcon)(["left:0;text-align:left;"]);
3527
3528var ArrowContainer = styled__default.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;
3530}, function (props) {
return props.theme.colors.boxShadowDark;
3532}, function (props) {
return props.theme.colors.gray9;
3534});
3535
3536var generateOnArrowKeyDownHandler = function generateOnArrowKeyDownHandler(onKeyDown) {
return function (event) {
  var code = event.code.toLowerCase();
3539
  if (code === 'enter' || code === 'space') {
    onKeyDown();
  }
};
3544};
3545
3546var ArrowLeft = function ArrowLeft(_ref) {
var onClick = _ref.onClick;
return (
  /*#__PURE__*/
  React__default.createElement(_StyledScrollIcon, {
    role: "button",
    tabIndex: 0,
    onClick: onClick,
    onKeyDown: generateOnArrowKeyDownHandler(onClick)
  },
  /*#__PURE__*/
  React__default.createElement(ArrowContainer, null,
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "chevron-left"
  })))
);
3563};
3564
3565ArrowLeft.propTypes = process.env.NODE_ENV !== "production" ? {
onClick: PropTypes.func.isRequired
3567} : {};
3568
3569var ArrowRight = function ArrowRight(_ref2) {
var onClick = _ref2.onClick;
return (
  /*#__PURE__*/
  React__default.createElement(_StyledScrollIcon2, {
    role: "button",
    tabIndex: 0,
    onClick: onClick,
    onKeyDown: generateOnArrowKeyDownHandler(onClick)
  },
  /*#__PURE__*/
  React__default.createElement(ArrowContainer, null,
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "chevron-right"
  })))
);
3586};
3587
3588ArrowRight.propTypes = process.env.NODE_ENV !== "production" ? {
onClick: PropTypes.func.isRequired
3590} : {};
3591
3592function HorizontalScrollWrapper(_ref3) {
var windowWidth = _ref3.windowWidth,
    children = _ref3.children,
    slideAmount = _ref3.slideAmount,
    otherProps = _objectWithoutProperties(_ref3, ["windowWidth", "children", "slideAmount"]);
3597
var rootRef = React.useRef(null);
var menuRef = React.useRef(null);
3600
var _useState = React.useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    rootWidth = _useState2[0],
    setRootWidth = _useState2[1];
3605
var _useState3 = React.useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    menuWidth = _useState4[0],
    setMenuWidth = _useState4[1];
3610
var _useState5 = React.useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    xPosition = _useState6[0],
    setXPosition = _useState6[1];
3615
var _useState7 = React.useState(0),
    _useState8 = _slicedToArray(_useState7, 2),
    cursorXPosition = _useState8[0],
    setCursorXPosition = _useState8[1];
3620
var _useState9 = React.useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    hasOverflow = _useState10[0],
    setHasOverflow = _useState10[1];
3625
var _useState11 = React.useState(false),
    _useState12 = _slicedToArray(_useState11, 2),
    isDragging = _useState12[0],
    setIsDragging = _useState12[1];
3630
React.useEffect(function () {
  var currentRootWidth = rootRef.current ? rootRef.current.clientWidth : 0;
  var currentMenuWidth = menuRef.current ? menuRef.current.scrollWidth : 0;
3634
  if (currentRootWidth <= currentMenuWidth) {
    setRootWidth(currentRootWidth);
    setMenuWidth(currentMenuWidth);
    setHasOverflow(true);
    var absoluteXPosition = Math.abs(xPosition);
3640
    if (currentRootWidth + absoluteXPosition > currentMenuWidth) {
      var distance = Math.abs(currentMenuWidth - currentRootWidth + xPosition);
      setXPosition(xPosition + distance);
    }
  } else if (hasOverflow) {
    setHasOverflow(false);
  }
}, [windowWidth, rootRef.current, menuRef.current]);
3649
var handleDownEvent = function handleDownEvent(downEvent) {
  if (!hasOverflow) return;
  var cursorX = 0;
3653
  if (downEvent.type === 'mousedown') {
    cursorX = downEvent.pageX - xPosition;
  } else if (downEvent.type === 'touchstart') {
    var touchEvent = downEvent.changedTouches[0];
    cursorX = touchEvent.pageX - xPosition;
  }
3660
  setCursorXPosition(cursorX);
  setIsDragging(true);
};
3664
var handleMoveEvent = function handleMoveEvent(moveEvent) {
  if (!hasOverflow || !isDragging) return;
  var distance = 0;
3668
  if (moveEvent.type === 'mousemove') {
    moveEvent.preventDefault();
    distance = moveEvent.pageX - cursorXPosition;
  } else if (moveEvent.type === 'touchmove') {
    var touchEvent = moveEvent.changedTouches[0];
    distance = touchEvent.pageX - cursorXPosition;
  }
3676
  var newXPosition = (xPosition + distance) * 0.5;
3678
  if (newXPosition > 0) {
    newXPosition = 0;
  }
3682
  if (-newXPosition > menuWidth - rootWidth) {
    newXPosition = -(menuWidth - rootWidth);
  }
3686
  setXPosition(newXPosition);
};
3689
var handleUpEvent = function handleUpEvent() {
  if (!hasOverflow || !isDragging) return;
  setIsDragging(false);
};
3694
var handleLeftClick = function handleLeftClick(event) {
  event.stopPropagation();
  event.preventDefault();
  var newXPosition = xPosition + slideAmount;
3699
  if (newXPosition > 0) {
    newXPosition = 0;
  }
3703
  setXPosition(newXPosition);
};
3706
var handleRightClick = function handleRightClick(event) {
  event.stopPropagation();
  event.preventDefault();
  var newXPosition = xPosition - slideAmount;
3711
  if (-newXPosition > menuWidth - rootWidth) {
    newXPosition = -(menuWidth - rootWidth);
  }
3715
  setXPosition(newXPosition);
};
3718
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;
3727
  if (event.shiftKey) {
    var newXPosition = xPosition + tabSlide;
3730
    if (newXPosition > 0) {
      newXPosition = 0;
    }
3734
    setXPosition(newXPosition);
  } else {
    var _newXPosition = xPosition - tabSlide;
3738
    if (-_newXPosition > menuWidth - rootWidth) {
      _newXPosition = -(menuWidth - rootWidth);
    }
3742
    setXPosition(_newXPosition);
  }
};
3746
return (
  /*#__PURE__*/
  React__default.createElement(OuterWrapper, _extends({
    ref: rootRef
  }, otherProps),
  /*#__PURE__*/
  React__default.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__default.createElement(ArrowLeft, {
    onClick: handleLeftClick
  }), hasOverflow && -xPosition < menuWidth - rootWidth &&
  /*#__PURE__*/
  React__default.createElement(ArrowRight, {
    onClick: handleRightClick
  }))
);
3778}
3779
3780HorizontalScrollWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
/** @ignore */
windowWidth: PropTypes.number,
children: PropTypes.node,
3784
/** Set the number of pixels the contents will move when clicking left/right arrows */
slideAmount: PropTypes.number
3787} : {};
3788HorizontalScrollWrapper.defaultProps = {
windowWidth: undefined,
children: null,
slideAmount: 300
3792};
3793var HorizontalScrollWrapper$1 = withWindowSize(HorizontalScrollWrapper);
3794
3795var SkeletonContainer = styled__default.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;
3798}, function (_ref2) {
var skeleton = _ref2.theme.skeleton;
return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
3801}, function (_ref3) {
var skeleton = _ref3.theme.skeleton;
return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
3804}, function (_ref4) {
var skeleton = _ref4.theme.skeleton;
return tinycolor(skeleton.shimmerColor).setAlpha(0.8).toRgbString();
3807}, function (_ref5) {
var skeleton = _ref5.theme.skeleton;
return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
3810}, function (_ref6) {
var skeleton = _ref6.theme.skeleton;
return tinycolor(skeleton.shimmerColor).setAlpha(0).toRgbString();
3813});
3814var SkeletonShape = styled__default.div(["background-color:", ";"], function (_ref7) {
var skeleton = _ref7.theme.skeleton;
return skeleton.shapeColor;
3817});
3818
3819var LoadingSkeleton = function LoadingSkeleton(_ref8) {
var shapeColor = _ref8.shapeColor,
    shimmerColor = _ref8.shimmerColor,
    props = _objectWithoutProperties(_ref8, ["shapeColor", "shimmerColor"]);
3823
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__default.createElement(styled.ThemeProvider, {
    theme: {
      skeleton: skeleton
    }
  },
  /*#__PURE__*/
  React__default.createElement(SkeletonContainer, props))
);
3842};
3843
3844LoadingSkeleton.propTypes = process.env.NODE_ENV !== "production" ? {
shapeColor: PropTypes.string,
shimmerColor: PropTypes.string
3847} : {};
3848LoadingSkeleton.defaultProps = {
shapeColor: null,
shimmerColor: null
3851};
3852LoadingSkeleton.Shape = SkeletonShape;
3853
3854var ValidationContext = /*#__PURE__*/
3855React__default.createContext('default');
3856
3857var FlexControl = styled__default.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;
3859}, function (props) {
return props.borderColor;
3861}, function (props) {
return props.boxShadow;
3863}, function (props) {
return props.focusBorderColor;
3865}, function (props) {
return props.focusBoxShadow;
3867}, function (props) {
return props.hasValidationBorder && props.validationState !== 'default' && styled.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);
3869}, function (props) {
return props.layoutOrientation === 'inline' && styled.css(["@media (min-width:", "){align-items:baseline;flex-direction:row;}"], props.theme.screenSize.tablet);
3871});
3872
3873function 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"]);
3880
var theme = useTheme();
var textColor = theme.validationTextColor[validationState];
return (
  /*#__PURE__*/
  React__default.createElement(OrientationContext.Provider, {
    value: orientation
  },
  /*#__PURE__*/
  React__default.createElement(FlexControl, _extends({
    textColor: textColor,
    borderOffset: borderOffset,
    validationState: validationState
  }, theme.validationInputColor[validationState], {
    layoutOrientation: orientation,
    hasValidationBorder: hasValidationBorder
  }, other),
  /*#__PURE__*/
  React__default.createElement(ValidationContext.Provider, {
    value: validationState
  }, children)))
);
3902}
3903
3904Control.propTypes = process.env.NODE_ENV !== "production" ? {
orientation: PropTypes.oneOf(['stacked', 'inline']),
validationState: PropTypes.oneOf(['default', 'success', 'warning', 'danger']),
3907
/** Apply a top/bottom validation border to a control (usually checkbox/radios)  */
hasValidationBorder: PropTypes.bool,
3910
/** Set the border offset to match container padding */
borderOffset: PropTypes.string,
children: PropTypes.node
3914} : {};
3915Control.defaultProps = {
orientation: 'stacked',
validationState: 'default',
hasValidationBorder: false,
borderOffset: '15px',
children: null
3921};
3922
3923var ValidationIcon = styled__default(Icon)(["align-self:flex-start;font-size:35px;margin-right:5px;"]);
3924var HelpText = styled__default.div(["align-items:center;color:inherit;display:inline-flex;margin-top:5px;margin-bottom:10px;width:100%;"]);
3925
3926function AdditionalHelp(_ref) {
var children = _ref.children,
    hasValidationIcon = _ref.hasValidationIcon,
    props = _objectWithoutProperties(_ref, ["children", "hasValidationIcon"]);
3930
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
return (
  /*#__PURE__*/
  React__default.createElement(HelpText, props, hasValidationIcon && children && validationState !== 'default' &&
  /*#__PURE__*/
  React__default.createElement(ValidationIcon, {
    "aria-hidden": "true",
    name: theme.validationIconName[validationState]
  }), children)
);
3942}
3943
3944AdditionalHelp.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any,
3946
/** use to show or hide an associated validation icon */
hasValidationIcon: PropTypes.bool
3949} : {};
3950AdditionalHelp.defaultProps = {
children: undefined,
hasValidationIcon: true
3953};
3954
3955var InputBase = styled__default.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;
3957}, function (props) {
return props.boxShadow;
3959}, function (props) {
return props.theme.colors.black;
3961}, function (props) {
return props.theme.font.baseFontSize;
3963}, function (props) {
return props.theme.font.baseLineHeight;
3965}, function (props) {
return props.focusBorderColor;
3967}, function (props) {
return props.focusBoxShadow;
3969}, function (props) {
return props.theme.colors.gray2;
3971}, function (props) {
return props.theme.colors.gray2;
3973});
3974
3975var defaultBorderRadius = '2px';
3976var AddOn = styled__default.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;
3978}, function (props) {
return props.addOnBgColor === props.theme.colors.gray3 ? props.theme.colors.gray5 : props.addOnBgColor;
3980}, defaultBorderRadius, function (props) {
return props.addOnTextColor;
3982});
3983var Prepend = styled__default(AddOn)(["border-bottom-right-radius:0;border-right:none;border-top-right-radius:0;"]);
3984var Append = styled__default(AddOn)(["border-bottom-left-radius:0;border-left:none;border-top-left-radius:0;"]);
3985var InputWrapper = styled__default.div(["display:flex;"]);
3986
3987var defaultBorderRadius$1 = '2px';
3988var TextboxBase = styled__default(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;
3990}, function (props) {
return props.hasAppend ? '0' : defaultBorderRadius$1;
3992}, function (props) {
return props.hasPrepend ? '0' : defaultBorderRadius$1;
3994}, function (props) {
return props.hasAppend ? '0' : defaultBorderRadius$1;
3996});
3997var Textbox =
3998/*#__PURE__*/
3999React__default.forwardRef(function Textbox(props, ref) {
var prependIconName = props.prependIconName,
    appendIconName = props.appendIconName,
    type = props.type,
    additionalTextProps = _objectWithoutProperties(props, ["prependIconName", "appendIconName", "type"]);
4004
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
var inputRef = React__default.useRef();
React__default.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;
4016
function focusInput() {
  inputRef.current.focus();
}
4020
return (
  /*#__PURE__*/
  React__default.createElement(InputWrapper, null, hasPrepend &&
  /*#__PURE__*/
  React__default.createElement(Prepend, {
    addOnTextColor: addOnTextColor,
    addOnBgColor: addOnBgColor,
    "aria-hidden": "true",
    onClick: focusInput
  },
  /*#__PURE__*/
  React__default.createElement(Icon, {
    "aria-hidden": "true",
    name: prependIconName,
    size: 18
  })),
  /*#__PURE__*/
  React__default.createElement(TextboxBase, _extends({
    hasAppend: hasAppend,
    hasPrepend: hasPrepend,
    ref: inputRef,
    type: type
  }, additionalTextProps, theme.validationInputColor[validationState])), hasAppend &&
  /*#__PURE__*/
  React__default.createElement(Append, {
    addOnTextColor: addOnTextColor,
    addOnBgColor: addOnBgColor,
    "aria-hidden": "true",
    onClick: focusInput
  },
  /*#__PURE__*/
  React__default.createElement(Icon, {
    "aria-hidden": "true",
    name: appendIconName,
    size: 18
  })))
);
4058});
4059Textbox.propTypes = process.env.NODE_ENV !== "production" ? {
/** Content to prepend input box with */
prependIconName: PropTypes.string,
4062
/** Content to append to input box */
appendIconName: PropTypes.string,
4065
/** The type attribute for the textboxa */
type: PropTypes.string
4068} : {};
4069Textbox.defaultProps = {
prependIconName: undefined,
appendIconName: undefined,
type: 'text'
4073};
4074
4075var TextareaBase = styled__default.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;
4077}, function (props) {
return props.boxShadow;
4079}, function (props) {
return props.theme.colors.black;
4081}, function (props) {
return props.theme.font.baseFontSize;
4083}, function (props) {
return props.theme.font.baseLineHeight;
4085}, function (props) {
return props.focusBorderColor;
4087}, function (props) {
return props.focusBoxShadow;
4089}, function (props) {
return props.theme.colors.gray2;
4091}, function (props) {
return props.theme.colors.gray2;
4093});
4094var Textarea =
4095/*#__PURE__*/
4096React__default.forwardRef(function Textarea(props, ref) {
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
return (
  /*#__PURE__*/
  React__default.createElement(TextareaBase, _extends({
    ref: ref
  }, props, theme.validationInputColor[validationState]))
);
4105});
4106
4107var 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'
}
4140};
4141
4142var MaskedTextbox =
4143/*#__PURE__*/
4144React__default.forwardRef(function MaskedTextbox(props, ref) {
var maskType = props.maskType,
    customMask = props.customMask,
    additionalTextProps = _objectWithoutProperties(props, ["maskType", "customMask"]);
4148
var inputRef = React__default.useRef();
React__default.useImperativeHandle(ref, function () {
  return inputRef.current;
});
var maskArgs = maskType === 'custom' && customMask ? customMask : inputMask[maskType];
return (
  /*#__PURE__*/
  React__default.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;
      };
4163
      return (
        /*#__PURE__*/
        React__default.createElement(Textbox, _extends({
          ref: setRef
        }, textboxProps))
      );
    }
  }, maskArgs, {
    type: "text"
  }, additionalTextProps))
);
4175});
4176MaskedTextbox.propTypes = process.env.NODE_ENV !== "production" ? {
/** Sets a mask type on the input */
maskType: PropTypes.oneOf(['date', 'dollar', 'phone', 'ssnum', 'zip', 'custom']).isRequired,
4179
/** 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
})
4189} : {};
4190MaskedTextbox.defaultProps = {
customMask: undefined
4192};
4193
4194var StyledButton$4 = styled__default(Button)(["background-color:", ";border-color:", ";color:", ";@media (hover:hover),(-ms-high-contrast:none){&:hover{background-color:", ";border-color:", ";}}"], function (props) {
return props.defaultStyle.bgColor;
4196}, function (props) {
return props.defaultStyle.bgColor;
4198}, function (props) {
return props.theme.colors.black;
4200}, function (props) {
return props.hoverStyle.bgColor;
4202}, function (props) {
return props.hoverStyle.bgColor;
4204});
4205var ActionButton =
4206/*#__PURE__*/
4207React__default.forwardRef(function ActionButton(props, ref) {
var children = props.children,
    styleType = props.styleType,
    other = _objectWithoutProperties(props, ["children", "styleType"]);
4211
var theme = useTheme();
var defaultStyle = theme.buttonStyles.button.variant.default;
var hoverStyle = theme.buttonStyles.button.variant[styleType];
return (
  /*#__PURE__*/
  React__default.createElement(StyledButton$4, _extends({
    ref: ref,
    defaultStyle: defaultStyle,
    hoverStyle: hoverStyle,
    styleType: styleType,
    type: "button"
  }, other), children)
);
4225});
4226ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.node.isRequired,
4228
/** Select the color style of the button, types come from theme buttonStyles.button */
styleType: PropTypes.string
4231} : {};
4232ActionButton.defaultProps = {
styleType: 'primary'
4234};
4235
4236var SplitButton = styled__default(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  ");
4238}, function (props) {
return props.flatRightEdge && "\n    border-right: solid 1px ".concat(props.theme.colors.gray9, ";\n  ");
4240});
4241var Caret = styled__default.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;"]);
4242var ButtonPanel = styled__default.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;
4244}, function (props) {
return props.theme.colors.gray3;
4246}, function (props) {
return props.isOpen ? 'block' : 'none';
4248}, function (props) {
return props.theme.screenSize.tablet;
4250});
4251var ButtonPanelChildrenContainer = styled__default.div(["display:flex;flex-direction:column;"]);
4252var StyledButtonLink = styled__default(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;
4254});
4255var TAB_KEY_CODE = 9;
4256var UP_ARROW_CODE = 38;
4257var DOWN_ARROW_CODE = 40;
4258
4259function getFocusables(node) {
var focusableElements = node.querySelectorAll('button');
var firstFocusable = focusableElements[0];
var lastFocusable = focusableElements[focusableElements.length - 1];
return {
  focusableElements: focusableElements,
  firstFocusable: firstFocusable,
  lastFocusable: lastFocusable
};
4268}
4269
4270function isCurrentlyActive(node) {
var rootNode = node.getRootNode();
return rootNode.activeElement === node;
4273}
4274
4275function focusTrap(node) {
var _getFocusables = getFocusables(node),
    firstFocusable = _getFocusables.firstFocusable,
    lastFocusable = _getFocusables.lastFocusable;
4279
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();
    }
  }
}
4293
node.addEventListener('keydown', handleTabFocus);
return function removeKeydownListener() {
  node.removeEventListener('keydown', handleTabFocus);
};
4298}
4299
4300function arrowMovement(node) {
var _getFocusables2 = getFocusables(node),
    focusableElements = _getFocusables2.focusableElements,
    firstFocusable = _getFocusables2.firstFocusable,
    lastFocusable = _getFocusables2.lastFocusable;
4305
var focusables = _toConsumableArray(focusableElements);
4307
var rootNode = node.getRootNode();
4309
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);
4317
      focusables[index - 1].focus();
      event.preventDefault();
    }
  }
4322
  if (event.keyCode === DOWN_ARROW_CODE) {
    if (isCurrentlyActive(lastFocusable)) {
      firstFocusable.focus();
      event.preventDefault();
    } else {
      var _index = _indexOfInstanceProperty(focusables).call(focusables, rootNode.activeElement);
4329
      focusableElements[_index + 1].focus();
4331
      event.preventDefault();
    }
  }
}
4336
node.addEventListener('keydown', handleArrowMovementKeys);
return function removeArrowMovementListener() {
  node.removeEventListener('keydown', handleArrowMovementKeys);
};
4341}
4342
4343var _StyledRootCloseWrapper = styled__default(RootCloseWrapper)(["display:", ";flex-direction:column;position:relative;"], function (p) {
return p._css;
4345});
4346
4347var _StyledDiv$1 = styled__default("div")(["position:relative;"]);
4348
4349function 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"]);
4362
var ActivationButton = flatLeftEdge || flatRightEdge ? SplitButton : Button;
4364
var _useState = React.useState(buttonValue),
    _useState2 = _slicedToArray(_useState, 2),
    buttonStateValue = _useState2[0],
    setButtonStateValue = _useState2[1];
4369
var _useState3 = React.useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isOpen = _useState4[0],
    setIsOpen = _useState4[1];
4374
var initialRender = React.useRef(true);
var buttonDropdown = React.useRef();
var triggerButton = React.useRef();
var panelId = useUniqueId(id);
React.useEffect(function () {
  var removeFocusTrapListener = focusTrap(buttonDropdown.current);
  var removeArrowMovementListener = arrowMovement(buttonDropdown.current);
  return function removeListeners() {
    removeFocusTrapListener();
    removeArrowMovementListener();
  };
}, [isOpen]);
React.useEffect(function () {
  if (!initialRender.current) {
    triggerButton.current.focus();
  }
4391
  initialRender.current = false;
}, [isOpen]);
4394
var toggleDropdown = function toggleDropdown() {
  return setIsOpen(!isOpen);
};
4398
function closeDropdown() {
  if (isOpen) {
    setIsOpen(false);
  }
}
4404
function handleDropdownItemClick(buttonProps) {
  return function (event) {
    if (shouldUpdateButtonValue) {
      setButtonStateValue(buttonProps.children);
    }
4410
    if (shouldCloseOnButtonClick) {
      closeDropdown();
    }
4414
    buttonProps.onClick(event, buttonProps.name);
  };
}
4418
return (
  /*#__PURE__*/
  React__default.createElement(_StyledRootCloseWrapper, {
    onRootClose: closeDropdown,
    disabled: !rootClose,
    _css: inline ? 'inline-flex' : 'block'
  },
  /*#__PURE__*/
  React__default.createElement("div", {
    ref: buttonDropdown,
    role: "combobox",
    "aria-controls": panelId,
    "aria-expanded": isOpen,
    "aria-haspopup": "listbox"
  },
  /*#__PURE__*/
  React__default.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__default.createElement(Caret, null)),
  /*#__PURE__*/
  React__default.createElement(_StyledDiv$1, null,
  /*#__PURE__*/
  React__default.createElement(ButtonPanel, {
    isOpen: isOpen,
    id: panelId
  },
  /*#__PURE__*/
  React__default.createElement(ButtonPanelChildrenContainer, null, _mapInstanceProperty(React.Children).call(React.Children, children, function (child) {
    var onClickHandler = handleDropdownItemClick(child.props);
    var newProps = {
      onClick: onClickHandler,
      role: 'option'
    };
    return (
      /*#__PURE__*/
      React__default.cloneElement(child, newProps)
    );
  }))))))
);
4467}
4468
4469DropdownButton.Button = StyledButtonLink;
4470DropdownButton.propTypes = process.env.NODE_ENV !== "production" ? {
/** Content shown in the button */
buttonValue: PropTypes.any,
4473
/**
 * 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,
4481
/**
 * Defines if the buttons value should update to the last pressed,
 * childs value.
 */
shouldUpdateButtonValue: PropTypes.bool,
4487
/** Defines if the dropdown should close when any child button is clicked */
shouldCloseOnButtonClick: PropTypes.bool,
4490
/**
 * Defines whether the dropdown will close when any other element on the page is clicked.
 * Uses RootCloseWrapper from React-Overlay
 */
rootClose: PropTypes.bool,
4496
/** Select the color style of the button, types come from theme */
styleType: PropTypes.string,
4499
/** Display the dropdown button inline */
inline: PropTypes.bool,
id: PropTypes.string,
4503
/** Styles the Button with a flat left edge */
flatLeftEdge: PropTypes.bool,
4506
/** Styles the Button with a flat right edge */
flatRightEdge: PropTypes.bool
4509} : {};
4510DropdownButton.defaultProps = {
buttonValue: undefined,
manualButtonValue: undefined,
shouldUpdateButtonValue: false,
shouldCloseOnButtonClick: false,
styleType: 'default',
rootClose: false,
inline: false,
id: undefined,
flatLeftEdge: false,
flatRightEdge: false
4521};
4522
4523var Container$1 = styled__default.div(["align-items:center;display:flex;flex-direction:column;max-width:", ";"], function (props) {
return props.maxWidth;
4525});
4526var StyledIconButton = styled__default(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;
4528}, function (props) {
return props.isHighlighted && props.theme.colors.white;
4530});
4531var IncompleteButton = styled__default(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;
4533}, function (props) {
return props.theme.colors.gray5;
4535}, function (props) {
return props.isHighlighted ? props.theme.colors.white : props.theme.colors.gray5;
4537}, function (props) {
return props.theme.colors.gray6;
4539}, function (props) {
return props.theme.colors.white;
4541});
4542var IconText = styled__default.span(["font-size:", "px;font-weight:", ";margin-top:6px;max-width:", ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], function (props) {
return props.fontSize;
4544}, function (props) {
return props.isHighlighted ? 'bold' : 'normal';
4546}, function (props) {
return props.maxWidth;
4548});
4549
4550function 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"]);
4562
var CurrentButton = isIncomplete ? IncompleteButton : StyledIconButton;
var theme = useTheme();
var textId = generateAlphaName();
var buttonStyle = theme.buttonStyles.outlineButton.variant[styleType];
return (
  /*#__PURE__*/
  React__default.createElement(Container$1, _extends({
    maxWidth: maxWidth
  }, otherProps),
  /*#__PURE__*/
  React__default.createElement(CurrentButton, {
    onClick: onClick,
    styleType: styleType,
    isHighlighted: isHighlighted,
    disabled: disabled,
    activeColor: buttonStyle.bgColor,
    "aria-describedby": textId
  },
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: iconName,
    size: iconSize
  })),
  /*#__PURE__*/
  React__default.createElement(IconText, {
    id: textId,
    isHighlighted: isHighlighted,
    maxWidth: maxWidth,
    fontSize: childrenFontSize
  }, children))
);
4594}
4595
4596IconButton.propTypes = process.env.NODE_ENV !== "production" ? {
/** Used to specify the icon used within the button */
iconName: PropTypes.string.isRequired,
4599
/** The font size of the inner icon */
iconSize: PropTypes.number,
4602
/** The font size of the text displayed below the icon */
childrenFontSize: PropTypes.number,
4605
/** Determines whether the icon is shown with a solid background by default */
isHighlighted: PropTypes.bool,
4608
/** Displays the icon with a style representing an incomplete state */
isIncomplete: PropTypes.bool,
4611
/** Disables the click event on the button */
disabled: PropTypes.bool,
4614
/** Sets the max width for the button, affects text ellipsis */
maxWidth: PropTypes.string,
4617
/** Onclick function used by the button */
onClick: PropTypes.func,
4620
/** OutlineButton styleType (from theme) used for the icon */
styleType: PropTypes.string,
4623
/** Content to be displayed below the icon */
children: PropTypes.node
4626} : {};
4627IconButton.defaultProps = {
isHighlighted: false,
isIncomplete: false,
iconSize: 45,
childrenFontSize: 18,
disabled: false,
maxWidth: undefined,
onClick: function onClick() {},
styleType: 'magenta',
children: undefined
4637};
4638
4639function 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; }
4640
4641function _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; }
4642var AnswerLabel = styled__default.label(["flex-grow:1;@media (min-width:", "){flex-grow:0;min-width:", ";}"], function (props) {
return props.theme.screenSize.tablet;
4644}, function (props) {
return props.itemWidth;
4646});
4647var AnswerDisplay = styled__default.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;
4649}, function (props) {
return darken(props.buttonStyle.bgColor, 10);
4651}, function (props) {
return getTextColor(props.buttonStyle.bgColor);
4653}, function (props) {
return props.buttonSize.fontWeight || 'normal';
4655}, function (props) {
return props.buttonSize.fontSize;
4657}, function (props) {
return props.buttonSize.lineHeight;
4659}, function (props) {
return props.buttonSize.paddingTop;
4661}, function (props) {
return props.buttonSize.paddingSides;
4663}, function (props) {
return props.buttonSize.paddingBottom;
4665}, function (props) {
return props.buttonSize.paddingSides;
4667}, function (props) {
return props.buttonSize.textTransform ? props.buttonSize.textTransform : 'none';
4669}, function (props) {
return darken(props.buttonStyle.bgColor, 8);
4671}, function (props) {
return getTextColor(props.buttonStyle.bgColor);
4673}, function (props) {
return darken(props.buttonStyle.bgColor, 8);
4675}, function (props) {
return getTextColor(props.buttonStyle.bgColor);
4677});
4678var OutlineAnswerDisplay = styled__default(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;
4680}, function (props) {
return props.buttonStyle.borderColor || props.buttonStyle.bgColor;
4682}, function (props) {
return props.isChecked ? props.theme.colors.white : props.buttonStyle.bgColor;
4684});
4685var AnswerInput = styled__default.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);
4687}, function (props) {
return getTextColor(props.buttonStyle.bgColor);
4689});
4690
4691function 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"]);
4701
var id = useUniqueId(radioProps.id);
var isChecked = radioProps.checked || radioProps.defaultChecked;
var theme = useTheme();
var validationState = React__default.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];
4712
if (isOutline && validationState !== 'default') {
  selectedStyles = _objectSpread$4(_objectSpread$4({}, selectedStyles), {}, {
    borderColor: validationBorder
  });
  unSelectedStyles = _objectSpread$4(_objectSpread$4({}, unSelectedStyles), {}, {
    borderColor: validationBorder
  });
}
4721
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__default.createElement(AnswerLabel, labelProps,
  /*#__PURE__*/
  React__default.createElement(AnswerInput, _extends({
    type: "radio",
    name: name,
    id: id,
    buttonStyle: buttonStyle
  }, radioProps)),
  /*#__PURE__*/
  React__default.createElement(Display, buttonProps, children))
);
4749}
4750
4751function 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; }
4752
4753function _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; }
4754
4755function RadioGroup(_ref) {
var _context;
4757
var name = _ref.name,
    disableAllOptions = _ref.disableAllOptions,
    selectedValue = _ref.selectedValue,
    children = _ref.children,
    onChange = _ref.onChange,
    rest = _objectWithoutProperties(_ref, ["name", "disableAllOptions", "selectedValue", "children", "onChange"]);
4764
return _mapInstanceProperty(_context = React__default.Children).call(_context, children, function (child, index) {
  var _context2;
4767
  var key = _concatInstanceProperty(_context2 = "".concat(name, "-option-")).call(_context2, index + 1);
4769
  var disabled = disableAllOptions || child.props.disabled;
  var checked = selectedValue === child.props.value;
  return (
    /*#__PURE__*/
    React__default.cloneElement(child, _objectSpread$5({
      key: key,
      name: name,
      disabled: disabled,
      checked: checked,
      onChange: onChange
    }, rest))
  );
});
4783}
4784
4785RadioGroup.propTypes = process.env.NODE_ENV !== "production" ? {
/** The name of the radio group */
name: PropTypes.string.isRequired,
4788
/** Selected option for the radio group */
selectedValue: PropTypes.any,
4791
/** Disable all radio buttons */
disableAllOptions: PropTypes.bool,
4794
/** Function to change selected value */
onChange: PropTypes.func
4797} : {};
4798RadioGroup.defaultProps = {
selectedValue: undefined,
disableAllOptions: false,
onChange: _noop
4802};
4803
4804var outlineStyles = styled.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;}"]);
4805var AnswerSet = styled__default.div(["display:flex;flex-wrap:nowrap;", ";"], function (props) {
return props.isOutline && outlineStyles;
4807});
4808
4809function AnswerGroup(props) {
return (
  /*#__PURE__*/
  React__default.createElement(AnswerSet, {
    isOutline: props.isOutline
  },
  /*#__PURE__*/
  React__default.createElement(RadioGroup, props))
);
4818}
4819
4820AnswerGroup.propTypes = process.env.NODE_ENV !== "production" ? {
/** The name of the answer group */
name: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
4824
/** The width of each item when not in mobile view */
itemWidth: PropTypes.string,
4827
/** Select the color style of the buttons, types come from theme */
styleType: PropTypes.string,
4830
/** Select the color style of the selected button, types come from theme */
selectedType: PropTypes.string,
4833
/** Set the button size, sizes come from theme (buttonStyles) */
size: PropTypes.string,
4836
/** Set if the items should have a flat outline style */
isOutline: PropTypes.bool,
4839
/** Disable all radio buttons */
disableAllOptions: PropTypes.bool,
4842
/** Selected option for the answer group */
selectedValue: PropTypes.any
4845} : {};
4846AnswerGroup.defaultProps = {
styleType: 'default',
selectedType: 'success',
size: 'default',
itemWidth: '100px',
isOutline: false,
disableAllOptions: false,
selectedValue: undefined
4854};
4855
4856function getRadioFillVariables(isChecked, isDisabled, validationState, colors) {
var isNotDisabled = !isDisabled;
var isValid = validationState === 'default';
4859
if (isDisabled) {
  return {
    fill: colors.gray5
  };
}
4865
if (isNotDisabled && !isValid) {
  return {
    fill: colors[validationState],
    hover: colors.gray3
  };
}
4872
if (isChecked && isNotDisabled) {
  return {
    fill: colors.primary
  };
}
4878
return {
  fill: colors.gray8,
  hover: colors.gray3
};
4883}
4884
4885function 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; }
4886
4887function _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; }
4888
4889function 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  ");
4891}
4892
4893var RadioLabel = styled__default(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;
4895}, function (props) {
return props.theme.font.baseLineHeight;
4897}, function (props) {
return !props.checked && radioFill(props.hoverFillColor);
4899}, function (props) {
return props.theme.screenSize.tablet;
4901});
4902var RadioInput = styled__default.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;
4904});
4905var RadioDisplay = styled__default.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;
4907}, function (props) {
return radioFill(_fillInstanceProperty(props));
4909});
4910function RadioButton(_ref) {
var children = _ref.children,
    className = _ref.className,
    radioProps = _objectWithoutProperties(_ref, ["children", "className"]);
4914
var id = useUniqueId(radioProps.id);
var isChecked = radioProps.checked;
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
4919
var _getRadioFillVariable = getRadioFillVariables(isChecked, radioProps.disabled, validationState, theme.colors),
    hover = _getRadioFillVariable.hover,
    fill = _fillInstanceProperty(_getRadioFillVariable);
4923
var radioDisplayFill = isChecked ? fill : theme.colors.white;
var labelProps = {
  disabled: radioProps.disabled,
  htmlFor: id,
  hoverFillColor: hover,
  validationState: validationState,
  checked: isChecked
};
4932
var inputProps = _objectSpread$6(_objectSpread$6({}, radioProps), {}, {
  checked: isChecked
});
4936
return (
  /*#__PURE__*/
  React__default.createElement(RadioLabel, _extends({
    className: className
  }, labelProps),
  /*#__PURE__*/
  React__default.createElement(RadioInput, _extends({
    type: "radio",
    id: id
  }, inputProps)),
  /*#__PURE__*/
  React__default.createElement(RadioDisplay, {
    className: "es-radio__fill",
    borderColor: fill,
    fill: radioDisplayFill
  }), children)
);
4954}
4955RadioButton.propTypes = process.env.NODE_ENV !== "production" ? {
/** supports styled-component usage, applies to the wrapping Label */
className: PropTypes.string,
children: PropTypes.any
4959} : {};
4960RadioButton.defaultProps = {
className: undefined,
children: undefined
4963};
4964
4965var DropdownBase = styled__default.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;
4967}, function (props) {
return props.theme.colors.gray5;
4969}, function (props) {
return props.boxShadow;
4971}, function (props) {
return props.theme.colors.black;
4973}, function (props) {
return props.theme.font.baseFontSize;
4975}, function (props) {
return props.focusBorderColor;
4977}, function (props) {
return props.focusBoxShadow;
4979}, function (props) {
return props.theme.colors.gray2;
4981});
4982
4983function Dropdown(props) {
return (
  /*#__PURE__*/
  React__default.createElement(DropdownBase, props)
);
4988}
4989
4990var backgroundColorSelect = function backgroundColorSelect(checked, theme, validationState) {
if (checked) {
  return validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
}
4994
return theme.colors.white;
4996};
4997
4998var CheckboxLabel = styled__default(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;
5000}, function (props) {
return props.theme.font.baseFontSize;
5002}, function (props) {
return props.theme.font.baseLineHeight;
5004}, function (props) {
return props.theme.screenSize.tablet;
5006}, function (_ref) {
var checked = _ref.checked,
    theme = _ref.theme,
    validationState = _ref.validationState;
return backgroundColorSelect(checked, theme, validationState);
5011}, function (_ref2) {
var checked = _ref2.checked,
    theme = _ref2.theme,
    validationState = _ref2.validationState;
return checked && validationState === 'default' ? theme.colors.primary : theme.colors[validationState];
5016}, function (props) {
return props.theme.colors.white;
5018}, function (_ref3) {
var checked = _ref3.checked,
    theme = _ref3.theme;
return checked ? theme.colors.white : theme.colors.gray3;
5022}, function (_ref4) {
var checked = _ref4.checked,
    theme = _ref4.theme;
return checked ? theme.colors.gray5 : theme.colors.white;
5026}, function (props) {
return props.theme.colors.gray5;
5028}, function (props) {
return props.theme.colors.white;
5030});
5031var CheckboxInput = styled__default.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;
5033}, function (_ref5) {
var checked = _ref5.checked,
    theme = _ref5.theme;
return checked ? theme.colors.white : theme.colors.gray3;
5037});
5038var CheckboxDisplay = styled__default.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;
5040}, function (props) {
return props.theme.colors.gray8;
5042}, function (props) {
return props.theme.screenSize.tablet;
5044}, function (props) {
return props.theme.colors.white;
5046});
5047
5048function Checkbox(_ref6) {
var children = _ref6.children,
    checkboxProps = _objectWithoutProperties(_ref6, ["children"]);
5051
var validationState = React__default.useContext(ValidationContext);
return (
  /*#__PURE__*/
  React__default.createElement(CheckboxLabel, {
    validationState: validationState,
    checked: checkboxProps.checked,
    disabled: checkboxProps.disabled
  },
  /*#__PURE__*/
  React__default.createElement(CheckboxInput, _extends({
    type: "checkbox"
  }, checkboxProps)),
  /*#__PURE__*/
  React__default.createElement(CheckboxDisplay, {
    className: "es-checkbox__fill"
  }), children)
);
5069}
5070
5071Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any
5073} : {};
5074Checkbox.defaultProps = {
children: undefined
5076};
5077
5078var Label$1 = styled__default(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;
5080}, 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  ";
5083});
5084var Well = styled__default.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;
5086}, function (props) {
return props.theme.colors.gray3;
5088}, function (props) {
return props.theme.screenSize.tablet;
5090});
5091var Display = styled__default(CheckboxDisplay)(["&&{left:10px;top:10px;}"]);
5092var Text = styled__default.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  ");
5096});
5097
5098function CheckAllBox(_ref3) {
var children = _ref3.children,
    checkboxProps = _objectWithoutProperties(_ref3, ["children"]);
5101
var validationState = React__default.useContext(ValidationContext);
return (
  /*#__PURE__*/
  React__default.createElement(Label$1, {
    validationState: validationState,
    checked: checkboxProps.checked,
    disabled: checkboxProps.disabled
  },
  /*#__PURE__*/
  React__default.createElement(Well, null,
  /*#__PURE__*/
  React__default.createElement(CheckboxInput, _extends({
    type: "checkbox"
  }, checkboxProps)),
  /*#__PURE__*/
  React__default.createElement(Display, {
    className: "es-checkbox__fill"
  })),
  /*#__PURE__*/
  React__default.createElement(Text, {
    className: "es-checkbox__text",
    textOnHover: checkboxProps.textOnHover
  }, children))
);
5126}
5127
5128CheckAllBox.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any,
textOnHover: PropTypes.bool
5131} : {};
5132CheckAllBox.defaultProps = {
textOnHover: false,
children: undefined
5135};
5136
5137var Spacer = styled__default.div(["margin-left:", ";"], function (props) {
return props.bumpRight ? '10px' : '0';
5139});
5140
5141function CheckboxGroup(_ref) {
var _context;
5143
var onChange = _ref.onChange,
    disableAllOptions = _ref.disableAllOptions,
    options = _ref.options,
    checkAllText = _ref.checkAllText,
    textOnHoverCheckAll = _ref.textOnHoverCheckAll;
5149
var _useState = React.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];
5158
var _useState3 = React.useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    checkAll = _useState4[0],
    setCheckAll = _useState4[1];
5163
var handleCheckAll = function handleCheckAll() {
  var updatedValues = [];
5166
  if (!checkAll) {
    updatedValues = _mapInstanceProperty(options).call(options, function (o) {
      return o.value;
    });
    setCheckAll(true);
  } else {
    setCheckAll(false);
  }
5175
  setSelectedValues(updatedValues);
  onChange(updatedValues);
};
5179
var handleCheckboxChange = function handleCheckboxChange(ev) {
  var updatedValues = [];
5182
  if (_includesInstanceProperty(selectedValues).call(selectedValues, ev.target.value)) {
    updatedValues = _filterInstanceProperty(selectedValues).call(selectedValues, function (val) {
      return val !== ev.target.value;
    });
  } else {
    var _context2;
5189
    updatedValues = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(selectedValues), [ev.target.value]);
  }
5192
  setSelectedValues(updatedValues);
  onChange(updatedValues);
};
5196
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null, checkAllText &&
  /*#__PURE__*/
  React__default.createElement(CheckAllBox, {
    onChange: handleCheckAll,
    checked: checkAll,
    disabled: disableAllOptions
  }, checkAllText), _mapInstanceProperty(options).call(options, function (option) {
    return (
      /*#__PURE__*/
      React__default.createElement(Spacer, {
        bumpRight: Boolean(checkAllText),
        key: option.value
      },
      /*#__PURE__*/
      React__default.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))
    );
  }))
);
5223}
5224
5225CheckboxGroup.propTypes = process.env.NODE_ENV !== "production" ? {
/** change handler */
onChange: PropTypes.func.isRequired,
5228
/** Disable all checkbox buttons */
disableAllOptions: PropTypes.bool,
5231
/** 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
})),
5240
/** display an optional "Check All" checkbox with this value */
checkAllText: PropTypes.string,
5243
/** display the "Check All" text on hover */
textOnHoverCheckAll: PropTypes.bool
5246} : {};
5247CheckboxGroup.defaultProps = {
checkAllText: undefined,
textOnHoverCheckAll: false,
disableAllOptions: false,
options: []
5252};
5253
5254var Directions = {
'top': 'column-reverse',
'bottom': 'column',
'right': 'row',
'left': 'row-reverse'
5259};
5260var Padding = {
'top': '0 0 0.5rem',
'bottom': '2.25rem 0 0',
'right': '0 0 0.5rem',
'left': '0 1rem 0 0'
5265};
5266var primary = "#0073b6";
5267var primaryLight = "#ededed";
5268var success = "#298544";
5269var successLight = "#69aa7c";
5270var warning = "#c25400";
5271var warningLight = "#d4874d";
5272var danger = "#cc0000";
5273var dangerLight = "#db4d4d";
5274
5275function Type(type, light) {
switch (type) {
  case "primary":
    return light ? primaryLight : primary;
5279
  case "success":
    return light ? successLight : success;
5282
  case "warning":
    return light ? warningLight : warning;
5285
  case "danger":
    return light ? dangerLight : danger;
5288
  default:
    return light ? primaryLight : primary;
}
5292}
5293
5294var SwitchBase = styled__default.div(["margin:0 auto 10px;display:flex;"]);
5295var SwitchLabel = styled__default.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];
5297}, function (props) {
return props.direction === 'top' || props.direction === 'bottom' ? 'center' : 'left';
5299}, function (props) {
return props.direction === 'left' ? 'flex-end' : 'normal';
5301}, function (props) {
return props.isDisabled ? 'not-allowed' : 'pointer';
5303}, function (props) {
return props.isDisabled ? '0' : 'inset 0 3px 3px rgba(0,0,0,0.4)';
5305}, function (props) {
return props.isDisabled ? '0' : 'inset 0 3px 3px rgba(0,0,0,0.7)';
5307});
5308var SwitchInput = styled__default.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);
5310});
5311var SwitchLabelText = styled__default.span(["padding:", ";flex-grow:1;color:", ";"], function (props) {
return Padding[props.direction];
5313}, function (props) {
return props.type === 'primary' ? '#000' : Type(props.type, false);
5315});
5316var SwitchCheck = styled__default.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);
5318});
5319var SwitchOffText = styled__default.span(["order:", ";padding:", ";;vertical-align:middle;"], function (props) {
return props.direction === 'left' || props.direction === 'top' ? '-1' : '-3';
5321}, function (props) {
return props.offText === '' ? '0' : '0 1rem 0 1rem';
5323});
5324var SwitchOnText = styled__default.span(["order:", ";padding:", ";vertical-align:middle;"], function (props) {
return props.direction === 'left' || props.direction === 'top' ? '-3' : '-1';
5326}, function (props) {
return props.onText === '' ? '0' : '0 1rem 0 0.75rem';
5328});
5329
5330function 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"]);
5341
var _useState = React.useState(checked),
    _useState2 = _slicedToArray(_useState, 2),
    isToggled = _useState2[0],
    setIsToggled = _useState2[1];
5346
function handleToggle(event) {
  setIsToggled(!isToggled);
  onChange(event);
}
5351
return (
  /*#__PURE__*/
  React__default.createElement(SwitchBase, _extends({
    type: type
  }, switchProps),
  /*#__PURE__*/
  React__default.createElement(SwitchLabel, {
    isDisabled: disabled,
    direction: direction,
    onChange: handleToggle
  },
  /*#__PURE__*/
  React__default.createElement(SwitchInput, {
    disabled: disabled,
    styleType: type,
    type: "checkbox",
    checked: isToggled,
    "aria-label": ariaLabel
  }),
  /*#__PURE__*/
  React__default.createElement(SwitchLabelText, {
    direction: direction,
    type: type
  }, label),
  /*#__PURE__*/
  React__default.createElement(SwitchOffText, {
    direction: direction,
    offText: offText
  }, offText),
  /*#__PURE__*/
  React__default.createElement(SwitchCheck, {
    type: type
  }),
  /*#__PURE__*/
  React__default.createElement(SwitchOnText, {
    direction: direction,
    onText: onText
  }, onText)))
);
5391}
5392
5393Switch.propTypes = process.env.NODE_ENV !== "production" ? {
/** The type attribute for the switch */
type: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),
5396
/** The label text for the switch */
label: PropTypes.string,
5399
/** The location of the label */
direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
5402
/** Accessibility label for the checkbox */
ariaLabel: PropTypes.string,
5405
/** This text goes on the right of the switch, denoting the 'on' position */
onText: PropTypes.string,
5408
/** This text goes on the left of the switch, denoting the 'off' position */
offText: PropTypes.string,
5411
/** Initial state of the toggle switch */
checked: PropTypes.bool,
5414
/** Function for what happens when the switch is toggled */
onChange: PropTypes.func,
5417
/** Determines whether the switch is disabled */
disabled: PropTypes.bool
5420} : {};
5421Switch.defaultProps = {
type: 'primary',
label: '',
direction: 'right',
ariaLabel: '',
onText: '',
offText: '',
checked: false,
onChange: _noop,
disabled: false
5431};
5432
5433var StyledAnchor = styled__default.a(["background-color:transparent;box-sizing:border-box;color:", ";text-decoration:underline;&:hover{color:", ";text-decoration:none;}"], function (props) {
return props.theme.colors.primary;
5435}, function (props) {
return props.theme.colors.primaryHover;
5437});
5438
5439function Anchor(_ref) {
var props = _Object$assign({}, _ref);
5441
return (
  /*#__PURE__*/
  React__default.createElement(StyledAnchor, props)
);
5446}
5447
5448var VerticalNavigation = styled__default.nav(["background-color:", ";box-shadow:2px 2px 5px ", ";ul{list-style:none;margin:0;padding:0;}"], function (props) {
return props.theme.colors.white;
5450}, function (props) {
return props.theme.colors.gray6;
5452});
5453var HorizontalNavigation = styled__default.nav(["background-color:", ";ul{display:flex;list-style:none;margin:0;padding:0;}"], function (props) {
return props.theme.colors.white;
5455});
5456function useNavigation(orientation) {
var OrientedNavigation = orientation === 'horizontal' ? HorizontalNavigation : VerticalNavigation;
5458
function Navigation(props) {
  var _context;
5461
  var useAltStyle = props.useAltStyle,
      children = props.children;
5464
  var _React$useState = React__default.useState(props.selected),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      selected = _React$useState2[0],
      setSelected = _React$useState2[1];
5469
  React__default.useEffect(function () {
    setSelected(props.selected);
  }, [props.selected]);
  return (
    /*#__PURE__*/
    React__default.createElement(OrientedNavigation, {
      className: "es-sidenav"
    },
    /*#__PURE__*/
    React__default.createElement("ul", null, _mapInstanceProperty(_context = React__default.Children).call(_context, children, function (child) {
      return (
        /*#__PURE__*/
        React__default.cloneElement(child, {
          useAltStyle: useAltStyle,
          highlightedId: selected
        })
      );
    })))
  );
}
5490
Navigation.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Use the alternate nav style */
  useAltStyle: PropTypes.bool,
  children: PropTypes.node.isRequired,
5495
  /** Set the selected nav item by id, controlled mode */
  selected: PropTypes.string
} : {};
Navigation.defaultProps = {
  useAltStyle: false,
  selected: undefined
};
return Navigation;
5504}
5505
5506var NavItemWrapper = styled__default.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;
5508}, function (props) {
return props.theme.colors.black;
5510}, function (props) {
return props.theme.font.baseLineHeight;
5512}, function (props) {
return props.theme.colors.gray2;
5514}, function (props) {
return props.theme.colors.primary;
5516}, function (props) {
return props.theme.colors.primary;
5518}, function (props) {
return props.isActive && styled.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);
5520}, function (props) {
return props.isDisabled && styled.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);
5522});
5523var AltNavItemWrapper = styled__default(NavItemWrapper)(["border-bottom:", " ", ";padding-left:", ";&:hover{border-", ":4px solid ", ";padding-left:0;}", " ", ";"], function (props) {
return props.isVertical ? 'none' : '2px solid';
5525}, function (props) {
return props.theme.colors.gray5;
5527}, function (props) {
return props.isVertical ? '4px' : '0';
5529}, function (props) {
return props.isVertical ? 'left' : 'bottom';
5531}, function (props) {
return props.theme.colors.primary;
5533}, function (props) {
return props.isActive && styled.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);
5535}, function (props) {
return props.isDisabled && styled.css(["padding-left:0;&:hover{border-left:none;}"]);
5537});
5538var NavIcon = styled__default(Icon)(["align-self:flex-end;"]);
5539var NavigationAnchor = styled__default.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%;"]);
5540function 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__default.Children.only(children);
5551
  var _child$props = child.props,
      grandChildren = _child$props.children,
      rest = _objectWithoutProperties(_child$props, ["children"]);
5555
  var styledChild =
  /*#__PURE__*/
  React__default.createElement(NavigationAnchor, _extends({
    as: child.type,
    style: {
      justifyContent: isVertical ? 'space-between' : 'center'
    }
  }, rest),
  /*#__PURE__*/
  React__default.createElement("span", null, grandChildren), isVertical ?
  /*#__PURE__*/
  React__default.createElement(NavIcon, {
    name: "chevron-right"
  }) : null);
  return (
    /*#__PURE__*/
    React__default.createElement(Wrapper, {
      className: "es-sidenav__navitem",
      isActive: isActive,
      isDisabled: isDisabled,
      isVertical: isVertical
    }, styledChild)
  );
}
5580
NavItem.propTypes = process.env.NODE_ENV !== "production" ? {
  /** @ignore */
  useAltStyle: PropTypes.bool,
5584
  /** Item content */
  children: PropTypes.any,
5587
  /** @ignore */
  highlightedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
5590
  /** Each item must have a unique identifier */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
5593
  /** Disable the nav item to render it un-clickable */
  isDisabled: PropTypes.bool
} : {};
NavItem.defaultProps = {
  useAltStyle: false,
  isDisabled: false,
  children: undefined,
  highlightedId: undefined
};
return NavItem;
5604}
5605
5606var Navigation = useNavigation('vertical');
5607
5608function SideNav(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Navigation, props)
);
5613}
5614
5615SideNav.Item = useNavigationItem('vertical');
5616
5617var Navigation$1 = useNavigation('horizontal');
5618
5619function HorizontalNav(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Navigation$1, props)
);
5624}
5625
5626HorizontalNav.Item = useNavigationItem('horizontal');
5627
5628function useWindowWidth() {
var getMediaWidth = function getMediaWidth() {
  return (// https://stackoverflow.com/a/6850319
    window.innerWidth > 0 ? window.innerWidth : window.screen.width
  );
};
5634
var _React$useState = React__default.useState(getMediaWidth()),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    width = _React$useState2[0],
    setWidth = _React$useState2[1];
5639
React__default.useEffect(function () {
  var handleResize = function handleResize() {
    return setWidth(getMediaWidth());
  };
5644
  window.addEventListener('resize', handleResize);
  return function () {
    return window.removeEventListener('resize', handleResize);
  };
}, []);
return width;
5651}
5652
5653function _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"]);
5655
_templateObject$2 = function _templateObject() {
  return data;
};
5659
return data;
5661}
5662var DatepickerStyles = styled.createGlobalStyle(_templateObject$2(), function (_ref) {
var theme = _ref.theme;
return theme.colors.gray5;
5665}, function (_ref2) {
var theme = _ref2.theme;
return theme.datepickerColors.dpBackground;
5668}, function (_ref3) {
var theme = _ref3.theme;
return theme.colors.gray5;
5671}, function (_ref4) {
var theme = _ref4.theme;
return theme.colors.white;
5674}, function (_ref5) {
var theme = _ref5.theme;
return theme.colors.gray5;
5677}, function (_ref6) {
var theme = _ref6.theme;
return theme.colors.white;
5680}, function (_ref7) {
var theme = _ref7.theme;
return theme.colors.gray5;
5683}, function (_ref8) {
var theme = _ref8.theme;
return theme.colors.gray9;
5686}, function (_ref9) {
var theme = _ref9.theme;
return theme.colors.boxShadowLight;
5689}, function (_ref10) {
var theme = _ref10.theme;
return theme.datepickerColors.dpBackground;
5692}, function (_ref11) {
var theme = _ref11.theme;
return theme.colors.white;
5695}, function (_ref12) {
var theme = _ref12.theme;
return theme.datepickerColors.navArrow;
5698}, function (_ref13) {
var theme = _ref13.theme;
return theme.datepickerColors.navArrowHover;
5701}, function (_ref14) {
var theme = _ref14.theme;
return theme.colors.gray3;
5704}, function (_ref15) {
var theme = _ref15.theme;
return theme.datepickerColors.navArrow;
5707}, function (_ref16) {
var theme = _ref16.theme;
return theme.datepickerColors.navArrowHover;
5710}, function (_ref17) {
var theme = _ref17.theme;
return theme.colors.gray3;
5713}, function (_ref18) {
var theme = _ref18.theme;
return theme.datepickerColors.dpBackground;
5716}, function (_ref19) {
var theme = _ref19.theme;
return theme.datepickerColors.dpBackground;
5719}, function (_ref20) {
var theme = _ref20.theme;
return theme.datepickerColors.dpBackground;
5722}, function (_ref21) {
var theme = _ref21.theme;
return theme.datepickerColors.dpBackground;
5725}, function (_ref22) {
var theme = _ref22.theme;
return theme.colors.gray5;
5728}, function (_ref23) {
var theme = _ref23.theme;
return theme.colors.gray5;
5731}, function (_ref24) {
var theme = _ref24.theme;
return theme.colors.gray1;
5734}, function (_ref25) {
var theme = _ref25.theme;
return theme.datepickerColors.selected;
5737}, function (_ref26) {
var theme = _ref26.theme;
return theme.datepickerColors.selected;
5740}, function (_ref27) {
var theme = _ref27.theme;
return theme.colors.gray2;
5743}, function (_ref28) {
var theme = _ref28.theme;
return theme.colors.gray2;
5746}, function (_ref29) {
var theme = _ref29.theme;
return theme.colors.gray1;
5749}, function (_ref30) {
var theme = _ref30.theme;
return theme.colors.white;
5752}, function (_ref31) {
var theme = _ref31.theme;
return theme.colors.gray9;
5755}, function (_ref32) {
var theme = _ref32.theme;
return theme.colors.gray3;
5758}, function (_ref33) {
var theme = _ref33.theme;
return theme.datepickerColors.highlight;
5761}, function (_ref34) {
var theme = _ref34.theme;
return theme.colors.white;
5764}, function (_ref35) {
var theme = _ref35.theme;
return theme.datepickerColors.highlightHover;
5767}, function (_ref36) {
var theme = _ref36.theme;
return theme.colors.gray9;
5770}, function (_ref37) {
var theme = _ref37.theme;
return theme.datepickerColors.selected;
5773}, function (_ref38) {
var theme = _ref38.theme;
return theme.colors.white;
5776}, function (_ref39) {
var theme = _ref39.theme;
return theme.datepickerColors.hover;
5779}, function (_ref40) {
var theme = _ref40.theme;
return theme.datepickerColors.keyboard;
5782}, function (_ref41) {
var theme = _ref41.theme;
return theme.colors.white;
5785}, function (_ref42) {
var theme = _ref42.theme;
return theme.datepickerColors.hover;
5788}, function (_ref43) {
var theme = _ref43.theme;
return theme.datepickerColors.inRange;
5791}, function (_ref44) {
var theme = _ref44.theme;
return theme.colors.gray9;
5794}, function (_ref45) {
var theme = _ref45.theme;
return theme.colors.gray3;
5797}, function (_ref46) {
var theme = _ref46.theme;
return theme.colors.gray9;
5800}, function (_ref47) {
var theme = _ref47.theme;
return theme.colors.gray5;
5803}, function (_ref48) {
var theme = _ref48.theme;
return theme.colors.white;
5806}, function (_ref49) {
var theme = _ref49.theme;
return theme.colors.gray5;
5809}, function (_ref50) {
var theme = _ref50.theme;
return theme.colors.gray3;
5812}, function (_ref51) {
var theme = _ref51.theme;
return theme.colors.gray1;
5815}, function (_ref52) {
var theme = _ref52.theme;
return theme.colors.gray5;
5818}, function (_ref53) {
var theme = _ref53.theme;
return theme.colors.gray3;
5821}, function (_ref54) {
var theme = _ref54.theme;
return theme.datepickerColors.selected;
5824}, function (_ref55) {
var theme = _ref55.theme;
return theme.colors.white;
5827}, function (_ref56) {
var theme = _ref56.theme;
return theme.colors.gray1;
5830}, function (_ref57) {
var theme = _ref57.theme;
return theme.colors.gray5;
5833}, function (_ref58) {
var theme = _ref58.theme;
return theme.colors.boxShadowDark;
5836}, function (_ref59) {
var theme = _ref59.theme;
return theme.datepickerColors.navArrow;
5839}, function (_ref60) {
var theme = _ref60.theme;
return theme.datepickerColors.navArrowHover;
5842}, function (_ref61) {
var theme = _ref61.theme;
return theme.colors.gray3;
5845}, function (_ref62) {
var theme = _ref62.theme;
return theme.datepickerColors.navArrow;
5848}, function (_ref63) {
var theme = _ref63.theme;
return theme.datepickerColors.navArrowHover;
5851}, function (_ref64) {
var theme = _ref64.theme;
return theme.colors.gray3;
5854});
5855
5856/* https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx */
5857/* https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/methods/placements.js */
5858
5859var 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'];
5860var 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
5968};
5969
5970function 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; }
5971
5972function _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; }
5973var STRING_FORMAT = 'yyyy-MM-dd';
5974
5975function normalizeDateString(date) {
var stringFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : STRING_FORMAT;
5977
if (typeof date === 'string') {
  var parsedDate = dateFns.parse(date, stringFormat, new Date());
  return dateFns.isValid(parsedDate) ? dateFns.format(parsedDate, stringFormat) : '';
}
5982
return dateFns.isValid(date) ? dateFns.format(date, stringFormat) : '';
5984}
5985
5986function normalizeDate(date) {
if (typeof date === 'string') {
  var parsedDate = dateFns.parse(date, STRING_FORMAT, new Date());
  return dateFns.isValid(parsedDate) ? parsedDate : null;
}
5991
return dateFns.isValid(date) ? date : null;
5993}
5994/* eslint-disable react/prop-types */
5995
5996
5997function NativeDatePicker(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Textbox, _extends({
    prependIconName: "calendar",
    type: "date",
    value: normalizeDateString(props.selectedDate)
  }, props))
);
6006}
6007
6008var _StyledMaskedTextbox = styled__default(MaskedTextbox)(["max-width:265px;"]);
6009
6010var DateTextbox =
6011/*#__PURE__*/
6012React__default.forwardRef(function DateTextbox(props, ref) {
var inputRef = React__default.useRef();
React__default.useImperativeHandle(ref, function () {
  return {
    focus: function focus() {
      inputRef.current.focus();
    }
  };
});
/* eslint-disable react/forbid-foreign-prop-types */
6022
var datepickerProps = _pick(props, _Object$keys(reactDatePickerPropTypes));
6024
var textboxProps = _omit(props, _Object$keys(reactDatePickerPropTypes));
/* eslint-enable react/forbid-foreign-prop-types */
6027
6028
var textbox =
/*#__PURE__*/
React__default.createElement(_StyledMaskedTextbox, _extends({
  maskType: "date",
  placeholder: props.placeholder,
  prependIconName: "calendar",
  ref: inputRef
}, textboxProps));
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(DatepickerStyles, null), props.suppressDatepicker ? textbox :
  /*#__PURE__*/
  React__default.createElement(ReactDatePicker, _extends({
    customInput: textbox,
    placeholderText: props.placeholder,
    selected: normalizeDate(props.selectedDate)
  }, datepickerProps)))
);
6049});
6050/* eslint-enable react/prop-types */
6051
6052var DatePicker = function DatePicker(props) {
var normalizedDateFromProps = props.selectedDate ? normalizeDate(props.selectedDate) : null;
6054
var _useState = React.useState(normalizedDateFromProps),
    _useState2 = _slicedToArray(_useState, 2),
    selectedDate = _useState2[0],
    setSelectedDate = _useState2[1];
6059
function dateSelected(dateOrEvent) {
  if (dateOrEvent) {
    if (dateFns.isValid(dateOrEvent)) {
      setSelectedDate(dateOrEvent);
    } else {
      var normalizedDate = normalizeDate(dateOrEvent.target.value);
      setSelectedDate(normalizedDate);
    }
  } else {
    setSelectedDate(null);
  }
}
6072
React.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;
6084
var actualProps = _objectSpread$7(_objectSpread$7({}, props), {}, {
  selectedDate: selectedDate,
  onChange: props.onChange ? dateSelected : _noop
});
6089
return (
  /*#__PURE__*/
  React__default.createElement(DatePickerInput, actualProps)
);
6094};
6095
6096DatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
suppressDatepicker: PropTypes.bool,
allowNativeDatepickerOnMobile: PropTypes.bool,
selectedDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
onChange: PropTypes.func
6101} : {};
6102DatePicker.defaultProps = {
suppressDatepicker: false,
allowNativeDatepickerOnMobile: true,
selectedDate: '',
onChange: undefined
6107};
6108
6109function onNonNumericHandler(event) {
// prevent other normally allowed numeric keys: e, +, -, .
if (event.keyCode === 69 || event.keyCode === 187 || event.keyCode === 189 || event.keyCode === 190) {
  event.preventDefault();
}
6114}
6115
6116var DayInput = styled__default(InputBase)(["appearance:textfield;flex:1 0 35px;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0;}"]);
6117
6118function Day(_ref) {
var onChange = _ref.onChange,
    date = _ref.date,
    props = _objectWithoutProperties(_ref, ["onChange", "date"]);
6122
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
6125
var _React$useState = React__default.useState(date ? date.getDate() : ''),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
6130
function onDayChange(event) {
  var day = event.target.value;
  day = day.length > 2 ? _sliceInstanceProperty(day).call(day, 0, 2) : day;
  setValue(day);
  onChange('day', day);
}
6137
return (
  /*#__PURE__*/
  React__default.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))
);
6152}
6153
6154var MonthDropdown = styled__default(Dropdown)(["flex:3 1 100px;"]);
6155
6156function Month(_ref) {
var onChange = _ref.onChange,
    monthNames = _ref.monthNames,
    selectOptionText = _ref.selectOptionText,
    date = _ref.date,
    props = _objectWithoutProperties(_ref, ["onChange", "monthNames", "selectOptionText", "date"]);
6162
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
6165
var _React$useState = React__default.useState(date ? date.getMonth() + 1 : ''),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    month = _React$useState2[0],
    setMonth = _React$useState2[1];
6170
function onMonthChange(event) {
  setMonth(event.target.value);
  onChange('month', event.target.value);
}
6175
return (
  /*#__PURE__*/
  React__default.createElement(MonthDropdown, _extends({
    onChange: onMonthChange
  }, theme.validationInputColor[validationState], {
    value: month
  }, props), selectOptionText &&
  /*#__PURE__*/
  React__default.createElement("option", {
    value: "none"
  }, selectOptionText), _mapInstanceProperty(monthNames).call(monthNames, function (value, index) {
    return (
      /*#__PURE__*/
      React__default.createElement("option", {
        value: index + 1,
        key: value
      }, value)
    );
  }))
);
6196}
6197
6198Month.propTypes = process.env.NODE_ENV !== "production" ? {
/** array of month names */
monthNames: PropTypes.array,
6201
/** adds an unselected option at the top */
selectOptionText: PropTypes.string
6204} : {};
6205Month.defaultProps = {
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
selectOptionText: undefined
6208};
6209
6210var YearInput = styled__default(InputBase)(["appearance:textfield;flex:2 0 40px;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0;}"]);
6211
6212function Year(_ref) {
var onChange = _ref.onChange,
    date = _ref.date,
    props = _objectWithoutProperties(_ref, ["onChange", "date"]);
6216
var theme = useTheme();
var validationState = React__default.useContext(ValidationContext);
6219
var _React$useState = React__default.useState(date ? date.getFullYear() : ''),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    value = _React$useState2[0],
    setValue = _React$useState2[1];
6224
function onYearChange(event) {
  var year = event.target.value;
  year = year.length > 4 ? _sliceInstanceProperty(year).call(year, 0, 4) : year;
  setValue(year);
  onChange('year', year);
}
6231
return (
  /*#__PURE__*/
  React__default.createElement(YearInput, _extends({
    type: "number",
    inputmode: "numeric",
    pattern: "[0-9]*",
    onChange: onYearChange,
    onKeyDown: onNonNumericHandler,
    placeholder: "Year",
    value: value
  }, theme.validationInputColor[validationState], props))
);
6244}
6245
6246function 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; }
6247
6248function _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; }
6249var Wrapper = styled__default.div(["display:flex;&& > *{margin-right:2px;}@media (min-width:", "){max-width:350px;}"], function (props) {
return props.theme.screenSize.tablet;
6251});
6252
6253function cleanZeroes(day) {
var cleanDay = day;
6255
while (cleanDay.charAt(0) === '0') {
  cleanDay = cleanDay.substr(1);
}
6259
return cleanDay;
6261}
6262
6263function reducer(state, action) {
switch (action.type) {
  case 'day_updated':
    return _objectSpread$8(_objectSpread$8({}, state), {}, {
      day: action.value
    });
6269
  case 'month_updated':
    return _objectSpread$8(_objectSpread$8({}, state), {}, {
      month: action.value
    });
6274
  case 'year_updated':
    return _objectSpread$8(_objectSpread$8({}, state), {}, {
      year: action.value
    });
6279
  default:
    throw new Error();
}
6283}
6284
6285function DateInput(_ref) {
var _context4;
6287
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"]);
6297
var _useReducer = React.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];
6306
var hasDayElement = React.useRef(false);
React.useEffect(function () {
  var _context;
6310
  _forEachInstanceProperty(_context = React__default.Children).call(_context, children, function (child) {
    if (child.type === Month && !state.month) {
      if (child.props.selectOptionText) {
        dispatch({
          type: 'month_updated',
          value: 'none'
        });
      }
    }
6320
    if (child.type === Day) {
      hasDayElement.current = true;
    }
  });
}, []);
6326
function createDate(year, month, day) {
  var _context2, _context3;
6329
  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 ? dateFns.isAfter(date, minDate) : true) && (maxDate ? dateFns.isBefore(date, maxDate) : true);
  return {
    value: dateIsValid ? date : undefined,
    isInRange: isInRange
  };
}
6339
function onChangeDatePart(datePart, value) {
  switch (datePart) {
    case 'day':
      onChange(createDate(state.year, state.month, value));
      dispatch({
        type: 'day_updated',
        value: value
      });
      return;
6349
    case 'month':
      onChange(createDate(state.year, value, state.day));
      dispatch({
        type: 'month_updated',
        value: value
      });
      return;
6357
    case 'year':
      onChange(createDate(value, state.month, state.day));
      dispatch({
        type: 'year_updated',
        value: value
      });
      return;
6365
    default:
      throw new Error();
  }
}
6370
function onBlurComponent(event) {
  var target = event.currentTarget;
6373
  _setTimeout(function () {
    if (!target.contains(target.getRootNode().activeElement)) {
      onBlur(event);
    }
  }, 0);
}
6380
return (
  /*#__PURE__*/
  React__default.createElement(Wrapper, _extends({
    tabIndex: "-1"
  }, props, {
    onBlur: onBlurComponent
  }), _mapInstanceProperty(_context4 = React__default.Children).call(_context4, children, function (child, index) {
    return index === 0 ?
    /*#__PURE__*/
    React__default.cloneElement(child, {
      id: id,
      onChange: onChangeDatePart,
      date: createDate(state.year, state.month, state.day).value
    }) :
    /*#__PURE__*/
    React__default.cloneElement(child, {
      onChange: onChangeDatePart,
      date: createDate(state.year, state.month, state.day).value
    });
  }))
);
6402}
6403
6404DateInput.propTypes = process.env.NODE_ENV !== "production" ? {
id: PropTypes.string,
children: PropTypes.node.isRequired,
6407
/** set the minimum valid date */
maxDate: PropTypes.instanceOf(Date),
6410
/** set the maximum valid date */
minDate: PropTypes.instanceOf(Date),
6413
/** returns an object (value, isInRange) */
onChange: PropTypes.func.isRequired,
onBlur: PropTypes.func,
6417
/** set the Date value of the component */
defaultValue: PropTypes.instanceOf(Date),
6420
/** Set the default day of the month */
defaultDay: PropTypes.string
6423} : {};
6424DateInput.defaultProps = {
id: undefined,
maxDate: undefined,
minDate: undefined,
defaultValue: undefined,
defaultDay: '',
onBlur: _noop
6431};
6432DateInput.Day = Day;
6433DateInput.Month = Month;
6434DateInput.Year = Year;
6435
6436var IncrementerWrapper = styled__default.div(["align-items:flex-start;display:flex;"]);
6437var IncrementerTextbox = styled__default(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;
6439});
6440var IncrementerButton = styled__default(Button)(["min-width:0;.es-button__display{min-width:0;}"]);
6441
6442function determineIsDisabled(threshold, newValue) {
return _isFinite(threshold) && newValue === threshold;
6444}
6445
6446function sanitizeValue(val, lower, upper) {
var enteredValue = _parseInt$1(val);
6448
if (_isFinite(enteredValue)) {
  if (upper !== null && enteredValue > upper) {
    return upper;
  }
6453
  if (lower !== null && enteredValue < lower) {
    return lower;
  }
6457
  return enteredValue;
}
6460
return lower > 0 ? lower : 0;
6462}
6463
6464function updateCountReducer(state, action) {
switch (action.type) {
  case 'increment':
    return {
      count: sanitizeValue(_parseInt$1(state.count) + _parseInt$1(action.amount), action.lower, action.upper)
    };
6470
  case 'decrement':
    return {
      count: sanitizeValue(_parseInt$1(state.count) - _parseInt$1(action.amount), action.lower, action.upper)
    };
6475
  case 'set':
    return {
      count: action.amount
    };
}
6481
return null;
6483}
6484
6485var ScreenReaderButtonText = screenReaderOnly('span');
6486
6487function 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"]);
6496
var theme = useTheme();
var initialRender = React.useRef(true);
6499
var _React$useReducer = React__default.useReducer(updateCountReducer, {
  count: startingValue === null ? '' : startingValue
}),
    _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
    state = _React$useReducer2[0],
    dispatch = _React$useReducer2[1];
6506
var isIncrementDisabled = determineIsDisabled(upperThreshold, state.count);
var isDecrementDisabled = determineIsDisabled(lowerThreshold, state.count);
React__default.useEffect(function () {
  if (!initialRender.current) {
    onValueUpdated(state.count);
  }
6513
  initialRender.current = false;
}, [state.count]);
6516
function setValue(event) {
  dispatch({
    type: 'set',
    amount: event.target.value
  });
}
6523
function decrementValue() {
  dispatch({
    type: 'decrement',
    amount: decrementAmount,
    lower: lowerThreshold,
    upper: upperThreshold
  });
}
6532
function incrementValue() {
  dispatch({
    type: 'increment',
    amount: incrementAmount,
    lower: lowerThreshold,
    upper: upperThreshold
  });
}
6541
function handleOnBlur(event) {
  var sanitizedValue = sanitizeValue(event.target.value, lowerThreshold, upperThreshold);
6544
  if (event.target.value !== sanitizedValue) {
    dispatch({
      type: 'set',
      amount: sanitizedValue
    });
  }
}
6552
function shortcutKeys(event) {
  if (upperThreshold && event.keyCode === 35) {
    dispatch({
      type: 'set',
      amount: upperThreshold
    });
  }
6560
  if (lowerThreshold && event.keyCode === 36) {
    dispatch({
      type: 'set',
      amount: lowerThreshold
    });
  }
}
6568
var RenderedButton = useOutlineButton ? OutlineButton : Button;
return (
  /*#__PURE__*/
  React__default.createElement(IncrementerWrapper, null,
  /*#__PURE__*/
  React__default.createElement(IncrementerButton, {
    as: RenderedButton,
    styleType: "primary",
    onClick: decrementValue,
    disabled: isDecrementDisabled
  },
  /*#__PURE__*/
  React__default.createElement(ScreenReaderButtonText, null, "Decrement value by", decrementAmount),
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "minus",
    size: 22
  })),
  /*#__PURE__*/
  React__default.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__default.createElement(IncrementerButton, {
    as: RenderedButton,
    styleType: "primary",
    onClick: incrementValue,
    disabled: isIncrementDisabled
  },
  /*#__PURE__*/
  React__default.createElement(ScreenReaderButtonText, null, "Increment value by", incrementAmount),
  /*#__PURE__*/
  React__default.createElement(Icon, {
    name: "add",
    size: 22
  })))
);
6617}
6618
6619Incrementer.propTypes = process.env.NODE_ENV !== "production" ? {
/** The starting value, 'null' is allowed for a blank value */
startingValue: PropTypes.number,
6622
/** The amount to increment the value by */
incrementAmount: PropTypes.number,
6625
/** The amount to decrement the value by */
decrementAmount: PropTypes.number,
6628
/** The highest value the incrementer can be incremented to */
upperThreshold: PropTypes.number,
6631
/** The lowest value the incrementer can be decremented to */
lowerThreshold: PropTypes.number,
6634
/** Use outline button styles */
useOutlineButton: PropTypes.bool,
6637
/** Function to execute with the new value */
onValueUpdated: PropTypes.func
6640} : {};
6641Incrementer.defaultProps = {
startingValue: 0,
incrementAmount: 1,
decrementAmount: 1,
onValueUpdated: _noop,
upperThreshold: null,
lowerThreshold: null,
useOutlineButton: false
6649};
6650
6651function getCallToActionChildren(children) {
var _context;
6653
var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
var allChildren = React__default.Children.toArray(children);
6656
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';
6662
    return (
      /*#__PURE__*/
      React__default.cloneElement(action, {
        styleType: _styleType
      })
    );
  }
6670
  var styleType = action.props.isPrimary ? 'primary' : 'default';
  return (
    /*#__PURE__*/
    React__default.cloneElement(action, {
      styleType: styleType
    })
  );
});
6679
var nonActions = _filterInstanceProperty(allChildren).call(allChildren, function (child) {
  return child.type.name !== 'Action';
});
6683
return {
  actions: actions,
  nonActions: nonActions
};
6688}
6689
6690function 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; }
6691
6692function _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; }
6693var Container$2 = styled__default.div(["flex-basis:100%;"]);
6694var CallToActionContainer = styled__default.div(["display:flex;justify-content:flex-end;"]);
6695
6696function CallToAction(_ref) {
var children = _ref.children,
    rest = _objectWithoutProperties(_ref, ["children"]);
6699
var _getCallToActionChild = getCallToActionChildren(children),
    actions = _getCallToActionChild.actions,
    nonActions = _getCallToActionChild.nonActions;
6703
var props = _objectSpread$9(_objectSpread$9({}, rest), {}, {
  isDismissable: false
});
6707
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(Notification$1, props,
  /*#__PURE__*/
  React__default.createElement(Container$2, null, nonActions)),
  /*#__PURE__*/
  React__default.createElement(CallToActionContainer, null, actions))
);
6718}
6719
6720CallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any
6722} : {};
6723CallToAction.defaultProps = {
children: undefined
6725};
6726
6727function 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; }
6728
6729function _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; }
6730var Container$3 = styled__default.div(["flex-basis:100%;"]);
6731var CallToActionContainer$1 = styled__default.div(["display:flex;justify-content:flex-end;"]);
6732
6733function LightCallToAction(_ref) {
var children = _ref.children,
    rest = _objectWithoutProperties(_ref, ["children"]);
6736
var _getCallToActionChild = getCallToActionChildren(children, 'light'),
    actions = _getCallToActionChild.actions,
    nonActions = _getCallToActionChild.nonActions;
6740
var props = _objectSpread$a(_objectSpread$a({}, rest), {}, {
  isDismissable: false
});
6744
return (
  /*#__PURE__*/
  React__default.createElement(LightNotification, props,
  /*#__PURE__*/
  React__default.createElement(Container$3, null, nonActions,
  /*#__PURE__*/
  React__default.createElement(CallToActionContainer$1, null, actions)))
);
6753}
6754
6755LightCallToAction.propTypes = process.env.NODE_ENV !== "production" ? {
children: PropTypes.any
6757} : {};
6758LightCallToAction.defaultProps = {
children: undefined
6760};
6761
6762var ActionButton$1 = styled__default(Button)([":not(:first-of-type){margin-left:15px;}"]);
6763function Action(_ref) {
var isPrimary = _ref.isPrimary,
    children = _ref.children,
    rest = _objectWithoutProperties(_ref, ["isPrimary", "children"]);
6767
return (
  /*#__PURE__*/
  React__default.createElement(ActionButton$1, rest, children)
);
6772}
6773Action.propTypes = process.env.NODE_ENV !== "production" ? {
isPrimary: PropTypes.bool,
children: PropTypes.node
6776} : {};
6777Action.defaultProps = {
isPrimary: false,
children: null
6780};
6781
6782var sizes = {
ACTIVE: 45,
INACTIVE: 20,
DESKTOP: 41,
TRACKING_LINE_HEIGHT: 3
6787};
6788
6789var ACTIVE = sizes.ACTIVE,
  INACTIVE = sizes.INACTIVE,
  DESKTOP = sizes.DESKTOP,
  TRACKING_LINE_HEIGHT = sizes.TRACKING_LINE_HEIGHT;
6793
6794var getProgressLineBreakPercentage = function getProgressLineBreakPercentage(activeStepIndex, numberOfSteps) {
return activeStepIndex / (numberOfSteps - 1) * 100;
6796};
6797
6798var getProgressItemWidthPercentage = function getProgressItemWidthPercentage(baseAmount) {
return 1 / baseAmount * 100;
6800};
6801
6802var getCenterTopPosition = function getCenterTopPosition(containerHeight, itemHeight) {
return containerHeight / 2 - itemHeight / 2;
6804};
6805
6806var stepStates = {
active: 'active',
pastStep: 'isPastStep',
clickableFutureStep: 'clickableFutureStep'
6810};
6811var ProgressContainer = styled__default.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;
6813}, function (props) {
return props.theme.colors.gray9;
6815}, function (props) {
return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
6817}, function (props) {
return props.theme.colors.gray5;
6819}, function (props) {
return getProgressLineBreakPercentage(props.activeStepIndex, props.numberOfSteps);
6821}, function (props) {
return props.theme.colors.gray5;
6823}, function () {
return TRACKING_LINE_HEIGHT;
6825}, function () {
return getCenterTopPosition(ACTIVE, TRACKING_LINE_HEIGHT);
6827}, function (props) {
return props.theme.screenSize.tablet;
6829}, function () {
return getCenterTopPosition(DESKTOP, TRACKING_LINE_HEIGHT);
6831}, function (props) {
return 100 - getProgressItemWidthPercentage(props.numberOfSteps);
6833}, function () {
return TRACKING_LINE_HEIGHT;
6835});
6836ProgressContainer.propTypes = {
activePercentage: PropTypes.number
6838};
6839var BasicProgressButton = styled__default.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);
6841}, function (props) {
return props.theme.screenSize.tablet;
6843}, function (props) {
return props.theme.colors.gray9;
6845}, function (props) {
return props.theme.screenSize.tablet;
6847}, function (props) {
return "1px solid ".concat(props.theme.colors.gray5);
6849}, function () {
return INACTIVE;
6851}, function (props) {
return props.theme.colors.gray9;
6853}, function () {
return INACTIVE * 0.8;
6855}, function () {
return INACTIVE;
6857}, function () {
return INACTIVE;
6859}, function (props) {
return props.theme.screenSize.tablet;
6861}, function () {
return DESKTOP;
6863}, function () {
return DESKTOP * 0.488;
6865}, function () {
return DESKTOP;
6867}, function () {
return DESKTOP;
6869});
6870var FutureProgressButton = styled__default(BasicProgressButton)(["cursor:pointer;&:hover{&::before{box-shadow:rgba(0,0,0,0.35) 0 0 3px 1px;}}&:active,&:hover,&:focus{span{text-decoration:underline;}}"]);
6871var PastProgressButton = styled__default(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;
6873}, function (props) {
return props.theme.colors.inputFocus;
6875}, function (props) {
return props.theme.colors.gray9;
6877}, function (props) {
return props.theme.screenSize.tablet;
6879}, function (props) {
return props.theme.screenSize.tablet;
6881});
6882var NonNavigablePastProgressButton = styled__default(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;
6884}, function (props) {
return props.theme.screenSize.tablet;
6886}, function (props) {
return props.theme.screenSize.tablet;
6888});
6889var ActiveProgressButton = styled__default(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;
6891}, ACTIVE, function (props) {
return props.theme.brandColors.primary3;
6893}, ACTIVE * 0.488, ACTIVE, ACTIVE, function (props) {
return props.theme.screenSize.tablet;
6895}, function () {
return DESKTOP * 0.488;
6897}, function () {
return DESKTOP;
6899}, function () {
return DESKTOP;
6901}, function (props) {
return props.theme.brandColors.primary3;
6903}, function (props) {
return props.theme.screenSize.tablet;
6905});
6906var ProgressLi = styled__default.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);
6908}, function (props) {
return props.theme.screenSize.tablet;
6910}, function (props) {
return getProgressItemWidthPercentage(props.numberOfSteps);
6912});
6913
6914function getProgressItemType(itemType, showNav) {
switch (itemType) {
  case stepStates.active:
    return ActiveProgressButton;
6918
  case stepStates.pastStep:
    return showNav ? PastProgressButton : NonNavigablePastProgressButton;
6921
  case stepStates.clickableFutureStep:
    return showNav ? FutureProgressButton : BasicProgressButton;
6924
  default:
    return BasicProgressButton;
}
6928}
6929
6930function getStepState(isActiveStep, isPastStep, canClickFutureStep) {
if (isActiveStep) {
  return stepStates.active;
}
6934
if (isPastStep) {
  return stepStates.pastStep;
}
6938
if (canClickFutureStep) {
  return stepStates.clickableFutureStep;
}
6942
return stepStates.active;
6944}
6945
6946function 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;
6955
if (isPastStep || active || canClickFutureStep) {
  itemType = getStepState(active, isPastStep, canClickFutureStep);
}
6959
var ProgressItemType = getProgressItemType(itemType, showNav);
var listItemProps = {
  numberOfSteps: numberOfSteps,
  disabled: !isPastStep && !canClickFutureStep,
  onClick: onPastStepClicked
};
return (
  /*#__PURE__*/
  React__default.createElement(ProgressLi, {
    numberOfSteps: numberOfSteps
  },
  /*#__PURE__*/
  React__default.createElement(ProgressItemType, listItemProps,
  /*#__PURE__*/
  React__default.createElement("span", null, label)))
);
6976}
6977ProgressItem.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
6985} : {};
6986ProgressItem.defaultProps = {
onPastStepClicked: function onPastStepClicked() {},
label: '',
canClickFutureStep: false,
showNav: true
6991};
6992
6993var getMappedSteps = function getMappedSteps(steps, _onPastStepClicked, _onFutureStepClicked, showNav) {
var isPastStep = true;
return _mapInstanceProperty(steps).call(steps, function (step, index) {
  var _context;
6997
  isPastStep = !(step.active || !isPastStep);
  return (
    /*#__PURE__*/
    React__default.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
    })
  );
});
7022};
7023
7024var getIndexOfActiveStep = function getIndexOfActiveStep(steps) {
return _findIndexInstanceProperty(steps).call(steps, function (step) {
  return step.active;
});
7028};
7029
7030function ProgressTracker(_ref) {
var steps = _ref.steps,
    onPastStepClicked = _ref.onPastStepClicked,
    onFutureStepClicked = _ref.onFutureStepClicked,
    showNav = _ref.showNav;
return (
  /*#__PURE__*/
  React__default.createElement(ProgressContainer, {
    "data-testid": "progress-tracker",
    activeStepIndex: getIndexOfActiveStep(steps),
    numberOfSteps: steps.length
  }, getMappedSteps(steps, onPastStepClicked, onFutureStepClicked, showNav))
);
7043}
7044
7045ProgressTracker.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
7053} : {};
7054ProgressTracker.defaultProps = {
steps: [],
onPastStepClicked: function onPastStepClicked() {},
onFutureStepClicked: null,
showNav: true
7059};
7060var ProgressTracker$1 = styled.withTheme(ProgressTracker);
7061
7062/* eslint-disable react/prop-types */
7063formatMessage.setup({
missingTranslation: 'ignore'
7065});
7066var HelpContent = styled__default(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;}}"]);
7067var CautionRating = styled__default.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;"]);
7068var StarRating = styled__default.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);background-color:#ffc436;height:28px;"]);
7069var RatingTable = styled__default(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;}"]);
7070function StarRatingExplanation(props) {
return (
  /*#__PURE__*/
  React__default.createElement(Modal, {
    show: props.show,
    size: "large",
    onHide: props.closeModal,
    parentSelector: function parentSelector() {
      return props.parentNode;
    }
  },
  /*#__PURE__*/
  React__default.createElement(Modal.Header, null, formatMessage('Plan Ratings')),
  /*#__PURE__*/
  React__default.createElement(HelpContent, null,
  /*#__PURE__*/
  React__default.createElement("p", null, formatMessage('The Overall Plan Rating combines scores, as rated by Medicare, for the types of services each plan offers.')),
  /*#__PURE__*/
  React__default.createElement(RatingTable, null,
  /*#__PURE__*/
  React__default.createElement("thead", null,
  /*#__PURE__*/
  React__default.createElement("tr", null,
  /*#__PURE__*/
  React__default.createElement("th", null, formatMessage('Legend')),
  /*#__PURE__*/
  React__default.createElement("th", null, formatMessage('Description')))),
  /*#__PURE__*/
  React__default.createElement("tbody", null,
  /*#__PURE__*/
  React__default.createElement("tr", null,
  /*#__PURE__*/
  React__default.createElement("td", null,
  /*#__PURE__*/
  React__default.createElement(CautionRating, null)),
  /*#__PURE__*/
  React__default.createElement("td", null, formatMessage('Caution - The plan has received low summary ratings from Medicare three years in a row.'))),
  /*#__PURE__*/
  React__default.createElement("tr", null,
  /*#__PURE__*/
  React__default.createElement("td", null,
  /*#__PURE__*/
  React__default.createElement(StarRating, null)),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", null, formatMessage('What is being measured?')),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  }),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })))),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  }),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  })))),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  }))),
  /*#__PURE__*/
  React__default.createElement("p", null,
  /*#__PURE__*/
  React__default.createElement("strong", null, formatMessage('Where does the information for the Overall Plan Rating come from?'))),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  }),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage('Member surveys done by Medicare')),
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage('Information from clinicians')),
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage('Information submitted by the plans')),
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities")))),
  /*#__PURE__*/
  React__default.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__default.createElement("strong", {
          key: "bold"
        }, children)
      );
    }
  }),
  /*#__PURE__*/
  React__default.createElement("ul", null,
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage('Member surveys done by Medicare')),
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage('Reviews of billing and other information that plans submit to Medicare')),
  /*#__PURE__*/
  React__default.createElement("li", null, formatMessage("Results from Medicare's regular monitoring activities"))))),
  /*#__PURE__*/
  React__default.createElement("p", null,
  /*#__PURE__*/
  React__default.createElement("strong", null, formatMessage('Why is the Overall Plan Rating important?'))),
  /*#__PURE__*/
  React__default.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__default.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__default.createElement(Modal.Footer, null,
  /*#__PURE__*/
  React__default.createElement(ModalButtonContainer, null,
  /*#__PURE__*/
  React__default.createElement(Button, {
    onClick: props.closeModal
  }, formatMessage('Close')))))
);
7332}
7333
7334formatMessage.setup({
missingTranslation: 'ignore'
7336});
7337var StarContainer = styled__default.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';
7339});
7340var StarRatingLink = styled__default(LinkButton)(["color:", ";border-bottom:1px dashed;text-decoration:none;&:hover,&:focus{color:", ";border-bottom:1px solid;}"], function (props) {
return props.theme.colors.gray8;
7342}, function (props) {
return props.theme.colors.gray8;
7344});
7345var StarFill = styled__default.span(["background-color:#ffc436;display:block;height:21px;margin-left:2px;width:", ";"], function (props) {
return props.fillWidth;
7347});
7348var StarOverlay = styled__default.div(["background-image:url(https://bdaim-webexcdn-p.azureedge.net/es-assets/images/star-rating-mask.svg);height:25px;margin-top:-23px;"]);
7349var PoorPerformerOverlay = styled__default.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;"]);
7350
7351function 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");
7359}
7360
7361function getAriaText(isPoorPerformer, rating) {
if (isPoorPerformer) {
  return formatMessage('CMS has indicated that this plan is a poor performer');
}
7365
if (rating !== null) {
  return formatMessage("CMS has rated this plan {rating} out of five stars", {
    rating: rating
  });
}
7371
return '';
7373}
7374
7375function StarRating$1(_ref) {
var rating = _ref.rating,
    isPoorPerformer = _ref.isPoorPerformer,
    onExplanationOpen = _ref.onExplanationOpen;
7379
var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showHelp = _useState2[0],
    updateShowHelp = _useState2[1];
7384
var _useRootNode = useRootNode(document.body),
    _useRootNode2 = _slicedToArray(_useRootNode, 2),
    rootNode = _useRootNode2[0],
    rootNodeRef = _useRootNode2[1];
7389
var ariaText = getAriaText(isPoorPerformer, rating);
return (
  /*#__PURE__*/
  React__default.createElement(React__default.Fragment, null,
  /*#__PURE__*/
  React__default.createElement(StarRatingLink, {
    ref: rootNodeRef,
    onClick: function onClick() {
      if (onExplanationOpen) {
        onExplanationOpen();
      }
7401
      updateShowHelp(true);
    }
  }, rating === null &&
  /*#__PURE__*/
  React__default.createElement("span", null, formatMessage('Star Rating not available')), rating !== null &&
  /*#__PURE__*/
  React__default.createElement(StarContainer, {
    "aria-label": ariaText,
    isPoorPerformer: isPoorPerformer
  }, !isPoorPerformer ?
  /*#__PURE__*/
  React__default.createElement("div", null,
  /*#__PURE__*/
  React__default.createElement(StarFill, {
    fillWidth: getStarRatingBackgroundWidth(rating)
  }),
  /*#__PURE__*/
  React__default.createElement(StarOverlay, null)) :
  /*#__PURE__*/
  React__default.createElement("div", null,
  /*#__PURE__*/
  React__default.createElement(PoorPerformerOverlay, null)))),
  /*#__PURE__*/
  React__default.createElement(StarRatingExplanation, {
    show: showHelp,
    closeModal: function closeModal() {
      return updateShowHelp(false);
    },
    parentNode: rootNode
  }))
);
7433}
7434
7435StarRating$1.propTypes = process.env.NODE_ENV !== "production" ? {
rating: PropTypes.number.isRequired,
isPoorPerformer: PropTypes.bool,
onExplanationOpen: PropTypes.func
7439} : {};
7440StarRating$1.defaultProps = {
isPoorPerformer: false,
onExplanationOpen: function onExplanationOpen() {}
7443};
7444
7445var rotatorAnimation = styled.keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(270deg);}"]);
7446var ieAnimation = styled.keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}"]);
7447var dashAnimation = styled.keyframes(["0%{stroke-dashoffset:187;}50%{stroke-dashoffset:37.4;transform:rotate(135deg);}100%{stroke-dashoffset:187;transform:rotate(450deg);}"]);
7448
7449var colorsAnimation = function colorsAnimation(props) {
return styled.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);
7451};
7452
7453var SpinnerSvg = styled__default.svg(["animation:", " 1.4s linear infinite;@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){animation:", " 1.4s linear infinite;}"], rotatorAnimation, ieAnimation);
7454var SpinnerCircle = styled__default.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;
7456}, dashAnimation, colorsAnimation);
7457
7458var Spinner = function Spinner(_ref) {
var _context, _context2;
7460
var title = _ref.title,
    description = _ref.description,
    other = _objectWithoutProperties(_ref, ["title", "description"]);
7464
var titleId = title && "".concat(useUniqueId(other.id), "-title");
var descId = description && "".concat(useUniqueId(other.id), "-desc");
return (
  /*#__PURE__*/
  React__default.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__default.createElement("title", {
    id: titleId
  }, title), description &&
  /*#__PURE__*/
  React__default.createElement("desc", {
    id: descId
  }, description),
  /*#__PURE__*/
  React__default.createElement(SpinnerCircle, {
    fill: "none",
    strokeWidth: "6",
    strokeLinecap: "round",
    cx: "33",
    cy: "33",
    r: "30"
  }))
);
7493}; // eslint-disable-next-line consistent-return
7494
7495
7496var 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, "."));
}
7500} : {};
7501Spinner.propTypes = process.env.NODE_ENV !== "production" ? {
/** The title of the spinner for screen readers. This or `description` is
 * required */
title: descriptionTitleProp,
7505
/** The description of the spinner for screen readers. This or `title` is
 * required */
description: descriptionTitleProp
7509} : {};
7510Spinner.defaultProps = {
title: '',
description: ''
7513};
7514
7515function _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"]);
7517
_templateObject$3 = function _templateObject() {
  return data;
};
7521
return data;
7523}
7524var StyleReset = styled.createGlobalStyle(_templateObject$3());
7525
7526function 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);
7529}
7530
7531exports.Action = Action;
7532exports.ActionButton = ActionButton;
7533exports.AdditionalHelp = AdditionalHelp;
7534exports.Anchor = Anchor;
7535exports.AnswerButton = AnswerButton;
7536exports.AnswerGroup = AnswerGroup;
7537exports.Button = Button;
7538exports.CallToAction = CallToAction;
7539exports.Checkbox = Checkbox;
7540exports.CheckboxGroup = CheckboxGroup;
7541exports.Control = Control;
7542exports.DateInput = DateInput;
7543exports.DatePicker = DatePicker;
7544exports.Drawer = Drawer;
7545exports.Dropdown = Dropdown;
7546exports.DropdownButton = DropdownButton;
7547exports.Fade = Fade;
7548exports.Fieldset = Fieldset;
7549exports.FullColorIcon = FullColorIcon;
7550exports.Heading = Heading;
7551exports.HorizontalNav = HorizontalNav;
7552exports.HorizontalScrollWrapper = HorizontalScrollWrapper$1;
7553exports.Icon = Icon;
7554exports.IconButton = IconButton;
7555exports.Incrementer = Incrementer;
7556exports.InlineMessage = InlineMessage;
7557exports.Label = Label;
7558exports.LightCallToAction = LightCallToAction;
7559exports.LightNotification = LightNotification;
7560exports.LinkButton = LinkButton;
7561exports.LoadingSkeleton = LoadingSkeleton;
7562exports.MaskedTextbox = MaskedTextbox;
7563exports.Menu = Menu;
7564exports.Message = Message;
7565exports.MessageNotification = MessageNotification;
7566exports.Modal = Modal;
7567exports.ModalButtonContainer = ModalButtonContainer;
7568exports.Notification = Notification$1;
7569exports.OutlineButton = OutlineButton;
7570exports.PageHeading = PageHeading;
7571exports.Popover = Popover;
7572exports.PopoverLink = PopoverLink;
7573exports.ProgressTracker = ProgressTracker$1;
7574exports.Prompt = Prompt;
7575exports.RadioButton = RadioButton;
7576exports.RadioGroup = RadioGroup;
7577exports.ResponsiveTable = ResponsiveTable;
7578exports.SideNav = SideNav;
7579exports.SlidingPane = SlidingPane;
7580exports.Spinner = Spinner;
7581exports.StarRating = StarRating$1;
7582exports.StarRatingExplanation = StarRatingExplanation;
7583exports.StripedContainer = StripedContainer;
7584exports.StyleReset = StyleReset;
7585exports.Switch = Switch;
7586exports.TabPanel = TabPanel;
7587exports.Table = Table;
7588exports.Textarea = Textarea;
7589exports.Textbox = Textbox;
7590exports.ToggleButton = ToggleButton;
7591exports.Tooltip = Tooltip;
7592exports.generateAlphaName = generateAlphaName;
7593exports.isValidEmail = isValidEmail;
7594exports.screenReaderOnly = screenReaderOnly;
7595exports.useTheme = useTheme;
7596exports.useWindowWidth = useWindowWidth;
7597exports.withWindowSize = withWindowSize;
1	`'use strict';`
2
3	`Object.defineProperty(exports, '__esModule', { value: true });`
4
5	`function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }`
6
7	`require('core-js/modules/es.function.name');`
8	`var _extends = _interopDefault(require('@babel/runtime-corejs3/helpers/extends'));`
9	`var _objectWithoutProperties = _interopDefault(require('@babel/runtime-corejs3/helpers/objectWithoutProperties'));`
10	`var React = require('react');`
11	`var React__default = _interopDefault(React);`
12	`var PropTypes = _interopDefault(require('prop-types'));`
13	`var styled = require('styled-components');`
14	`var styled__default = _interopDefault(styled);`
15	`var _noop = _interopDefault(require('lodash/noop'));`
16	`var _Object$defineProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-property'));`
17	`var _Object$defineProperties = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/define-properties'));`
18	`var _Object$getOwnPropertyDescriptors = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors'));`
19	`var _forEachInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/for-each'));`
20	`var _Object$getOwnPropertyDescriptor = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor'));`
21	`var _filterInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/filter'));`
22	`var _Object$getOwnPropertySymbols = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols'));`
23	`var _Object$keys = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/object/keys'));`
24	`var _slicedToArray = _interopDefault(require('@babel/runtime-corejs3/helpers/slicedToArray'));`
25	`var _defineProperty = _interopDefault(require('@babel/runtime-corejs3/helpers/defineProperty'));`
26	`var _mapInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/map'));`
27	`var _spliceInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/splice'));`
28	`var _indexOfInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/index-of'));`
29	`var _toConsumableArray = _interopDefault(require('@babel/runtime-corejs3/helpers/toConsumableArray'));`
30	`var AnimateHeight = _interopDefault(require('react-animate-height'));`
31	`var ReactDOM = _interopDefault(require('react-dom'));`
32	`var reactPopper = require('react-popper');`
33	`var Transition = _interopDefault(require('react-transition-group/Transition'));`
34	`var tinycolor = _interopDefault(require('tinycolor2'));`
35	`require('get-root-node-polyfill/implement');`
36	`var _setTimeout = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/set-timeout'));`
37	`var _setInterval = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/set-interval'));`
38	`var reactOverlays = require('react-overlays');`
39	`var _concatInstanceProperty = _interopDefault(require('@babel/runtime-corejs3/core-js-stable/instance/concat'));`
40	`var _taggedTemplateLiteral = _interopDefault(require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral'));`