` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}","export var MAGICAL_MAX_HEIGHT = \"20em\";\nexport default {\n enter: {\n opacity: 0.01,\n transform: \"translateX(-25%)\",\n maxHeight: 0,\n overflow: \"hidden\",\n transition: \".25s ease-in\"\n },\n enterActive: {\n opacity: 1,\n transform: \"translateX(0)\",\n maxHeight: MAGICAL_MAX_HEIGHT\n },\n exit: {\n opacity: 1,\n transform: \"translateX(0)\",\n maxHeight: MAGICAL_MAX_HEIGHT,\n overflow: \"hidden\",\n transition: \".25s ease-out\"\n },\n exitActive: {\n opacity: 0.01,\n transform: \"translateX(25%)\",\n maxHeight: 0\n }\n};","function replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n/**\n * Removes a CSS class from a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\n\nexport default function removeClass(element, className) {\n if (element.classList) {\n element.classList.remove(className);\n } else if (typeof element.className === 'string') {\n element.className = replaceClassName(element.className, className);\n } else {\n element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n }\n}","export default {\n disabled: false\n};","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\n\nfunction noop() {}\n\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport addOneClass from 'dom-helpers/addClass';\nimport removeOneClass from 'dom-helpers/removeClass';\nimport React from 'react';\nimport Transition from './Transition';\nimport { classNamesShape } from './utils/PropTypes';\nimport { forceReflow } from './utils/reflow';\n\nvar _addClass = function addClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return addOneClass(node, c);\n });\n};\n\nvar removeClass = function removeClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return removeOneClass(node, c);\n });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](https://docs.angularjs.org/api/ngAnimate) library, you should\n * use it if you're using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * \n *
\n * \n * {\"I'll receive my-node-* classes\"}\n *
\n * \n *
\n *
\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**, so it's\n * important to add `transition` declaration only to them, otherwise transitions\n * might not behave as intended! This might not be obvious when the transitions\n * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in\n * the example above (minus `transition`), but it becomes apparent in more\n * complex transitions.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.appliedClasses = {\n appear: {},\n enter: {},\n exit: {}\n };\n\n _this.onEnter = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument[0],\n appearing = _this$resolveArgument[1];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n if (_this.props.onEnter) {\n _this.props.onEnter(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntering = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument2[0],\n appearing = _this$resolveArgument2[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.addClass(node, type, 'active');\n\n if (_this.props.onEntering) {\n _this.props.onEntering(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntered = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument3[0],\n appearing = _this$resolveArgument3[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.removeClasses(node, type);\n\n _this.addClass(node, type, 'done');\n\n if (_this.props.onEntered) {\n _this.props.onEntered(maybeNode, maybeAppearing);\n }\n };\n\n _this.onExit = function (maybeNode) {\n var _this$resolveArgument4 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument4[0];\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n _this.addClass(node, 'exit', 'base');\n\n if (_this.props.onExit) {\n _this.props.onExit(maybeNode);\n }\n };\n\n _this.onExiting = function (maybeNode) {\n var _this$resolveArgument5 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument5[0];\n\n _this.addClass(node, 'exit', 'active');\n\n if (_this.props.onExiting) {\n _this.props.onExiting(maybeNode);\n }\n };\n\n _this.onExited = function (maybeNode) {\n var _this$resolveArgument6 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument6[0];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, 'exit', 'done');\n\n if (_this.props.onExited) {\n _this.props.onExited(maybeNode);\n }\n };\n\n _this.resolveArguments = function (maybeNode, maybeAppearing) {\n return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`\n : [maybeNode, maybeAppearing];\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n return {\n baseClassName: baseClassName,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.addClass = function addClass(node, type, phase) {\n var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n var _this$getClassNames = this.getClassNames('enter'),\n doneClassName = _this$getClassNames.doneClassName;\n\n if (type === 'appear' && phase === 'done' && doneClassName) {\n className += \" \" + doneClassName;\n } // This is to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n\n\n if (phase === 'active') {\n if (node) forceReflow(node);\n }\n\n if (className) {\n this.appliedClasses[type][phase] = className;\n\n _addClass(node, className);\n }\n };\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$appliedClasses$ = this.appliedClasses[type],\n baseClassName = _this$appliedClasses$.base,\n activeClassName = _this$appliedClasses$.active,\n doneClassName = _this$appliedClasses$.done;\n this.appliedClasses[type] = {};\n\n if (baseClassName) {\n removeClass(node, baseClassName);\n }\n\n if (activeClassName) {\n removeClass(node, activeClassName);\n }\n\n if (doneClassName) {\n removeClass(node, doneClassName);\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n _ = _this$props.classNames,\n props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n /**\n * The animation classNames applied to the component as it appears, enters,\n * exits or has finished the transition. A single name can be provided, which\n * will be suffixed for each stage, e.g. `classNames=\"fade\"` applies:\n *\n * - `fade-appear`, `fade-appear-active`, `fade-appear-done`\n * - `fade-enter`, `fade-enter-active`, `fade-enter-done`\n * - `fade-exit`, `fade-exit-active`, `fade-exit-done`\n *\n * A few details to note about how these classes are applied:\n *\n * 1. They are _joined_ with the ones that are already defined on the child\n * component, so if you want to add some base styles, you can use\n * `className` without worrying that it will be overridden.\n *\n * 2. If the transition component mounts with `in={false}`, no classes are\n * applied yet. You might be expecting `*-exit-done`, but if you think\n * about it, a component cannot finish exiting if it hasn't entered yet.\n *\n * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This\n * allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply\n * an epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: classNamesShape,\n\n /**\n * A `` callback fired immediately after the 'enter' or 'appear' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEnter: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter-active' or\n * 'appear-active' class is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'enter' or\n * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntered: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' class is\n * applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExit: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit-active' is applied.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExiting: PropTypes.func,\n\n /**\n * A `` callback fired immediately after the 'exit' classes\n * are **removed** and the `exit-done` class is added to the DOM node.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement)\n */\n onExited: PropTypes.func\n}) : {};\nexport default CSSTransition;","import hasClass from './hasClass';\n/**\n * Adds a CSS class to a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\nexport default function addClass(element, className) {\n if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + \" \" + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + \" \" + className);\n}","/**\n * Checks if a given element has a CSS class.\n * \n * @param element the element\n * @param className the CSS class name\n */\nexport default function hasClass(element, className) {\n if (element.classList) return !!className && element.classList.contains(className);\n return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n return _extends.apply(this, arguments);\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}","import React, { createContext } from 'react';\nimport warning from 'tiny-warning';\nimport PropTypes from 'prop-types';\nimport hoist from 'hoist-non-react-statics';\nimport getDisplayName from 'react-display-name';\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction isObject(obj) {\n return obj !== null && typeof obj === 'object' && !Array.isArray(obj);\n}\n\nfunction createThemeProvider(context) {\n var ThemeProvider =\n /*#__PURE__*/\n function (_React$Component) {\n _inheritsLoose(ThemeProvider, _React$Component);\n\n function ThemeProvider() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"cachedTheme\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"lastOuterTheme\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"lastTheme\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"renderProvider\", function (outerTheme) {\n var children = _this.props.children;\n return React.createElement(context.Provider, {\n value: _this.getTheme(outerTheme)\n }, children);\n });\n\n return _this;\n }\n\n var _proto = ThemeProvider.prototype;\n\n // Get the theme from the props, supporting both (outerTheme) => {} as well as object notation\n _proto.getTheme = function getTheme(outerTheme) {\n if (this.props.theme !== this.lastTheme || outerTheme !== this.lastOuterTheme || !this.cachedTheme) {\n this.lastOuterTheme = outerTheme;\n this.lastTheme = this.props.theme;\n\n if (typeof this.lastTheme === 'function') {\n var theme = this.props.theme;\n this.cachedTheme = theme(outerTheme);\n process.env.NODE_ENV !== \"production\" ? warning(isObject(this.cachedTheme), '[ThemeProvider] Please return an object from your theme function') : void 0;\n } else {\n var _theme = this.props.theme;\n process.env.NODE_ENV !== \"production\" ? warning(isObject(_theme), '[ThemeProvider] Please make your theme prop a plain object') : void 0;\n this.cachedTheme = outerTheme ? _extends({}, outerTheme, _theme) : _theme;\n }\n }\n\n return this.cachedTheme;\n };\n\n _proto.render = function render() {\n var children = this.props.children;\n\n if (!children) {\n return null;\n }\n\n return React.createElement(context.Consumer, null, this.renderProvider);\n };\n\n return ThemeProvider;\n }(React.Component);\n\n if (process.env.NODE_ENV !== 'production') {\n ThemeProvider.propTypes = {\n // eslint-disable-next-line react/require-default-props\n children: PropTypes.node,\n theme: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.func]).isRequired\n };\n }\n\n return ThemeProvider;\n}\n\nfunction createWithTheme(context) {\n return function hoc(Component) {\n var withTheme = React.forwardRef(function (props, ref) {\n return React.createElement(context.Consumer, null, function (theme) {\n process.env.NODE_ENV !== \"production\" ? warning(isObject(theme), '[theming] Please use withTheme only with the ThemeProvider') : void 0;\n return React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n });\n });\n\n if (process.env.NODE_ENV !== 'production') {\n withTheme.displayName = \"WithTheme(\" + getDisplayName(Component) + \")\";\n }\n\n hoist(withTheme, Component);\n return withTheme;\n };\n}\n\nfunction createUseTheme(context) {\n var useTheme = function useTheme() {\n var theme = React.useContext(context);\n process.env.NODE_ENV !== \"production\" ? warning(isObject(theme), '[theming] Please use useTheme only with the ThemeProvider') : void 0;\n return theme;\n };\n\n return useTheme;\n}\n\nfunction createTheming(context) {\n return {\n context: context,\n withTheme: createWithTheme(context),\n useTheme: createUseTheme(context),\n ThemeProvider: createThemeProvider(context)\n };\n}\n\nvar ThemeContext = createContext();\n\nvar _createTheming = createTheming(ThemeContext),\n withTheme = _createTheming.withTheme,\n ThemeProvider = _createTheming.ThemeProvider,\n useTheme = _createTheming.useTheme;\n\nexport { useTheme, ThemeContext, withTheme, createTheming, ThemeProvider };\n","var _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nexport var isBrowser = (typeof window === \"undefined\" ? \"undefined\" : _typeof(window)) === \"object\" && (typeof document === \"undefined\" ? \"undefined\" : _typeof(document)) === 'object' && document.nodeType === 9;\n\nexport default isBrowser;\n","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}","export default function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n setPrototypeOf(subClass, superClass);\n}","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}","import _extends from '@babel/runtime/helpers/esm/extends';\nimport isInBrowser from 'is-in-browser';\nimport warning from 'tiny-warning';\nimport _createClass from '@babel/runtime/helpers/esm/createClass';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';\nimport _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';\n\nvar plainObjectConstrurctor = {}.constructor;\nfunction cloneStyle(style) {\n if (style == null || typeof style !== 'object') return style;\n if (Array.isArray(style)) return style.map(cloneStyle);\n if (style.constructor !== plainObjectConstrurctor) return style;\n var newStyle = {};\n\n for (var name in style) {\n newStyle[name] = cloneStyle(style[name]);\n }\n\n return newStyle;\n}\n\n/**\n * Create a rule instance.\n */\n\nfunction createRule(name, decl, options) {\n if (name === void 0) {\n name = 'unnamed';\n }\n\n var jss = options.jss;\n var declCopy = cloneStyle(decl);\n var rule = jss.plugins.onCreateRule(name, declCopy, options);\n if (rule) return rule; // It is an at-rule and it has no instance.\n\n if (name[0] === '@') {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Unknown rule \" + name) : void 0;\n }\n\n return null;\n}\n\nvar join = function join(value, by) {\n var result = '';\n\n for (var i = 0; i < value.length; i++) {\n // Remove !important from the value, it will be readded later.\n if (value[i] === '!important') break;\n if (result) result += by;\n result += value[i];\n }\n\n return result;\n};\n/**\n * Converts JSS array value to a CSS string.\n *\n * `margin: [['5px', '10px']]` > `margin: 5px 10px;`\n * `border: ['1px', '2px']` > `border: 1px, 2px;`\n * `margin: [['5px', '10px'], '!important']` > `margin: 5px 10px !important;`\n * `color: ['red', !important]` > `color: red !important;`\n */\n\n\nvar toCssValue = function toCssValue(value) {\n if (!Array.isArray(value)) return value;\n var cssValue = ''; // Support space separated values via `[['5px', '10px']]`.\n\n if (Array.isArray(value[0])) {\n for (var i = 0; i < value.length; i++) {\n if (value[i] === '!important') break;\n if (cssValue) cssValue += ', ';\n cssValue += join(value[i], ' ');\n }\n } else cssValue = join(value, ', '); // Add !important, because it was ignored.\n\n\n if (value[value.length - 1] === '!important') {\n cssValue += ' !important';\n }\n\n return cssValue;\n};\n\nfunction getWhitespaceSymbols(options) {\n if (options && options.format === false) {\n return {\n linebreak: '',\n space: ''\n };\n }\n\n return {\n linebreak: '\\n',\n space: ' '\n };\n}\n\n/**\n * Indent a string.\n * http://jsperf.com/array-join-vs-for\n */\n\nfunction indentStr(str, indent) {\n var result = '';\n\n for (var index = 0; index < indent; index++) {\n result += ' ';\n }\n\n return result + str;\n}\n/**\n * Converts a Rule to CSS string.\n */\n\n\nfunction toCss(selector, style, options) {\n if (options === void 0) {\n options = {};\n }\n\n var result = '';\n if (!style) return result;\n var _options = options,\n _options$indent = _options.indent,\n indent = _options$indent === void 0 ? 0 : _options$indent;\n var fallbacks = style.fallbacks;\n\n if (options.format === false) {\n indent = -Infinity;\n }\n\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak,\n space = _getWhitespaceSymbols.space;\n\n if (selector) indent++; // Apply fallbacks first.\n\n if (fallbacks) {\n // Array syntax {fallbacks: [{prop: value}]}\n if (Array.isArray(fallbacks)) {\n for (var index = 0; index < fallbacks.length; index++) {\n var fallback = fallbacks[index];\n\n for (var prop in fallback) {\n var value = fallback[prop];\n\n if (value != null) {\n if (result) result += linebreak;\n result += indentStr(prop + \":\" + space + toCssValue(value) + \";\", indent);\n }\n }\n }\n } else {\n // Object syntax {fallbacks: {prop: value}}\n for (var _prop in fallbacks) {\n var _value = fallbacks[_prop];\n\n if (_value != null) {\n if (result) result += linebreak;\n result += indentStr(_prop + \":\" + space + toCssValue(_value) + \";\", indent);\n }\n }\n }\n }\n\n for (var _prop2 in style) {\n var _value2 = style[_prop2];\n\n if (_value2 != null && _prop2 !== 'fallbacks') {\n if (result) result += linebreak;\n result += indentStr(_prop2 + \":\" + space + toCssValue(_value2) + \";\", indent);\n }\n } // Allow empty style in this case, because properties will be added dynamically.\n\n\n if (!result && !options.allowEmpty) return result; // When rule is being stringified before selector was defined.\n\n if (!selector) return result;\n indent--;\n if (result) result = \"\" + linebreak + result + linebreak;\n return indentStr(\"\" + selector + space + \"{\" + result, indent) + indentStr('}', indent);\n}\n\nvar escapeRegex = /([[\\].#*$><+~=|^:(),\"'`\\s])/g;\nvar nativeEscape = typeof CSS !== 'undefined' && CSS.escape;\nvar escape = (function (str) {\n return nativeEscape ? nativeEscape(str) : str.replace(escapeRegex, '\\\\$1');\n});\n\nvar BaseStyleRule =\n/*#__PURE__*/\nfunction () {\n function BaseStyleRule(key, style, options) {\n this.type = 'style';\n this.isProcessed = false;\n var sheet = options.sheet,\n Renderer = options.Renderer;\n this.key = key;\n this.options = options;\n this.style = style;\n if (sheet) this.renderer = sheet.renderer;else if (Renderer) this.renderer = new Renderer();\n }\n /**\n * Get or set a style property.\n */\n\n\n var _proto = BaseStyleRule.prototype;\n\n _proto.prop = function prop(name, value, options) {\n // It's a getter.\n if (value === undefined) return this.style[name]; // Don't do anything if the value has not changed.\n\n var force = options ? options.force : false;\n if (!force && this.style[name] === value) return this;\n var newValue = value;\n\n if (!options || options.process !== false) {\n newValue = this.options.jss.plugins.onChangeValue(value, name, this);\n }\n\n var isEmpty = newValue == null || newValue === false;\n var isDefined = name in this.style; // Value is empty and wasn't defined before.\n\n if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.\n\n var remove = isEmpty && isDefined;\n if (remove) delete this.style[name];else this.style[name] = newValue; // Renderable is defined if StyleSheet option `link` is true.\n\n if (this.renderable && this.renderer) {\n if (remove) this.renderer.removeProperty(this.renderable, name);else this.renderer.setProperty(this.renderable, name, newValue);\n return this;\n }\n\n var sheet = this.options.sheet;\n\n if (sheet && sheet.attached) {\n process.env.NODE_ENV !== \"production\" ? warning(false, '[JSS] Rule is not linked. Missing sheet option \"link: true\".') : void 0;\n }\n\n return this;\n };\n\n return BaseStyleRule;\n}();\nvar StyleRule =\n/*#__PURE__*/\nfunction (_BaseStyleRule) {\n _inheritsLoose(StyleRule, _BaseStyleRule);\n\n function StyleRule(key, style, options) {\n var _this;\n\n _this = _BaseStyleRule.call(this, key, style, options) || this;\n var selector = options.selector,\n scoped = options.scoped,\n sheet = options.sheet,\n generateId = options.generateId;\n\n if (selector) {\n _this.selectorText = selector;\n } else if (scoped !== false) {\n _this.id = generateId(_assertThisInitialized(_assertThisInitialized(_this)), sheet);\n _this.selectorText = \".\" + escape(_this.id);\n }\n\n return _this;\n }\n /**\n * Set selector string.\n * Attention: use this with caution. Most browsers didn't implement\n * selectorText setter, so this may result in rerendering of entire Style Sheet.\n */\n\n\n var _proto2 = StyleRule.prototype;\n\n /**\n * Apply rule to an element inline.\n */\n _proto2.applyTo = function applyTo(renderable) {\n var renderer = this.renderer;\n\n if (renderer) {\n var json = this.toJSON();\n\n for (var prop in json) {\n renderer.setProperty(renderable, prop, json[prop]);\n }\n }\n\n return this;\n }\n /**\n * Returns JSON representation of the rule.\n * Fallbacks are not supported.\n * Useful for inline styles.\n */\n ;\n\n _proto2.toJSON = function toJSON() {\n var json = {};\n\n for (var prop in this.style) {\n var value = this.style[prop];\n if (typeof value !== 'object') json[prop] = value;else if (Array.isArray(value)) json[prop] = toCssValue(value);\n }\n\n return json;\n }\n /**\n * Generates a CSS string.\n */\n ;\n\n _proto2.toString = function toString(options) {\n var sheet = this.options.sheet;\n var link = sheet ? sheet.options.link : false;\n var opts = link ? _extends({}, options, {\n allowEmpty: true\n }) : options;\n return toCss(this.selectorText, this.style, opts);\n };\n\n _createClass(StyleRule, [{\n key: \"selector\",\n set: function set(selector) {\n if (selector === this.selectorText) return;\n this.selectorText = selector;\n var renderer = this.renderer,\n renderable = this.renderable;\n if (!renderable || !renderer) return;\n var hasChanged = renderer.setSelector(renderable, selector); // If selector setter is not implemented, rerender the rule.\n\n if (!hasChanged) {\n renderer.replaceRule(renderable, this);\n }\n }\n /**\n * Get selector string.\n */\n ,\n get: function get() {\n return this.selectorText;\n }\n }]);\n\n return StyleRule;\n}(BaseStyleRule);\nvar pluginStyleRule = {\n onCreateRule: function onCreateRule(key, style, options) {\n if (key[0] === '@' || options.parent && options.parent.type === 'keyframes') {\n return null;\n }\n\n return new StyleRule(key, style, options);\n }\n};\n\nvar defaultToStringOptions = {\n indent: 1,\n children: true\n};\nvar atRegExp = /@([\\w-]+)/;\n/**\n * Conditional rule for @media, @supports\n */\n\nvar ConditionalRule =\n/*#__PURE__*/\nfunction () {\n function ConditionalRule(key, styles, options) {\n this.type = 'conditional';\n this.isProcessed = false;\n this.key = key;\n var atMatch = key.match(atRegExp);\n this.at = atMatch ? atMatch[1] : 'unknown'; // Key might contain a unique suffix in case the `name` passed by user was duplicate.\n\n this.query = options.name || \"@\" + this.at;\n this.options = options;\n this.rules = new RuleList(_extends({}, options, {\n parent: this\n }));\n\n for (var name in styles) {\n this.rules.add(name, styles[name]);\n }\n\n this.rules.process();\n }\n /**\n * Get a rule.\n */\n\n\n var _proto = ConditionalRule.prototype;\n\n _proto.getRule = function getRule(name) {\n return this.rules.get(name);\n }\n /**\n * Get index of a rule.\n */\n ;\n\n _proto.indexOf = function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n /**\n * Create and register rule, run plugins.\n */\n ;\n\n _proto.addRule = function addRule(name, style, options) {\n var rule = this.rules.add(name, style, options);\n if (!rule) return null;\n this.options.jss.plugins.onProcessRule(rule);\n return rule;\n }\n /**\n * Replace rule, run plugins.\n */\n ;\n\n _proto.replaceRule = function replaceRule(name, style, options) {\n var newRule = this.rules.replace(name, style, options);\n if (newRule) this.options.jss.plugins.onProcessRule(newRule);\n return newRule;\n }\n /**\n * Generates a CSS string.\n */\n ;\n\n _proto.toString = function toString(options) {\n if (options === void 0) {\n options = defaultToStringOptions;\n }\n\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak;\n\n if (options.indent == null) options.indent = defaultToStringOptions.indent;\n if (options.children == null) options.children = defaultToStringOptions.children;\n\n if (options.children === false) {\n return this.query + \" {}\";\n }\n\n var children = this.rules.toString(options);\n return children ? this.query + \" {\" + linebreak + children + linebreak + \"}\" : '';\n };\n\n return ConditionalRule;\n}();\nvar keyRegExp = /@container|@media|@supports\\s+/;\nvar pluginConditionalRule = {\n onCreateRule: function onCreateRule(key, styles, options) {\n return keyRegExp.test(key) ? new ConditionalRule(key, styles, options) : null;\n }\n};\n\nvar defaultToStringOptions$1 = {\n indent: 1,\n children: true\n};\nvar nameRegExp = /@keyframes\\s+([\\w-]+)/;\n/**\n * Rule for @keyframes\n */\n\nvar KeyframesRule =\n/*#__PURE__*/\nfunction () {\n function KeyframesRule(key, frames, options) {\n this.type = 'keyframes';\n this.at = '@keyframes';\n this.isProcessed = false;\n var nameMatch = key.match(nameRegExp);\n\n if (nameMatch && nameMatch[1]) {\n this.name = nameMatch[1];\n } else {\n this.name = 'noname';\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Bad keyframes name \" + key) : void 0;\n }\n\n this.key = this.type + \"-\" + this.name;\n this.options = options;\n var scoped = options.scoped,\n sheet = options.sheet,\n generateId = options.generateId;\n this.id = scoped === false ? this.name : escape(generateId(this, sheet));\n this.rules = new RuleList(_extends({}, options, {\n parent: this\n }));\n\n for (var name in frames) {\n this.rules.add(name, frames[name], _extends({}, options, {\n parent: this\n }));\n }\n\n this.rules.process();\n }\n /**\n * Generates a CSS string.\n */\n\n\n var _proto = KeyframesRule.prototype;\n\n _proto.toString = function toString(options) {\n if (options === void 0) {\n options = defaultToStringOptions$1;\n }\n\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak;\n\n if (options.indent == null) options.indent = defaultToStringOptions$1.indent;\n if (options.children == null) options.children = defaultToStringOptions$1.children;\n\n if (options.children === false) {\n return this.at + \" \" + this.id + \" {}\";\n }\n\n var children = this.rules.toString(options);\n if (children) children = \"\" + linebreak + children + linebreak;\n return this.at + \" \" + this.id + \" {\" + children + \"}\";\n };\n\n return KeyframesRule;\n}();\nvar keyRegExp$1 = /@keyframes\\s+/;\nvar refRegExp = /\\$([\\w-]+)/g;\n\nvar findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {\n if (typeof val === 'string') {\n return val.replace(refRegExp, function (match, name) {\n if (name in keyframes) {\n return keyframes[name];\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Referenced keyframes rule \\\"\" + name + \"\\\" is not defined.\") : void 0;\n return match;\n });\n }\n\n return val;\n};\n/**\n * Replace the reference for a animation name.\n */\n\n\nvar replaceRef = function replaceRef(style, prop, keyframes) {\n var value = style[prop];\n var refKeyframe = findReferencedKeyframe(value, keyframes);\n\n if (refKeyframe !== value) {\n style[prop] = refKeyframe;\n }\n};\n\nvar pluginKeyframesRule = {\n onCreateRule: function onCreateRule(key, frames, options) {\n return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;\n },\n // Animation name ref replacer.\n onProcessStyle: function onProcessStyle(style, rule, sheet) {\n if (rule.type !== 'style' || !sheet) return style;\n if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes);\n if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes);\n return style;\n },\n onChangeValue: function onChangeValue(val, prop, rule) {\n var sheet = rule.options.sheet;\n\n if (!sheet) {\n return val;\n }\n\n switch (prop) {\n case 'animation':\n return findReferencedKeyframe(val, sheet.keyframes);\n\n case 'animation-name':\n return findReferencedKeyframe(val, sheet.keyframes);\n\n default:\n return val;\n }\n }\n};\n\nvar KeyframeRule =\n/*#__PURE__*/\nfunction (_BaseStyleRule) {\n _inheritsLoose(KeyframeRule, _BaseStyleRule);\n\n function KeyframeRule() {\n return _BaseStyleRule.apply(this, arguments) || this;\n }\n\n var _proto = KeyframeRule.prototype;\n\n /**\n * Generates a CSS string.\n */\n _proto.toString = function toString(options) {\n var sheet = this.options.sheet;\n var link = sheet ? sheet.options.link : false;\n var opts = link ? _extends({}, options, {\n allowEmpty: true\n }) : options;\n return toCss(this.key, this.style, opts);\n };\n\n return KeyframeRule;\n}(BaseStyleRule);\nvar pluginKeyframeRule = {\n onCreateRule: function onCreateRule(key, style, options) {\n if (options.parent && options.parent.type === 'keyframes') {\n return new KeyframeRule(key, style, options);\n }\n\n return null;\n }\n};\n\nvar FontFaceRule =\n/*#__PURE__*/\nfunction () {\n function FontFaceRule(key, style, options) {\n this.type = 'font-face';\n this.at = '@font-face';\n this.isProcessed = false;\n this.key = key;\n this.style = style;\n this.options = options;\n }\n /**\n * Generates a CSS string.\n */\n\n\n var _proto = FontFaceRule.prototype;\n\n _proto.toString = function toString(options) {\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak;\n\n if (Array.isArray(this.style)) {\n var str = '';\n\n for (var index = 0; index < this.style.length; index++) {\n str += toCss(this.at, this.style[index]);\n if (this.style[index + 1]) str += linebreak;\n }\n\n return str;\n }\n\n return toCss(this.at, this.style, options);\n };\n\n return FontFaceRule;\n}();\nvar keyRegExp$2 = /@font-face/;\nvar pluginFontFaceRule = {\n onCreateRule: function onCreateRule(key, style, options) {\n return keyRegExp$2.test(key) ? new FontFaceRule(key, style, options) : null;\n }\n};\n\nvar ViewportRule =\n/*#__PURE__*/\nfunction () {\n function ViewportRule(key, style, options) {\n this.type = 'viewport';\n this.at = '@viewport';\n this.isProcessed = false;\n this.key = key;\n this.style = style;\n this.options = options;\n }\n /**\n * Generates a CSS string.\n */\n\n\n var _proto = ViewportRule.prototype;\n\n _proto.toString = function toString(options) {\n return toCss(this.key, this.style, options);\n };\n\n return ViewportRule;\n}();\nvar pluginViewportRule = {\n onCreateRule: function onCreateRule(key, style, options) {\n return key === '@viewport' || key === '@-ms-viewport' ? new ViewportRule(key, style, options) : null;\n }\n};\n\nvar SimpleRule =\n/*#__PURE__*/\nfunction () {\n function SimpleRule(key, value, options) {\n this.type = 'simple';\n this.isProcessed = false;\n this.key = key;\n this.value = value;\n this.options = options;\n }\n /**\n * Generates a CSS string.\n */\n // eslint-disable-next-line no-unused-vars\n\n\n var _proto = SimpleRule.prototype;\n\n _proto.toString = function toString(options) {\n if (Array.isArray(this.value)) {\n var str = '';\n\n for (var index = 0; index < this.value.length; index++) {\n str += this.key + \" \" + this.value[index] + \";\";\n if (this.value[index + 1]) str += '\\n';\n }\n\n return str;\n }\n\n return this.key + \" \" + this.value + \";\";\n };\n\n return SimpleRule;\n}();\nvar keysMap = {\n '@charset': true,\n '@import': true,\n '@namespace': true\n};\nvar pluginSimpleRule = {\n onCreateRule: function onCreateRule(key, value, options) {\n return key in keysMap ? new SimpleRule(key, value, options) : null;\n }\n};\n\nvar plugins = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];\n\nvar defaultUpdateOptions = {\n process: true\n};\nvar forceUpdateOptions = {\n force: true,\n process: true\n /**\n * Contains rules objects and allows adding/removing etc.\n * Is used for e.g. by `StyleSheet` or `ConditionalRule`.\n */\n\n};\n\nvar RuleList =\n/*#__PURE__*/\nfunction () {\n // Rules registry for access by .get() method.\n // It contains the same rule registered by name and by selector.\n // Original styles object.\n // Used to ensure correct rules order.\n function RuleList(options) {\n this.map = {};\n this.raw = {};\n this.index = [];\n this.counter = 0;\n this.options = options;\n this.classes = options.classes;\n this.keyframes = options.keyframes;\n }\n /**\n * Create and register rule.\n *\n * Will not render after Style Sheet was rendered the first time.\n */\n\n\n var _proto = RuleList.prototype;\n\n _proto.add = function add(name, decl, ruleOptions) {\n var _this$options = this.options,\n parent = _this$options.parent,\n sheet = _this$options.sheet,\n jss = _this$options.jss,\n Renderer = _this$options.Renderer,\n generateId = _this$options.generateId,\n scoped = _this$options.scoped;\n\n var options = _extends({\n classes: this.classes,\n parent: parent,\n sheet: sheet,\n jss: jss,\n Renderer: Renderer,\n generateId: generateId,\n scoped: scoped,\n name: name,\n keyframes: this.keyframes,\n selector: undefined\n }, ruleOptions); // When user uses .createStyleSheet(), duplicate names are not possible, but\n // `sheet.addRule()` opens the door for any duplicate rule name. When this happens\n // we need to make the key unique within this RuleList instance scope.\n\n\n var key = name;\n\n if (name in this.raw) {\n key = name + \"-d\" + this.counter++;\n } // We need to save the original decl before creating the rule\n // because cache plugin needs to use it as a key to return a cached rule.\n\n\n this.raw[key] = decl;\n\n if (key in this.classes) {\n // E.g. rules inside of @media container\n options.selector = \".\" + escape(this.classes[key]);\n }\n\n var rule = createRule(key, decl, options);\n if (!rule) return null;\n this.register(rule);\n var index = options.index === undefined ? this.index.length : options.index;\n this.index.splice(index, 0, rule);\n return rule;\n }\n /**\n * Replace rule.\n * Create a new rule and remove old one instead of overwriting\n * because we want to invoke onCreateRule hook to make plugins work.\n */\n ;\n\n _proto.replace = function replace(name, decl, ruleOptions) {\n var oldRule = this.get(name);\n var oldIndex = this.index.indexOf(oldRule);\n\n if (oldRule) {\n this.remove(oldRule);\n }\n\n var options = ruleOptions;\n if (oldIndex !== -1) options = _extends({}, ruleOptions, {\n index: oldIndex\n });\n return this.add(name, decl, options);\n }\n /**\n * Get a rule by name or selector.\n */\n ;\n\n _proto.get = function get(nameOrSelector) {\n return this.map[nameOrSelector];\n }\n /**\n * Delete a rule.\n */\n ;\n\n _proto.remove = function remove(rule) {\n this.unregister(rule);\n delete this.raw[rule.key];\n this.index.splice(this.index.indexOf(rule), 1);\n }\n /**\n * Get index of a rule.\n */\n ;\n\n _proto.indexOf = function indexOf(rule) {\n return this.index.indexOf(rule);\n }\n /**\n * Run `onProcessRule()` plugins on every rule.\n */\n ;\n\n _proto.process = function process() {\n var plugins = this.options.jss.plugins; // We need to clone array because if we modify the index somewhere else during a loop\n // we end up with very hard-to-track-down side effects.\n\n this.index.slice(0).forEach(plugins.onProcessRule, plugins);\n }\n /**\n * Register a rule in `.map`, `.classes` and `.keyframes` maps.\n */\n ;\n\n _proto.register = function register(rule) {\n this.map[rule.key] = rule;\n\n if (rule instanceof StyleRule) {\n this.map[rule.selector] = rule;\n if (rule.id) this.classes[rule.key] = rule.id;\n } else if (rule instanceof KeyframesRule && this.keyframes) {\n this.keyframes[rule.name] = rule.id;\n }\n }\n /**\n * Unregister a rule.\n */\n ;\n\n _proto.unregister = function unregister(rule) {\n delete this.map[rule.key];\n\n if (rule instanceof StyleRule) {\n delete this.map[rule.selector];\n delete this.classes[rule.key];\n } else if (rule instanceof KeyframesRule) {\n delete this.keyframes[rule.name];\n }\n }\n /**\n * Update the function values with a new data.\n */\n ;\n\n _proto.update = function update() {\n var name;\n var data;\n var options;\n\n if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {\n name = arguments.length <= 0 ? undefined : arguments[0];\n data = arguments.length <= 1 ? undefined : arguments[1];\n options = arguments.length <= 2 ? undefined : arguments[2];\n } else {\n data = arguments.length <= 0 ? undefined : arguments[0];\n options = arguments.length <= 1 ? undefined : arguments[1];\n name = null;\n }\n\n if (name) {\n this.updateOne(this.get(name), data, options);\n } else {\n for (var index = 0; index < this.index.length; index++) {\n this.updateOne(this.index[index], data, options);\n }\n }\n }\n /**\n * Execute plugins, update rule props.\n */\n ;\n\n _proto.updateOne = function updateOne(rule, data, options) {\n if (options === void 0) {\n options = defaultUpdateOptions;\n }\n\n var _this$options2 = this.options,\n plugins = _this$options2.jss.plugins,\n sheet = _this$options2.sheet; // It is a rules container like for e.g. ConditionalRule.\n\n if (rule.rules instanceof RuleList) {\n rule.rules.update(data, options);\n return;\n }\n\n var style = rule.style;\n plugins.onUpdate(data, rule, sheet, options); // We rely on a new `style` ref in case it was mutated during onUpdate hook.\n\n if (options.process && style && style !== rule.style) {\n // We need to run the plugins in case new `style` relies on syntax plugins.\n plugins.onProcessStyle(rule.style, rule, sheet); // Update and add props.\n\n for (var prop in rule.style) {\n var nextValue = rule.style[prop];\n var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.\n // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.\n\n if (nextValue !== prevValue) {\n rule.prop(prop, nextValue, forceUpdateOptions);\n }\n } // Remove props.\n\n\n for (var _prop in style) {\n var _nextValue = rule.style[_prop];\n var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.\n // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.\n\n if (_nextValue == null && _nextValue !== _prevValue) {\n rule.prop(_prop, null, forceUpdateOptions);\n }\n }\n }\n }\n /**\n * Convert rules to a CSS string.\n */\n ;\n\n _proto.toString = function toString(options) {\n var str = '';\n var sheet = this.options.sheet;\n var link = sheet ? sheet.options.link : false;\n\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak;\n\n for (var index = 0; index < this.index.length; index++) {\n var rule = this.index[index];\n var css = rule.toString(options); // No need to render an empty rule.\n\n if (!css && !link) continue;\n if (str) str += linebreak;\n str += css;\n }\n\n return str;\n };\n\n return RuleList;\n}();\n\nvar StyleSheet =\n/*#__PURE__*/\nfunction () {\n function StyleSheet(styles, options) {\n this.attached = false;\n this.deployed = false;\n this.classes = {};\n this.keyframes = {};\n this.options = _extends({}, options, {\n sheet: this,\n parent: this,\n classes: this.classes,\n keyframes: this.keyframes\n });\n\n if (options.Renderer) {\n this.renderer = new options.Renderer(this);\n }\n\n this.rules = new RuleList(this.options);\n\n for (var name in styles) {\n this.rules.add(name, styles[name]);\n }\n\n this.rules.process();\n }\n /**\n * Attach renderable to the render tree.\n */\n\n\n var _proto = StyleSheet.prototype;\n\n _proto.attach = function attach() {\n if (this.attached) return this;\n if (this.renderer) this.renderer.attach();\n this.attached = true; // Order is important, because we can't use insertRule API if style element is not attached.\n\n if (!this.deployed) this.deploy();\n return this;\n }\n /**\n * Remove renderable from render tree.\n */\n ;\n\n _proto.detach = function detach() {\n if (!this.attached) return this;\n if (this.renderer) this.renderer.detach();\n this.attached = false;\n return this;\n }\n /**\n * Add a rule to the current stylesheet.\n * Will insert a rule also after the stylesheet has been rendered first time.\n */\n ;\n\n _proto.addRule = function addRule(name, decl, options) {\n var queue = this.queue; // Plugins can create rules.\n // In order to preserve the right order, we need to queue all `.addRule` calls,\n // which happen after the first `rules.add()` call.\n\n if (this.attached && !queue) this.queue = [];\n var rule = this.rules.add(name, decl, options);\n if (!rule) return null;\n this.options.jss.plugins.onProcessRule(rule);\n\n if (this.attached) {\n if (!this.deployed) return rule; // Don't insert rule directly if there is no stringified version yet.\n // It will be inserted all together when .attach is called.\n\n if (queue) queue.push(rule);else {\n this.insertRule(rule);\n\n if (this.queue) {\n this.queue.forEach(this.insertRule, this);\n this.queue = undefined;\n }\n }\n return rule;\n } // We can't add rules to a detached style node.\n // We will redeploy the sheet once user will attach it.\n\n\n this.deployed = false;\n return rule;\n }\n /**\n * Replace a rule in the current stylesheet.\n */\n ;\n\n _proto.replaceRule = function replaceRule(nameOrSelector, decl, options) {\n var oldRule = this.rules.get(nameOrSelector);\n if (!oldRule) return this.addRule(nameOrSelector, decl, options);\n var newRule = this.rules.replace(nameOrSelector, decl, options);\n\n if (newRule) {\n this.options.jss.plugins.onProcessRule(newRule);\n }\n\n if (this.attached) {\n if (!this.deployed) return newRule; // Don't replace / delete rule directly if there is no stringified version yet.\n // It will be inserted all together when .attach is called.\n\n if (this.renderer) {\n if (!newRule) {\n this.renderer.deleteRule(oldRule);\n } else if (oldRule.renderable) {\n this.renderer.replaceRule(oldRule.renderable, newRule);\n }\n }\n\n return newRule;\n } // We can't replace rules to a detached style node.\n // We will redeploy the sheet once user will attach it.\n\n\n this.deployed = false;\n return newRule;\n }\n /**\n * Insert rule into the StyleSheet\n */\n ;\n\n _proto.insertRule = function insertRule(rule) {\n if (this.renderer) {\n this.renderer.insertRule(rule);\n }\n }\n /**\n * Create and add rules.\n * Will render also after Style Sheet was rendered the first time.\n */\n ;\n\n _proto.addRules = function addRules(styles, options) {\n var added = [];\n\n for (var name in styles) {\n var rule = this.addRule(name, styles[name], options);\n if (rule) added.push(rule);\n }\n\n return added;\n }\n /**\n * Get a rule by name or selector.\n */\n ;\n\n _proto.getRule = function getRule(nameOrSelector) {\n return this.rules.get(nameOrSelector);\n }\n /**\n * Delete a rule by name.\n * Returns `true`: if rule has been deleted from the DOM.\n */\n ;\n\n _proto.deleteRule = function deleteRule(name) {\n var rule = typeof name === 'object' ? name : this.rules.get(name);\n\n if (!rule || // Style sheet was created without link: true and attached, in this case we\n // won't be able to remove the CSS rule from the DOM.\n this.attached && !rule.renderable) {\n return false;\n }\n\n this.rules.remove(rule);\n\n if (this.attached && rule.renderable && this.renderer) {\n return this.renderer.deleteRule(rule.renderable);\n }\n\n return true;\n }\n /**\n * Get index of a rule.\n */\n ;\n\n _proto.indexOf = function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n /**\n * Deploy pure CSS string to a renderable.\n */\n ;\n\n _proto.deploy = function deploy() {\n if (this.renderer) this.renderer.deploy();\n this.deployed = true;\n return this;\n }\n /**\n * Update the function values with a new data.\n */\n ;\n\n _proto.update = function update() {\n var _this$rules;\n\n (_this$rules = this.rules).update.apply(_this$rules, arguments);\n\n return this;\n }\n /**\n * Updates a single rule.\n */\n ;\n\n _proto.updateOne = function updateOne(rule, data, options) {\n this.rules.updateOne(rule, data, options);\n return this;\n }\n /**\n * Convert rules to a CSS string.\n */\n ;\n\n _proto.toString = function toString(options) {\n return this.rules.toString(options);\n };\n\n return StyleSheet;\n}();\n\nvar PluginsRegistry =\n/*#__PURE__*/\nfunction () {\n function PluginsRegistry() {\n this.plugins = {\n internal: [],\n external: []\n };\n this.registry = {};\n }\n\n var _proto = PluginsRegistry.prototype;\n\n /**\n * Call `onCreateRule` hooks and return an object if returned by a hook.\n */\n _proto.onCreateRule = function onCreateRule(name, decl, options) {\n for (var i = 0; i < this.registry.onCreateRule.length; i++) {\n var rule = this.registry.onCreateRule[i](name, decl, options);\n if (rule) return rule;\n }\n\n return null;\n }\n /**\n * Call `onProcessRule` hooks.\n */\n ;\n\n _proto.onProcessRule = function onProcessRule(rule) {\n if (rule.isProcessed) return;\n var sheet = rule.options.sheet;\n\n for (var i = 0; i < this.registry.onProcessRule.length; i++) {\n this.registry.onProcessRule[i](rule, sheet);\n }\n\n if (rule.style) this.onProcessStyle(rule.style, rule, sheet);\n rule.isProcessed = true;\n }\n /**\n * Call `onProcessStyle` hooks.\n */\n ;\n\n _proto.onProcessStyle = function onProcessStyle(style, rule, sheet) {\n for (var i = 0; i < this.registry.onProcessStyle.length; i++) {\n rule.style = this.registry.onProcessStyle[i](rule.style, rule, sheet);\n }\n }\n /**\n * Call `onProcessSheet` hooks.\n */\n ;\n\n _proto.onProcessSheet = function onProcessSheet(sheet) {\n for (var i = 0; i < this.registry.onProcessSheet.length; i++) {\n this.registry.onProcessSheet[i](sheet);\n }\n }\n /**\n * Call `onUpdate` hooks.\n */\n ;\n\n _proto.onUpdate = function onUpdate(data, rule, sheet, options) {\n for (var i = 0; i < this.registry.onUpdate.length; i++) {\n this.registry.onUpdate[i](data, rule, sheet, options);\n }\n }\n /**\n * Call `onChangeValue` hooks.\n */\n ;\n\n _proto.onChangeValue = function onChangeValue(value, prop, rule) {\n var processedValue = value;\n\n for (var i = 0; i < this.registry.onChangeValue.length; i++) {\n processedValue = this.registry.onChangeValue[i](processedValue, prop, rule);\n }\n\n return processedValue;\n }\n /**\n * Register a plugin.\n */\n ;\n\n _proto.use = function use(newPlugin, options) {\n if (options === void 0) {\n options = {\n queue: 'external'\n };\n }\n\n var plugins = this.plugins[options.queue]; // Avoids applying same plugin twice, at least based on ref.\n\n if (plugins.indexOf(newPlugin) !== -1) {\n return;\n }\n\n plugins.push(newPlugin);\n this.registry = [].concat(this.plugins.external, this.plugins.internal).reduce(function (registry, plugin) {\n for (var name in plugin) {\n if (name in registry) {\n registry[name].push(plugin[name]);\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Unknown hook \\\"\" + name + \"\\\".\") : void 0;\n }\n }\n\n return registry;\n }, {\n onCreateRule: [],\n onProcessRule: [],\n onProcessStyle: [],\n onProcessSheet: [],\n onChangeValue: [],\n onUpdate: []\n });\n };\n\n return PluginsRegistry;\n}();\n\n/**\n * Sheets registry to access all instances in one place.\n */\n\nvar SheetsRegistry =\n/*#__PURE__*/\nfunction () {\n function SheetsRegistry() {\n this.registry = [];\n }\n\n var _proto = SheetsRegistry.prototype;\n\n /**\n * Register a Style Sheet.\n */\n _proto.add = function add(sheet) {\n var registry = this.registry;\n var index = sheet.options.index;\n if (registry.indexOf(sheet) !== -1) return;\n\n if (registry.length === 0 || index >= this.index) {\n registry.push(sheet);\n return;\n } // Find a position.\n\n\n for (var i = 0; i < registry.length; i++) {\n if (registry[i].options.index > index) {\n registry.splice(i, 0, sheet);\n return;\n }\n }\n }\n /**\n * Reset the registry.\n */\n ;\n\n _proto.reset = function reset() {\n this.registry = [];\n }\n /**\n * Remove a Style Sheet.\n */\n ;\n\n _proto.remove = function remove(sheet) {\n var index = this.registry.indexOf(sheet);\n this.registry.splice(index, 1);\n }\n /**\n * Convert all attached sheets to a CSS string.\n */\n ;\n\n _proto.toString = function toString(_temp) {\n var _ref = _temp === void 0 ? {} : _temp,\n attached = _ref.attached,\n options = _objectWithoutPropertiesLoose(_ref, [\"attached\"]);\n\n var _getWhitespaceSymbols = getWhitespaceSymbols(options),\n linebreak = _getWhitespaceSymbols.linebreak;\n\n var css = '';\n\n for (var i = 0; i < this.registry.length; i++) {\n var sheet = this.registry[i];\n\n if (attached != null && sheet.attached !== attached) {\n continue;\n }\n\n if (css) css += linebreak;\n css += sheet.toString(options);\n }\n\n return css;\n };\n\n _createClass(SheetsRegistry, [{\n key: \"index\",\n\n /**\n * Current highest index number.\n */\n get: function get() {\n return this.registry.length === 0 ? 0 : this.registry[this.registry.length - 1].options.index;\n }\n }]);\n\n return SheetsRegistry;\n}();\n\n/**\n * This is a global sheets registry. Only DomRenderer will add sheets to it.\n * On the server one should use an own SheetsRegistry instance and add the\n * sheets to it, because you need to make sure to create a new registry for\n * each request in order to not leak sheets across requests.\n */\n\nvar sheets = new SheetsRegistry();\n\n/* eslint-disable */\n\n/**\n * Now that `globalThis` is available on most platforms\n * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis#browser_compatibility)\n * we check for `globalThis` first. `globalThis` is necessary for jss\n * to run in Agoric's secure version of JavaScript (SES). Under SES,\n * `globalThis` exists, but `window`, `self`, and `Function('return\n * this')()` are all undefined for security reasons.\n *\n * https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\n */\nvar globalThis$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' && window.Math === Math ? window : typeof self !== 'undefined' && self.Math === Math ? self : Function('return this')();\n\nvar ns = '2f1acc6c3a606b082e5eef5e54414ffb';\nif (globalThis$1[ns] == null) globalThis$1[ns] = 0; // Bundle may contain multiple JSS versions at the same time. In order to identify\n// the current version with just one short number and use it for classes generation\n// we use a counter. Also it is more accurate, because user can manually reevaluate\n// the module.\n\nvar moduleId = globalThis$1[ns]++;\n\nvar maxRules = 1e10;\n/**\n * Returns a function which generates unique class names based on counters.\n * When new generator function is created, rule counter is reseted.\n * We need to reset the rule counter for SSR for each request.\n */\n\nvar createGenerateId = function createGenerateId(options) {\n if (options === void 0) {\n options = {};\n }\n\n var ruleCounter = 0;\n\n var generateId = function generateId(rule, sheet) {\n ruleCounter += 1;\n\n if (ruleCounter > maxRules) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] You might have a memory leak. Rule counter is at \" + ruleCounter + \".\") : void 0;\n }\n\n var jssId = '';\n var prefix = '';\n\n if (sheet) {\n if (sheet.options.classNamePrefix) {\n prefix = sheet.options.classNamePrefix;\n }\n\n if (sheet.options.jss.id != null) {\n jssId = String(sheet.options.jss.id);\n }\n }\n\n if (options.minify) {\n // Using \"c\" because a number can't be the first char in a class name.\n return \"\" + (prefix || 'c') + moduleId + jssId + ruleCounter;\n }\n\n return prefix + rule.key + \"-\" + moduleId + (jssId ? \"-\" + jssId : '') + \"-\" + ruleCounter;\n };\n\n return generateId;\n};\n\n/**\n * Cache the value from the first time a function is called.\n */\n\nvar memoize = function memoize(fn) {\n var value;\n return function () {\n if (!value) value = fn();\n return value;\n };\n};\n/**\n * Get a style property value.\n */\n\n\nvar getPropertyValue = function getPropertyValue(cssRule, prop) {\n try {\n // Support CSSTOM.\n if (cssRule.attributeStyleMap) {\n return cssRule.attributeStyleMap.get(prop);\n }\n\n return cssRule.style.getPropertyValue(prop);\n } catch (err) {\n // IE may throw if property is unknown.\n return '';\n }\n};\n/**\n * Set a style property.\n */\n\n\nvar setProperty = function setProperty(cssRule, prop, value) {\n try {\n var cssValue = value;\n\n if (Array.isArray(value)) {\n cssValue = toCssValue(value);\n } // Support CSSTOM.\n\n\n if (cssRule.attributeStyleMap) {\n cssRule.attributeStyleMap.set(prop, cssValue);\n } else {\n var indexOfImportantFlag = cssValue ? cssValue.indexOf('!important') : -1;\n var cssValueWithoutImportantFlag = indexOfImportantFlag > -1 ? cssValue.substr(0, indexOfImportantFlag - 1) : cssValue;\n cssRule.style.setProperty(prop, cssValueWithoutImportantFlag, indexOfImportantFlag > -1 ? 'important' : '');\n }\n } catch (err) {\n // IE may throw if property is unknown.\n return false;\n }\n\n return true;\n};\n/**\n * Remove a style property.\n */\n\n\nvar removeProperty = function removeProperty(cssRule, prop) {\n try {\n // Support CSSTOM.\n if (cssRule.attributeStyleMap) {\n cssRule.attributeStyleMap.delete(prop);\n } else {\n cssRule.style.removeProperty(prop);\n }\n } catch (err) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] DOMException \\\"\" + err.message + \"\\\" was thrown. Tried to remove property \\\"\" + prop + \"\\\".\") : void 0;\n }\n};\n/**\n * Set the selector.\n */\n\n\nvar setSelector = function setSelector(cssRule, selectorText) {\n cssRule.selectorText = selectorText; // Return false if setter was not successful.\n // Currently works in chrome only.\n\n return cssRule.selectorText === selectorText;\n};\n/**\n * Gets the `head` element upon the first call and caches it.\n * We assume it can't be null.\n */\n\n\nvar getHead = memoize(function () {\n return document.querySelector('head');\n});\n/**\n * Find attached sheet with an index higher than the passed one.\n */\n\nfunction findHigherSheet(registry, options) {\n for (var i = 0; i < registry.length; i++) {\n var sheet = registry[i];\n\n if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n\n return null;\n}\n/**\n * Find attached sheet with the highest index.\n */\n\n\nfunction findHighestSheet(registry, options) {\n for (var i = registry.length - 1; i >= 0; i--) {\n var sheet = registry[i];\n\n if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n\n return null;\n}\n/**\n * Find a comment with \"jss\" inside.\n */\n\n\nfunction findCommentNode(text) {\n var head = getHead();\n\n for (var i = 0; i < head.childNodes.length; i++) {\n var node = head.childNodes[i];\n\n if (node.nodeType === 8 && node.nodeValue.trim() === text) {\n return node;\n }\n }\n\n return null;\n}\n/**\n * Find a node before which we can insert the sheet.\n */\n\n\nfunction findPrevNode(options) {\n var registry = sheets.registry;\n\n if (registry.length > 0) {\n // Try to insert before the next higher sheet.\n var sheet = findHigherSheet(registry, options);\n\n if (sheet && sheet.renderer) {\n return {\n parent: sheet.renderer.element.parentNode,\n node: sheet.renderer.element\n };\n } // Otherwise insert after the last attached.\n\n\n sheet = findHighestSheet(registry, options);\n\n if (sheet && sheet.renderer) {\n return {\n parent: sheet.renderer.element.parentNode,\n node: sheet.renderer.element.nextSibling\n };\n }\n } // Try to find a comment placeholder if registry is empty.\n\n\n var insertionPoint = options.insertionPoint;\n\n if (insertionPoint && typeof insertionPoint === 'string') {\n var comment = findCommentNode(insertionPoint);\n\n if (comment) {\n return {\n parent: comment.parentNode,\n node: comment.nextSibling\n };\n } // If user specifies an insertion point and it can't be found in the document -\n // bad specificity issues may appear.\n\n\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Insertion point \\\"\" + insertionPoint + \"\\\" not found.\") : void 0;\n }\n\n return false;\n}\n/**\n * Insert style element into the DOM.\n */\n\n\nfunction insertStyle(style, options) {\n var insertionPoint = options.insertionPoint;\n var nextNode = findPrevNode(options);\n\n if (nextNode !== false && nextNode.parent) {\n nextNode.parent.insertBefore(style, nextNode.node);\n return;\n } // Works with iframes and any node types.\n\n\n if (insertionPoint && typeof insertionPoint.nodeType === 'number') {\n var insertionPointElement = insertionPoint;\n var parentNode = insertionPointElement.parentNode;\n if (parentNode) parentNode.insertBefore(style, insertionPointElement.nextSibling);else process.env.NODE_ENV !== \"production\" ? warning(false, '[JSS] Insertion point is not in the DOM.') : void 0;\n return;\n }\n\n getHead().appendChild(style);\n}\n/**\n * Read jss nonce setting from the page if the user has set it.\n */\n\n\nvar getNonce = memoize(function () {\n var node = document.querySelector('meta[property=\"csp-nonce\"]');\n return node ? node.getAttribute('content') : null;\n});\n\nvar _insertRule = function insertRule(container, rule, index) {\n try {\n if ('insertRule' in container) {\n container.insertRule(rule, index);\n } // Keyframes rule.\n else if ('appendRule' in container) {\n container.appendRule(rule);\n }\n } catch (err) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] \" + err.message) : void 0;\n return false;\n }\n\n return container.cssRules[index];\n};\n\nvar getValidRuleInsertionIndex = function getValidRuleInsertionIndex(container, index) {\n var maxIndex = container.cssRules.length; // In case previous insertion fails, passed index might be wrong\n\n if (index === undefined || index > maxIndex) {\n // eslint-disable-next-line no-param-reassign\n return maxIndex;\n }\n\n return index;\n};\n\nvar createStyle = function createStyle() {\n var el = document.createElement('style'); // Without it, IE will have a broken source order specificity if we\n // insert rules after we insert the style tag.\n // It seems to kick-off the source order specificity algorithm.\n\n el.textContent = '\\n';\n return el;\n};\n\nvar DomRenderer =\n/*#__PURE__*/\nfunction () {\n // Will be empty if link: true option is not set, because\n // it is only for use together with insertRule API.\n function DomRenderer(sheet) {\n this.getPropertyValue = getPropertyValue;\n this.setProperty = setProperty;\n this.removeProperty = removeProperty;\n this.setSelector = setSelector;\n this.hasInsertedRules = false;\n this.cssRules = [];\n // There is no sheet when the renderer is used from a standalone StyleRule.\n if (sheet) sheets.add(sheet);\n this.sheet = sheet;\n\n var _ref = this.sheet ? this.sheet.options : {},\n media = _ref.media,\n meta = _ref.meta,\n element = _ref.element;\n\n this.element = element || createStyle();\n this.element.setAttribute('data-jss', '');\n if (media) this.element.setAttribute('media', media);\n if (meta) this.element.setAttribute('data-meta', meta);\n var nonce = getNonce();\n if (nonce) this.element.setAttribute('nonce', nonce);\n }\n /**\n * Insert style element into render tree.\n */\n\n\n var _proto = DomRenderer.prototype;\n\n _proto.attach = function attach() {\n // In the case the element node is external and it is already in the DOM.\n if (this.element.parentNode || !this.sheet) return;\n insertStyle(this.element, this.sheet.options); // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`\n // most browsers create a new CSSStyleSheet, except of all IEs.\n\n var deployed = Boolean(this.sheet && this.sheet.deployed);\n\n if (this.hasInsertedRules && deployed) {\n this.hasInsertedRules = false;\n this.deploy();\n }\n }\n /**\n * Remove style element from render tree.\n */\n ;\n\n _proto.detach = function detach() {\n if (!this.sheet) return;\n var parentNode = this.element.parentNode;\n if (parentNode) parentNode.removeChild(this.element); // In the most browsers, rules inserted using insertRule() API will be lost when style element is removed.\n // Though IE will keep them and we need a consistent behavior.\n\n if (this.sheet.options.link) {\n this.cssRules = [];\n this.element.textContent = '\\n';\n }\n }\n /**\n * Inject CSS string into element.\n */\n ;\n\n _proto.deploy = function deploy() {\n var sheet = this.sheet;\n if (!sheet) return;\n\n if (sheet.options.link) {\n this.insertRules(sheet.rules);\n return;\n }\n\n this.element.textContent = \"\\n\" + sheet.toString() + \"\\n\";\n }\n /**\n * Insert RuleList into an element.\n */\n ;\n\n _proto.insertRules = function insertRules(rules, nativeParent) {\n for (var i = 0; i < rules.index.length; i++) {\n this.insertRule(rules.index[i], i, nativeParent);\n }\n }\n /**\n * Insert a rule into element.\n */\n ;\n\n _proto.insertRule = function insertRule(rule, index, nativeParent) {\n if (nativeParent === void 0) {\n nativeParent = this.element.sheet;\n }\n\n if (rule.rules) {\n var parent = rule;\n var latestNativeParent = nativeParent;\n\n if (rule.type === 'conditional' || rule.type === 'keyframes') {\n var _insertionIndex = getValidRuleInsertionIndex(nativeParent, index); // We need to render the container without children first.\n\n\n latestNativeParent = _insertRule(nativeParent, parent.toString({\n children: false\n }), _insertionIndex);\n\n if (latestNativeParent === false) {\n return false;\n }\n\n this.refCssRule(rule, _insertionIndex, latestNativeParent);\n }\n\n this.insertRules(parent.rules, latestNativeParent);\n return latestNativeParent;\n }\n\n var ruleStr = rule.toString();\n if (!ruleStr) return false;\n var insertionIndex = getValidRuleInsertionIndex(nativeParent, index);\n\n var nativeRule = _insertRule(nativeParent, ruleStr, insertionIndex);\n\n if (nativeRule === false) {\n return false;\n }\n\n this.hasInsertedRules = true;\n this.refCssRule(rule, insertionIndex, nativeRule);\n return nativeRule;\n };\n\n _proto.refCssRule = function refCssRule(rule, index, cssRule) {\n rule.renderable = cssRule; // We only want to reference the top level rules, deleteRule API doesn't support removing nested rules\n // like rules inside media queries or keyframes\n\n if (rule.options.parent instanceof StyleSheet) {\n this.cssRules.splice(index, 0, cssRule);\n }\n }\n /**\n * Delete a rule.\n */\n ;\n\n _proto.deleteRule = function deleteRule(cssRule) {\n var sheet = this.element.sheet;\n var index = this.indexOf(cssRule);\n if (index === -1) return false;\n sheet.deleteRule(index);\n this.cssRules.splice(index, 1);\n return true;\n }\n /**\n * Get index of a CSS Rule.\n */\n ;\n\n _proto.indexOf = function indexOf(cssRule) {\n return this.cssRules.indexOf(cssRule);\n }\n /**\n * Generate a new CSS rule and replace the existing one.\n */\n ;\n\n _proto.replaceRule = function replaceRule(cssRule, rule) {\n var index = this.indexOf(cssRule);\n if (index === -1) return false;\n this.element.sheet.deleteRule(index);\n this.cssRules.splice(index, 1);\n return this.insertRule(rule, index);\n }\n /**\n * Get all rules elements.\n */\n ;\n\n _proto.getRules = function getRules() {\n return this.element.sheet.cssRules;\n };\n\n return DomRenderer;\n}();\n\nvar instanceCounter = 0;\n\nvar Jss =\n/*#__PURE__*/\nfunction () {\n function Jss(options) {\n this.id = instanceCounter++;\n this.version = \"10.10.0\";\n this.plugins = new PluginsRegistry();\n this.options = {\n id: {\n minify: false\n },\n createGenerateId: createGenerateId,\n Renderer: isInBrowser ? DomRenderer : null,\n plugins: []\n };\n this.generateId = createGenerateId({\n minify: false\n });\n\n for (var i = 0; i < plugins.length; i++) {\n this.plugins.use(plugins[i], {\n queue: 'internal'\n });\n }\n\n this.setup(options);\n }\n /**\n * Prepares various options, applies plugins.\n * Should not be used twice on the same instance, because there is no plugins\n * deduplication logic.\n */\n\n\n var _proto = Jss.prototype;\n\n _proto.setup = function setup(options) {\n if (options === void 0) {\n options = {};\n }\n\n if (options.createGenerateId) {\n this.options.createGenerateId = options.createGenerateId;\n }\n\n if (options.id) {\n this.options.id = _extends({}, this.options.id, options.id);\n }\n\n if (options.createGenerateId || options.id) {\n this.generateId = this.options.createGenerateId(this.options.id);\n }\n\n if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;\n\n if ('Renderer' in options) {\n this.options.Renderer = options.Renderer;\n } // eslint-disable-next-line prefer-spread\n\n\n if (options.plugins) this.use.apply(this, options.plugins);\n return this;\n }\n /**\n * Create a Style Sheet.\n */\n ;\n\n _proto.createStyleSheet = function createStyleSheet(styles, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n index = _options.index;\n\n if (typeof index !== 'number') {\n index = sheets.index === 0 ? 0 : sheets.index + 1;\n }\n\n var sheet = new StyleSheet(styles, _extends({}, options, {\n jss: this,\n generateId: options.generateId || this.generateId,\n insertionPoint: this.options.insertionPoint,\n Renderer: this.options.Renderer,\n index: index\n }));\n this.plugins.onProcessSheet(sheet);\n return sheet;\n }\n /**\n * Detach the Style Sheet and remove it from the registry.\n */\n ;\n\n _proto.removeStyleSheet = function removeStyleSheet(sheet) {\n sheet.detach();\n sheets.remove(sheet);\n return this;\n }\n /**\n * Create a rule without a Style Sheet.\n * [Deprecated] will be removed in the next major version.\n */\n ;\n\n _proto.createRule = function createRule$1(name, style, options) {\n if (style === void 0) {\n style = {};\n }\n\n if (options === void 0) {\n options = {};\n }\n\n // Enable rule without name for inline styles.\n if (typeof name === 'object') {\n return this.createRule(undefined, name, style);\n }\n\n var ruleOptions = _extends({}, options, {\n name: name,\n jss: this,\n Renderer: this.options.Renderer\n });\n\n if (!ruleOptions.generateId) ruleOptions.generateId = this.generateId;\n if (!ruleOptions.classes) ruleOptions.classes = {};\n if (!ruleOptions.keyframes) ruleOptions.keyframes = {};\n\n var rule = createRule(name, style, ruleOptions);\n\n if (rule) this.plugins.onProcessRule(rule);\n return rule;\n }\n /**\n * Register plugin. Passed function will be invoked with a rule instance.\n */\n ;\n\n _proto.use = function use() {\n var _this = this;\n\n for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {\n plugins[_key] = arguments[_key];\n }\n\n plugins.forEach(function (plugin) {\n _this.plugins.use(plugin);\n });\n return this;\n };\n\n return Jss;\n}();\n\nvar createJss = function createJss(options) {\n return new Jss(options);\n};\n\n/**\n * SheetsManager is like a WeakMap which is designed to count StyleSheet\n * instances and attach/detach automatically.\n * Used in react-jss.\n */\n\nvar SheetsManager =\n/*#__PURE__*/\nfunction () {\n function SheetsManager() {\n this.length = 0;\n this.sheets = new WeakMap();\n }\n\n var _proto = SheetsManager.prototype;\n\n _proto.get = function get(key) {\n var entry = this.sheets.get(key);\n return entry && entry.sheet;\n };\n\n _proto.add = function add(key, sheet) {\n if (this.sheets.has(key)) return;\n this.length++;\n this.sheets.set(key, {\n sheet: sheet,\n refs: 0\n });\n };\n\n _proto.manage = function manage(key) {\n var entry = this.sheets.get(key);\n\n if (entry) {\n if (entry.refs === 0) {\n entry.sheet.attach();\n }\n\n entry.refs++;\n return entry.sheet;\n }\n\n warning(false, \"[JSS] SheetsManager: can't find sheet to manage\");\n return undefined;\n };\n\n _proto.unmanage = function unmanage(key) {\n var entry = this.sheets.get(key);\n\n if (entry) {\n if (entry.refs > 0) {\n entry.refs--;\n if (entry.refs === 0) entry.sheet.detach();\n }\n } else {\n warning(false, \"SheetsManager: can't find sheet to unmanage\");\n }\n };\n\n _createClass(SheetsManager, [{\n key: \"size\",\n get: function get() {\n return this.length;\n }\n }]);\n\n return SheetsManager;\n}();\n\n/**\n* Export a constant indicating if this browser has CSSTOM support.\n* https://developers.google.com/web/updates/2018/03/cssom\n*/\nvar hasCSSTOMSupport = typeof CSS === 'object' && CSS != null && 'number' in CSS;\n\n/**\n * Extracts a styles object with only props that contain function values.\n */\nfunction getDynamicStyles(styles) {\n var to = null;\n\n for (var key in styles) {\n var value = styles[key];\n var type = typeof value;\n\n if (type === 'function') {\n if (!to) to = {};\n to[key] = value;\n } else if (type === 'object' && value !== null && !Array.isArray(value)) {\n var extracted = getDynamicStyles(value);\n\n if (extracted) {\n if (!to) to = {};\n to[key] = extracted;\n }\n }\n }\n\n return to;\n}\n\n/**\n * A better abstraction over CSS.\n *\n * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present\n * @website https://github.com/cssinjs/jss\n * @license MIT\n */\nvar index = createJss();\n\nexport default index;\nexport { RuleList, SheetsManager, SheetsRegistry, createJss as create, createGenerateId, createRule, getDynamicStyles, hasCSSTOMSupport, sheets, toCssValue };\n","import warning from 'tiny-warning';\nimport { createRule } from 'jss';\n\nvar now = Date.now();\nvar fnValuesNs = \"fnValues\" + now;\nvar fnRuleNs = \"fnStyle\" + ++now;\n\nvar functionPlugin = function functionPlugin() {\n return {\n onCreateRule: function onCreateRule(name, decl, options) {\n if (typeof decl !== 'function') return null;\n var rule = createRule(name, {}, options);\n rule[fnRuleNs] = decl;\n return rule;\n },\n onProcessStyle: function onProcessStyle(style, rule) {\n // We need to extract function values from the declaration, so that we can keep core unaware of them.\n // We need to do that only once.\n // We don't need to extract functions on each style update, since this can happen only once.\n // We don't support function values inside of function rules.\n if (fnValuesNs in rule || fnRuleNs in rule) return style;\n var fnValues = {};\n\n for (var prop in style) {\n var value = style[prop];\n if (typeof value !== 'function') continue;\n delete style[prop];\n fnValues[prop] = value;\n }\n\n rule[fnValuesNs] = fnValues;\n return style;\n },\n onUpdate: function onUpdate(data, rule, sheet, options) {\n var styleRule = rule;\n var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object\n // will be returned from that function.\n\n if (fnRule) {\n // Empty object will remove all currently defined props\n // in case function rule returns a falsy value.\n styleRule.style = fnRule(data) || {};\n\n if (process.env.NODE_ENV === 'development') {\n for (var prop in styleRule.style) {\n if (typeof styleRule.style[prop] === 'function') {\n process.env.NODE_ENV !== \"production\" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;\n break;\n }\n }\n }\n }\n\n var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.\n\n if (fnValues) {\n for (var _prop in fnValues) {\n styleRule.prop(_prop, fnValues[_prop](data), options);\n }\n }\n }\n };\n};\n\nexport default functionPlugin;\n","import $$observable from 'symbol-observable';\nimport { createRule } from 'jss';\n\nvar isObservable = function isObservable(value) {\n return value && value[$$observable] && value === value[$$observable]();\n};\n\nvar observablePlugin = function observablePlugin(updateOptions) {\n return {\n onCreateRule: function onCreateRule(name, decl, options) {\n if (!isObservable(decl)) return null;\n var style$ = decl;\n var rule = createRule(name, {}, options); // TODO\n // Call `stream.subscribe()` returns a subscription, which should be explicitly\n // unsubscribed from when we know this sheet is no longer needed.\n\n style$.subscribe(function (style) {\n for (var prop in style) {\n rule.prop(prop, style[prop], updateOptions);\n }\n });\n return rule;\n },\n onProcessRule: function onProcessRule(rule) {\n if (rule && rule.type !== 'style') return;\n var styleRule = rule;\n var style = styleRule.style;\n\n var _loop = function _loop(prop) {\n var value = style[prop];\n if (!isObservable(value)) return \"continue\";\n delete style[prop];\n value.subscribe({\n next: function next(nextValue) {\n styleRule.prop(prop, nextValue, updateOptions);\n }\n });\n };\n\n for (var prop in style) {\n var _ret = _loop(prop);\n\n if (_ret === \"continue\") continue;\n }\n }\n };\n};\n\nexport default observablePlugin;\n","import warning from 'tiny-warning';\n\nvar semiWithNl = /;\\n/;\n/**\n * Naive CSS parser.\n * - Supports only rule body (no selectors)\n * - Requires semicolon and new line after the value (except of last line)\n * - No nested rules support\n */\n\nvar parse = function parse(cssText) {\n var style = {};\n var split = cssText.split(semiWithNl);\n\n for (var i = 0; i < split.length; i++) {\n var decl = (split[i] || '').trim();\n if (!decl) continue;\n var colonIndex = decl.indexOf(':');\n\n if (colonIndex === -1) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Malformed CSS string \\\"\" + decl + \"\\\"\") : void 0;\n continue;\n }\n\n var prop = decl.substr(0, colonIndex).trim();\n var value = decl.substr(colonIndex + 1).trim();\n style[prop] = value;\n }\n\n return style;\n};\n\nvar onProcessRule = function onProcessRule(rule) {\n if (typeof rule.style === 'string') {\n rule.style = parse(rule.style);\n }\n};\n\nfunction templatePlugin() {\n return {\n onProcessRule: onProcessRule\n };\n}\n\nexport default templatePlugin;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport { RuleList } from 'jss';\n\nvar at = '@global';\nvar atPrefix = '@global ';\n\nvar GlobalContainerRule =\n/*#__PURE__*/\nfunction () {\n function GlobalContainerRule(key, styles, options) {\n this.type = 'global';\n this.at = at;\n this.isProcessed = false;\n this.key = key;\n this.options = options;\n this.rules = new RuleList(_extends({}, options, {\n parent: this\n }));\n\n for (var selector in styles) {\n this.rules.add(selector, styles[selector]);\n }\n\n this.rules.process();\n }\n /**\n * Get a rule.\n */\n\n\n var _proto = GlobalContainerRule.prototype;\n\n _proto.getRule = function getRule(name) {\n return this.rules.get(name);\n }\n /**\n * Create and register rule, run plugins.\n */\n ;\n\n _proto.addRule = function addRule(name, style, options) {\n var rule = this.rules.add(name, style, options);\n if (rule) this.options.jss.plugins.onProcessRule(rule);\n return rule;\n }\n /**\n * Replace rule, run plugins.\n */\n ;\n\n _proto.replaceRule = function replaceRule(name, style, options) {\n var newRule = this.rules.replace(name, style, options);\n if (newRule) this.options.jss.plugins.onProcessRule(newRule);\n return newRule;\n }\n /**\n * Get index of a rule.\n */\n ;\n\n _proto.indexOf = function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n /**\n * Generates a CSS string.\n */\n ;\n\n _proto.toString = function toString(options) {\n return this.rules.toString(options);\n };\n\n return GlobalContainerRule;\n}();\n\nvar GlobalPrefixedRule =\n/*#__PURE__*/\nfunction () {\n function GlobalPrefixedRule(key, style, options) {\n this.type = 'global';\n this.at = at;\n this.isProcessed = false;\n this.key = key;\n this.options = options;\n var selector = key.substr(atPrefix.length);\n this.rule = options.jss.createRule(selector, style, _extends({}, options, {\n parent: this\n }));\n }\n\n var _proto2 = GlobalPrefixedRule.prototype;\n\n _proto2.toString = function toString(options) {\n return this.rule ? this.rule.toString(options) : '';\n };\n\n return GlobalPrefixedRule;\n}();\n\nvar separatorRegExp = /\\s*,\\s*/g;\n\nfunction addScope(selector, scope) {\n var parts = selector.split(separatorRegExp);\n var scoped = '';\n\n for (var i = 0; i < parts.length; i++) {\n scoped += scope + \" \" + parts[i].trim();\n if (parts[i + 1]) scoped += ', ';\n }\n\n return scoped;\n}\n\nfunction handleNestedGlobalContainerRule(rule, sheet) {\n var options = rule.options,\n style = rule.style;\n var rules = style ? style[at] : null;\n if (!rules) return;\n\n for (var name in rules) {\n sheet.addRule(name, rules[name], _extends({}, options, {\n selector: addScope(name, rule.selector)\n }));\n }\n\n delete style[at];\n}\n\nfunction handlePrefixedGlobalRule(rule, sheet) {\n var options = rule.options,\n style = rule.style;\n\n for (var prop in style) {\n if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;\n var selector = addScope(prop.substr(at.length), rule.selector);\n sheet.addRule(selector, style[prop], _extends({}, options, {\n selector: selector\n }));\n delete style[prop];\n }\n}\n/**\n * Convert nested rules to separate, remove them from original styles.\n */\n\n\nfunction jssGlobal() {\n function onCreateRule(name, styles, options) {\n if (!name) return null;\n\n if (name === at) {\n return new GlobalContainerRule(name, styles, options);\n }\n\n if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {\n return new GlobalPrefixedRule(name, styles, options);\n }\n\n var parent = options.parent;\n\n if (parent) {\n if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {\n options.scoped = false;\n }\n }\n\n if (!options.selector && options.scoped === false) {\n options.selector = name;\n }\n\n return null;\n }\n\n function onProcessRule(rule, sheet) {\n if (rule.type !== 'style' || !sheet) return;\n handleNestedGlobalContainerRule(rule, sheet);\n handlePrefixedGlobalRule(rule, sheet);\n }\n\n return {\n onCreateRule: onCreateRule,\n onProcessRule: onProcessRule\n };\n}\n\nexport default jssGlobal;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport warning from 'tiny-warning';\n\nvar isObject = function isObject(obj) {\n return obj && typeof obj === 'object' && !Array.isArray(obj);\n};\n\nvar valueNs = \"extendCurrValue\" + Date.now();\n\nfunction mergeExtend(style, rule, sheet, newStyle) {\n var extendType = typeof style.extend; // Extend using a rule name.\n\n if (extendType === 'string') {\n if (!sheet) return;\n var refRule = sheet.getRule(style.extend);\n if (!refRule) return;\n\n if (refRule === rule) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] A rule tries to extend itself \\n\" + rule.toString()) : void 0;\n return;\n }\n\n var parent = refRule.options.parent;\n\n if (parent) {\n var originalStyle = parent.rules.raw[style.extend];\n extend(originalStyle, rule, sheet, newStyle);\n }\n\n return;\n } // Extend using an array.\n\n\n if (Array.isArray(style.extend)) {\n for (var index = 0; index < style.extend.length; index++) {\n var singleExtend = style.extend[index];\n var singleStyle = typeof singleExtend === 'string' ? _extends({}, style, {\n extend: singleExtend\n }) : style.extend[index];\n extend(singleStyle, rule, sheet, newStyle);\n }\n\n return;\n } // Extend is a style object.\n\n\n for (var prop in style.extend) {\n if (prop === 'extend') {\n extend(style.extend.extend, rule, sheet, newStyle);\n continue;\n }\n\n if (isObject(style.extend[prop])) {\n if (!(prop in newStyle)) newStyle[prop] = {};\n extend(style.extend[prop], rule, sheet, newStyle[prop]);\n continue;\n }\n\n newStyle[prop] = style.extend[prop];\n }\n}\n\nfunction mergeRest(style, rule, sheet, newStyle) {\n // Copy base style.\n for (var prop in style) {\n if (prop === 'extend') continue;\n\n if (isObject(newStyle[prop]) && isObject(style[prop])) {\n extend(style[prop], rule, sheet, newStyle[prop]);\n continue;\n }\n\n if (isObject(style[prop])) {\n newStyle[prop] = extend(style[prop], rule, sheet);\n continue;\n }\n\n newStyle[prop] = style[prop];\n }\n}\n/**\n * Recursively extend styles.\n */\n\n\nfunction extend(style, rule, sheet, newStyle) {\n if (newStyle === void 0) {\n newStyle = {};\n }\n\n mergeExtend(style, rule, sheet, newStyle);\n mergeRest(style, rule, sheet, newStyle);\n return newStyle;\n}\n/**\n * Handle `extend` property.\n */\n\n\nfunction jssExtend() {\n function onProcessStyle(style, rule, sheet) {\n if ('extend' in style) return extend(style, rule, sheet);\n return style;\n }\n\n function onChangeValue(value, prop, rule) {\n if (prop !== 'extend') return value; // Value is empty, remove properties set previously.\n\n if (value == null || value === false) {\n for (var key in rule[valueNs]) {\n rule.prop(key, null);\n }\n\n rule[valueNs] = null;\n return null;\n }\n\n if (typeof value === 'object') {\n for (var _key in value) {\n rule.prop(_key, value[_key]);\n }\n\n rule[valueNs] = value;\n } // Make sure we don't set the value in the core.\n\n\n return null;\n }\n\n return {\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default jssExtend;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport warning from 'tiny-warning';\n\nvar separatorRegExp = /\\s*,\\s*/g;\nvar parentRegExp = /&/g;\nvar refRegExp = /\\$([\\w-]+)/g;\n/**\n * Convert nested rules to separate, remove them from original styles.\n */\n\nfunction jssNested() {\n // Get a function to be used for $ref replacement.\n function getReplaceRef(container, sheet) {\n return function (match, key) {\n var rule = container.getRule(key) || sheet && sheet.getRule(key);\n\n if (rule) {\n return rule.selector;\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Could not find the referenced rule \\\"\" + key + \"\\\" in \\\"\" + (container.options.meta || container.toString()) + \"\\\".\") : void 0;\n return key;\n };\n }\n\n function replaceParentRefs(nestedProp, parentProp) {\n var parentSelectors = parentProp.split(separatorRegExp);\n var nestedSelectors = nestedProp.split(separatorRegExp);\n var result = '';\n\n for (var i = 0; i < parentSelectors.length; i++) {\n var parent = parentSelectors[i];\n\n for (var j = 0; j < nestedSelectors.length; j++) {\n var nested = nestedSelectors[j];\n if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.\n\n result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + \" \" + nested;\n }\n }\n\n return result;\n }\n\n function getOptions(rule, container, prevOptions) {\n // Options has been already created, now we only increase index.\n if (prevOptions) return _extends({}, prevOptions, {\n index: prevOptions.index + 1\n });\n var nestingLevel = rule.options.nestingLevel;\n nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;\n\n var options = _extends({}, rule.options, {\n nestingLevel: nestingLevel,\n index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.\n\n });\n\n delete options.name;\n return options;\n }\n\n function onProcessStyle(style, rule, sheet) {\n if (rule.type !== 'style') return style;\n var styleRule = rule;\n var container = styleRule.options.parent;\n var options;\n var replaceRef;\n\n for (var prop in style) {\n var isNested = prop.indexOf('&') !== -1;\n var isNestedConditional = prop[0] === '@';\n if (!isNested && !isNestedConditional) continue;\n options = getOptions(styleRule, container, options);\n\n if (isNested) {\n var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for\n // all nested rules within the sheet.\n\n if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.\n\n selector = selector.replace(refRegExp, replaceRef);\n var name = styleRule.key + \"-\" + prop;\n\n if ('replaceRule' in container) {\n // for backward compatibility\n container.replaceRule(name, style[prop], _extends({}, options, {\n selector: selector\n }));\n } else {\n container.addRule(name, style[prop], _extends({}, options, {\n selector: selector\n }));\n }\n } else if (isNestedConditional) {\n // Place conditional right after the parent rule to ensure right ordering.\n container.addRule(prop, {}, options).addRule(styleRule.key, style[prop], {\n selector: styleRule.selector\n });\n }\n\n delete style[prop];\n }\n\n return style;\n }\n\n return {\n onProcessStyle: onProcessStyle\n };\n}\n\nexport default jssNested;\n","import warning from 'tiny-warning';\n\n/**\n * Set selector.\n *\n * @param original rule\n * @param className class string\n * @return flag indicating function was successfull or not\n */\n\nfunction registerClass(rule, className) {\n // Skip falsy values\n if (!className) return true; // Support array of class names `{composes: ['foo', 'bar']}`\n\n if (Array.isArray(className)) {\n for (var index = 0; index < className.length; index++) {\n var isSetted = registerClass(rule, className[index]);\n if (!isSetted) return false;\n }\n\n return true;\n } // Support space separated class names `{composes: 'foo bar'}`\n\n\n if (className.indexOf(' ') > -1) {\n return registerClass(rule, className.split(' '));\n }\n\n var parent = rule.options.parent; // It is a ref to a local rule.\n\n if (className[0] === '$') {\n var refRule = parent.getRule(className.substr(1));\n\n if (!refRule) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Referenced rule is not defined. \\n\" + rule.toString()) : void 0;\n return false;\n }\n\n if (refRule === rule) {\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Cyclic composition detected. \\n\" + rule.toString()) : void 0;\n return false;\n }\n\n parent.classes[rule.key] += \" \" + parent.classes[refRule.key];\n return true;\n }\n\n parent.classes[rule.key] += \" \" + className;\n return true;\n}\n/**\n * Convert compose property to additional class, remove property from original styles.\n */\n\n\nfunction jssCompose() {\n function onProcessStyle(style, rule) {\n if (!('composes' in style)) return style;\n registerClass(rule, style.composes); // Remove composes property to prevent infinite loop.\n\n delete style.composes;\n return style;\n }\n\n return {\n onProcessStyle: onProcessStyle\n };\n}\n\nexport default jssCompose;\n","/* eslint-disable no-var, prefer-template */\nvar uppercasePattern = /[A-Z]/g\nvar msPattern = /^ms-/\nvar cache = {}\n\nfunction toHyphenLower(match) {\n return '-' + match.toLowerCase()\n}\n\nfunction hyphenateStyleName(name) {\n if (cache.hasOwnProperty(name)) {\n return cache[name]\n }\n\n var hName = name.replace(uppercasePattern, toHyphenLower)\n return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)\n}\n\nexport default hyphenateStyleName\n","import hyphenate from 'hyphenate-style-name';\n\n/**\n * Convert camel cased property names to dash separated.\n */\n\nfunction convertCase(style) {\n var converted = {};\n\n for (var prop in style) {\n var key = prop.indexOf('--') === 0 ? prop : hyphenate(prop);\n converted[key] = style[prop];\n }\n\n if (style.fallbacks) {\n if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);\n }\n\n return converted;\n}\n/**\n * Allow camel cased property names by converting them back to dasherized.\n */\n\n\nfunction camelCase() {\n function onProcessStyle(style) {\n if (Array.isArray(style)) {\n // Handle rules like @font-face, which can have multiple styles in an array\n for (var index = 0; index < style.length; index++) {\n style[index] = convertCase(style[index]);\n }\n\n return style;\n }\n\n return convertCase(style);\n }\n\n function onChangeValue(value, prop, rule) {\n if (prop.indexOf('--') === 0) {\n return value;\n }\n\n var hyphenatedProp = hyphenate(prop); // There was no camel case in place\n\n if (prop === hyphenatedProp) return value;\n rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.\n\n return null;\n }\n\n return {\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default camelCase;\n","import { hasCSSTOMSupport } from 'jss';\n\nvar px = hasCSSTOMSupport && CSS ? CSS.px : 'px';\nvar ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';\nvar percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';\n/**\n * Generated jss-plugin-default-unit CSS property units\n */\n\nvar defaultUnits = {\n // Animation properties\n 'animation-delay': ms,\n 'animation-duration': ms,\n // Background properties\n 'background-position': px,\n 'background-position-x': px,\n 'background-position-y': px,\n 'background-size': px,\n // Border Properties\n border: px,\n 'border-bottom': px,\n 'border-bottom-left-radius': px,\n 'border-bottom-right-radius': px,\n 'border-bottom-width': px,\n 'border-left': px,\n 'border-left-width': px,\n 'border-radius': px,\n 'border-right': px,\n 'border-right-width': px,\n 'border-top': px,\n 'border-top-left-radius': px,\n 'border-top-right-radius': px,\n 'border-top-width': px,\n 'border-width': px,\n 'border-block': px,\n 'border-block-end': px,\n 'border-block-end-width': px,\n 'border-block-start': px,\n 'border-block-start-width': px,\n 'border-block-width': px,\n 'border-inline': px,\n 'border-inline-end': px,\n 'border-inline-end-width': px,\n 'border-inline-start': px,\n 'border-inline-start-width': px,\n 'border-inline-width': px,\n 'border-start-start-radius': px,\n 'border-start-end-radius': px,\n 'border-end-start-radius': px,\n 'border-end-end-radius': px,\n // Margin properties\n margin: px,\n 'margin-bottom': px,\n 'margin-left': px,\n 'margin-right': px,\n 'margin-top': px,\n 'margin-block': px,\n 'margin-block-end': px,\n 'margin-block-start': px,\n 'margin-inline': px,\n 'margin-inline-end': px,\n 'margin-inline-start': px,\n // Padding properties\n padding: px,\n 'padding-bottom': px,\n 'padding-left': px,\n 'padding-right': px,\n 'padding-top': px,\n 'padding-block': px,\n 'padding-block-end': px,\n 'padding-block-start': px,\n 'padding-inline': px,\n 'padding-inline-end': px,\n 'padding-inline-start': px,\n // Mask properties\n 'mask-position-x': px,\n 'mask-position-y': px,\n 'mask-size': px,\n // Width and height properties\n height: px,\n width: px,\n 'min-height': px,\n 'max-height': px,\n 'min-width': px,\n 'max-width': px,\n // Position properties\n bottom: px,\n left: px,\n top: px,\n right: px,\n inset: px,\n 'inset-block': px,\n 'inset-block-end': px,\n 'inset-block-start': px,\n 'inset-inline': px,\n 'inset-inline-end': px,\n 'inset-inline-start': px,\n // Shadow properties\n 'box-shadow': px,\n 'text-shadow': px,\n // Column properties\n 'column-gap': px,\n 'column-rule': px,\n 'column-rule-width': px,\n 'column-width': px,\n // Font and text properties\n 'font-size': px,\n 'font-size-delta': px,\n 'letter-spacing': px,\n 'text-decoration-thickness': px,\n 'text-indent': px,\n 'text-stroke': px,\n 'text-stroke-width': px,\n 'word-spacing': px,\n // Motion properties\n motion: px,\n 'motion-offset': px,\n // Outline properties\n outline: px,\n 'outline-offset': px,\n 'outline-width': px,\n // Perspective properties\n perspective: px,\n 'perspective-origin-x': percent,\n 'perspective-origin-y': percent,\n // Transform properties\n 'transform-origin': percent,\n 'transform-origin-x': percent,\n 'transform-origin-y': percent,\n 'transform-origin-z': percent,\n // Transition properties\n 'transition-delay': ms,\n 'transition-duration': ms,\n // Alignment properties\n 'vertical-align': px,\n 'flex-basis': px,\n // Some random properties\n 'shape-margin': px,\n size: px,\n gap: px,\n // Grid properties\n grid: px,\n 'grid-gap': px,\n 'row-gap': px,\n 'grid-row-gap': px,\n 'grid-column-gap': px,\n 'grid-template-rows': px,\n 'grid-template-columns': px,\n 'grid-auto-rows': px,\n 'grid-auto-columns': px,\n // Not existing properties.\n // Used to avoid issues with jss-plugin-expand integration.\n 'box-shadow-x': px,\n 'box-shadow-y': px,\n 'box-shadow-blur': px,\n 'box-shadow-spread': px,\n 'font-line-height': px,\n 'text-shadow-x': px,\n 'text-shadow-y': px,\n 'text-shadow-blur': px\n};\n\n/**\n * Clones the object and adds a camel cased property version.\n */\n\nfunction addCamelCasedVersion(obj) {\n var regExp = /(-[a-z])/g;\n\n var replace = function replace(str) {\n return str[1].toUpperCase();\n };\n\n var newObj = {};\n\n for (var key in obj) {\n newObj[key] = obj[key];\n newObj[key.replace(regExp, replace)] = obj[key];\n }\n\n return newObj;\n}\n\nvar units = addCamelCasedVersion(defaultUnits);\n/**\n * Recursive deep style passing function\n */\n\nfunction iterate(prop, value, options) {\n if (value == null) return value;\n\n if (Array.isArray(value)) {\n for (var i = 0; i < value.length; i++) {\n value[i] = iterate(prop, value[i], options);\n }\n } else if (typeof value === 'object') {\n if (prop === 'fallbacks') {\n for (var innerProp in value) {\n value[innerProp] = iterate(innerProp, value[innerProp], options);\n }\n } else {\n for (var _innerProp in value) {\n value[_innerProp] = iterate(prop + \"-\" + _innerProp, value[_innerProp], options);\n }\n } // eslint-disable-next-line no-restricted-globals\n\n } else if (typeof value === 'number' && isNaN(value) === false) {\n var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.\n\n if (unit && !(value === 0 && unit === px)) {\n return typeof unit === 'function' ? unit(value).toString() : \"\" + value + unit;\n }\n\n return value.toString();\n }\n\n return value;\n}\n/**\n * Add unit to numeric values.\n */\n\n\nfunction defaultUnit(options) {\n if (options === void 0) {\n options = {};\n }\n\n var camelCasedOptions = addCamelCasedVersion(options);\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n\n for (var prop in style) {\n style[prop] = iterate(prop, style[prop], camelCasedOptions);\n }\n\n return style;\n }\n\n function onChangeValue(value, prop) {\n return iterate(prop, value, camelCasedOptions);\n }\n\n return {\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default defaultUnit;\n","/**\n * A scheme for converting properties from array to regular style.\n * All properties listed below will be transformed to a string separated by space.\n */\nvar propArray = {\n 'background-size': true,\n 'background-position': true,\n border: true,\n 'border-bottom': true,\n 'border-left': true,\n 'border-top': true,\n 'border-right': true,\n 'border-radius': true,\n 'border-image': true,\n 'border-width': true,\n 'border-style': true,\n 'border-color': true,\n 'box-shadow': true,\n flex: true,\n margin: true,\n padding: true,\n outline: true,\n 'transform-origin': true,\n transform: true,\n transition: true\n /**\n * A scheme for converting arrays to regular styles inside of objects.\n * For e.g.: \"{position: [0, 0]}\" => \"background-position: 0 0;\".\n */\n\n};\nvar propArrayInObj = {\n position: true,\n // background-position\n size: true // background-size\n\n /**\n * A scheme for parsing and building correct styles from passed objects.\n */\n\n};\nvar propObj = {\n padding: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n },\n margin: {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n },\n background: {\n attachment: null,\n color: null,\n image: null,\n position: null,\n repeat: null\n },\n border: {\n width: null,\n style: null,\n color: null\n },\n 'border-top': {\n width: null,\n style: null,\n color: null\n },\n 'border-right': {\n width: null,\n style: null,\n color: null\n },\n 'border-bottom': {\n width: null,\n style: null,\n color: null\n },\n 'border-left': {\n width: null,\n style: null,\n color: null\n },\n outline: {\n width: null,\n style: null,\n color: null\n },\n 'list-style': {\n type: null,\n position: null,\n image: null\n },\n transition: {\n property: null,\n duration: null,\n 'timing-function': null,\n timingFunction: null,\n // Needed for avoiding comilation issues with jss-plugin-camel-case\n delay: null\n },\n animation: {\n name: null,\n duration: null,\n 'timing-function': null,\n timingFunction: null,\n // Needed to avoid compilation issues with jss-plugin-camel-case\n delay: null,\n 'iteration-count': null,\n iterationCount: null,\n // Needed to avoid compilation issues with jss-plugin-camel-case\n direction: null,\n 'fill-mode': null,\n fillMode: null,\n // Needed to avoid compilation issues with jss-plugin-camel-case\n 'play-state': null,\n playState: null // Needed to avoid compilation issues with jss-plugin-camel-case\n\n },\n 'box-shadow': {\n x: 0,\n y: 0,\n blur: 0,\n spread: 0,\n color: null,\n inset: null\n },\n 'text-shadow': {\n x: 0,\n y: 0,\n blur: null,\n color: null\n }\n /**\n * A scheme for converting non-standart properties inside object.\n * For e.g.: include 'border-radius' property inside 'border' object.\n */\n\n};\nvar customPropObj = {\n border: {\n radius: 'border-radius',\n image: 'border-image',\n width: 'border-width',\n style: 'border-style',\n color: 'border-color'\n },\n 'border-bottom': {\n width: 'border-bottom-width',\n style: 'border-bottom-style',\n color: 'border-bottom-color'\n },\n 'border-top': {\n width: 'border-top-width',\n style: 'border-top-style',\n color: 'border-top-color'\n },\n 'border-left': {\n width: 'border-left-width',\n style: 'border-left-style',\n color: 'border-left-color'\n },\n 'border-right': {\n width: 'border-right-width',\n style: 'border-right-style',\n color: 'border-right-color'\n },\n background: {\n size: 'background-size',\n image: 'background-image'\n },\n font: {\n style: 'font-style',\n variant: 'font-variant',\n weight: 'font-weight',\n stretch: 'font-stretch',\n size: 'font-size',\n family: 'font-family',\n lineHeight: 'line-height',\n // Needed to avoid compilation issues with jss-plugin-camel-case\n 'line-height': 'line-height'\n },\n flex: {\n grow: 'flex-grow',\n basis: 'flex-basis',\n direction: 'flex-direction',\n wrap: 'flex-wrap',\n flow: 'flex-flow',\n shrink: 'flex-shrink'\n },\n align: {\n self: 'align-self',\n items: 'align-items',\n content: 'align-content'\n },\n grid: {\n 'template-columns': 'grid-template-columns',\n templateColumns: 'grid-template-columns',\n 'template-rows': 'grid-template-rows',\n templateRows: 'grid-template-rows',\n 'template-areas': 'grid-template-areas',\n templateAreas: 'grid-template-areas',\n template: 'grid-template',\n 'auto-columns': 'grid-auto-columns',\n autoColumns: 'grid-auto-columns',\n 'auto-rows': 'grid-auto-rows',\n autoRows: 'grid-auto-rows',\n 'auto-flow': 'grid-auto-flow',\n autoFlow: 'grid-auto-flow',\n row: 'grid-row',\n column: 'grid-column',\n 'row-start': 'grid-row-start',\n rowStart: 'grid-row-start',\n 'row-end': 'grid-row-end',\n rowEnd: 'grid-row-end',\n 'column-start': 'grid-column-start',\n columnStart: 'grid-column-start',\n 'column-end': 'grid-column-end',\n columnEnd: 'grid-column-end',\n area: 'grid-area',\n gap: 'grid-gap',\n 'row-gap': 'grid-row-gap',\n rowGap: 'grid-row-gap',\n 'column-gap': 'grid-column-gap',\n columnGap: 'grid-column-gap'\n }\n};\n\n/* eslint-disable no-use-before-define */\n/**\n * Map values by given prop.\n *\n * @param {Array} array of values\n * @param {String} original property\n * @param {String} original rule\n * @return {String} mapped values\n */\n\nfunction mapValuesByProp(value, prop, rule) {\n return value.map(function (item) {\n return objectToArray(item, prop, rule, false, true);\n });\n}\n/**\n * Convert array to nested array, if needed\n */\n\n\nfunction processArray(value, prop, scheme, rule) {\n if (scheme[prop] == null) return value;\n if (value.length === 0) return [];\n if (Array.isArray(value[0])) return processArray(value[0], prop, scheme, rule);\n\n if (typeof value[0] === 'object') {\n return mapValuesByProp(value, prop, rule);\n }\n\n return [value];\n}\n/**\n * Convert object to array.\n */\n\n\nfunction objectToArray(value, prop, rule, isFallback, isInArray) {\n if (!(propObj[prop] || customPropObj[prop])) return [];\n var result = []; // Check if exists any non-standard property\n\n if (customPropObj[prop]) {\n // eslint-disable-next-line no-param-reassign\n value = customPropsToStyle(value, rule, customPropObj[prop], isFallback);\n } // Pass throught all standart props\n\n\n if (Object.keys(value).length) {\n for (var baseProp in propObj[prop]) {\n if (value[baseProp]) {\n if (Array.isArray(value[baseProp])) {\n result.push(propArrayInObj[baseProp] === null ? value[baseProp] : value[baseProp].join(' '));\n } else result.push(value[baseProp]);\n\n continue;\n } // Add default value from props config.\n\n\n if (propObj[prop][baseProp] != null) {\n result.push(propObj[prop][baseProp]);\n }\n }\n }\n\n if (!result.length || isInArray) return result;\n return [result];\n}\n/**\n * Convert custom properties values to styles adding them to rule directly\n */\n\n\nfunction customPropsToStyle(value, rule, customProps, isFallback) {\n for (var prop in customProps) {\n var propName = customProps[prop]; // If current property doesn't exist already in rule - add new one\n\n if (typeof value[prop] !== 'undefined' && (isFallback || !rule.prop(propName))) {\n var _styleDetector;\n\n var appendedValue = styleDetector((_styleDetector = {}, _styleDetector[propName] = value[prop], _styleDetector), rule)[propName]; // Add style directly in rule\n\n if (isFallback) rule.style.fallbacks[propName] = appendedValue;else rule.style[propName] = appendedValue;\n } // Delete converted property to avoid double converting\n\n\n delete value[prop];\n }\n\n return value;\n}\n/**\n * Detect if a style needs to be converted.\n */\n\n\nfunction styleDetector(style, rule, isFallback) {\n for (var prop in style) {\n var value = style[prop];\n\n if (Array.isArray(value)) {\n // Check double arrays to avoid recursion.\n if (!Array.isArray(value[0])) {\n if (prop === 'fallbacks') {\n for (var index = 0; index < style.fallbacks.length; index++) {\n style.fallbacks[index] = styleDetector(style.fallbacks[index], rule, true);\n }\n\n continue;\n }\n\n style[prop] = processArray(value, prop, propArray, rule); // Avoid creating properties with empty values\n\n if (!style[prop].length) delete style[prop];\n }\n } else if (typeof value === 'object') {\n if (prop === 'fallbacks') {\n style.fallbacks = styleDetector(style.fallbacks, rule, true);\n continue;\n }\n\n style[prop] = objectToArray(value, prop, rule, isFallback); // Avoid creating properties with empty values\n\n if (!style[prop].length) delete style[prop];\n } // Maybe a computed value resulting in an empty string\n else if (style[prop] === '') delete style[prop];\n }\n\n return style;\n}\n/**\n * Adds possibility to write expanded styles.\n */\n\n\nfunction jssExpand() {\n function onProcessStyle(style, rule) {\n if (!style || rule.type !== 'style') return style;\n\n if (Array.isArray(style)) {\n // Pass rules one by one and reformat them\n for (var index = 0; index < style.length; index++) {\n style[index] = styleDetector(style[index], rule);\n }\n\n return style;\n }\n\n return styleDetector(style, rule);\n }\n\n return {\n onProcessStyle: onProcessStyle\n };\n}\n\nexport default jssExpand;\n","export default function _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n}","import arrayWithoutHoles from \"./arrayWithoutHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableSpread from \"./nonIterableSpread.js\";\nexport default function _toConsumableArray(arr) {\n return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return arrayLikeToArray(arr);\n}","export default function _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","export default function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import isInBrowser from 'is-in-browser';\nimport _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';\n\n// Export javascript style and css style vendor prefixes.\nvar js = '';\nvar css = '';\nvar vendor = '';\nvar browser = '';\nvar isTouch = isInBrowser && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.\n\nif (isInBrowser) {\n // Order matters. We need to check Webkit the last one because\n // other vendors use to add Webkit prefixes to some properties\n var jsCssMap = {\n Moz: '-moz-',\n ms: '-ms-',\n O: '-o-',\n Webkit: '-webkit-'\n };\n\n var _document$createEleme = document.createElement('p'),\n style = _document$createEleme.style;\n\n var testProp = 'Transform';\n\n for (var key in jsCssMap) {\n if (key + testProp in style) {\n js = key;\n css = jsCssMap[key];\n break;\n }\n } // Correctly detect the Edge browser.\n\n\n if (js === 'Webkit' && 'msHyphens' in style) {\n js = 'ms';\n css = jsCssMap.ms;\n browser = 'edge';\n } // Correctly detect the Safari browser.\n\n\n if (js === 'Webkit' && '-apple-trailing-word' in style) {\n vendor = 'apple';\n }\n}\n/**\n * Vendor prefix string for the current browser.\n *\n * @type {{js: String, css: String, vendor: String, browser: String}}\n * @api public\n */\n\n\nvar prefix = {\n js: js,\n css: css,\n vendor: vendor,\n browser: browser,\n isTouch: isTouch\n};\n\n/**\n * Test if a keyframe at-rule should be prefixed or not\n *\n * @param {String} vendor prefix string for the current browser.\n * @return {String}\n * @api public\n */\n\nfunction supportedKeyframes(key) {\n // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'\n if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.\n // https://caniuse.com/#search=keyframes\n\n if (prefix.js === 'ms') return key;\n return \"@\" + prefix.css + \"keyframes\" + key.substr(10);\n}\n\n// https://caniuse.com/#search=appearance\n\nvar appearence = {\n noPrefill: ['appearance'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'appearance') return false;\n if (prefix.js === 'ms') return \"-webkit-\" + prop;\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=color-adjust\n\nvar colorAdjust = {\n noPrefill: ['color-adjust'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'color-adjust') return false;\n if (prefix.js === 'Webkit') return prefix.css + \"print-\" + prop;\n return prop;\n }\n};\n\nvar regExp = /[-\\s]+(.)?/g;\n/**\n * Replaces the letter with the capital letter\n *\n * @param {String} match\n * @param {String} c\n * @return {String}\n * @api private\n */\n\nfunction toUpper(match, c) {\n return c ? c.toUpperCase() : '';\n}\n/**\n * Convert dash separated strings to camel-cased.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\n\nfunction camelize(str) {\n return str.replace(regExp, toUpper);\n}\n\n/**\n * Convert dash separated strings to pascal cased.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nfunction pascalize(str) {\n return camelize(\"-\" + str);\n}\n\n// but we can use a longhand property instead.\n// https://caniuse.com/#search=mask\n\nvar mask = {\n noPrefill: ['mask'],\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^mask/.test(prop)) return false;\n\n if (prefix.js === 'Webkit') {\n var longhand = 'mask-image';\n\n if (camelize(longhand) in style) {\n return prop;\n }\n\n if (prefix.js + pascalize(longhand) in style) {\n return prefix.css + prop;\n }\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=text-orientation\n\nvar textOrientation = {\n noPrefill: ['text-orientation'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'text-orientation') return false;\n\n if (prefix.vendor === 'apple' && !prefix.isTouch) {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=transform\n\nvar transform = {\n noPrefill: ['transform'],\n supportedProperty: function supportedProperty(prop, style, options) {\n if (prop !== 'transform') return false;\n\n if (options.transform) {\n return prop;\n }\n\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=transition\n\nvar transition = {\n noPrefill: ['transition'],\n supportedProperty: function supportedProperty(prop, style, options) {\n if (prop !== 'transition') return false;\n\n if (options.transition) {\n return prop;\n }\n\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=writing-mode\n\nvar writingMode = {\n noPrefill: ['writing-mode'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'writing-mode') return false;\n\n if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=user-select\n\nvar userSelect = {\n noPrefill: ['user-select'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'user-select') return false;\n\n if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=multicolumn\n// https://github.com/postcss/autoprefixer/issues/491\n// https://github.com/postcss/autoprefixer/issues/177\n\nvar breakPropsOld = {\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^break-/.test(prop)) return false;\n\n if (prefix.js === 'Webkit') {\n var jsProp = \"WebkitColumn\" + pascalize(prop);\n return jsProp in style ? prefix.css + \"column-\" + prop : false;\n }\n\n if (prefix.js === 'Moz') {\n var _jsProp = \"page\" + pascalize(prop);\n\n return _jsProp in style ? \"page-\" + prop : false;\n }\n\n return false;\n }\n};\n\n// See https://github.com/postcss/autoprefixer/issues/324.\n\nvar inlineLogicalOld = {\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^(border|margin|padding)-inline/.test(prop)) return false;\n if (prefix.js === 'Moz') return prop;\n var newProp = prop.replace('-inline', '');\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n};\n\n// Camelization is required because we can't test using.\n// CSS syntax for e.g. in FF.\n\nvar unprefixed = {\n supportedProperty: function supportedProperty(prop, style) {\n return camelize(prop) in style ? prop : false;\n }\n};\n\nvar prefixed = {\n supportedProperty: function supportedProperty(prop, style) {\n var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.\n\n if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.\n\n if (prop[0] === '-' && prop[1] === '-') return prop;\n if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.\n\n if (prefix.js !== 'Webkit' && \"Webkit\" + pascalized in style) return \"-webkit-\" + prop;\n return false;\n }\n};\n\n// https://caniuse.com/#search=scroll-snap\n\nvar scrollSnap = {\n supportedProperty: function supportedProperty(prop) {\n if (prop.substring(0, 11) !== 'scroll-snap') return false;\n\n if (prefix.js === 'ms') {\n return \"\" + prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=overscroll-behavior\n\nvar overscrollBehavior = {\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'overscroll-behavior') return false;\n\n if (prefix.js === 'ms') {\n return prefix.css + \"scroll-chaining\";\n }\n\n return prop;\n }\n};\n\nvar propMap = {\n 'flex-grow': 'flex-positive',\n 'flex-shrink': 'flex-negative',\n 'flex-basis': 'flex-preferred-size',\n 'justify-content': 'flex-pack',\n order: 'flex-order',\n 'align-items': 'flex-align',\n 'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.\n\n}; // Support old flex spec from 2012.\n\nvar flex2012 = {\n supportedProperty: function supportedProperty(prop, style) {\n var newProp = propMap[prop];\n if (!newProp) return false;\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n};\n\nvar propMap$1 = {\n flex: 'box-flex',\n 'flex-grow': 'box-flex',\n 'flex-direction': ['box-orient', 'box-direction'],\n order: 'box-ordinal-group',\n 'align-items': 'box-align',\n 'flex-flow': ['box-orient', 'box-direction'],\n 'justify-content': 'box-pack'\n};\nvar propKeys = Object.keys(propMap$1);\n\nvar prefixCss = function prefixCss(p) {\n return prefix.css + p;\n}; // Support old flex spec from 2009.\n\n\nvar flex2009 = {\n supportedProperty: function supportedProperty(prop, style, _ref) {\n var multiple = _ref.multiple;\n\n if (propKeys.indexOf(prop) > -1) {\n var newProp = propMap$1[prop];\n\n if (!Array.isArray(newProp)) {\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n\n if (!multiple) return false;\n\n for (var i = 0; i < newProp.length; i++) {\n if (!(prefix.js + pascalize(newProp[0]) in style)) {\n return false;\n }\n }\n\n return newProp.map(prefixCss);\n }\n\n return false;\n }\n};\n\n// plugins = [\n// ...plugins,\n// breakPropsOld,\n// inlineLogicalOld,\n// unprefixed,\n// prefixed,\n// scrollSnap,\n// flex2012,\n// flex2009\n// ]\n// Plugins without 'noPrefill' value, going last.\n// 'flex-*' plugins should be at the bottom.\n// 'flex2009' going after 'flex2012'.\n// 'prefixed' going after 'unprefixed'\n\nvar plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];\nvar propertyDetectors = plugins.filter(function (p) {\n return p.supportedProperty;\n}).map(function (p) {\n return p.supportedProperty;\n});\nvar noPrefill = plugins.filter(function (p) {\n return p.noPrefill;\n}).reduce(function (a, p) {\n a.push.apply(a, _toConsumableArray(p.noPrefill));\n return a;\n}, []);\n\nvar el;\nvar cache = {};\n\nif (isInBrowser) {\n el = document.createElement('p'); // We test every property on vendor prefix requirement.\n // Once tested, result is cached. It gives us up to 70% perf boost.\n // http://jsperf.com/element-style-object-access-vs-plain-object\n //\n // Prefill cache with known css properties to reduce amount of\n // properties we need to feature test at runtime.\n // http://davidwalsh.name/vendor-prefix\n\n var computed = window.getComputedStyle(document.documentElement, '');\n\n for (var key$1 in computed) {\n // eslint-disable-next-line no-restricted-globals\n if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];\n } // Properties that cannot be correctly detected using the\n // cache prefill method.\n\n\n noPrefill.forEach(function (x) {\n return delete cache[x];\n });\n}\n/**\n * Test if a property is supported, returns supported property with vendor\n * prefix if required. Returns `false` if not supported.\n *\n * @param {String} prop dash separated\n * @param {Object} [options]\n * @return {String|Boolean}\n * @api public\n */\n\n\nfunction supportedProperty(prop, options) {\n if (options === void 0) {\n options = {};\n }\n\n // For server-side rendering.\n if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.\n\n if (process.env.NODE_ENV !== 'benchmark' && cache[prop] != null) {\n return cache[prop];\n } // Check if 'transition' or 'transform' natively supported in browser.\n\n\n if (prop === 'transition' || prop === 'transform') {\n options[prop] = prop in el.style;\n } // Find a plugin for current prefix property.\n\n\n for (var i = 0; i < propertyDetectors.length; i++) {\n cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.\n\n if (cache[prop]) break;\n } // Reset styles for current property.\n // Firefox can even throw an error for invalid properties, e.g., \"0\".\n\n\n try {\n el.style[prop] = '';\n } catch (err) {\n return false;\n }\n\n return cache[prop];\n}\n\nvar cache$1 = {};\nvar transitionProperties = {\n transition: 1,\n 'transition-property': 1,\n '-webkit-transition': 1,\n '-webkit-transition-property': 1\n};\nvar transPropsRegExp = /(^\\s*[\\w-]+)|, (\\s*[\\w-]+)(?![^()]*\\))/g;\nvar el$1;\n/**\n * Returns prefixed value transition/transform if needed.\n *\n * @param {String} match\n * @param {String} p1\n * @param {String} p2\n * @return {String}\n * @api private\n */\n\nfunction prefixTransitionCallback(match, p1, p2) {\n if (p1 === 'var') return 'var';\n if (p1 === 'all') return 'all';\n if (p2 === 'all') return ', all';\n var prefixedValue = p1 ? supportedProperty(p1) : \", \" + supportedProperty(p2);\n if (!prefixedValue) return p1 || p2;\n return prefixedValue;\n}\n\nif (isInBrowser) el$1 = document.createElement('p');\n/**\n * Returns prefixed value if needed. Returns `false` if value is not supported.\n *\n * @param {String} property\n * @param {String} value\n * @return {String|Boolean}\n * @api public\n */\n\nfunction supportedValue(property, value) {\n // For server-side rendering.\n var prefixedValue = value;\n if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.\n // We want only prefixable values here.\n // eslint-disable-next-line no-restricted-globals\n\n if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {\n return prefixedValue;\n } // Create cache key for current value.\n\n\n var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.\n\n if (process.env.NODE_ENV !== 'benchmark' && cache$1[cacheKey] != null) {\n return cache$1[cacheKey];\n } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.\n\n\n try {\n // Test value as it is.\n el$1.style[property] = prefixedValue;\n } catch (err) {\n // Return false if value not supported.\n cache$1[cacheKey] = false;\n return false;\n } // If 'transition' or 'transition-property' property.\n\n\n if (transitionProperties[property]) {\n prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);\n } else if (el$1.style[property] === '') {\n // Value with a vendor prefix.\n prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert \"flex\" to \"-ms-flexbox\" for IE10.\n\n if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.\n\n el$1.style[property] = prefixedValue; // Return false if value not supported.\n\n if (el$1.style[property] === '') {\n cache$1[cacheKey] = false;\n return false;\n }\n } // Reset styles for current property.\n\n\n el$1.style[property] = ''; // Write current value to cache.\n\n cache$1[cacheKey] = prefixedValue;\n return cache$1[cacheKey];\n}\n\nexport { prefix, supportedKeyframes, supportedProperty, supportedValue };\n","import { supportedKeyframes, supportedValue, supportedProperty } from 'css-vendor';\nimport { toCssValue } from 'jss';\n\n/**\n * Add vendor prefix to a property name when needed.\n */\n\nfunction jssVendorPrefixer() {\n function onProcessRule(rule) {\n if (rule.type === 'keyframes') {\n var atRule = rule;\n atRule.at = supportedKeyframes(atRule.at);\n }\n }\n\n function prefixStyle(style) {\n for (var prop in style) {\n var value = style[prop];\n\n if (prop === 'fallbacks' && Array.isArray(value)) {\n style[prop] = value.map(prefixStyle);\n continue;\n }\n\n var changeProp = false;\n var supportedProp = supportedProperty(prop);\n if (supportedProp && supportedProp !== prop) changeProp = true;\n var changeValue = false;\n var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));\n if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;\n\n if (changeProp || changeValue) {\n if (changeProp) delete style[prop];\n style[supportedProp || prop] = supportedValue$1 || value;\n }\n }\n\n return style;\n }\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n return prefixStyle(style);\n }\n\n function onChangeValue(value, prop) {\n return supportedValue(prop, toCssValue(value)) || value;\n }\n\n return {\n onProcessRule: onProcessRule,\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default jssVendorPrefixer;\n","/**\n * Sort props by length.\n */\nfunction jssPropsSort() {\n var sort = function sort(prop0, prop1) {\n if (prop0.length === prop1.length) {\n return prop0 > prop1 ? 1 : -1;\n }\n\n return prop0.length - prop1.length;\n };\n\n return {\n onProcessStyle: function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n var newStyle = {};\n var props = Object.keys(style).sort(sort);\n\n for (var i = 0; i < props.length; i++) {\n newStyle[props[i]] = style[props[i]];\n }\n\n return newStyle;\n }\n };\n}\n\nexport default jssPropsSort;\n","import functions from 'jss-plugin-rule-value-function';\nimport observable from 'jss-plugin-rule-value-observable';\nimport template from 'jss-plugin-template';\nimport global from 'jss-plugin-global';\nimport extend from 'jss-plugin-extend';\nimport nested from 'jss-plugin-nested';\nimport compose from 'jss-plugin-compose';\nimport camelCase from 'jss-plugin-camel-case';\nimport defaultUnit from 'jss-plugin-default-unit';\nimport expand from 'jss-plugin-expand';\nimport vendorPrefixer from 'jss-plugin-vendor-prefixer';\nimport propsSort from 'jss-plugin-props-sort';\n\nvar create = function create(options) {\n if (options === void 0) {\n options = {};\n }\n\n return {\n plugins: [functions(), observable(options.observable), template(), global(), extend(), nested(), compose(), camelCase(), defaultUnit(options.defaultUnit), expand(), vendorPrefixer(), propsSort()]\n };\n};\n\nexport default create;\n","function memoize(fn) {\n var cache = {};\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport default memoize;\n","import memoize from '@emotion/memoize';\n\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar index = memoize(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport default index;\n","import { create } from 'jss';\nimport preset from 'jss-preset-default';\n\n// Since we are in a single sheet mode, user shouldn't care about this.\n\nvar MAX_RULES_PER_SHEET = 10000;\nvar defaultJss = create(preset());\n\nvar createCss = function createCss(jss) {\n if (jss === void 0) {\n jss = defaultJss;\n }\n\n var cache = new Map();\n var ruleIndex = 0;\n var sheet;\n\n var getSheet = function getSheet() {\n if (!sheet || sheet.rules.index.length > MAX_RULES_PER_SHEET) {\n sheet = jss.createStyleSheet().attach();\n }\n\n return sheet;\n };\n\n function css() {\n // eslint-disable-next-line prefer-rest-params\n var args = arguments; // We can avoid the need for stringification with a babel plugin,\n // which could generate a hash at build time and add it to the object.\n\n var argsStr = JSON.stringify(args);\n var cached = cache.get(argsStr);\n if (cached) return cached.className;\n var flatArgs = []; // Flatten arguments which can be\n // - style objects\n // - array of style objects\n // - arrays of style objects\n\n for (var argIndex in args) {\n var arg = args[argIndex];\n\n if (!Array.isArray(arg)) {\n flatArgs.push(arg);\n continue;\n }\n\n for (var innerArgIndex = 0; innerArgIndex < arg.length; innerArgIndex++) {\n flatArgs.push(arg[innerArgIndex]);\n }\n }\n\n var mergedStyle = {};\n var labels = [];\n\n for (var i = 0; i < flatArgs.length; i++) {\n var style = flatArgs[i];\n if (!style) continue;\n var styleObject = style; // It can be a class name that css() has previously generated.\n\n if (typeof style === 'string') {\n // eslint-disable-next-line no-shadow\n var _cached = cache.get(style);\n\n if (_cached) {\n // eslint-disable-next-line prefer-spread\n if (_cached.labels.length) labels.push.apply(labels, _cached.labels);\n styleObject = _cached.style;\n }\n }\n\n if (styleObject.label && labels.indexOf(styleObject.label) === -1) labels.push(styleObject.label);\n Object.assign(mergedStyle, styleObject);\n }\n\n delete mergedStyle.label;\n var label = labels.length === 0 ? 'css' : labels.join('-');\n var key = label + \"-\" + ruleIndex++;\n getSheet().addRule(key, mergedStyle);\n var className = getSheet().classes[key];\n var cacheValue = {\n style: mergedStyle,\n labels: labels,\n className: className\n };\n cache.set(argsStr, cacheValue);\n cache.set(className, cacheValue);\n return className;\n } // For testing only.\n\n\n css.getSheet = getSheet;\n return css;\n};\n\nvar css = createCss();\n\nexport default css;\nexport { createCss as create };\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';\nimport React, { createContext, useRef, useContext, useMemo, useEffect, useLayoutEffect, useDebugValue, forwardRef, createElement } from 'react';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport { ThemeContext } from 'theming';\nexport { ThemeProvider, createTheming, useTheme, withTheme } from 'theming';\nimport isInBrowser from 'is-in-browser';\nimport warning from 'tiny-warning';\nimport { SheetsManager, create as create$1, getDynamicStyles, createGenerateId } from 'jss';\nexport { SheetsRegistry, createGenerateId } from 'jss';\nimport preset from 'jss-preset-default';\nimport { shallowEqualObjects } from 'shallow-equal';\nimport isPropValid from '@emotion/is-prop-valid';\nimport defaultCss from 'css-jss';\n\nvar getDisplayName = function getDisplayName(Component) {\n return Component.displayName || Component.name || 'Component';\n};\n\nvar memoize = function memoize(fn) {\n var lastArgs;\n var lastResult;\n return function () {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n if (Array.isArray(lastArgs) && args.length === lastArgs.length) {\n var isSame = true;\n\n for (var i = 0; i < args.length; i++) {\n if (args[i] !== lastArgs[i]) {\n isSame = false;\n }\n }\n\n if (isSame) {\n return lastResult;\n }\n }\n\n lastArgs = args;\n lastResult = fn.apply(void 0, args);\n return lastResult;\n };\n};\n\nvar mergeClasses = function mergeClasses(baseClasses, additionalClasses) {\n var combinedClasses = _extends({}, baseClasses);\n\n for (var name in additionalClasses) {\n combinedClasses[name] = name in combinedClasses ? combinedClasses[name] + \" \" + additionalClasses[name] : additionalClasses[name];\n }\n\n return combinedClasses;\n};\n\n/**\n * Global index counter to preserve source order.\n * As we create the style sheet during componentWillMount lifecycle,\n * children are handled after the parents, so the order of style elements would\n * be parent->child. It is a problem though when a parent passes a className\n * which needs to override any childs styles. StyleSheet of the child has a higher\n * specificity, because of the source order.\n * So our solution is to render sheets them in the reverse order child->sheet, so\n * that parent has a higher specificity.\n *\n * We start at [Number.MIN_SAFE_INTEGER] to always insert sheets from react-jss first before any\n * sheet which might be inserted manually by the user.\n */\nvar index = Number.MIN_SAFE_INTEGER || -1e9;\n\nvar getSheetIndex = function getSheetIndex() {\n return index++;\n};\n\nvar JssContext = createContext({\n classNamePrefix: '',\n disableStylesGeneration: false,\n isSSR: !isInBrowser\n});\n\nvar defaultManagers = new Map();\nvar getManager = function getManager(context, managerId) {\n // If `managers` map is present in the context, we use it in order to\n // let JssProvider reset them when new response has to render server-side.\n var managers = context.managers;\n\n if (managers) {\n if (!managers[managerId]) {\n managers[managerId] = new SheetsManager();\n }\n\n return managers[managerId];\n }\n\n var manager = defaultManagers.get(managerId);\n\n if (!manager) {\n manager = new SheetsManager();\n defaultManagers.set(managerId, manager);\n }\n\n return manager;\n};\nvar manageSheet = function manageSheet(options) {\n var sheet = options.sheet,\n context = options.context,\n index = options.index,\n theme = options.theme;\n\n if (!sheet) {\n return;\n }\n\n var manager = getManager(context, index);\n manager.manage(theme);\n\n if (context.registry) {\n context.registry.add(sheet);\n }\n};\nvar unmanageSheet = function unmanageSheet(options) {\n if (!options.sheet) {\n return;\n }\n\n var manager = getManager(options.context, options.index);\n manager.unmanage(options.theme);\n};\n\nvar defaultJss = create$1(preset());\n\nvar sheetsMeta = new WeakMap();\nvar getMeta = function getMeta(sheet) {\n return sheetsMeta.get(sheet);\n};\nvar addMeta = function addMeta(sheet, meta) {\n sheetsMeta.set(sheet, meta);\n};\n\nvar getStyles = function getStyles(options) {\n var styles = options.styles;\n\n if (typeof styles !== 'function') {\n return styles;\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(styles.length !== 0, \"[JSS] <\" + (options.name || 'Hook') + \" />'s styles function doesn't rely on the \\\"theme\\\" argument. We recommend declaring styles as an object instead.\") : void 0;\n return styles(options.theme);\n};\n\nfunction getSheetOptions(options, link) {\n var minify;\n\n if (options.context.id && options.context.id.minify != null) {\n minify = options.context.id.minify;\n }\n\n var classNamePrefix = options.context.classNamePrefix || '';\n\n if (options.name && !minify) {\n classNamePrefix += options.name.replace(/\\s/g, '-') + \"-\";\n }\n\n var meta = '';\n if (options.name) meta = options.name + \", \";\n meta += typeof options.styles === 'function' ? 'Themed' : 'Unthemed';\n return _extends({}, options.sheetOptions, {\n index: options.index,\n meta: meta,\n classNamePrefix: classNamePrefix,\n link: link,\n generateId: options.sheetOptions && options.sheetOptions.generateId ? options.sheetOptions.generateId : options.context.generateId\n });\n}\n\nvar createStyleSheet = function createStyleSheet(options) {\n if (options.context.disableStylesGeneration) {\n return undefined;\n }\n\n var manager = getManager(options.context, options.index);\n var existingSheet = manager.get(options.theme);\n\n if (existingSheet) {\n return existingSheet;\n }\n\n var jss = options.context.jss || defaultJss;\n var styles = getStyles(options);\n var dynamicStyles = getDynamicStyles(styles);\n var sheet = jss.createStyleSheet(styles, getSheetOptions(options, dynamicStyles !== null));\n addMeta(sheet, {\n dynamicStyles: dynamicStyles,\n styles: styles\n });\n manager.add(options.theme, sheet);\n return sheet;\n};\nvar removeDynamicRules = function removeDynamicRules(sheet, rules) {\n // Loop over each dynamic rule and remove the dynamic rule\n // We can't just remove the whole sheet as this has all of the rules for every component instance\n for (var key in rules) {\n sheet.deleteRule(rules[key]);\n }\n};\nvar updateDynamicRules = function updateDynamicRules(data, sheet, rules) {\n // Loop over each dynamic rule and update it\n // We can't just update the whole sheet as this has all of the rules for every component instance\n for (var key in rules) {\n sheet.updateOne(rules[key], data);\n }\n};\nvar addDynamicRules = function addDynamicRules(sheet, data) {\n var meta = getMeta(sheet);\n\n if (!meta) {\n return undefined;\n }\n\n var rules = {}; // Loop over each dynamic rule and add it to the stylesheet\n\n for (var key in meta.dynamicStyles) {\n var initialRuleCount = sheet.rules.index.length;\n var originalRule = sheet.addRule(key, meta.dynamicStyles[key]); // Loop through all created rules, fixes updating dynamic rules\n\n for (var i = initialRuleCount; i < sheet.rules.index.length; i++) {\n var rule = sheet.rules.index[i];\n sheet.updateOne(rule, data); // If it's the original rule, we need to add it by the correct key so the hook and hoc\n // can correctly concat the dynamic class with the static one\n\n rules[originalRule === rule ? key : rule.key] = rule;\n }\n }\n\n return rules;\n};\n\nvar getSheetClasses = function getSheetClasses(sheet, dynamicRules) {\n if (!dynamicRules) {\n return sheet.classes;\n }\n\n var meta = getMeta(sheet);\n\n if (!meta) {\n return sheet.classes;\n }\n\n var classes = {};\n\n for (var key in meta.styles) {\n classes[key] = sheet.classes[key];\n\n if (key in dynamicRules) {\n classes[key] += \" \" + sheet.classes[dynamicRules[key].key];\n }\n }\n\n return classes;\n};\n\nfunction getUseInsertionEffect(isSSR) {\n return isSSR ? useEffect : React.useInsertionEffect || // React 18+ (https://github.com/reactwg/react-18/discussions/110)\n useLayoutEffect;\n}\n\nvar noTheme = {};\n\nvar createUseStyles = function createUseStyles(styles, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n _options$index = _options.index,\n index = _options$index === void 0 ? getSheetIndex() : _options$index,\n theming = _options.theming,\n name = _options.name,\n sheetOptions = _objectWithoutPropertiesLoose(_options, [\"index\", \"theming\", \"name\"]);\n\n var ThemeContext$1 = theming && theming.context || ThemeContext;\n\n var useTheme = function useTheme(theme) {\n if (typeof styles === 'function') {\n return theme || useContext(ThemeContext$1) || noTheme;\n }\n\n return noTheme;\n };\n\n var emptyObject = {};\n return function useStyles(data) {\n var isFirstMount = useRef(true);\n var context = useContext(JssContext);\n var theme = useTheme(data && data.theme);\n\n var _useMemo = useMemo(function () {\n var newSheet = createStyleSheet({\n context: context,\n styles: styles,\n name: name,\n theme: theme,\n index: index,\n sheetOptions: sheetOptions\n });\n\n if (newSheet && context.isSSR) {\n // manage immediately during SSRs. browsers will manage the sheet through useInsertionEffect below\n manageSheet({\n index: index,\n context: context,\n sheet: newSheet,\n theme: theme\n });\n }\n\n return [newSheet, newSheet ? addDynamicRules(newSheet, data) : null];\n }, [context, theme]),\n sheet = _useMemo[0],\n dynamicRules = _useMemo[1];\n\n getUseInsertionEffect(context.isSSR)(function () {\n // We only need to update the rules on a subsequent update and not in the first mount\n if (sheet && dynamicRules && !isFirstMount.current) {\n updateDynamicRules(data, sheet, dynamicRules);\n }\n }, [data]);\n getUseInsertionEffect(context.isSSR)(function () {\n if (sheet) {\n manageSheet({\n index: index,\n context: context,\n sheet: sheet,\n theme: theme\n });\n }\n\n return function () {\n if (sheet) {\n unmanageSheet({\n index: index,\n context: context,\n sheet: sheet,\n theme: theme\n }); // when sheet changes, remove related dynamic rules\n\n if (dynamicRules) {\n removeDynamicRules(sheet, dynamicRules);\n }\n }\n };\n }, [sheet]);\n var classes = useMemo(function () {\n return sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject;\n }, [sheet, dynamicRules]);\n useDebugValue(classes);\n useDebugValue(theme === noTheme ? 'No theme' : theme);\n useEffect(function () {\n isFirstMount.current = false;\n });\n return classes;\n };\n};\n\nvar NoRenderer = function NoRenderer(props) {\n return props.children || null;\n};\n/**\n * HOC creator function that wrapps the user component.\n *\n * `withStyles(styles, [options])(Component)`\n */\n\n\nvar createWithStyles = function createWithStyles(styles, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n _options$index = _options.index,\n index = _options$index === void 0 ? getSheetIndex() : _options$index,\n theming = _options.theming,\n injectTheme = _options.injectTheme,\n sheetOptions = _objectWithoutPropertiesLoose(_options, [\"index\", \"theming\", \"injectTheme\"]);\n\n var ThemeContext$1 = theming ? theming.context : ThemeContext;\n return function (InnerComponent) {\n if (InnerComponent === void 0) {\n InnerComponent = NoRenderer;\n }\n\n var displayName = getDisplayName(InnerComponent);\n var mergeClassesProp = memoize(function (sheetClasses, classesProp) {\n return classesProp ? mergeClasses(sheetClasses, classesProp) : sheetClasses;\n });\n var hookOptions = Object.assign(sheetOptions, {\n theming: theming,\n index: index,\n name: displayName\n });\n var useStyles = createUseStyles(styles, hookOptions);\n var WithStyles = forwardRef(function (props, ref) {\n var theme = useContext(ThemeContext$1);\n\n var newProps = _extends({}, props);\n\n if (injectTheme && newProps.theme == null) {\n newProps.theme = theme;\n }\n\n var sheetClasses = useStyles(newProps);\n var classes = mergeClassesProp(sheetClasses, props.classes);\n return createElement(InnerComponent, _extends({}, newProps, {\n classes: classes,\n ref: ref\n }));\n });\n WithStyles.displayName = \"WithStyles(\" + displayName + \")\";\n WithStyles.defaultProps = _extends({}, InnerComponent.defaultProps);\n WithStyles.InnerComponent = InnerComponent;\n return hoistNonReactStatics(WithStyles, InnerComponent);\n };\n};\n\nvar initialContext = {};\nfunction JssProvider(props) {\n var managersRef = useRef({});\n var prevContextRef = useRef();\n var registryRef = useRef(null);\n\n var createContext = function createContext(parentContext, prevContext) {\n if (prevContext === void 0) {\n prevContext = initialContext;\n }\n\n var registry = props.registry,\n classNamePrefix = props.classNamePrefix,\n jss = props.jss,\n generateId = props.generateId,\n disableStylesGeneration = props.disableStylesGeneration,\n media = props.media,\n id = props.id,\n isSSR = props.isSSR;\n\n var context = _extends({}, parentContext);\n\n if (registry) {\n context.registry = registry; // This way we identify a new request on the server, because user will create\n // a new Registry instance for each.\n\n if (registry !== registryRef.current) {\n // We reset managers because we have to regenerate all sheets for the new request.\n managersRef.current = {};\n registryRef.current = registry;\n }\n }\n\n context.managers = managersRef.current;\n\n if (id !== undefined) {\n context.id = id;\n }\n\n if (generateId !== undefined) {\n context.generateId = generateId;\n } else if (!context.generateId || !prevContext || context.id !== prevContext.id) {\n context.generateId = createGenerateId(context.id);\n }\n\n if (classNamePrefix) {\n context.classNamePrefix = (context.classNamePrefix || '') + classNamePrefix;\n }\n\n if (media !== undefined) {\n context.media = media;\n }\n\n if (jss) {\n context.jss = jss;\n }\n\n if (disableStylesGeneration !== undefined) {\n context.disableStylesGeneration = disableStylesGeneration;\n }\n\n if (isSSR !== undefined) {\n context.isSSR = isSSR;\n }\n\n if (prevContext && shallowEqualObjects(prevContext, context)) {\n return prevContext;\n }\n\n return context;\n };\n\n var renderProvider = function renderProvider(parentContext) {\n var children = props.children;\n var context = createContext(parentContext, prevContextRef.current);\n prevContextRef.current = context;\n return createElement(JssContext.Provider, {\n value: context\n }, children);\n };\n\n return createElement(JssContext.Consumer, null, renderProvider);\n}\n\nvar parseStyles = function parseStyles(args) {\n var dynamicStyles = [];\n var staticStyle;\n var labels = []; // Not using ...rest to optimize perf.\n\n for (var key in args) {\n var style = args[key];\n if (!style) continue;\n\n if (typeof style === 'function') {\n dynamicStyles.push(style);\n } else {\n if (!staticStyle) staticStyle = {};\n Object.assign(staticStyle, style);\n var _staticStyle = staticStyle,\n _label = _staticStyle.label;\n\n if (_label) {\n if (labels.indexOf(_label) === -1) labels.push(_label);\n }\n }\n }\n\n var styles = {};\n var label = labels.length === 0 ? 'sc' : labels.join('-');\n\n if (staticStyle) {\n // Label should not leak to the core.\n if ('label' in staticStyle) delete staticStyle.label;\n styles[label] = staticStyle;\n } // When there is only one function rule, we don't need to wrap it.\n\n\n if (dynamicStyles.length === 1) {\n styles.scd = dynamicStyles[0];\n } // We create a new function rule which will call all other function rules\n // and merge the styles they return.\n\n\n if (dynamicStyles.length > 1) {\n styles.scd = function (props) {\n var merged = {};\n\n for (var i = 0; i < dynamicStyles.length; i++) {\n var dynamicStyle = dynamicStyles[i](props);\n if (dynamicStyle) Object.assign(merged, dynamicStyle);\n }\n\n return merged;\n };\n }\n\n return {\n styles: styles,\n label: label\n };\n};\n\nvar shouldForwardPropSymbol = Symbol('react-jss-styled');\n\nvar getShouldForwardProp = function getShouldForwardProp(tagOrComponent, options) {\n var shouldForwardProp = options.shouldForwardProp;\n var childShouldForwardProp = tagOrComponent[shouldForwardPropSymbol];\n var finalShouldForwardProp = shouldForwardProp || childShouldForwardProp;\n\n if (shouldForwardProp && childShouldForwardProp) {\n finalShouldForwardProp = function finalShouldForwardProp(prop) {\n return childShouldForwardProp(prop) && shouldForwardProp(prop);\n };\n }\n\n return finalShouldForwardProp;\n};\n\nvar getChildProps = function getChildProps(props, shouldForwardProp, isTag) {\n var childProps = {};\n\n for (var prop in props) {\n if (shouldForwardProp) {\n if (shouldForwardProp(prop) === true) {\n childProps[prop] = props[prop];\n }\n\n continue;\n } // We don't want to pass non-dom props to the DOM.\n\n\n if (isTag) {\n if (isPropValid(prop)) {\n childProps[prop] = props[prop];\n }\n\n continue;\n }\n\n childProps[prop] = props[prop];\n }\n\n return childProps;\n}; // eslint-disable-next-line no-unused-vars\n\n\nvar configureStyled = function configureStyled(tagOrComponent, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n theming = _options.theming;\n var isTag = typeof tagOrComponent === 'string';\n var ThemeContext$1 = theming ? theming.context : ThemeContext;\n var shouldForwardProp = getShouldForwardProp(tagOrComponent, options);\n\n var _options2 = options,\n _ = _options2.shouldForwardProp,\n hookOptions = _objectWithoutPropertiesLoose(_options2, [\"shouldForwardProp\"]);\n\n return function createStyledComponent() {\n // eslint-disable-next-line prefer-rest-params\n var _parseStyles = parseStyles(arguments),\n styles = _parseStyles.styles,\n label = _parseStyles.label;\n\n var useStyles = createUseStyles(styles, hookOptions);\n\n var Styled = function Styled(props) {\n var as = props.as,\n className = props.className;\n var theme = useContext(ThemeContext$1);\n var propsWithTheme = Object.assign({\n theme: theme\n }, props);\n var classes = useStyles(propsWithTheme);\n var childProps = getChildProps(props, shouldForwardProp, isTag);\n var classNames = ((classes[label] || classes.sc || '') + \" \" + (classes.scd || '')).trim();\n childProps.className = className ? className + \" \" + classNames : classNames;\n\n if (!isTag && shouldForwardProp) {\n tagOrComponent[shouldForwardPropSymbol] = shouldForwardProp;\n }\n\n if (isTag && as) {\n return createElement(as, childProps);\n }\n\n return createElement(tagOrComponent, childProps);\n };\n\n return Styled;\n };\n};\n\n/* eslint-disable prefer-rest-params, prefer-spread */\nvar create = function create(css) {\n if (css === void 0) {\n css = defaultCss;\n }\n\n return function createElement$1(type, props) {\n var args = arguments;\n\n if (props && props.css) {\n var className = css(props.css);\n var newProps = Object.assign({}, props);\n newProps.className = props.className ? props.className + \" \" + className : className;\n delete newProps.css;\n args[1] = newProps;\n }\n\n return createElement.apply(undefined, args);\n };\n};\nvar jsx = create();\n\nexport default createWithStyles;\nexport { JssContext, JssProvider, create as createJsx, createUseStyles, defaultJss as jss, jsx, configureStyled as styled, createWithStyles as withStyles };\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport React from \"react\";\nimport transitionStyles from \"./transition-styles\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { ENTER_TIMEOUT, EXIT_TIMEOUT } from \"./container\";\nimport { createUseStyles } from \"react-jss\";\n\nvar AlertTransition = function AlertTransition(props) {\n var classes = useStyles();\n var timeout = {\n enter: ENTER_TIMEOUT,\n exit: EXIT_TIMEOUT\n };\n return /*#__PURE__*/React.createElement(CSSTransition, _extends({\n timeout: timeout,\n classNames: classes\n }, props));\n};\n\nvar useStyles = createUseStyles(transitionStyles);\nexport default AlertTransition;","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport React, { Children, cloneElement } from \"react\";\nimport { oneOf } from \"prop-types\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport AlertTransition from \"./alert-transition\";\nimport { createUseStyles } from \"react-jss\";\nimport { bootstrap } from \"toetag\";\nimport transitionStyles from \"./transition-styles\";\nexport var ENTER_TIMEOUT = 500;\nexport var EXIT_TIMEOUT = 300;\n\nvar AlertContainer = function AlertContainer(_ref) {\n var _ref$position = _ref.position,\n position = _ref$position === void 0 ? \"top-right\" : _ref$position,\n children = _ref.children;\n var classes = useStyles();\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"\".concat(classes.container, \" \").concat(classes[position])\n }, /*#__PURE__*/React.createElement(TransitionGroup, null, Children.map(children, function (child) {\n return child ? /*#__PURE__*/React.createElement(AlertTransition, {\n key: child.props.id\n }, /*#__PURE__*/cloneElement(child)) : null;\n })));\n};\n\nexport var useStyles = createUseStyles(_objectSpread({\n container: {\n position: \"fixed\",\n paddingTop: bootstrap.paddingBaseVertical,\n paddingRight: bootstrap.paddingBaseHorizontal,\n paddingBottom: bootstrap.paddingBaseVertical,\n paddingLeft: bootstrap.paddingBaseHorizontal,\n zIndex: bootstrap.zindexNavbarFixed + 1\n },\n \"top-right\": {\n top: 0,\n right: 0,\n textAlign: \"right\"\n },\n \"top-left\": {\n top: 0,\n left: 0\n },\n \"bottom-right\": {\n bottom: 0,\n right: 0,\n textAlign: \"right\"\n },\n \"bottom-left\": {\n bottom: 0,\n left: 0\n }\n}, transitionStyles));\nexport var PropTypes = {\n position: oneOf([\"top-right\", \"top-left\", \"bottom-right\", \"bottom-left\"])\n};\nAlertContainer.propTypes = PropTypes;\nexport default AlertContainer;","import React from \"react\";\n\nvar Icon = function Icon(_ref) {\n var type = _ref.type,\n _ref$className = _ref.className,\n className = _ref$className === void 0 ? \"\" : _ref$className;\n var faType = iconType(type);\n\n if (faType) {\n return /*#__PURE__*/React.createElement(\"i\", {\n className: \"\".concat(faType, \" \").concat(className),\n \"aria-hidden\": \"true\"\n });\n }\n\n return null;\n};\n\nfunction iconType(type) {\n switch (type) {\n case \"warning\":\n return \"fa fa-warning\";\n\n case \"info\":\n return \"fa fa-info\";\n\n case \"success\":\n return \"fa fa-check\";\n\n case \"danger\":\n return \"fa fa-exclamation-circle\";\n }\n}\n\nexport default Icon;","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport React from \"react\";\nimport { createUseStyles } from \"react-jss\";\nimport { bootstrap } from \"toetag\";\nimport Icon from \"./icon\";\nimport transitionStyles from \"../transition-styles\";\n\nvar Alert = function Alert(_ref) {\n var _ref$type = _ref.type,\n type = _ref$type === void 0 ? \"info\" : _ref$type,\n children = _ref.children,\n headline = _ref.headline,\n onDismiss = _ref.onDismiss,\n _ref$dismissTitle = _ref.dismissTitle,\n dismissTitle = _ref$dismissTitle === void 0 ? \"Dismiss\" : _ref$dismissTitle,\n _ref$showIcon = _ref.showIcon,\n showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,\n classOverrides = _ref.classes;\n var classes = useStyles();\n classes = _objectSpread(_objectSpread({}, classes), classOverrides);\n var isDismissable = !!onDismiss;\n var css = \"\".concat(isDismissable ? classes.dismissable : \"\", \" \").concat(classes[type], \" \").concat(classes.alert);\n var dismiss = isDismissable ? /*#__PURE__*/React.createElement(\"button\", {\n type: \"button\",\n className: classes.close,\n title: dismissTitle,\n onClick: onDismiss\n }, \"\\xD7\") : null;\n return /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"div\", {\n className: css\n }, dismiss, showIcon ? /*#__PURE__*/React.createElement(Icon, {\n className: classes.icon,\n type: type\n }) : null, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.msgContainer\n }, headline ? /*#__PURE__*/React.createElement(\"h4\", {\n className: classes.headline\n }, headline) : null, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.body\n }, children))));\n};\n\nvar useStyles = createUseStyles(_objectSpread(_objectSpread({}, transitionStyles), {}, {\n alert: {\n composes: \"alert\",\n marginBottom: bootstrap.paddingBaseVertical,\n display: \"inline-block\",\n textAlign: \"left\"\n },\n info: {\n composes: \"alert-info\"\n },\n success: {\n composes: \"alert-success\"\n },\n warning: {\n composes: \"alert-warning\"\n },\n danger: {\n composes: \"alert-danger\"\n },\n dismissable: {\n composes: \"alert-dismissable\"\n },\n close: {\n composes: \"close\"\n },\n msgContainer: {\n display: \"inline-block\"\n },\n icon: {\n verticalAlign: \"top\",\n fontSize: bootstrap.fontSizeH4,\n paddingRight: bootstrap.paddingLargeHorizontal,\n opacity: 0.2\n },\n headline: {\n margin: 0,\n marginBottom: bootstrap.paddingBaseVertical\n },\n body: {\n maxWidth: \"40em\"\n }\n}));\nexport default Alert;","function _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nimport React, { Component } from \"react\";\nimport { oneOf, string, func, bool, number } from \"prop-types\";\nimport Alert from \"./alert\";\nimport { ENTER_TIMEOUT, EXIT_TIMEOUT } from \"./container\";\n\nvar AlertTimer = /*#__PURE__*/function (_Component) {\n _inherits(AlertTimer, _Component);\n\n var _super = _createSuper(AlertTimer);\n\n function AlertTimer(props) {\n _classCallCheck(this, AlertTimer);\n\n return _super.call(this, props);\n }\n\n _createClass(AlertTimer, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.setupTimer(this.props.timeout, this.props.onDismiss);\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n if (this.props.timeout != prevProps.timeout || this.props.onDismiss != prevProps.onDismiss) {\n this.setupTimer(this.props.timeout, this.props.onDismiss);\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n // need to clean up after ourselves\n this.setupTimer();\n }\n }, {\n key: \"setupTimer\",\n value: function setupTimer(timeout, onDismiss) {\n if (!timeout || !onDismiss) {\n // clear any timer we currently have\n clearTimeout(this.timer);\n this.timer = null;\n this.timerTimeout = null;\n } else {\n if (this.timer && this.timerTimeout != timeout) {\n // the timeout value has changed, setup a new timer\n clearTimeout(this.timer);\n this.timer = null;\n } // add new timer if we don't already have one\n\n\n if (!this.timer) {\n this.timer = setTimeout(this.dismissAlert.bind(this, onDismiss), timeout + ENTER_TIMEOUT + EXIT_TIMEOUT);\n this.timerTimeout = timeout;\n }\n }\n }\n }, {\n key: \"dismissAlert\",\n value: function dismissAlert(onDismiss) {\n // clear the timer if it hasn't fired yet\n clearTimeout(this.timer); // we don't need to keep track of any timers for this alert anymore\n\n this.timer = null;\n this.timerTimeout = null; // actually dismiss the alert\n\n onDismiss();\n }\n }, {\n key: \"render\",\n value: function render() {\n var onDismiss = this.props.onDismiss ? this.dismissAlert.bind(this, this.props.onDismiss) : null;\n return /*#__PURE__*/React.createElement(Alert, _extends({}, this.props, {\n onDismiss: onDismiss\n }));\n }\n }]);\n\n return AlertTimer;\n}(Component);\n\nexport { AlertTimer as default };\nexport var PropTypes = {\n type: oneOf([\"info\", \"success\", \"warning\", \"danger\"]),\n headline: string,\n onDismiss: func,\n dismissTitle: string,\n showIcon: bool,\n timeout: number\n};\nAlertTimer.propTypes = PropTypes;","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport { any, arrayOf, func, node, object, oneOfType, shape, string } from \"prop-types\";\nimport Container, { PropTypes as ContainerPropTypes, useStyles } from \"./container\";\nimport Alert, { PropTypes as AlertPropTypes } from \"./alert-timer\";\nimport AlertTransition from \"./alert-transition\";\n\nvar AlertList = function AlertList(_ref) {\n var position = _ref.position,\n alerts = _ref.alerts,\n onDismiss = _ref.onDismiss,\n props = _objectWithoutProperties(_ref, [\"position\", \"alerts\", \"onDismiss\"]);\n\n var classes = useStyles();\n return /*#__PURE__*/React.createElement(Container, {\n position: position,\n className: classes.container\n }, /*#__PURE__*/React.createElement(TransitionGroup, null, alerts.map(function (item) {\n var dismiss = onDismiss ? function () {\n return onDismiss(item);\n } : null;\n\n var message = item.message,\n alertProps = _objectWithoutProperties(item, [\"message\"]);\n\n return /*#__PURE__*/React.createElement(AlertTransition, {\n key: item.id\n }, /*#__PURE__*/React.createElement(Alert, _extends({}, props, alertProps, {\n onDismiss: dismiss\n }), message));\n })));\n};\n\nvar timeout = AlertPropTypes.timeout,\n type = AlertPropTypes.type,\n headline = AlertPropTypes.headline;\nAlertList.propTypes = _objectSpread(_objectSpread({}, ContainerPropTypes), {}, {\n alerts: arrayOf(shape({\n id: any.isRequired,\n type: type,\n headline: headline,\n message: oneOfType([string, node, object]).isRequired\n })).isRequired,\n onDismiss: func,\n timeout: timeout\n});\nexport default AlertList;","import React, { Component, PureComponent } from 'react';\nimport memoizeOne from 'memoize-one';\nimport { css, injectGlobal } from 'emotion';\nimport { createPortal, findDOMNode } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport raf from 'raf';\nimport AutosizeInput from 'react-input-autosize';\nimport { Transition, TransitionGroup } from 'react-transition-group';\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n _typeof = function (obj) {\n return typeof obj;\n };\n } else {\n _typeof = function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n var ownKeys = Object.keys(source);\n\n if (typeof Object.getOwnPropertySymbols === 'function') {\n ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n }));\n }\n\n ownKeys.forEach(function (key) {\n _defineProperty(target, key, source[key]);\n });\n }\n\n return target;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n if (superClass) _setPrototypeOf(subClass, superClass);\n}\n\nfunction _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (typeof call === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return _assertThisInitialized(self);\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];\n\n return arr2;\n }\n}\n\nfunction _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\n// ==============================\n// NO OP\n// ==============================\nvar noop = function noop() {};\n// Class Name Prefixer\n// ==============================\n\n/**\n String representation of component state for styling with class names.\n\n Expects an array of strings OR a string/object pair:\n - className(['comp', 'comp-arg', 'comp-arg-2'])\n @returns 'react-select__comp react-select__comp-arg react-select__comp-arg-2'\n - className('comp', { some: true, state: false })\n @returns 'react-select__comp react-select__comp--some'\n*/\n\nfunction applyPrefixToName(prefix, name) {\n if (!name) {\n return prefix;\n } else if (name[0] === '-') {\n return prefix + name;\n } else {\n return prefix + '__' + name;\n }\n}\n\nfunction classNames(prefix, cssKey, state, className) {\n var arr = [cssKey, className];\n\n if (state && prefix) {\n for (var key in state) {\n if (state.hasOwnProperty(key) && state[key]) {\n arr.push(\"\".concat(applyPrefixToName(prefix, key)));\n }\n }\n }\n\n return arr.filter(function (i) {\n return i;\n }).map(function (i) {\n return String(i).trim();\n }).join(' ');\n} // ==============================\n// Clean Value\n// ==============================\n\nvar cleanValue = function cleanValue(value) {\n if (Array.isArray(value)) return value.filter(Boolean);\n if (_typeof(value) === 'object' && value !== null) return [value];\n return [];\n}; // ==============================\n// Handle Input Change\n// ==============================\n\nfunction handleInputChange(inputValue, actionMeta, onInputChange) {\n if (onInputChange) {\n var newValue = onInputChange(inputValue, actionMeta);\n if (typeof newValue === 'string') return newValue;\n }\n\n return inputValue;\n} // ==============================\n// Scroll Helpers\n// ==============================\n\nfunction isDocumentElement(el) {\n return [document.documentElement, document.body, window].indexOf(el) > -1;\n} // Normalized Scroll Top\n// ------------------------------\n\nfunction getScrollTop(el) {\n if (isDocumentElement(el)) {\n return window.pageYOffset;\n }\n\n return el.scrollTop;\n}\nfunction scrollTo(el, top) {\n // with a scroll distance, we perform scroll on the element\n if (isDocumentElement(el)) {\n window.scrollTo(0, top);\n return;\n }\n\n el.scrollTop = top;\n} // Get Scroll Parent\n// ------------------------------\n\nfunction getScrollParent(element) {\n var style = getComputedStyle(element);\n var excludeStaticParent = style.position === 'absolute';\n var overflowRx = /(auto|scroll)/;\n var docEl = document.documentElement; // suck it, flow...\n\n if (style.position === 'fixed') return docEl;\n\n for (var parent = element; parent = parent.parentElement;) {\n style = getComputedStyle(parent);\n\n if (excludeStaticParent && style.position === 'static') {\n continue;\n }\n\n if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {\n return parent;\n }\n }\n\n return docEl;\n} // Animated Scroll To\n// ------------------------------\n\n/**\n @param t: time (elapsed)\n @param b: initial value\n @param c: amount of change\n @param d: duration\n*/\n\nfunction easeOutCubic(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t + 1) + b;\n}\n\nfunction animatedScrollTo(element, to) {\n var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;\n var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;\n var start = getScrollTop(element);\n var change = to - start;\n var increment = 10;\n var currentTime = 0;\n\n function animateScroll() {\n currentTime += increment;\n var val = easeOutCubic(currentTime, start, change, duration);\n scrollTo(element, val);\n\n if (currentTime < duration) {\n raf(animateScroll);\n } else {\n callback(element);\n }\n }\n\n animateScroll();\n} // Scroll Into View\n// ------------------------------\n\nfunction scrollIntoView(menuEl, focusedEl) {\n var menuRect = menuEl.getBoundingClientRect();\n var focusedRect = focusedEl.getBoundingClientRect();\n var overScroll = focusedEl.offsetHeight / 3;\n\n if (focusedRect.bottom + overScroll > menuRect.bottom) {\n scrollTo(menuEl, Math.min(focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll, menuEl.scrollHeight));\n } else if (focusedRect.top - overScroll < menuRect.top) {\n scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));\n }\n} // ==============================\n// Get bounding client object\n// ==============================\n// cannot get keys using array notation with DOMRect\n\nfunction getBoundingClientObj(element) {\n var rect = element.getBoundingClientRect();\n return {\n bottom: rect.bottom,\n height: rect.height,\n left: rect.left,\n right: rect.right,\n top: rect.top,\n width: rect.width\n };\n}\n// Touch Capability Detector\n// ==============================\n\nfunction isTouchCapable() {\n try {\n document.createEvent('TouchEvent');\n return true;\n } catch (e) {\n return false;\n }\n} // ==============================\n// Mobile Device Detector\n// ==============================\n\nfunction isMobileDevice() {\n try {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n } catch (e) {\n return false;\n }\n}\n\nfunction getMenuPlacement(_ref) {\n var maxHeight = _ref.maxHeight,\n menuEl = _ref.menuEl,\n minHeight = _ref.minHeight,\n placement = _ref.placement,\n shouldScroll = _ref.shouldScroll,\n isFixedPosition = _ref.isFixedPosition,\n theme = _ref.theme;\n var spacing = theme.spacing;\n var scrollParent = getScrollParent(menuEl);\n var defaultState = {\n placement: 'bottom',\n maxHeight: maxHeight\n }; // something went wrong, return default state\n\n if (!menuEl || !menuEl.offsetParent) return defaultState; // we can't trust `scrollParent.scrollHeight` --> it may increase when\n // the menu is rendered\n\n var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),\n scrollHeight = _scrollParent$getBoun.height;\n\n var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),\n menuBottom = _menuEl$getBoundingCl.bottom,\n menuHeight = _menuEl$getBoundingCl.height,\n menuTop = _menuEl$getBoundingCl.top;\n\n var _menuEl$offsetParent$ = menuEl.offsetParent.getBoundingClientRect(),\n containerTop = _menuEl$offsetParent$.top;\n\n var viewHeight = window.innerHeight;\n var scrollTop = getScrollTop(scrollParent);\n var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);\n var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);\n var viewSpaceAbove = containerTop - marginTop;\n var viewSpaceBelow = viewHeight - menuTop;\n var scrollSpaceAbove = viewSpaceAbove + scrollTop;\n var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;\n var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;\n var scrollUp = scrollTop + menuTop - marginTop;\n var scrollDuration = 160;\n\n switch (placement) {\n case 'auto':\n case 'bottom':\n // 1: the menu will fit, do nothing\n if (viewSpaceBelow >= menuHeight) {\n return {\n placement: 'bottom',\n maxHeight: maxHeight\n };\n } // 2: the menu will fit, if scrolled\n\n\n if (scrollSpaceBelow >= menuHeight && !isFixedPosition) {\n if (shouldScroll) {\n animatedScrollTo(scrollParent, scrollDown, scrollDuration);\n }\n\n return {\n placement: 'bottom',\n maxHeight: maxHeight\n };\n } // 3: the menu will fit, if constrained\n\n\n if (!isFixedPosition && scrollSpaceBelow >= minHeight || isFixedPosition && viewSpaceBelow >= minHeight) {\n if (shouldScroll) {\n animatedScrollTo(scrollParent, scrollDown, scrollDuration);\n } // we want to provide as much of the menu as possible to the user,\n // so give them whatever is available below rather than the minHeight.\n\n\n var constrainedHeight = isFixedPosition ? viewSpaceBelow - marginBottom : scrollSpaceBelow - marginBottom;\n return {\n placement: 'bottom',\n maxHeight: constrainedHeight\n };\n } // 4. Forked beviour when there isn't enough space below\n // AUTO: flip the menu, render above\n\n\n if (placement === 'auto' || isFixedPosition) {\n // may need to be constrained after flipping\n var _constrainedHeight = maxHeight;\n var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;\n\n if (spaceAbove >= minHeight) {\n _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight);\n }\n\n return {\n placement: 'top',\n maxHeight: _constrainedHeight\n };\n } // BOTTOM: allow browser to increase scrollable area and immediately set scroll\n\n\n if (placement === 'bottom') {\n scrollTo(scrollParent, scrollDown);\n return {\n placement: 'bottom',\n maxHeight: maxHeight\n };\n }\n\n break;\n\n case 'top':\n // 1: the menu will fit, do nothing\n if (viewSpaceAbove >= menuHeight) {\n return {\n placement: 'top',\n maxHeight: maxHeight\n };\n } // 2: the menu will fit, if scrolled\n\n\n if (scrollSpaceAbove >= menuHeight && !isFixedPosition) {\n if (shouldScroll) {\n animatedScrollTo(scrollParent, scrollUp, scrollDuration);\n }\n\n return {\n placement: 'top',\n maxHeight: maxHeight\n };\n } // 3: the menu will fit, if constrained\n\n\n if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {\n var _constrainedHeight2 = maxHeight; // we want to provide as much of the menu as possible to the user,\n // so give them whatever is available below rather than the minHeight.\n\n if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {\n _constrainedHeight2 = isFixedPosition ? viewSpaceAbove - marginTop : scrollSpaceAbove - marginTop;\n }\n\n if (shouldScroll) {\n animatedScrollTo(scrollParent, scrollUp, scrollDuration);\n }\n\n return {\n placement: 'top',\n maxHeight: _constrainedHeight2\n };\n } // 4. not enough space, the browser WILL NOT increase scrollable area when\n // absolutely positioned element rendered above the viewport (only below).\n // Flip the menu, render below\n\n\n return {\n placement: 'bottom',\n maxHeight: maxHeight\n };\n\n default:\n throw new Error(\"Invalid placement provided \\\"\".concat(placement, \"\\\".\"));\n } // fulfil contract with flow: implicit return value of undefined\n\n\n return defaultState;\n} // Menu Component\n// ------------------------------\n\nfunction alignToControl(placement) {\n var placementToCSSProp = {\n bottom: 'top',\n top: 'bottom'\n };\n return placement ? placementToCSSProp[placement] : 'bottom';\n}\n\nvar coercePlacement = function coercePlacement(p) {\n return p === 'auto' ? 'bottom' : p;\n};\n\nvar menuCSS = function menuCSS(_ref2) {\n var _ref3;\n\n var placement = _ref2.placement,\n _ref2$theme = _ref2.theme,\n borderRadius = _ref2$theme.borderRadius,\n spacing = _ref2$theme.spacing,\n colors = _ref2$theme.colors;\n return _ref3 = {\n label: 'menu'\n }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, \"backgroundColor\", colors.neutral0), _defineProperty(_ref3, \"borderRadius\", borderRadius), _defineProperty(_ref3, \"boxShadow\", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), _defineProperty(_ref3, \"marginBottom\", spacing.menuGutter), _defineProperty(_ref3, \"marginTop\", spacing.menuGutter), _defineProperty(_ref3, \"position\", 'absolute'), _defineProperty(_ref3, \"width\", '100%'), _defineProperty(_ref3, \"zIndex\", 1), _ref3;\n}; // NOTE: internal only\n\nvar MenuPlacer =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(MenuPlacer, _Component);\n\n function MenuPlacer() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, MenuPlacer);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MenuPlacer)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n maxHeight: _this.props.maxMenuHeight,\n placement: null\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getPlacement\", function (ref) {\n var _this$props = _this.props,\n minMenuHeight = _this$props.minMenuHeight,\n maxMenuHeight = _this$props.maxMenuHeight,\n menuPlacement = _this$props.menuPlacement,\n menuPosition = _this$props.menuPosition,\n menuShouldScrollIntoView = _this$props.menuShouldScrollIntoView,\n theme = _this$props.theme;\n var getPortalPlacement = _this.context.getPortalPlacement;\n if (!ref) return; // DO NOT scroll if position is fixed\n\n var isFixedPosition = menuPosition === 'fixed';\n var shouldScroll = menuShouldScrollIntoView && !isFixedPosition;\n var state = getMenuPlacement({\n maxHeight: maxMenuHeight,\n menuEl: ref,\n minHeight: minMenuHeight,\n placement: menuPlacement,\n shouldScroll: shouldScroll,\n isFixedPosition: isFixedPosition,\n theme: theme\n });\n if (getPortalPlacement) getPortalPlacement(state);\n\n _this.setState(state);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getUpdatedProps\", function () {\n var menuPlacement = _this.props.menuPlacement;\n var placement = _this.state.placement || coercePlacement(menuPlacement);\n return _objectSpread({}, _this.props, {\n placement: placement,\n maxHeight: _this.state.maxHeight\n });\n });\n\n return _this;\n }\n\n _createClass(MenuPlacer, [{\n key: \"render\",\n value: function render() {\n var children = this.props.children;\n return children({\n ref: this.getPlacement,\n placerProps: this.getUpdatedProps()\n });\n }\n }]);\n\n return MenuPlacer;\n}(Component);\n\n_defineProperty(MenuPlacer, \"contextTypes\", {\n getPortalPlacement: PropTypes.func\n});\n\nvar Menu = function Menu(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerRef = props.innerRef,\n innerProps = props.innerProps;\n var cn = cx(\n /*#__PURE__*/\n css(getStyles('menu', props)), {\n menu: true\n }, className);\n return React.createElement(\"div\", _extends({\n className: cn\n }, innerProps, {\n ref: innerRef\n }), children);\n};\n// Menu List\n// ==============================\n\nvar menuListCSS = function menuListCSS(_ref4) {\n var maxHeight = _ref4.maxHeight,\n baseUnit = _ref4.theme.spacing.baseUnit;\n return {\n maxHeight: maxHeight,\n overflowY: 'auto',\n paddingBottom: baseUnit,\n paddingTop: baseUnit,\n position: 'relative',\n // required for offset[Height, Top] > keyboard scroll\n WebkitOverflowScrolling: 'touch'\n };\n};\nvar MenuList = function MenuList(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n isMulti = props.isMulti,\n innerRef = props.innerRef;\n return React.createElement(\"div\", {\n className: cx(\n /*#__PURE__*/\n css(getStyles('menuList', props)), {\n 'menu-list': true,\n 'menu-list--is-multi': isMulti\n }, className),\n ref: innerRef\n }, children);\n}; // ==============================\n// Menu Notices\n// ==============================\n\nvar noticeCSS = function noticeCSS(_ref5) {\n var _ref5$theme = _ref5.theme,\n baseUnit = _ref5$theme.spacing.baseUnit,\n colors = _ref5$theme.colors;\n return {\n color: colors.neutral40,\n padding: \"\".concat(baseUnit * 2, \"px \").concat(baseUnit * 3, \"px\"),\n textAlign: 'center'\n };\n};\n\nvar noOptionsMessageCSS = noticeCSS;\nvar loadingMessageCSS = noticeCSS;\nvar NoOptionsMessage = function NoOptionsMessage(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('noOptionsMessage', props)), {\n 'menu-notice': true,\n 'menu-notice--no-options': true\n }, className)\n }, innerProps), children);\n};\nNoOptionsMessage.defaultProps = {\n children: 'No options'\n};\nvar LoadingMessage = function LoadingMessage(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('loadingMessage', props)), {\n 'menu-notice': true,\n 'menu-notice--loading': true\n }, className)\n }, innerProps), children);\n};\nLoadingMessage.defaultProps = {\n children: 'Loading...'\n}; // ==============================\n// Menu Portal\n// ==============================\n\nvar menuPortalCSS = function menuPortalCSS(_ref6) {\n var rect = _ref6.rect,\n offset = _ref6.offset,\n position = _ref6.position;\n return {\n left: rect.left,\n position: position,\n top: offset,\n width: rect.width,\n zIndex: 1\n };\n};\nvar MenuPortal =\n/*#__PURE__*/\nfunction (_Component2) {\n _inherits(MenuPortal, _Component2);\n\n function MenuPortal() {\n var _getPrototypeOf3;\n\n var _this2;\n\n _classCallCheck(this, MenuPortal);\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(MenuPortal)).call.apply(_getPrototypeOf3, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), \"state\", {\n placement: null\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), \"getPortalPlacement\", function (_ref7) {\n var placement = _ref7.placement;\n var initialPlacement = coercePlacement(_this2.props.menuPlacement); // avoid re-renders if the placement has not changed\n\n if (placement !== initialPlacement) {\n _this2.setState({\n placement: placement\n });\n }\n });\n\n return _this2;\n }\n\n _createClass(MenuPortal, [{\n key: \"getChildContext\",\n value: function getChildContext() {\n return {\n getPortalPlacement: this.getPortalPlacement\n };\n } // callback for occassions where the menu must \"flip\"\n\n }, {\n key: \"render\",\n value: function render() {\n var _this$props2 = this.props,\n appendTo = _this$props2.appendTo,\n children = _this$props2.children,\n controlElement = _this$props2.controlElement,\n menuPlacement = _this$props2.menuPlacement,\n position = _this$props2.menuPosition,\n getStyles = _this$props2.getStyles;\n var isFixed = position === 'fixed'; // bail early if required elements aren't present\n\n if (!appendTo && !isFixed || !controlElement) {\n return null;\n }\n\n var placement = this.state.placement || coercePlacement(menuPlacement);\n var rect = getBoundingClientObj(controlElement);\n var scrollDistance = isFixed ? 0 : window.pageYOffset;\n var offset = rect[placement] + scrollDistance;\n var state = {\n offset: offset,\n position: position,\n rect: rect\n }; // same wrapper element whether fixed or portalled\n\n var menuWrapper = React.createElement(\"div\", {\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css(getStyles('menuPortal', state))\n }, children);\n return appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper;\n }\n }]);\n\n return MenuPortal;\n}(Component);\n\n_defineProperty(MenuPortal, \"childContextTypes\", {\n getPortalPlacement: PropTypes.func\n});\n\nvar isArray = Array.isArray;\nvar keyList = Object.keys;\nvar hasProp = Object.prototype.hasOwnProperty;\n\nfunction equal(a, b) {\n // fast-deep-equal index.js 2.0.1\n if (a === b) return true;\n\n if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {\n var arrA = isArray(a),\n arrB = isArray(b),\n i,\n length,\n key;\n\n if (arrA && arrB) {\n length = a.length;\n if (length != b.length) return false;\n\n for (i = length; i-- !== 0;) {\n if (!equal(a[i], b[i])) return false;\n }\n\n return true;\n }\n\n if (arrA != arrB) return false;\n var dateA = a instanceof Date,\n dateB = b instanceof Date;\n if (dateA != dateB) return false;\n if (dateA && dateB) return a.getTime() == b.getTime();\n var regexpA = a instanceof RegExp,\n regexpB = b instanceof RegExp;\n if (regexpA != regexpB) return false;\n if (regexpA && regexpB) return a.toString() == b.toString();\n var keys = keyList(a);\n length = keys.length;\n\n if (length !== keyList(b).length) {\n return false;\n }\n\n for (i = length; i-- !== 0;) {\n if (!hasProp.call(b, keys[i])) return false;\n } // end fast-deep-equal\n // Custom handling for React\n\n\n for (i = length; i-- !== 0;) {\n key = keys[i];\n\n if (key === '_owner' && a.$$typeof) {\n // React-specific: avoid traversing React elements' _owner.\n // _owner contains circular references\n // and is not needed when comparing the actual elements (and not their owners)\n // .$$typeof and ._store on just reasonable markers of a react element\n continue;\n } else {\n // all other properties should be traversed as usual\n if (!equal(a[key], b[key])) return false;\n }\n } // fast-deep-equal index.js 2.0.1\n\n\n return true;\n }\n\n return a !== a && b !== b;\n} // end fast-deep-equal\n\n\nfunction exportedEqual(a, b) {\n try {\n return equal(a, b);\n } catch (error) {\n if (error.message && error.message.match(/stack|recursion/i)) {\n // warn on circular references, don't crash\n // browsers give this different errors name and messages:\n // chrome/safari: \"RangeError\", \"Maximum call stack size exceeded\"\n // firefox: \"InternalError\", too much recursion\"\n // edge: \"Error\", \"Out of stack space\"\n console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);\n return false;\n } // some other error. we should definitely know about these\n\n\n throw error;\n }\n}\n\nvar diacritics = [{\n base: 'A',\n letters: /[\\u0041\\u24B6\\uFF21\\u00C0\\u00C1\\u00C2\\u1EA6\\u1EA4\\u1EAA\\u1EA8\\u00C3\\u0100\\u0102\\u1EB0\\u1EAE\\u1EB4\\u1EB2\\u0226\\u01E0\\u00C4\\u01DE\\u1EA2\\u00C5\\u01FA\\u01CD\\u0200\\u0202\\u1EA0\\u1EAC\\u1EB6\\u1E00\\u0104\\u023A\\u2C6F]/g\n}, {\n base: 'AA',\n letters: /[\\uA732]/g\n}, {\n base: 'AE',\n letters: /[\\u00C6\\u01FC\\u01E2]/g\n}, {\n base: 'AO',\n letters: /[\\uA734]/g\n}, {\n base: 'AU',\n letters: /[\\uA736]/g\n}, {\n base: 'AV',\n letters: /[\\uA738\\uA73A]/g\n}, {\n base: 'AY',\n letters: /[\\uA73C]/g\n}, {\n base: 'B',\n letters: /[\\u0042\\u24B7\\uFF22\\u1E02\\u1E04\\u1E06\\u0243\\u0182\\u0181]/g\n}, {\n base: 'C',\n letters: /[\\u0043\\u24B8\\uFF23\\u0106\\u0108\\u010A\\u010C\\u00C7\\u1E08\\u0187\\u023B\\uA73E]/g\n}, {\n base: 'D',\n letters: /[\\u0044\\u24B9\\uFF24\\u1E0A\\u010E\\u1E0C\\u1E10\\u1E12\\u1E0E\\u0110\\u018B\\u018A\\u0189\\uA779]/g\n}, {\n base: 'DZ',\n letters: /[\\u01F1\\u01C4]/g\n}, {\n base: 'Dz',\n letters: /[\\u01F2\\u01C5]/g\n}, {\n base: 'E',\n letters: /[\\u0045\\u24BA\\uFF25\\u00C8\\u00C9\\u00CA\\u1EC0\\u1EBE\\u1EC4\\u1EC2\\u1EBC\\u0112\\u1E14\\u1E16\\u0114\\u0116\\u00CB\\u1EBA\\u011A\\u0204\\u0206\\u1EB8\\u1EC6\\u0228\\u1E1C\\u0118\\u1E18\\u1E1A\\u0190\\u018E]/g\n}, {\n base: 'F',\n letters: /[\\u0046\\u24BB\\uFF26\\u1E1E\\u0191\\uA77B]/g\n}, {\n base: 'G',\n letters: /[\\u0047\\u24BC\\uFF27\\u01F4\\u011C\\u1E20\\u011E\\u0120\\u01E6\\u0122\\u01E4\\u0193\\uA7A0\\uA77D\\uA77E]/g\n}, {\n base: 'H',\n letters: /[\\u0048\\u24BD\\uFF28\\u0124\\u1E22\\u1E26\\u021E\\u1E24\\u1E28\\u1E2A\\u0126\\u2C67\\u2C75\\uA78D]/g\n}, {\n base: 'I',\n letters: /[\\u0049\\u24BE\\uFF29\\u00CC\\u00CD\\u00CE\\u0128\\u012A\\u012C\\u0130\\u00CF\\u1E2E\\u1EC8\\u01CF\\u0208\\u020A\\u1ECA\\u012E\\u1E2C\\u0197]/g\n}, {\n base: 'J',\n letters: /[\\u004A\\u24BF\\uFF2A\\u0134\\u0248]/g\n}, {\n base: 'K',\n letters: /[\\u004B\\u24C0\\uFF2B\\u1E30\\u01E8\\u1E32\\u0136\\u1E34\\u0198\\u2C69\\uA740\\uA742\\uA744\\uA7A2]/g\n}, {\n base: 'L',\n letters: /[\\u004C\\u24C1\\uFF2C\\u013F\\u0139\\u013D\\u1E36\\u1E38\\u013B\\u1E3C\\u1E3A\\u0141\\u023D\\u2C62\\u2C60\\uA748\\uA746\\uA780]/g\n}, {\n base: 'LJ',\n letters: /[\\u01C7]/g\n}, {\n base: 'Lj',\n letters: /[\\u01C8]/g\n}, {\n base: 'M',\n letters: /[\\u004D\\u24C2\\uFF2D\\u1E3E\\u1E40\\u1E42\\u2C6E\\u019C]/g\n}, {\n base: 'N',\n letters: /[\\u004E\\u24C3\\uFF2E\\u01F8\\u0143\\u00D1\\u1E44\\u0147\\u1E46\\u0145\\u1E4A\\u1E48\\u0220\\u019D\\uA790\\uA7A4]/g\n}, {\n base: 'NJ',\n letters: /[\\u01CA]/g\n}, {\n base: 'Nj',\n letters: /[\\u01CB]/g\n}, {\n base: 'O',\n letters: /[\\u004F\\u24C4\\uFF2F\\u00D2\\u00D3\\u00D4\\u1ED2\\u1ED0\\u1ED6\\u1ED4\\u00D5\\u1E4C\\u022C\\u1E4E\\u014C\\u1E50\\u1E52\\u014E\\u022E\\u0230\\u00D6\\u022A\\u1ECE\\u0150\\u01D1\\u020C\\u020E\\u01A0\\u1EDC\\u1EDA\\u1EE0\\u1EDE\\u1EE2\\u1ECC\\u1ED8\\u01EA\\u01EC\\u00D8\\u01FE\\u0186\\u019F\\uA74A\\uA74C]/g\n}, {\n base: 'OI',\n letters: /[\\u01A2]/g\n}, {\n base: 'OO',\n letters: /[\\uA74E]/g\n}, {\n base: 'OU',\n letters: /[\\u0222]/g\n}, {\n base: 'P',\n letters: /[\\u0050\\u24C5\\uFF30\\u1E54\\u1E56\\u01A4\\u2C63\\uA750\\uA752\\uA754]/g\n}, {\n base: 'Q',\n letters: /[\\u0051\\u24C6\\uFF31\\uA756\\uA758\\u024A]/g\n}, {\n base: 'R',\n letters: /[\\u0052\\u24C7\\uFF32\\u0154\\u1E58\\u0158\\u0210\\u0212\\u1E5A\\u1E5C\\u0156\\u1E5E\\u024C\\u2C64\\uA75A\\uA7A6\\uA782]/g\n}, {\n base: 'S',\n letters: /[\\u0053\\u24C8\\uFF33\\u1E9E\\u015A\\u1E64\\u015C\\u1E60\\u0160\\u1E66\\u1E62\\u1E68\\u0218\\u015E\\u2C7E\\uA7A8\\uA784]/g\n}, {\n base: 'T',\n letters: /[\\u0054\\u24C9\\uFF34\\u1E6A\\u0164\\u1E6C\\u021A\\u0162\\u1E70\\u1E6E\\u0166\\u01AC\\u01AE\\u023E\\uA786]/g\n}, {\n base: 'TZ',\n letters: /[\\uA728]/g\n}, {\n base: 'U',\n letters: /[\\u0055\\u24CA\\uFF35\\u00D9\\u00DA\\u00DB\\u0168\\u1E78\\u016A\\u1E7A\\u016C\\u00DC\\u01DB\\u01D7\\u01D5\\u01D9\\u1EE6\\u016E\\u0170\\u01D3\\u0214\\u0216\\u01AF\\u1EEA\\u1EE8\\u1EEE\\u1EEC\\u1EF0\\u1EE4\\u1E72\\u0172\\u1E76\\u1E74\\u0244]/g\n}, {\n base: 'V',\n letters: /[\\u0056\\u24CB\\uFF36\\u1E7C\\u1E7E\\u01B2\\uA75E\\u0245]/g\n}, {\n base: 'VY',\n letters: /[\\uA760]/g\n}, {\n base: 'W',\n letters: /[\\u0057\\u24CC\\uFF37\\u1E80\\u1E82\\u0174\\u1E86\\u1E84\\u1E88\\u2C72]/g\n}, {\n base: 'X',\n letters: /[\\u0058\\u24CD\\uFF38\\u1E8A\\u1E8C]/g\n}, {\n base: 'Y',\n letters: /[\\u0059\\u24CE\\uFF39\\u1EF2\\u00DD\\u0176\\u1EF8\\u0232\\u1E8E\\u0178\\u1EF6\\u1EF4\\u01B3\\u024E\\u1EFE]/g\n}, {\n base: 'Z',\n letters: /[\\u005A\\u24CF\\uFF3A\\u0179\\u1E90\\u017B\\u017D\\u1E92\\u1E94\\u01B5\\u0224\\u2C7F\\u2C6B\\uA762]/g\n}, {\n base: 'a',\n letters: /[\\u0061\\u24D0\\uFF41\\u1E9A\\u00E0\\u00E1\\u00E2\\u1EA7\\u1EA5\\u1EAB\\u1EA9\\u00E3\\u0101\\u0103\\u1EB1\\u1EAF\\u1EB5\\u1EB3\\u0227\\u01E1\\u00E4\\u01DF\\u1EA3\\u00E5\\u01FB\\u01CE\\u0201\\u0203\\u1EA1\\u1EAD\\u1EB7\\u1E01\\u0105\\u2C65\\u0250]/g\n}, {\n base: 'aa',\n letters: /[\\uA733]/g\n}, {\n base: 'ae',\n letters: /[\\u00E6\\u01FD\\u01E3]/g\n}, {\n base: 'ao',\n letters: /[\\uA735]/g\n}, {\n base: 'au',\n letters: /[\\uA737]/g\n}, {\n base: 'av',\n letters: /[\\uA739\\uA73B]/g\n}, {\n base: 'ay',\n letters: /[\\uA73D]/g\n}, {\n base: 'b',\n letters: /[\\u0062\\u24D1\\uFF42\\u1E03\\u1E05\\u1E07\\u0180\\u0183\\u0253]/g\n}, {\n base: 'c',\n letters: /[\\u0063\\u24D2\\uFF43\\u0107\\u0109\\u010B\\u010D\\u00E7\\u1E09\\u0188\\u023C\\uA73F\\u2184]/g\n}, {\n base: 'd',\n letters: /[\\u0064\\u24D3\\uFF44\\u1E0B\\u010F\\u1E0D\\u1E11\\u1E13\\u1E0F\\u0111\\u018C\\u0256\\u0257\\uA77A]/g\n}, {\n base: 'dz',\n letters: /[\\u01F3\\u01C6]/g\n}, {\n base: 'e',\n letters: /[\\u0065\\u24D4\\uFF45\\u00E8\\u00E9\\u00EA\\u1EC1\\u1EBF\\u1EC5\\u1EC3\\u1EBD\\u0113\\u1E15\\u1E17\\u0115\\u0117\\u00EB\\u1EBB\\u011B\\u0205\\u0207\\u1EB9\\u1EC7\\u0229\\u1E1D\\u0119\\u1E19\\u1E1B\\u0247\\u025B\\u01DD]/g\n}, {\n base: 'f',\n letters: /[\\u0066\\u24D5\\uFF46\\u1E1F\\u0192\\uA77C]/g\n}, {\n base: 'g',\n letters: /[\\u0067\\u24D6\\uFF47\\u01F5\\u011D\\u1E21\\u011F\\u0121\\u01E7\\u0123\\u01E5\\u0260\\uA7A1\\u1D79\\uA77F]/g\n}, {\n base: 'h',\n letters: /[\\u0068\\u24D7\\uFF48\\u0125\\u1E23\\u1E27\\u021F\\u1E25\\u1E29\\u1E2B\\u1E96\\u0127\\u2C68\\u2C76\\u0265]/g\n}, {\n base: 'hv',\n letters: /[\\u0195]/g\n}, {\n base: 'i',\n letters: /[\\u0069\\u24D8\\uFF49\\u00EC\\u00ED\\u00EE\\u0129\\u012B\\u012D\\u00EF\\u1E2F\\u1EC9\\u01D0\\u0209\\u020B\\u1ECB\\u012F\\u1E2D\\u0268\\u0131]/g\n}, {\n base: 'j',\n letters: /[\\u006A\\u24D9\\uFF4A\\u0135\\u01F0\\u0249]/g\n}, {\n base: 'k',\n letters: /[\\u006B\\u24DA\\uFF4B\\u1E31\\u01E9\\u1E33\\u0137\\u1E35\\u0199\\u2C6A\\uA741\\uA743\\uA745\\uA7A3]/g\n}, {\n base: 'l',\n letters: /[\\u006C\\u24DB\\uFF4C\\u0140\\u013A\\u013E\\u1E37\\u1E39\\u013C\\u1E3D\\u1E3B\\u017F\\u0142\\u019A\\u026B\\u2C61\\uA749\\uA781\\uA747]/g\n}, {\n base: 'lj',\n letters: /[\\u01C9]/g\n}, {\n base: 'm',\n letters: /[\\u006D\\u24DC\\uFF4D\\u1E3F\\u1E41\\u1E43\\u0271\\u026F]/g\n}, {\n base: 'n',\n letters: /[\\u006E\\u24DD\\uFF4E\\u01F9\\u0144\\u00F1\\u1E45\\u0148\\u1E47\\u0146\\u1E4B\\u1E49\\u019E\\u0272\\u0149\\uA791\\uA7A5]/g\n}, {\n base: 'nj',\n letters: /[\\u01CC]/g\n}, {\n base: 'o',\n letters: /[\\u006F\\u24DE\\uFF4F\\u00F2\\u00F3\\u00F4\\u1ED3\\u1ED1\\u1ED7\\u1ED5\\u00F5\\u1E4D\\u022D\\u1E4F\\u014D\\u1E51\\u1E53\\u014F\\u022F\\u0231\\u00F6\\u022B\\u1ECF\\u0151\\u01D2\\u020D\\u020F\\u01A1\\u1EDD\\u1EDB\\u1EE1\\u1EDF\\u1EE3\\u1ECD\\u1ED9\\u01EB\\u01ED\\u00F8\\u01FF\\u0254\\uA74B\\uA74D\\u0275]/g\n}, {\n base: 'oi',\n letters: /[\\u01A3]/g\n}, {\n base: 'ou',\n letters: /[\\u0223]/g\n}, {\n base: 'oo',\n letters: /[\\uA74F]/g\n}, {\n base: 'p',\n letters: /[\\u0070\\u24DF\\uFF50\\u1E55\\u1E57\\u01A5\\u1D7D\\uA751\\uA753\\uA755]/g\n}, {\n base: 'q',\n letters: /[\\u0071\\u24E0\\uFF51\\u024B\\uA757\\uA759]/g\n}, {\n base: 'r',\n letters: /[\\u0072\\u24E1\\uFF52\\u0155\\u1E59\\u0159\\u0211\\u0213\\u1E5B\\u1E5D\\u0157\\u1E5F\\u024D\\u027D\\uA75B\\uA7A7\\uA783]/g\n}, {\n base: 's',\n letters: /[\\u0073\\u24E2\\uFF53\\u00DF\\u015B\\u1E65\\u015D\\u1E61\\u0161\\u1E67\\u1E63\\u1E69\\u0219\\u015F\\u023F\\uA7A9\\uA785\\u1E9B]/g\n}, {\n base: 't',\n letters: /[\\u0074\\u24E3\\uFF54\\u1E6B\\u1E97\\u0165\\u1E6D\\u021B\\u0163\\u1E71\\u1E6F\\u0167\\u01AD\\u0288\\u2C66\\uA787]/g\n}, {\n base: 'tz',\n letters: /[\\uA729]/g\n}, {\n base: 'u',\n letters: /[\\u0075\\u24E4\\uFF55\\u00F9\\u00FA\\u00FB\\u0169\\u1E79\\u016B\\u1E7B\\u016D\\u00FC\\u01DC\\u01D8\\u01D6\\u01DA\\u1EE7\\u016F\\u0171\\u01D4\\u0215\\u0217\\u01B0\\u1EEB\\u1EE9\\u1EEF\\u1EED\\u1EF1\\u1EE5\\u1E73\\u0173\\u1E77\\u1E75\\u0289]/g\n}, {\n base: 'v',\n letters: /[\\u0076\\u24E5\\uFF56\\u1E7D\\u1E7F\\u028B\\uA75F\\u028C]/g\n}, {\n base: 'vy',\n letters: /[\\uA761]/g\n}, {\n base: 'w',\n letters: /[\\u0077\\u24E6\\uFF57\\u1E81\\u1E83\\u0175\\u1E87\\u1E85\\u1E98\\u1E89\\u2C73]/g\n}, {\n base: 'x',\n letters: /[\\u0078\\u24E7\\uFF58\\u1E8B\\u1E8D]/g\n}, {\n base: 'y',\n letters: /[\\u0079\\u24E8\\uFF59\\u1EF3\\u00FD\\u0177\\u1EF9\\u0233\\u1E8F\\u00FF\\u1EF7\\u1E99\\u1EF5\\u01B4\\u024F\\u1EFF]/g\n}, {\n base: 'z',\n letters: /[\\u007A\\u24E9\\uFF5A\\u017A\\u1E91\\u017C\\u017E\\u1E93\\u1E95\\u01B6\\u0225\\u0240\\u2C6C\\uA763]/g\n}];\nvar stripDiacritics = function stripDiacritics(str) {\n for (var i = 0; i < diacritics.length; i++) {\n str = str.replace(diacritics[i].letters, diacritics[i].base);\n }\n\n return str;\n};\n\nvar trimString = function trimString(str) {\n return str.replace(/^\\s+|\\s+$/g, '');\n};\n\nvar defaultStringify = function defaultStringify(option) {\n return \"\".concat(option.label, \" \").concat(option.value);\n};\n\nvar createFilter = function createFilter(config) {\n return function (option, rawInput) {\n var _ignoreCase$ignoreAcc = _objectSpread({\n ignoreCase: true,\n ignoreAccents: true,\n stringify: defaultStringify,\n trim: true,\n matchFrom: 'any'\n }, config),\n ignoreCase = _ignoreCase$ignoreAcc.ignoreCase,\n ignoreAccents = _ignoreCase$ignoreAcc.ignoreAccents,\n stringify = _ignoreCase$ignoreAcc.stringify,\n trim = _ignoreCase$ignoreAcc.trim,\n matchFrom = _ignoreCase$ignoreAcc.matchFrom;\n\n var input = trim ? trimString(rawInput) : rawInput;\n var candidate = trim ? trimString(stringify(option)) : stringify(option);\n\n if (ignoreCase) {\n input = input.toLowerCase();\n candidate = candidate.toLowerCase();\n }\n\n if (ignoreAccents) {\n input = stripDiacritics(input);\n candidate = stripDiacritics(candidate);\n }\n\n return matchFrom === 'start' ? candidate.substr(0, input.length) === input : candidate.indexOf(input) > -1;\n };\n};\n\nvar A11yText = function A11yText(props) {\n return React.createElement(\"span\", _extends({\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css({\n label: 'a11yText',\n zIndex: 9999,\n border: 0,\n clip: 'rect(1px, 1px, 1px, 1px)',\n height: 1,\n width: 1,\n position: 'absolute',\n overflow: 'hidden',\n padding: 0,\n whiteSpace: 'nowrap',\n backgroundColor: 'red',\n color: 'blue'\n })\n }, props));\n};\n\nvar DummyInput =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(DummyInput, _Component);\n\n function DummyInput() {\n _classCallCheck(this, DummyInput);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(DummyInput).apply(this, arguments));\n }\n\n _createClass(DummyInput, [{\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n inProp = _this$props.in,\n out = _this$props.out,\n onExited = _this$props.onExited,\n appear = _this$props.appear,\n enter = _this$props.enter,\n exit = _this$props.exit,\n innerRef = _this$props.innerRef,\n emotion = _this$props.emotion,\n props = _objectWithoutProperties(_this$props, [\"in\", \"out\", \"onExited\", \"appear\", \"enter\", \"exit\", \"innerRef\", \"emotion\"]);\n\n return React.createElement(\"input\", _extends({\n ref: innerRef\n }, props, {\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css({\n label: 'dummyInput',\n // get rid of any default styles\n background: 0,\n border: 0,\n fontSize: 'inherit',\n outline: 0,\n padding: 0,\n // important! without `width` browsers won't allow focus\n width: 1,\n // remove cursor on desktop\n color: 'transparent',\n // remove cursor on mobile whilst maintaining \"scroll into view\" behaviour\n left: -100,\n opacity: 0,\n position: 'relative',\n transform: 'scale(0)'\n })\n }));\n }\n }]);\n\n return DummyInput;\n}(Component);\n\nvar NodeResolver =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(NodeResolver, _Component);\n\n function NodeResolver() {\n _classCallCheck(this, NodeResolver);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(NodeResolver).apply(this, arguments));\n }\n\n _createClass(NodeResolver, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.props.innerRef(findDOMNode(this));\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.props.innerRef(null);\n }\n }, {\n key: \"render\",\n value: function render() {\n return this.props.children;\n }\n }]);\n\n return NodeResolver;\n}(Component);\n\nvar STYLE_KEYS = ['boxSizing', 'height', 'overflow', 'paddingRight', 'position'];\nvar LOCK_STYLES = {\n boxSizing: 'border-box',\n // account for possible declaration `width: 100%;` on body\n overflow: 'hidden',\n position: 'relative',\n height: '100%'\n};\n\nfunction preventTouchMove(e) {\n e.preventDefault();\n}\nfunction allowTouchMove(e) {\n e.stopPropagation();\n}\nfunction preventInertiaScroll() {\n var top = this.scrollTop;\n var totalScroll = this.scrollHeight;\n var currentScroll = top + this.offsetHeight;\n\n if (top === 0) {\n this.scrollTop = 1;\n } else if (currentScroll === totalScroll) {\n this.scrollTop = top - 1;\n }\n} // `ontouchstart` check works on most browsers\n// `maxTouchPoints` works on IE10/11 and Surface\n\nfunction isTouchDevice() {\n return 'ontouchstart' in window || navigator.maxTouchPoints;\n}\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\nvar activeScrollLocks = 0;\n\nvar ScrollLock =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ScrollLock, _Component);\n\n function ScrollLock() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, ScrollLock);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollLock)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"originalStyles\", {});\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"listenerOptions\", {\n capture: false,\n passive: false\n });\n\n return _this;\n }\n\n _createClass(ScrollLock, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n if (!canUseDOM) return;\n var _this$props = this.props,\n accountForScrollbars = _this$props.accountForScrollbars,\n touchScrollTarget = _this$props.touchScrollTarget;\n var target = document.body;\n var targetStyle = target && target.style;\n\n if (accountForScrollbars) {\n // store any styles already applied to the body\n STYLE_KEYS.forEach(function (key) {\n var val = targetStyle && targetStyle[key];\n _this2.originalStyles[key] = val;\n });\n } // apply the lock styles and padding if this is the first scroll lock\n\n\n if (accountForScrollbars && activeScrollLocks < 1) {\n var currentPadding = parseInt(this.originalStyles.paddingRight, 10) || 0;\n var clientWidth = document.body ? document.body.clientWidth : 0;\n var adjustedPadding = window.innerWidth - clientWidth + currentPadding || 0;\n Object.keys(LOCK_STYLES).forEach(function (key) {\n var val = LOCK_STYLES[key];\n\n if (targetStyle) {\n targetStyle[key] = val;\n }\n });\n\n if (targetStyle) {\n targetStyle.paddingRight = \"\".concat(adjustedPadding, \"px\");\n }\n } // account for touch devices\n\n\n if (target && isTouchDevice()) {\n // Mobile Safari ignores { overflow: hidden } declaration on the body.\n target.addEventListener('touchmove', preventTouchMove, this.listenerOptions); // Allow scroll on provided target\n\n if (touchScrollTarget) {\n touchScrollTarget.addEventListener('touchstart', preventInertiaScroll, this.listenerOptions);\n touchScrollTarget.addEventListener('touchmove', allowTouchMove, this.listenerOptions);\n }\n } // increment active scroll locks\n\n\n activeScrollLocks += 1;\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n var _this3 = this;\n\n if (!canUseDOM) return;\n var _this$props2 = this.props,\n accountForScrollbars = _this$props2.accountForScrollbars,\n touchScrollTarget = _this$props2.touchScrollTarget;\n var target = document.body;\n var targetStyle = target && target.style; // safely decrement active scroll locks\n\n activeScrollLocks = Math.max(activeScrollLocks - 1, 0); // reapply original body styles, if any\n\n if (accountForScrollbars && activeScrollLocks < 1) {\n STYLE_KEYS.forEach(function (key) {\n var val = _this3.originalStyles[key];\n\n if (targetStyle) {\n targetStyle[key] = val;\n }\n });\n } // remove touch listeners\n\n\n if (target && isTouchDevice()) {\n target.removeEventListener('touchmove', preventTouchMove, this.listenerOptions);\n\n if (touchScrollTarget) {\n touchScrollTarget.removeEventListener('touchstart', preventInertiaScroll, this.listenerOptions);\n touchScrollTarget.removeEventListener('touchmove', allowTouchMove, this.listenerOptions);\n }\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n return null;\n }\n }]);\n\n return ScrollLock;\n}(Component);\n\n_defineProperty(ScrollLock, \"defaultProps\", {\n accountForScrollbars: true\n});\n\n// NOTE:\n// We shouldn't need this after updating to React v16.3.0, which introduces:\n// - createRef() https://reactjs.org/docs/react-api.html#reactcreateref\n// - forwardRef() https://reactjs.org/docs/react-api.html#reactforwardref\nvar ScrollBlock =\n/*#__PURE__*/\nfunction (_PureComponent) {\n _inherits(ScrollBlock, _PureComponent);\n\n function ScrollBlock() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, ScrollBlock);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollBlock)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n touchScrollTarget: null\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getScrollTarget\", function (ref) {\n if (ref === _this.state.touchScrollTarget) return;\n\n _this.setState({\n touchScrollTarget: ref\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"blurSelectInput\", function () {\n if (document.activeElement) {\n document.activeElement.blur();\n }\n });\n\n return _this;\n }\n\n _createClass(ScrollBlock, [{\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n children = _this$props.children,\n isEnabled = _this$props.isEnabled;\n var touchScrollTarget = this.state.touchScrollTarget; // bail early if not enabled\n\n if (!isEnabled) return children;\n /*\n * Div\n * ------------------------------\n * blocks scrolling on non-body elements behind the menu\n * NodeResolver\n * ------------------------------\n * we need a reference to the scrollable element to \"unlock\" scroll on\n * mobile devices\n * ScrollLock\n * ------------------------------\n * actually does the scroll locking\n */\n\n return React.createElement(\"div\", null, React.createElement(\"div\", {\n onClick: this.blurSelectInput,\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css({\n position: 'fixed',\n left: 0,\n bottom: 0,\n right: 0,\n top: 0\n })\n }), React.createElement(NodeResolver, {\n innerRef: this.getScrollTarget\n }, children), touchScrollTarget ? React.createElement(ScrollLock, {\n touchScrollTarget: touchScrollTarget\n }) : null);\n }\n }]);\n\n return ScrollBlock;\n}(PureComponent);\n\nvar ScrollCaptor =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ScrollCaptor, _Component);\n\n function ScrollCaptor() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, ScrollCaptor);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScrollCaptor)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"isBottom\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"isTop\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"scrollTarget\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"touchStart\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"cancelScroll\", function (event) {\n event.preventDefault();\n event.stopPropagation();\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"handleEventDelta\", function (event, delta) {\n var _this$props = _this.props,\n onBottomArrive = _this$props.onBottomArrive,\n onBottomLeave = _this$props.onBottomLeave,\n onTopArrive = _this$props.onTopArrive,\n onTopLeave = _this$props.onTopLeave;\n var _this$scrollTarget = _this.scrollTarget,\n scrollTop = _this$scrollTarget.scrollTop,\n scrollHeight = _this$scrollTarget.scrollHeight,\n clientHeight = _this$scrollTarget.clientHeight;\n var target = _this.scrollTarget;\n var isDeltaPositive = delta > 0;\n var availableScroll = scrollHeight - clientHeight - scrollTop;\n var shouldCancelScroll = false; // reset bottom/top flags\n\n if (availableScroll > delta && _this.isBottom) {\n if (onBottomLeave) onBottomLeave(event);\n _this.isBottom = false;\n }\n\n if (isDeltaPositive && _this.isTop) {\n if (onTopLeave) onTopLeave(event);\n _this.isTop = false;\n } // bottom limit\n\n\n if (isDeltaPositive && delta > availableScroll) {\n if (onBottomArrive && !_this.isBottom) {\n onBottomArrive(event);\n }\n\n target.scrollTop = scrollHeight;\n shouldCancelScroll = true;\n _this.isBottom = true; // top limit\n } else if (!isDeltaPositive && -delta > scrollTop) {\n if (onTopArrive && !_this.isTop) {\n onTopArrive(event);\n }\n\n target.scrollTop = 0;\n shouldCancelScroll = true;\n _this.isTop = true;\n } // cancel scroll\n\n\n if (shouldCancelScroll) {\n _this.cancelScroll(event);\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onWheel\", function (event) {\n _this.handleEventDelta(event, event.deltaY);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onTouchStart\", function (event) {\n // set touch start so we can calculate touchmove delta\n _this.touchStart = event.changedTouches[0].clientY;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onTouchMove\", function (event) {\n var deltaY = _this.touchStart - event.changedTouches[0].clientY;\n\n _this.handleEventDelta(event, deltaY);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getScrollTarget\", function (ref) {\n _this.scrollTarget = ref;\n });\n\n return _this;\n }\n\n _createClass(ScrollCaptor, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.startListening(this.scrollTarget);\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.stopListening(this.scrollTarget);\n }\n }, {\n key: \"startListening\",\n value: function startListening(el) {\n // bail early if no scroll available\n if (!el) return;\n if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢\n\n if (typeof el.addEventListener === 'function') {\n el.addEventListener('wheel', this.onWheel, false);\n }\n\n if (typeof el.addEventListener === 'function') {\n el.addEventListener('touchstart', this.onTouchStart, false);\n }\n\n if (typeof el.addEventListener === 'function') {\n el.addEventListener('touchmove', this.onTouchMove, false);\n }\n }\n }, {\n key: \"stopListening\",\n value: function stopListening(el) {\n // bail early if no scroll available\n if (el.scrollHeight <= el.clientHeight) return; // all the if statements are to appease Flow 😢\n\n if (typeof el.removeEventListener === 'function') {\n el.removeEventListener('wheel', this.onWheel, false);\n }\n\n if (typeof el.removeEventListener === 'function') {\n el.removeEventListener('touchstart', this.onTouchStart, false);\n }\n\n if (typeof el.removeEventListener === 'function') {\n el.removeEventListener('touchmove', this.onTouchMove, false);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n return React.createElement(NodeResolver, {\n innerRef: this.getScrollTarget\n }, this.props.children);\n }\n }]);\n\n return ScrollCaptor;\n}(Component);\n\nvar ScrollCaptorSwitch =\n/*#__PURE__*/\nfunction (_Component2) {\n _inherits(ScrollCaptorSwitch, _Component2);\n\n function ScrollCaptorSwitch() {\n _classCallCheck(this, ScrollCaptorSwitch);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(ScrollCaptorSwitch).apply(this, arguments));\n }\n\n _createClass(ScrollCaptorSwitch, [{\n key: \"render\",\n value: function render() {\n var _this$props2 = this.props,\n isEnabled = _this$props2.isEnabled,\n props = _objectWithoutProperties(_this$props2, [\"isEnabled\"]);\n\n return isEnabled ? React.createElement(ScrollCaptor, props) : this.props.children;\n }\n }]);\n\n return ScrollCaptorSwitch;\n}(Component);\n\n_defineProperty(ScrollCaptorSwitch, \"defaultProps\", {\n isEnabled: true\n});\n\nvar instructionsAriaMessage = function instructionsAriaMessage(event) {\n var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var isSearchable = context.isSearchable,\n isMulti = context.isMulti,\n label = context.label,\n isDisabled = context.isDisabled;\n\n switch (event) {\n case 'menu':\n return \"Use Up and Down to choose options\".concat(isDisabled ? '' : ', press Enter to select the currently focused option', \", press Escape to exit the menu, press Tab to select the option and exit the menu.\");\n\n case 'input':\n return \"\".concat(label ? label : 'Select', \" is focused \").concat(isSearchable ? ',type to refine list' : '', \", press Down to open the menu, \").concat(isMulti ? ' press left to focus selected values' : '');\n\n case 'value':\n return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';\n }\n};\nvar valueEventAriaMessage = function valueEventAriaMessage(event, context) {\n var value = context.value,\n isDisabled = context.isDisabled;\n if (!value) return;\n\n switch (event) {\n case 'deselect-option':\n case 'pop-value':\n case 'remove-value':\n return \"option \".concat(value, \", deselected.\");\n\n case 'select-option':\n return isDisabled ? \"option \".concat(value, \" is disabled. Select another option.\") : \"option \".concat(value, \", selected.\");\n }\n};\nvar valueFocusAriaMessage = function valueFocusAriaMessage(_ref) {\n var focusedValue = _ref.focusedValue,\n getOptionLabel = _ref.getOptionLabel,\n selectValue = _ref.selectValue;\n return \"value \".concat(getOptionLabel(focusedValue), \" focused, \").concat(selectValue.indexOf(focusedValue) + 1, \" of \").concat(selectValue.length, \".\");\n};\nvar optionFocusAriaMessage = function optionFocusAriaMessage(_ref2) {\n var focusedOption = _ref2.focusedOption,\n getOptionLabel = _ref2.getOptionLabel,\n options = _ref2.options;\n return \"option \".concat(getOptionLabel(focusedOption), \" focused\").concat(focusedOption.isDisabled ? ' disabled' : '', \", \").concat(options.indexOf(focusedOption) + 1, \" of \").concat(options.length, \".\");\n};\nvar resultsAriaMessage = function resultsAriaMessage(_ref3) {\n var inputValue = _ref3.inputValue,\n screenReaderMessage = _ref3.screenReaderMessage;\n return \"\".concat(screenReaderMessage).concat(inputValue ? ' for search term ' + inputValue : '', \".\");\n};\n\nvar formatGroupLabel = function formatGroupLabel(group) {\n return group.label;\n};\nvar getOptionLabel = function getOptionLabel(option) {\n return option.label;\n};\nvar getOptionValue = function getOptionValue(option) {\n return option.value;\n};\nvar isOptionDisabled = function isOptionDisabled(option) {\n return !!option.isDisabled;\n};\n\nvar containerCSS = function containerCSS(_ref) {\n var isDisabled = _ref.isDisabled,\n isRtl = _ref.isRtl;\n return {\n label: 'container',\n direction: isRtl ? 'rtl' : null,\n pointerEvents: isDisabled ? 'none' : null,\n // cancel mouse events when disabled\n position: 'relative'\n };\n};\nvar SelectContainer = function SelectContainer(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps,\n isDisabled = props.isDisabled,\n isRtl = props.isRtl;\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('container', props)), {\n '--is-disabled': isDisabled,\n '--is-rtl': isRtl\n }, className)\n }, innerProps), children);\n}; // ==============================\n// Value Container\n// ==============================\n\nvar valueContainerCSS = function valueContainerCSS(_ref2) {\n var spacing = _ref2.theme.spacing;\n return {\n alignItems: 'center',\n display: 'flex',\n flex: 1,\n flexWrap: 'wrap',\n padding: \"\".concat(spacing.baseUnit / 2, \"px \").concat(spacing.baseUnit * 2, \"px\"),\n WebkitOverflowScrolling: 'touch',\n position: 'relative',\n overflow: 'hidden'\n };\n};\nvar ValueContainer =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ValueContainer, _Component);\n\n function ValueContainer() {\n _classCallCheck(this, ValueContainer);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(ValueContainer).apply(this, arguments));\n }\n\n _createClass(ValueContainer, [{\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n children = _this$props.children,\n className = _this$props.className,\n cx = _this$props.cx,\n isMulti = _this$props.isMulti,\n getStyles = _this$props.getStyles,\n hasValue = _this$props.hasValue;\n return React.createElement(\"div\", {\n className: cx(\n /*#__PURE__*/\n css(getStyles('valueContainer', this.props)), {\n 'value-container': true,\n 'value-container--is-multi': isMulti,\n 'value-container--has-value': hasValue\n }, className)\n }, children);\n }\n }]);\n\n return ValueContainer;\n}(Component); // ==============================\n// Indicator Container\n// ==============================\n\nvar indicatorsContainerCSS = function indicatorsContainerCSS() {\n return {\n alignItems: 'center',\n alignSelf: 'stretch',\n display: 'flex',\n flexShrink: 0\n };\n};\nvar IndicatorsContainer = function IndicatorsContainer(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles;\n return React.createElement(\"div\", {\n className: cx(\n /*#__PURE__*/\n css(getStyles('indicatorsContainer', props)), {\n 'indicators': true\n }, className)\n }, children);\n};\n\n// ==============================\n// Dropdown & Clear Icons\n// ==============================\nvar Svg = function Svg(_ref) {\n var size = _ref.size,\n props = _objectWithoutProperties(_ref, [\"size\"]);\n\n return React.createElement(\"svg\", _extends({\n height: size,\n width: size,\n viewBox: \"0 0 20 20\",\n \"aria-hidden\": \"true\",\n focusable: \"false\",\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css({\n display: 'inline-block',\n fill: 'currentColor',\n lineHeight: 1,\n stroke: 'currentColor',\n strokeWidth: 0\n })\n }, props));\n};\n\nvar CrossIcon = function CrossIcon(props) {\n return React.createElement(Svg, _extends({\n size: 20\n }, props), React.createElement(\"path\", {\n d: \"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n }));\n};\nvar DownChevron = function DownChevron(props) {\n return React.createElement(Svg, _extends({\n size: 20\n }, props), React.createElement(\"path\", {\n d: \"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n }));\n}; // ==============================\n// Dropdown & Clear Buttons\n// ==============================\n\nvar baseCSS = function baseCSS(_ref2) {\n var isFocused = _ref2.isFocused,\n _ref2$theme = _ref2.theme,\n baseUnit = _ref2$theme.spacing.baseUnit,\n colors = _ref2$theme.colors;\n return {\n label: 'indicatorContainer',\n color: isFocused ? colors.neutral60 : colors.neutral20,\n display: 'flex',\n padding: baseUnit * 2,\n transition: 'color 150ms',\n ':hover': {\n color: isFocused ? colors.neutral80 : colors.neutral40\n }\n };\n};\n\nvar dropdownIndicatorCSS = baseCSS;\nvar DropdownIndicator = function DropdownIndicator(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({}, innerProps, {\n className: cx(\n /*#__PURE__*/\n css(getStyles('dropdownIndicator', props)), {\n 'indicator': true,\n 'dropdown-indicator': true\n }, className)\n }), children || React.createElement(DownChevron, null));\n};\nvar clearIndicatorCSS = baseCSS;\nvar ClearIndicator = function ClearIndicator(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({}, innerProps, {\n className: cx(\n /*#__PURE__*/\n css(getStyles('clearIndicator', props)), {\n 'indicator': true,\n 'clear-indicator': true\n }, className)\n }), children || React.createElement(CrossIcon, null));\n}; // ==============================\n// Separator\n// ==============================\n\nvar indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {\n var isDisabled = _ref3.isDisabled,\n _ref3$theme = _ref3.theme,\n baseUnit = _ref3$theme.spacing.baseUnit,\n colors = _ref3$theme.colors;\n return {\n label: 'indicatorSeparator',\n alignSelf: 'stretch',\n backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,\n marginBottom: baseUnit * 2,\n marginTop: baseUnit * 2,\n width: 1\n };\n};\nvar IndicatorSeparator = function IndicatorSeparator(props) {\n var className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"span\", _extends({}, innerProps, {\n className: cx(\n /*#__PURE__*/\n css(getStyles('indicatorSeparator', props)), {\n 'indicator-separator': true\n }, className)\n }));\n}; // ==============================\n// Loading\n// ==============================\n\nvar keyframesName = 'react-select-loading-indicator';\nvar keyframesInjected = false;\nvar loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {\n var isFocused = _ref4.isFocused,\n size = _ref4.size,\n _ref4$theme = _ref4.theme,\n colors = _ref4$theme.colors,\n baseUnit = _ref4$theme.spacing.baseUnit;\n return {\n label: 'loadingIndicator',\n color: isFocused ? colors.neutral60 : colors.neutral20,\n display: 'flex',\n padding: baseUnit * 2,\n transition: 'color 150ms',\n alignSelf: 'center',\n fontSize: size,\n lineHeight: 1,\n marginRight: size,\n textAlign: 'center',\n verticalAlign: 'middle'\n };\n};\n\nvar LoadingDot = function LoadingDot(_ref5) {\n var color = _ref5.color,\n delay = _ref5.delay,\n offset = _ref5.offset;\n return React.createElement(\"span\", {\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css({\n animationDuration: '1s',\n animationDelay: \"\".concat(delay, \"ms\"),\n animationIterationCount: 'infinite',\n animationName: keyframesName,\n animationTimingFunction: 'ease-in-out',\n backgroundColor: color,\n borderRadius: '1em',\n display: 'inline-block',\n marginLeft: offset ? '1em' : null,\n height: '1em',\n verticalAlign: 'top',\n width: '1em'\n })\n });\n};\n\nvar LoadingIndicator = function LoadingIndicator(props) {\n var className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps,\n isFocused = props.isFocused,\n isRtl = props.isRtl,\n colors = props.theme.colors;\n var color = isFocused ? colors.neutral80 : colors.neutral20;\n\n if (!keyframesInjected) {\n // eslint-disable-next-line no-unused-expressions\n injectGlobal(\"@keyframes \", keyframesName, \"{0%,80%,100%{opacity:0;}40%{opacity:1;}};\");\n keyframesInjected = true;\n }\n\n return React.createElement(\"div\", _extends({}, innerProps, {\n className: cx(\n /*#__PURE__*/\n css(getStyles('loadingIndicator', props)), {\n 'indicator': true,\n 'loading-indicator': true\n }, className)\n }), React.createElement(LoadingDot, {\n color: color,\n delay: 0,\n offset: isRtl\n }), React.createElement(LoadingDot, {\n color: color,\n delay: 160,\n offset: true\n }), React.createElement(LoadingDot, {\n color: color,\n delay: 320,\n offset: !isRtl\n }));\n};\nLoadingIndicator.defaultProps = {\n size: 4\n};\n\nvar css$1 = function css$$1(_ref) {\n var isDisabled = _ref.isDisabled,\n isFocused = _ref.isFocused,\n _ref$theme = _ref.theme,\n colors = _ref$theme.colors,\n borderRadius = _ref$theme.borderRadius,\n spacing = _ref$theme.spacing;\n return {\n label: 'control',\n alignItems: 'center',\n backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,\n borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,\n borderRadius: borderRadius,\n borderStyle: 'solid',\n borderWidth: 1,\n boxShadow: isFocused ? \"0 0 0 1px \".concat(colors.primary) : null,\n cursor: 'default',\n display: 'flex',\n flexWrap: 'wrap',\n justifyContent: 'space-between',\n minHeight: spacing.controlHeight,\n outline: '0 !important',\n position: 'relative',\n transition: 'all 100ms',\n '&:hover': {\n borderColor: isFocused ? colors.primary : colors.neutral30\n }\n };\n};\n\nvar Control = function Control(props) {\n var children = props.children,\n cx = props.cx,\n getStyles = props.getStyles,\n className = props.className,\n isDisabled = props.isDisabled,\n isFocused = props.isFocused,\n innerRef = props.innerRef,\n innerProps = props.innerProps,\n menuIsOpen = props.menuIsOpen;\n return React.createElement(\"div\", _extends({\n ref: innerRef,\n className: cx(\n /*#__PURE__*/\n css(getStyles('control', props)), {\n 'control': true,\n 'control--is-disabled': isDisabled,\n 'control--is-focused': isFocused,\n 'control--menu-is-open': menuIsOpen\n }, className)\n }, innerProps), children);\n};\n\nvar groupCSS = function groupCSS(_ref) {\n var spacing = _ref.theme.spacing;\n return {\n paddingBottom: spacing.baseUnit * 2,\n paddingTop: spacing.baseUnit * 2\n };\n};\n\nvar Group = function Group(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n Heading = props.Heading,\n headingProps = props.headingProps,\n label = props.label,\n theme = props.theme,\n selectProps = props.selectProps;\n return React.createElement(\"div\", {\n className: cx(\n /*#__PURE__*/\n css(getStyles('group', props)), {\n 'group': true\n }, className)\n }, React.createElement(Heading, _extends({}, headingProps, {\n selectProps: selectProps,\n theme: theme,\n getStyles: getStyles,\n cx: cx\n }), label), React.createElement(\"div\", null, children));\n};\n\nvar groupHeadingCSS = function groupHeadingCSS(_ref2) {\n var spacing = _ref2.theme.spacing;\n return {\n label: 'group',\n color: '#999',\n cursor: 'default',\n display: 'block',\n fontSize: '75%',\n fontWeight: '500',\n marginBottom: '0.25em',\n paddingLeft: spacing.baseUnit * 3,\n paddingRight: spacing.baseUnit * 3,\n textTransform: 'uppercase'\n };\n};\nvar GroupHeading = function GroupHeading(props) {\n var className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n theme = props.theme,\n selectProps = props.selectProps,\n cleanProps = _objectWithoutProperties(props, [\"className\", \"cx\", \"getStyles\", \"theme\", \"selectProps\"]);\n\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('groupHeading', _objectSpread({\n theme: theme\n }, cleanProps))), {\n 'group-heading': true\n }, className)\n }, cleanProps));\n};\n\nvar inputCSS = function inputCSS(_ref) {\n var isDisabled = _ref.isDisabled,\n _ref$theme = _ref.theme,\n spacing = _ref$theme.spacing,\n colors = _ref$theme.colors;\n return {\n margin: spacing.baseUnit / 2,\n paddingBottom: spacing.baseUnit / 2,\n paddingTop: spacing.baseUnit / 2,\n visibility: isDisabled ? 'hidden' : 'visible',\n color: colors.neutral80\n };\n};\n\nvar inputStyle = function inputStyle(isHidden) {\n return {\n label: 'input',\n background: 0,\n border: 0,\n fontSize: 'inherit',\n opacity: isHidden ? 0 : 1,\n outline: 0,\n padding: 0,\n color: 'inherit'\n };\n};\n\nvar Input = function Input(_ref2) {\n var className = _ref2.className,\n cx = _ref2.cx,\n getStyles = _ref2.getStyles,\n innerRef = _ref2.innerRef,\n isHidden = _ref2.isHidden,\n isDisabled = _ref2.isDisabled,\n theme = _ref2.theme,\n selectProps = _ref2.selectProps,\n props = _objectWithoutProperties(_ref2, [\"className\", \"cx\", \"getStyles\", \"innerRef\", \"isHidden\", \"isDisabled\", \"theme\", \"selectProps\"]);\n\n return React.createElement(\"div\", {\n className:\n /*#__PURE__*/\n\n /*#__PURE__*/\n css(getStyles('input', _objectSpread({\n theme: theme\n }, props)))\n }, React.createElement(AutosizeInput, _extends({\n className: cx(null, {\n 'input': true\n }, className),\n inputRef: innerRef,\n inputStyle: inputStyle(isHidden),\n disabled: isDisabled\n }, props)));\n};\n\nvar multiValueCSS = function multiValueCSS(_ref) {\n var _ref$theme = _ref.theme,\n spacing = _ref$theme.spacing,\n borderRadius = _ref$theme.borderRadius,\n colors = _ref$theme.colors;\n return {\n label: 'multiValue',\n backgroundColor: colors.neutral10,\n borderRadius: borderRadius / 2,\n display: 'flex',\n margin: spacing.baseUnit / 2,\n minWidth: 0 // resolves flex/text-overflow bug\n\n };\n};\nvar multiValueLabelCSS = function multiValueLabelCSS(_ref2) {\n var _ref2$theme = _ref2.theme,\n borderRadius = _ref2$theme.borderRadius,\n colors = _ref2$theme.colors,\n cropWithEllipsis = _ref2.cropWithEllipsis;\n return {\n borderRadius: borderRadius / 2,\n color: colors.neutral80,\n fontSize: '85%',\n overflow: 'hidden',\n padding: 3,\n paddingLeft: 6,\n textOverflow: cropWithEllipsis ? 'ellipsis' : null,\n whiteSpace: 'nowrap'\n };\n};\nvar multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {\n var _ref3$theme = _ref3.theme,\n spacing = _ref3$theme.spacing,\n borderRadius = _ref3$theme.borderRadius,\n colors = _ref3$theme.colors,\n isFocused = _ref3.isFocused;\n return {\n alignItems: 'center',\n borderRadius: borderRadius / 2,\n backgroundColor: isFocused && colors.dangerLight,\n display: 'flex',\n paddingLeft: spacing.baseUnit,\n paddingRight: spacing.baseUnit,\n ':hover': {\n backgroundColor: colors.dangerLight,\n color: colors.danger\n }\n };\n};\nvar MultiValueGeneric = function MultiValueGeneric(_ref4) {\n var children = _ref4.children,\n innerProps = _ref4.innerProps;\n return React.createElement(\"div\", innerProps, children);\n};\nvar MultiValueContainer = MultiValueGeneric;\nvar MultiValueLabel = MultiValueGeneric;\nvar MultiValueRemove =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(MultiValueRemove, _Component);\n\n function MultiValueRemove() {\n _classCallCheck(this, MultiValueRemove);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(MultiValueRemove).apply(this, arguments));\n }\n\n _createClass(MultiValueRemove, [{\n key: \"render\",\n value: function render() {\n var _this$props = this.props,\n children = _this$props.children,\n innerProps = _this$props.innerProps;\n return React.createElement(\"div\", innerProps, children || React.createElement(CrossIcon, {\n size: 14\n }));\n }\n }]);\n\n return MultiValueRemove;\n}(Component);\n\nvar MultiValue =\n/*#__PURE__*/\nfunction (_Component2) {\n _inherits(MultiValue, _Component2);\n\n function MultiValue() {\n _classCallCheck(this, MultiValue);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(MultiValue).apply(this, arguments));\n }\n\n _createClass(MultiValue, [{\n key: \"render\",\n value: function render() {\n var _this$props2 = this.props,\n children = _this$props2.children,\n className = _this$props2.className,\n components = _this$props2.components,\n cx = _this$props2.cx,\n data = _this$props2.data,\n getStyles = _this$props2.getStyles,\n innerProps = _this$props2.innerProps,\n isDisabled = _this$props2.isDisabled,\n removeProps = _this$props2.removeProps,\n selectProps = _this$props2.selectProps;\n var Container = components.Container,\n Label = components.Label,\n Remove = components.Remove;\n\n var containerInnerProps = _objectSpread({\n className: cx(\n /*#__PURE__*/\n css(getStyles('multiValue', this.props)), {\n 'multi-value': true,\n 'multi-value--is-disabled': isDisabled\n }, className)\n }, innerProps);\n\n var labelInnerProps = {\n className: cx(\n /*#__PURE__*/\n css(getStyles('multiValueLabel', this.props)), {\n 'multi-value__label': true\n }, className)\n };\n\n var removeInnerProps = _objectSpread({\n className: cx(\n /*#__PURE__*/\n css(getStyles('multiValueRemove', this.props)), {\n 'multi-value__remove': true\n }, className)\n }, removeProps);\n\n return React.createElement(Container, {\n data: data,\n innerProps: containerInnerProps,\n selectProps: selectProps\n }, React.createElement(Label, {\n data: data,\n innerProps: labelInnerProps,\n selectProps: selectProps\n }, children), React.createElement(Remove, {\n data: data,\n innerProps: removeInnerProps,\n selectProps: selectProps\n }));\n }\n }]);\n\n return MultiValue;\n}(Component);\n\n_defineProperty(MultiValue, \"defaultProps\", {\n cropWithEllipsis: true\n});\n\nvar optionCSS = function optionCSS(_ref) {\n var isDisabled = _ref.isDisabled,\n isFocused = _ref.isFocused,\n isSelected = _ref.isSelected,\n _ref$theme = _ref.theme,\n spacing = _ref$theme.spacing,\n colors = _ref$theme.colors;\n return {\n label: 'option',\n backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',\n color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',\n cursor: 'default',\n display: 'block',\n fontSize: 'inherit',\n padding: \"\".concat(spacing.baseUnit * 2, \"px \").concat(spacing.baseUnit * 3, \"px\"),\n width: '100%',\n userSelect: 'none',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n // provide some affordance on touch devices\n ':active': {\n backgroundColor: !isDisabled && (isSelected ? colors.primary : colors.primary50)\n }\n };\n};\n\nvar Option = function Option(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n isDisabled = props.isDisabled,\n isFocused = props.isFocused,\n isSelected = props.isSelected,\n innerRef = props.innerRef,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({\n ref: innerRef,\n className: cx(\n /*#__PURE__*/\n css(getStyles('option', props)), {\n 'option': true,\n 'option--is-disabled': isDisabled,\n 'option--is-focused': isFocused,\n 'option--is-selected': isSelected\n }, className)\n }, innerProps), children);\n};\n\nvar placeholderCSS = function placeholderCSS(_ref) {\n var _ref$theme = _ref.theme,\n spacing = _ref$theme.spacing,\n colors = _ref$theme.colors;\n return {\n label: 'placeholder',\n color: colors.neutral50,\n marginLeft: spacing.baseUnit / 2,\n marginRight: spacing.baseUnit / 2,\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)'\n };\n};\n\nvar Placeholder = function Placeholder(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('placeholder', props)), {\n 'placeholder': true\n }, className)\n }, innerProps), children);\n};\n\nvar css$2 = function css$$1(_ref) {\n var isDisabled = _ref.isDisabled,\n _ref$theme = _ref.theme,\n spacing = _ref$theme.spacing,\n colors = _ref$theme.colors;\n return {\n label: 'singleValue',\n color: isDisabled ? colors.neutral40 : colors.neutral80,\n marginLeft: spacing.baseUnit / 2,\n marginRight: spacing.baseUnit / 2,\n maxWidth: \"calc(100% - \".concat(spacing.baseUnit * 2, \"px)\"),\n overflow: 'hidden',\n position: 'absolute',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n top: '50%',\n transform: 'translateY(-50%)'\n };\n};\n\nvar SingleValue = function SingleValue(props) {\n var children = props.children,\n className = props.className,\n cx = props.cx,\n getStyles = props.getStyles,\n isDisabled = props.isDisabled,\n innerProps = props.innerProps;\n return React.createElement(\"div\", _extends({\n className: cx(\n /*#__PURE__*/\n css(getStyles('singleValue', props)), {\n 'single-value': true,\n 'single-value--is-disabled': isDisabled\n }, className)\n }, innerProps), children);\n};\n\nvar components = {\n ClearIndicator: ClearIndicator,\n Control: Control,\n DropdownIndicator: DropdownIndicator,\n DownChevron: DownChevron,\n CrossIcon: CrossIcon,\n Group: Group,\n GroupHeading: GroupHeading,\n IndicatorsContainer: IndicatorsContainer,\n IndicatorSeparator: IndicatorSeparator,\n Input: Input,\n LoadingIndicator: LoadingIndicator,\n Menu: Menu,\n MenuList: MenuList,\n MenuPortal: MenuPortal,\n LoadingMessage: LoadingMessage,\n NoOptionsMessage: NoOptionsMessage,\n MultiValue: MultiValue,\n MultiValueContainer: MultiValueContainer,\n MultiValueLabel: MultiValueLabel,\n MultiValueRemove: MultiValueRemove,\n Option: Option,\n Placeholder: Placeholder,\n SelectContainer: SelectContainer,\n SingleValue: SingleValue,\n ValueContainer: ValueContainer\n};\nvar defaultComponents = function defaultComponents(props) {\n return _objectSpread({}, components, props.components);\n};\n\nvar defaultStyles = {\n clearIndicator: clearIndicatorCSS,\n container: containerCSS,\n control: css$1,\n dropdownIndicator: dropdownIndicatorCSS,\n group: groupCSS,\n groupHeading: groupHeadingCSS,\n indicatorsContainer: indicatorsContainerCSS,\n indicatorSeparator: indicatorSeparatorCSS,\n input: inputCSS,\n loadingIndicator: loadingIndicatorCSS,\n loadingMessage: loadingMessageCSS,\n menu: menuCSS,\n menuList: menuListCSS,\n menuPortal: menuPortalCSS,\n multiValue: multiValueCSS,\n multiValueLabel: multiValueLabelCSS,\n multiValueRemove: multiValueRemoveCSS,\n noOptionsMessage: noOptionsMessageCSS,\n option: optionCSS,\n placeholder: placeholderCSS,\n singleValue: css$2,\n valueContainer: valueContainerCSS\n}; // Merge Utility\n// Allows consumers to extend a base Select with additional styles\n\nfunction mergeStyles(source) {\n var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n // initialize with source styles\n var styles = _objectSpread({}, source); // massage in target styles\n\n\n Object.keys(target).forEach(function (key) {\n if (source[key]) {\n styles[key] = function (rsCss, props) {\n return target[key](source[key](rsCss, props), props);\n };\n } else {\n styles[key] = target[key];\n }\n });\n return styles;\n}\n\nvar colors = {\n primary: '#2684FF',\n primary75: '#4C9AFF',\n primary50: '#B2D4FF',\n primary25: '#DEEBFF',\n danger: '#DE350B',\n dangerLight: '#FFBDAD',\n neutral0: 'hsl(0, 0%, 100%)',\n neutral5: 'hsl(0, 0%, 95%)',\n neutral10: 'hsl(0, 0%, 90%)',\n neutral20: 'hsl(0, 0%, 80%)',\n neutral30: 'hsl(0, 0%, 70%)',\n neutral40: 'hsl(0, 0%, 60%)',\n neutral50: 'hsl(0, 0%, 50%)',\n neutral60: 'hsl(0, 0%, 40%)',\n neutral70: 'hsl(0, 0%, 30%)',\n neutral80: 'hsl(0, 0%, 20%)',\n neutral90: 'hsl(0, 0%, 10%)'\n};\nvar borderRadius = 4;\nvar baseUnit = 4;\n/* Used to calculate consistent margin/padding on elements */\n\nvar controlHeight = 38;\n/* The minimum height of the control */\n\nvar menuGutter = baseUnit * 2;\n/* The amount of space between the control and menu */\n\nvar spacing = {\n baseUnit: baseUnit,\n controlHeight: controlHeight,\n menuGutter: menuGutter\n};\nvar defaultTheme = {\n borderRadius: borderRadius,\n colors: colors,\n spacing: spacing\n};\n\nvar defaultProps = {\n backspaceRemovesValue: true,\n blurInputOnSelect: isTouchCapable(),\n captureMenuScroll: !isTouchCapable(),\n closeMenuOnSelect: true,\n closeMenuOnScroll: false,\n components: {},\n controlShouldRenderValue: true,\n escapeClearsValue: false,\n filterOption: createFilter(),\n formatGroupLabel: formatGroupLabel,\n getOptionLabel: getOptionLabel,\n getOptionValue: getOptionValue,\n isDisabled: false,\n isLoading: false,\n isMulti: false,\n isRtl: false,\n isSearchable: true,\n isOptionDisabled: isOptionDisabled,\n loadingMessage: function loadingMessage() {\n return 'Loading...';\n },\n maxMenuHeight: 300,\n minMenuHeight: 140,\n menuIsOpen: false,\n menuPlacement: 'bottom',\n menuPosition: 'absolute',\n menuShouldBlockScroll: false,\n menuShouldScrollIntoView: !isMobileDevice(),\n noOptionsMessage: function noOptionsMessage() {\n return 'No options';\n },\n openMenuOnFocus: false,\n openMenuOnClick: true,\n options: [],\n pageSize: 5,\n placeholder: 'Select...',\n screenReaderStatus: function screenReaderStatus(_ref) {\n var count = _ref.count;\n return \"\".concat(count, \" result\").concat(count !== 1 ? 's' : '', \" available\");\n },\n styles: {},\n tabIndex: '0',\n tabSelectsValue: true\n};\nvar instanceId = 1;\n\nvar Select =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(Select, _Component);\n\n // Misc. Instance Properties\n // ------------------------------\n // TODO\n // Refs\n // ------------------------------\n // Lifecycle\n // ------------------------------\n function Select(_props) {\n var _this;\n\n _classCallCheck(this, Select);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, _props));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n ariaLiveSelection: '',\n ariaLiveContext: '',\n focusedOption: null,\n focusedValue: null,\n inputIsHidden: false,\n isFocused: false,\n menuOptions: {\n render: [],\n focusable: []\n },\n selectValue: []\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"blockOptionHover\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"isComposing\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"clearFocusValueOnUpdate\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"commonProps\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"components\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"hasGroups\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"initialTouchX\", 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"initialTouchY\", 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"inputIsHiddenAfterUpdate\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"instancePrefix\", '');\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"openAfterFocus\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"scrollToFocusedOptionOnUpdate\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"userIsDragging\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"controlRef\", null);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getControlRef\", function (ref) {\n _this.controlRef = ref;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"focusedOptionRef\", null);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getFocusedOptionRef\", function (ref) {\n _this.focusedOptionRef = ref;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"menuListRef\", null);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getMenuListRef\", function (ref) {\n _this.menuListRef = ref;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"inputRef\", null);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getInputRef\", function (ref) {\n _this.inputRef = ref;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"cacheComponents\", function (components$$1) {\n _this.components = defaultComponents({\n components: components$$1\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"focus\", _this.focusInput);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"blur\", _this.blurInput);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onChange\", function (newValue, actionMeta) {\n var _this$props = _this.props,\n onChange = _this$props.onChange,\n name = _this$props.name;\n onChange(newValue, _objectSpread({}, actionMeta, {\n name: name\n }));\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"setValue\", function (newValue) {\n var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value';\n var option = arguments.length > 2 ? arguments[2] : undefined;\n var _this$props2 = _this.props,\n closeMenuOnSelect = _this$props2.closeMenuOnSelect,\n isMulti = _this$props2.isMulti;\n\n _this.onInputChange('', {\n action: 'set-value'\n });\n\n if (closeMenuOnSelect) {\n _this.inputIsHiddenAfterUpdate = !isMulti;\n\n _this.onMenuClose();\n } // when the select value should change, we should reset focusedValue\n\n\n _this.clearFocusValueOnUpdate = true;\n\n _this.onChange(newValue, {\n action: action,\n option: option\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"selectOption\", function (newValue) {\n var _this$props3 = _this.props,\n blurInputOnSelect = _this$props3.blurInputOnSelect,\n isMulti = _this$props3.isMulti;\n var selectValue = _this.state.selectValue;\n\n if (isMulti) {\n if (_this.isOptionSelected(newValue, selectValue)) {\n var candidate = _this.getOptionValue(newValue);\n\n _this.setValue(selectValue.filter(function (i) {\n return _this.getOptionValue(i) !== candidate;\n }), 'deselect-option', newValue);\n\n _this.announceAriaLiveSelection({\n event: 'deselect-option',\n context: {\n value: _this.getOptionLabel(newValue)\n }\n });\n } else {\n if (!_this.isOptionDisabled(newValue, selectValue)) {\n _this.setValue([].concat(_toConsumableArray(selectValue), [newValue]), 'select-option', newValue);\n\n _this.announceAriaLiveSelection({\n event: 'select-option',\n context: {\n value: _this.getOptionLabel(newValue)\n }\n });\n } else {\n // announce that option is disabled\n _this.announceAriaLiveSelection({\n event: 'select-option',\n context: {\n value: _this.getOptionLabel(newValue),\n isDisabled: true\n }\n });\n }\n }\n } else {\n if (!_this.isOptionDisabled(newValue, selectValue)) {\n _this.setValue(newValue, 'select-option');\n\n _this.announceAriaLiveSelection({\n event: 'select-option',\n context: {\n value: _this.getOptionLabel(newValue)\n }\n });\n } else {\n // announce that option is disabled\n _this.announceAriaLiveSelection({\n event: 'select-option',\n context: {\n value: _this.getOptionLabel(newValue),\n isDisabled: true\n }\n });\n }\n }\n\n if (blurInputOnSelect) {\n _this.blurInput();\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"removeValue\", function (removedValue) {\n var selectValue = _this.state.selectValue;\n\n var candidate = _this.getOptionValue(removedValue);\n\n _this.onChange(selectValue.filter(function (i) {\n return _this.getOptionValue(i) !== candidate;\n }), {\n action: 'remove-value',\n removedValue: removedValue\n });\n\n _this.announceAriaLiveSelection({\n event: 'remove-value',\n context: {\n value: removedValue ? _this.getOptionLabel(removedValue) : ''\n }\n });\n\n _this.focusInput();\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"clearValue\", function () {\n var isMulti = _this.props.isMulti;\n\n _this.onChange(isMulti ? [] : null, {\n action: 'clear'\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"popValue\", function () {\n var selectValue = _this.state.selectValue;\n var lastSelectedValue = selectValue[selectValue.length - 1];\n\n _this.announceAriaLiveSelection({\n event: 'pop-value',\n context: {\n value: lastSelectedValue ? _this.getOptionLabel(lastSelectedValue) : ''\n }\n });\n\n _this.onChange(selectValue.slice(0, selectValue.length - 1), {\n action: 'pop-value',\n removedValue: lastSelectedValue\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getOptionLabel\", function (data) {\n return _this.props.getOptionLabel(data);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getOptionValue\", function (data) {\n return _this.props.getOptionValue(data);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getStyles\", function (key, props) {\n var base = defaultStyles[key](props);\n base.boxSizing = 'border-box';\n var custom = _this.props.styles[key];\n return custom ? custom(base, props) : base;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getElementId\", function (element) {\n return \"\".concat(_this.instancePrefix, \"-\").concat(element);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getActiveDescendentId\", function () {\n var menuIsOpen = _this.props.menuIsOpen;\n var _this$state = _this.state,\n menuOptions = _this$state.menuOptions,\n focusedOption = _this$state.focusedOption;\n if (!focusedOption || !menuIsOpen) return undefined;\n var index = menuOptions.focusable.indexOf(focusedOption);\n var option = menuOptions.render[index];\n return option && option.key;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"announceAriaLiveSelection\", function (_ref2) {\n var event = _ref2.event,\n context = _ref2.context;\n\n _this.setState({\n ariaLiveSelection: valueEventAriaMessage(event, context)\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"announceAriaLiveContext\", function (_ref3) {\n var event = _ref3.event,\n context = _ref3.context;\n\n _this.setState({\n ariaLiveContext: instructionsAriaMessage(event, _objectSpread({}, context, {\n label: _this.props['aria-label']\n }))\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onMenuMouseDown\", function (event) {\n if (event.button !== 0) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n _this.focusInput();\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onMenuMouseMove\", function (event) {\n _this.blockOptionHover = false;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onControlMouseDown\", function (event) {\n var openMenuOnClick = _this.props.openMenuOnClick;\n\n if (!_this.state.isFocused) {\n if (openMenuOnClick) {\n _this.openAfterFocus = true;\n }\n\n _this.focusInput();\n } else if (!_this.props.menuIsOpen) {\n if (openMenuOnClick) {\n _this.openMenu('first');\n }\n } else {\n //$FlowFixMe\n if (event.target.tagName !== 'INPUT') {\n _this.onMenuClose();\n }\n } //$FlowFixMe\n\n\n if (event.target.tagName !== 'INPUT') {\n event.preventDefault();\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onDropdownIndicatorMouseDown\", function (event) {\n // ignore mouse events that weren't triggered by the primary button\n if (event && event.type === 'mousedown' && event.button !== 0) {\n return;\n }\n\n if (_this.props.isDisabled) return;\n var _this$props4 = _this.props,\n isMulti = _this$props4.isMulti,\n menuIsOpen = _this$props4.menuIsOpen;\n\n _this.focusInput();\n\n if (menuIsOpen) {\n _this.inputIsHiddenAfterUpdate = !isMulti;\n\n _this.onMenuClose();\n } else {\n _this.openMenu('first');\n }\n\n event.preventDefault();\n event.stopPropagation();\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onClearIndicatorMouseDown\", function (event) {\n // ignore mouse events that weren't triggered by the primary button\n if (event && event.type === 'mousedown' && event.button !== 0) {\n return;\n }\n\n _this.clearValue();\n\n event.stopPropagation();\n _this.openAfterFocus = false;\n setTimeout(function () {\n return _this.focusInput();\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onScroll\", function (event) {\n if (typeof _this.props.closeMenuOnScroll === 'boolean') {\n if (event.target instanceof HTMLElement && isDocumentElement(event.target)) {\n _this.props.onMenuClose();\n }\n } else if (typeof _this.props.closeMenuOnScroll === 'function') {\n if (_this.props.closeMenuOnScroll(event)) {\n _this.props.onMenuClose();\n }\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onCompositionStart\", function () {\n _this.isComposing = true;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onCompositionEnd\", function () {\n _this.isComposing = false;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onTouchStart\", function (_ref4) {\n var touches = _ref4.touches;\n var touch = touches.item(0);\n\n if (!touch) {\n return;\n }\n\n _this.initialTouchX = touch.clientX;\n _this.initialTouchY = touch.clientY;\n _this.userIsDragging = false;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onTouchMove\", function (_ref5) {\n var touches = _ref5.touches;\n var touch = touches.item(0);\n\n if (!touch) {\n return;\n }\n\n var deltaX = Math.abs(touch.clientX - _this.initialTouchX);\n var deltaY = Math.abs(touch.clientY - _this.initialTouchY);\n var moveThreshold = 5;\n _this.userIsDragging = deltaX > moveThreshold || deltaY > moveThreshold;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onTouchEnd\", function (event) {\n if (_this.userIsDragging) return; // close the menu if the user taps outside\n // we're checking on event.target here instead of event.currentTarget, because we want to assert information\n // on events on child elements, not the document (which we've attached this handler to).\n\n if (_this.controlRef && !_this.controlRef.contains(event.target) && _this.menuListRef && !_this.menuListRef.contains(event.target)) {\n _this.blurInput();\n } // reset move vars\n\n\n _this.initialTouchX = 0;\n _this.initialTouchY = 0;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onControlTouchEnd\", function (event) {\n if (_this.userIsDragging) return;\n\n _this.onControlMouseDown(event);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onClearIndicatorTouchEnd\", function (event) {\n if (_this.userIsDragging) return;\n\n _this.onClearIndicatorMouseDown(event);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onDropdownIndicatorTouchEnd\", function (event) {\n if (_this.userIsDragging) return;\n\n _this.onDropdownIndicatorMouseDown(event);\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"handleInputChange\", function (event) {\n var inputValue = event.currentTarget.value;\n _this.inputIsHiddenAfterUpdate = false;\n\n _this.onInputChange(inputValue, {\n action: 'input-change'\n });\n\n _this.onMenuOpen();\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onInputFocus\", function (event) {\n var _this$props5 = _this.props,\n isSearchable = _this$props5.isSearchable,\n isMulti = _this$props5.isMulti;\n\n if (_this.props.onFocus) {\n _this.props.onFocus(event);\n }\n\n _this.inputIsHiddenAfterUpdate = false;\n\n _this.announceAriaLiveContext({\n event: 'input',\n context: {\n isSearchable: isSearchable,\n isMulti: isMulti\n }\n });\n\n _this.setState({\n isFocused: true\n });\n\n if (_this.openAfterFocus || _this.props.openMenuOnFocus) {\n _this.openMenu('first');\n }\n\n _this.openAfterFocus = false;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onInputBlur\", function (event) {\n if (_this.menuListRef && _this.menuListRef.contains(document.activeElement)) {\n _this.inputRef.focus();\n\n return;\n }\n\n if (_this.props.onBlur) {\n _this.props.onBlur(event);\n }\n\n _this.onInputChange('', {\n action: 'input-blur'\n });\n\n _this.onMenuClose();\n\n _this.setState({\n focusedValue: null,\n isFocused: false\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onOptionHover\", function (focusedOption) {\n if (_this.blockOptionHover || _this.state.focusedOption === focusedOption) {\n return;\n }\n\n _this.setState({\n focusedOption: focusedOption\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"shouldHideSelectedOptions\", function () {\n var _this$props6 = _this.props,\n hideSelectedOptions = _this$props6.hideSelectedOptions,\n isMulti = _this$props6.isMulti;\n if (hideSelectedOptions === undefined) return isMulti;\n return hideSelectedOptions;\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onKeyDown\", function (event) {\n var _this$props7 = _this.props,\n isMulti = _this$props7.isMulti,\n backspaceRemovesValue = _this$props7.backspaceRemovesValue,\n escapeClearsValue = _this$props7.escapeClearsValue,\n inputValue = _this$props7.inputValue,\n isClearable = _this$props7.isClearable,\n isDisabled = _this$props7.isDisabled,\n menuIsOpen = _this$props7.menuIsOpen,\n onKeyDown = _this$props7.onKeyDown,\n tabSelectsValue = _this$props7.tabSelectsValue,\n openMenuOnFocus = _this$props7.openMenuOnFocus;\n var _this$state2 = _this.state,\n focusedOption = _this$state2.focusedOption,\n focusedValue = _this$state2.focusedValue,\n selectValue = _this$state2.selectValue;\n if (isDisabled) return;\n\n if (typeof onKeyDown === 'function') {\n onKeyDown(event);\n\n if (event.defaultPrevented) {\n return;\n }\n } // Block option hover events when the user has just pressed a key\n\n\n _this.blockOptionHover = true;\n\n switch (event.key) {\n case 'ArrowLeft':\n if (!isMulti || inputValue) return;\n\n _this.focusValue('previous');\n\n break;\n\n case 'ArrowRight':\n if (!isMulti || inputValue) return;\n\n _this.focusValue('next');\n\n break;\n\n case 'Delete':\n case 'Backspace':\n if (inputValue) return;\n\n if (focusedValue) {\n _this.removeValue(focusedValue);\n } else {\n if (!backspaceRemovesValue) return;\n\n if (isMulti) {\n _this.popValue();\n } else if (isClearable) {\n _this.clearValue();\n }\n }\n\n break;\n\n case 'Tab':\n if (_this.isComposing) return;\n\n if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption || // don't capture the event if the menu opens on focus and the focused\n // option is already selected; it breaks the flow of navigation\n openMenuOnFocus && _this.isOptionSelected(focusedOption, selectValue)) {\n return;\n }\n\n _this.selectOption(focusedOption);\n\n break;\n\n case 'Enter':\n if (event.keyCode === 229) {\n // ignore the keydown event from an Input Method Editor(IME)\n // ref. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode\n break;\n }\n\n if (menuIsOpen) {\n if (!focusedOption) return;\n if (_this.isComposing) return;\n\n _this.selectOption(focusedOption);\n\n break;\n }\n\n return;\n\n case 'Escape':\n if (menuIsOpen) {\n _this.inputIsHiddenAfterUpdate = false;\n\n _this.onInputChange('', {\n action: 'menu-close'\n });\n\n _this.onMenuClose();\n } else if (isClearable && escapeClearsValue) {\n _this.clearValue();\n }\n\n break;\n\n case ' ':\n // space\n if (inputValue) {\n return;\n }\n\n if (!menuIsOpen) {\n _this.openMenu('first');\n\n break;\n }\n\n if (!focusedOption) return;\n\n _this.selectOption(focusedOption);\n\n break;\n\n case 'ArrowUp':\n if (menuIsOpen) {\n _this.focusOption('up');\n } else {\n _this.openMenu('last');\n }\n\n break;\n\n case 'ArrowDown':\n if (menuIsOpen) {\n _this.focusOption('down');\n } else {\n _this.openMenu('first');\n }\n\n break;\n\n case 'PageUp':\n if (!menuIsOpen) return;\n\n _this.focusOption('pageup');\n\n break;\n\n case 'PageDown':\n if (!menuIsOpen) return;\n\n _this.focusOption('pagedown');\n\n break;\n\n case 'Home':\n if (!menuIsOpen) return;\n\n _this.focusOption('first');\n\n break;\n\n case 'End':\n if (!menuIsOpen) return;\n\n _this.focusOption('last');\n\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n });\n\n var value = _props.value;\n _this.cacheComponents = memoizeOne(_this.cacheComponents, exportedEqual).bind(_assertThisInitialized(_assertThisInitialized(_this)));\n\n _this.cacheComponents(_props.components);\n\n _this.instancePrefix = 'react-select-' + (_this.props.instanceId || ++instanceId);\n\n var _selectValue = cleanValue(value);\n\n var _menuOptions = _this.buildMenuOptions(_props, _selectValue);\n\n _this.state.menuOptions = _menuOptions;\n _this.state.selectValue = _selectValue;\n return _this;\n }\n\n _createClass(Select, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.startListeningComposition();\n this.startListeningToTouch();\n\n if (this.props.closeMenuOnScroll && document && document.addEventListener) {\n // Listen to all scroll events, and filter them out inside of 'onScroll'\n document.addEventListener('scroll', this.onScroll, true);\n }\n\n if (this.props.autoFocus) {\n this.focusInput();\n }\n }\n }, {\n key: \"componentWillReceiveProps\",\n value: function componentWillReceiveProps(nextProps) {\n var _this$props8 = this.props,\n options = _this$props8.options,\n value = _this$props8.value,\n inputValue = _this$props8.inputValue; // re-cache custom components\n\n this.cacheComponents(nextProps.components); // rebuild the menu options\n\n if (nextProps.value !== value || nextProps.options !== options || nextProps.inputValue !== inputValue) {\n var selectValue = cleanValue(nextProps.value);\n var menuOptions = this.buildMenuOptions(nextProps, selectValue);\n var focusedValue = this.getNextFocusedValue(selectValue);\n var focusedOption = this.getNextFocusedOption(menuOptions.focusable);\n this.setState({\n menuOptions: menuOptions,\n selectValue: selectValue,\n focusedOption: focusedOption,\n focusedValue: focusedValue\n });\n } // some updates should toggle the state of the input visibility\n\n\n if (this.inputIsHiddenAfterUpdate != null) {\n this.setState({\n inputIsHidden: this.inputIsHiddenAfterUpdate\n });\n delete this.inputIsHiddenAfterUpdate;\n }\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n var _this$props9 = this.props,\n isDisabled = _this$props9.isDisabled,\n menuIsOpen = _this$props9.menuIsOpen;\n var isFocused = this.state.isFocused;\n\n if ( // ensure focus is restored correctly when the control becomes enabled\n isFocused && !isDisabled && prevProps.isDisabled || // ensure focus is on the Input when the menu opens\n isFocused && menuIsOpen && !prevProps.menuIsOpen) {\n this.focusInput();\n } // scroll the focused option into view if necessary\n\n\n if (this.menuListRef && this.focusedOptionRef && this.scrollToFocusedOptionOnUpdate) {\n scrollIntoView(this.menuListRef, this.focusedOptionRef);\n }\n\n this.scrollToFocusedOptionOnUpdate = false;\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.stopListeningComposition();\n this.stopListeningToTouch();\n document.removeEventListener('scroll', this.onScroll, true);\n }\n }, {\n key: \"onMenuOpen\",\n // ==============================\n // Consumer Handlers\n // ==============================\n value: function onMenuOpen() {\n this.props.onMenuOpen();\n }\n }, {\n key: \"onMenuClose\",\n value: function onMenuClose() {\n var _this$props10 = this.props,\n isSearchable = _this$props10.isSearchable,\n isMulti = _this$props10.isMulti;\n this.announceAriaLiveContext({\n event: 'input',\n context: {\n isSearchable: isSearchable,\n isMulti: isMulti\n }\n });\n this.onInputChange('', {\n action: 'menu-close'\n });\n this.props.onMenuClose();\n }\n }, {\n key: \"onInputChange\",\n value: function onInputChange(newValue, actionMeta) {\n this.props.onInputChange(newValue, actionMeta);\n } // ==============================\n // Methods\n // ==============================\n\n }, {\n key: \"focusInput\",\n value: function focusInput() {\n if (!this.inputRef) return;\n this.inputRef.focus();\n }\n }, {\n key: \"blurInput\",\n value: function blurInput() {\n if (!this.inputRef) return;\n this.inputRef.blur();\n } // aliased for consumers\n\n }, {\n key: \"openMenu\",\n value: function openMenu(focusOption) {\n var _this$state3 = this.state,\n menuOptions = _this$state3.menuOptions,\n selectValue = _this$state3.selectValue,\n isFocused = _this$state3.isFocused;\n var isMulti = this.props.isMulti;\n var openAtIndex = focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;\n\n if (!isMulti) {\n var selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);\n\n if (selectedIndex > -1) {\n openAtIndex = selectedIndex;\n }\n } // only scroll if the menu isn't already open\n\n\n this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);\n this.inputIsHiddenAfterUpdate = false;\n this.onMenuOpen();\n this.setState({\n focusedValue: null,\n focusedOption: menuOptions.focusable[openAtIndex]\n });\n this.announceAriaLiveContext({\n event: 'menu'\n });\n }\n }, {\n key: \"focusValue\",\n value: function focusValue(direction) {\n var _this$props11 = this.props,\n isMulti = _this$props11.isMulti,\n isSearchable = _this$props11.isSearchable;\n var _this$state4 = this.state,\n selectValue = _this$state4.selectValue,\n focusedValue = _this$state4.focusedValue; // Only multiselects support value focusing\n\n if (!isMulti) return;\n this.setState({\n focusedOption: null\n });\n var focusedIndex = selectValue.indexOf(focusedValue);\n\n if (!focusedValue) {\n focusedIndex = -1;\n this.announceAriaLiveContext({\n event: 'value'\n });\n }\n\n var lastIndex = selectValue.length - 1;\n var nextFocus = -1;\n if (!selectValue.length) return;\n\n switch (direction) {\n case 'previous':\n if (focusedIndex === 0) {\n // don't cycle from the start to the end\n nextFocus = 0;\n } else if (focusedIndex === -1) {\n // if nothing is focused, focus the last value first\n nextFocus = lastIndex;\n } else {\n nextFocus = focusedIndex - 1;\n }\n\n break;\n\n case 'next':\n if (focusedIndex > -1 && focusedIndex < lastIndex) {\n nextFocus = focusedIndex + 1;\n }\n\n break;\n }\n\n if (nextFocus === -1) {\n this.announceAriaLiveContext({\n event: 'input',\n context: {\n isSearchable: isSearchable,\n isMulti: isMulti\n }\n });\n }\n\n this.setState({\n inputIsHidden: nextFocus === -1 ? false : true,\n focusedValue: selectValue[nextFocus]\n });\n }\n }, {\n key: \"focusOption\",\n value: function focusOption() {\n var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'first';\n var pageSize = this.props.pageSize;\n var _this$state5 = this.state,\n focusedOption = _this$state5.focusedOption,\n menuOptions = _this$state5.menuOptions;\n var options = menuOptions.focusable;\n if (!options.length) return;\n var nextFocus = 0; // handles 'first'\n\n var focusedIndex = options.indexOf(focusedOption);\n\n if (!focusedOption) {\n focusedIndex = -1;\n this.announceAriaLiveContext({\n event: 'menu'\n });\n }\n\n if (direction === 'up') {\n nextFocus = focusedIndex > 0 ? focusedIndex - 1 : options.length - 1;\n } else if (direction === 'down') {\n nextFocus = (focusedIndex + 1) % options.length;\n } else if (direction === 'pageup') {\n nextFocus = focusedIndex - pageSize;\n if (nextFocus < 0) nextFocus = 0;\n } else if (direction === 'pagedown') {\n nextFocus = focusedIndex + pageSize;\n if (nextFocus > options.length - 1) nextFocus = options.length - 1;\n } else if (direction === 'last') {\n nextFocus = options.length - 1;\n }\n\n this.scrollToFocusedOptionOnUpdate = true;\n this.setState({\n focusedOption: options[nextFocus],\n focusedValue: null\n });\n this.announceAriaLiveContext({\n event: 'menu',\n context: {\n isDisabled: isOptionDisabled(options[nextFocus])\n }\n });\n }\n }, {\n key: \"getTheme\",\n // ==============================\n // Getters\n // ==============================\n value: function getTheme() {\n // Use the default theme if there are no customizations.\n if (!this.props.theme) {\n return defaultTheme;\n } // If the theme prop is a function, assume the function\n // knows how to merge the passed-in default theme with\n // its own modifications.\n\n\n if (typeof this.props.theme === 'function') {\n return this.props.theme(defaultTheme);\n } // Otherwise, if a plain theme object was passed in,\n // overlay it with the default theme.\n\n\n return _objectSpread({}, defaultTheme, this.props.theme);\n }\n }, {\n key: \"getCommonProps\",\n value: function getCommonProps() {\n var clearValue = this.clearValue,\n getStyles = this.getStyles,\n setValue = this.setValue,\n selectOption = this.selectOption,\n props = this.props;\n var classNamePrefix = props.classNamePrefix,\n isMulti = props.isMulti,\n isRtl = props.isRtl,\n options = props.options;\n var selectValue = this.state.selectValue;\n var hasValue = this.hasValue();\n\n var getValue = function getValue() {\n return selectValue;\n };\n\n var cx = classNames.bind(null, classNamePrefix);\n return {\n cx: cx,\n clearValue: clearValue,\n getStyles: getStyles,\n getValue: getValue,\n hasValue: hasValue,\n isMulti: isMulti,\n isRtl: isRtl,\n options: options,\n selectOption: selectOption,\n setValue: setValue,\n selectProps: props,\n theme: this.getTheme()\n };\n }\n }, {\n key: \"getNextFocusedValue\",\n value: function getNextFocusedValue(nextSelectValue) {\n if (this.clearFocusValueOnUpdate) {\n this.clearFocusValueOnUpdate = false;\n return null;\n }\n\n var _this$state6 = this.state,\n focusedValue = _this$state6.focusedValue,\n lastSelectValue = _this$state6.selectValue;\n var lastFocusedIndex = lastSelectValue.indexOf(focusedValue);\n\n if (lastFocusedIndex > -1) {\n var nextFocusedIndex = nextSelectValue.indexOf(focusedValue);\n\n if (nextFocusedIndex > -1) {\n // the focused value is still in the selectValue, return it\n return focusedValue;\n } else if (lastFocusedIndex < nextSelectValue.length) {\n // the focusedValue is not present in the next selectValue array by\n // reference, so return the new value at the same index\n return nextSelectValue[lastFocusedIndex];\n }\n }\n\n return null;\n }\n }, {\n key: \"getNextFocusedOption\",\n value: function getNextFocusedOption(options) {\n var lastFocusedOption = this.state.focusedOption;\n return lastFocusedOption && options.indexOf(lastFocusedOption) > -1 ? lastFocusedOption : options[0];\n }\n }, {\n key: \"hasValue\",\n value: function hasValue() {\n var selectValue = this.state.selectValue;\n return selectValue.length > 0;\n }\n }, {\n key: \"hasOptions\",\n value: function hasOptions() {\n return !!this.state.menuOptions.render.length;\n }\n }, {\n key: \"countOptions\",\n value: function countOptions() {\n return this.state.menuOptions.focusable.length;\n }\n }, {\n key: \"isClearable\",\n value: function isClearable() {\n var _this$props12 = this.props,\n isClearable = _this$props12.isClearable,\n isMulti = _this$props12.isMulti; // single select, by default, IS NOT clearable\n // multi select, by default, IS clearable\n\n if (isClearable === undefined) return isMulti;\n return isClearable;\n }\n }, {\n key: \"isOptionDisabled\",\n value: function isOptionDisabled$$1(option, selectValue) {\n return typeof this.props.isOptionDisabled === 'function' ? this.props.isOptionDisabled(option, selectValue) : false;\n }\n }, {\n key: \"isOptionSelected\",\n value: function isOptionSelected(option, selectValue) {\n var _this2 = this;\n\n if (selectValue.indexOf(option) > -1) return true;\n\n if (typeof this.props.isOptionSelected === 'function') {\n return this.props.isOptionSelected(option, selectValue);\n }\n\n var candidate = this.getOptionValue(option);\n return selectValue.some(function (i) {\n return _this2.getOptionValue(i) === candidate;\n });\n }\n }, {\n key: \"filterOption\",\n value: function filterOption(option, inputValue) {\n return this.props.filterOption ? this.props.filterOption(option, inputValue) : true;\n }\n }, {\n key: \"formatOptionLabel\",\n value: function formatOptionLabel(data, context) {\n if (typeof this.props.formatOptionLabel === 'function') {\n var inputValue = this.props.inputValue;\n var selectValue = this.state.selectValue;\n return this.props.formatOptionLabel(data, {\n context: context,\n inputValue: inputValue,\n selectValue: selectValue\n });\n } else {\n return this.getOptionLabel(data);\n }\n }\n }, {\n key: \"formatGroupLabel\",\n value: function formatGroupLabel$$1(data) {\n return this.props.formatGroupLabel(data);\n } // ==============================\n // Mouse Handlers\n // ==============================\n\n }, {\n key: \"startListeningComposition\",\n // ==============================\n // Composition Handlers\n // ==============================\n value: function startListeningComposition() {\n if (document && document.addEventListener) {\n document.addEventListener('compositionstart', this.onCompositionStart, false);\n document.addEventListener('compositionend', this.onCompositionEnd, false);\n }\n }\n }, {\n key: \"stopListeningComposition\",\n value: function stopListeningComposition() {\n if (document && document.removeEventListener) {\n document.removeEventListener('compositionstart', this.onCompositionStart);\n document.removeEventListener('compositionend', this.onCompositionEnd);\n }\n }\n }, {\n key: \"startListeningToTouch\",\n // ==============================\n // Touch Handlers\n // ==============================\n value: function startListeningToTouch() {\n if (document && document.addEventListener) {\n document.addEventListener('touchstart', this.onTouchStart, false);\n document.addEventListener('touchmove', this.onTouchMove, false);\n document.addEventListener('touchend', this.onTouchEnd, false);\n }\n }\n }, {\n key: \"stopListeningToTouch\",\n value: function stopListeningToTouch() {\n if (document && document.removeEventListener) {\n document.removeEventListener('touchstart', this.onTouchStart);\n document.removeEventListener('touchmove', this.onTouchMove);\n document.removeEventListener('touchend', this.onTouchEnd);\n }\n }\n }, {\n key: \"buildMenuOptions\",\n // ==============================\n // Menu Options\n // ==============================\n value: function buildMenuOptions(props, selectValue) {\n var _this3 = this;\n\n var _props$inputValue = props.inputValue,\n inputValue = _props$inputValue === void 0 ? '' : _props$inputValue,\n options = props.options;\n\n var toOption = function toOption(option, id) {\n var isDisabled = _this3.isOptionDisabled(option, selectValue);\n\n var isSelected = _this3.isOptionSelected(option, selectValue);\n\n var label = _this3.getOptionLabel(option);\n\n var value = _this3.getOptionValue(option);\n\n if (_this3.shouldHideSelectedOptions() && isSelected || !_this3.filterOption({\n label: label,\n value: value,\n data: option\n }, inputValue)) {\n return;\n }\n\n var onHover = isDisabled ? undefined : function () {\n return _this3.onOptionHover(option);\n };\n var onSelect = isDisabled ? undefined : function () {\n return _this3.selectOption(option);\n };\n var optionId = \"\".concat(_this3.getElementId('option'), \"-\").concat(id);\n return {\n innerProps: {\n id: optionId,\n onClick: onSelect,\n onMouseMove: onHover,\n onMouseOver: onHover,\n tabIndex: -1\n },\n data: option,\n isDisabled: isDisabled,\n isSelected: isSelected,\n key: optionId,\n label: label,\n type: 'option',\n value: value\n };\n };\n\n return options.reduce(function (acc, item, itemIndex) {\n if (item.options) {\n // TODO needs a tidier implementation\n if (!_this3.hasGroups) _this3.hasGroups = true;\n var items = item.options;\n var children = items.map(function (child, i) {\n var option = toOption(child, \"\".concat(itemIndex, \"-\").concat(i));\n if (option) acc.focusable.push(child);\n return option;\n }).filter(Boolean);\n\n if (children.length) {\n var groupId = \"\".concat(_this3.getElementId('group'), \"-\").concat(itemIndex);\n acc.render.push({\n type: 'group',\n key: groupId,\n data: item,\n options: children\n });\n }\n } else {\n var option = toOption(item, \"\".concat(itemIndex));\n\n if (option) {\n acc.render.push(option);\n acc.focusable.push(item);\n }\n }\n\n return acc;\n }, {\n render: [],\n focusable: []\n });\n } // ==============================\n // Renderers\n // ==============================\n\n }, {\n key: \"constructAriaLiveMessage\",\n value: function constructAriaLiveMessage() {\n var _this$state7 = this.state,\n ariaLiveContext = _this$state7.ariaLiveContext,\n selectValue = _this$state7.selectValue,\n focusedValue = _this$state7.focusedValue,\n focusedOption = _this$state7.focusedOption;\n var _this$props13 = this.props,\n options = _this$props13.options,\n menuIsOpen = _this$props13.menuIsOpen,\n inputValue = _this$props13.inputValue,\n screenReaderStatus = _this$props13.screenReaderStatus; // An aria live message representing the currently focused value in the select.\n\n var focusedValueMsg = focusedValue ? valueFocusAriaMessage({\n focusedValue: focusedValue,\n getOptionLabel: this.getOptionLabel,\n selectValue: selectValue\n }) : ''; // An aria live message representing the currently focused option in the select.\n\n var focusedOptionMsg = focusedOption && menuIsOpen ? optionFocusAriaMessage({\n focusedOption: focusedOption,\n getOptionLabel: this.getOptionLabel,\n options: options\n }) : ''; // An aria live message representing the set of focusable results and current searchterm/inputvalue.\n\n var resultsMsg = resultsAriaMessage({\n inputValue: inputValue,\n screenReaderMessage: screenReaderStatus({\n count: this.countOptions()\n })\n });\n return \"\".concat(focusedValueMsg, \" \").concat(focusedOptionMsg, \" \").concat(resultsMsg, \" \").concat(ariaLiveContext);\n }\n }, {\n key: \"renderInput\",\n value: function renderInput() {\n var _this$props14 = this.props,\n isDisabled = _this$props14.isDisabled,\n isSearchable = _this$props14.isSearchable,\n inputId = _this$props14.inputId,\n inputValue = _this$props14.inputValue,\n tabIndex = _this$props14.tabIndex;\n var Input = this.components.Input;\n var inputIsHidden = this.state.inputIsHidden;\n var id = inputId || this.getElementId('input');\n\n if (!isSearchable) {\n // use a dummy input to maintain focus/blur functionality\n return React.createElement(DummyInput, {\n id: id,\n innerRef: this.getInputRef,\n onBlur: this.onInputBlur,\n onChange: noop,\n onFocus: this.onInputFocus,\n readOnly: true,\n disabled: isDisabled,\n tabIndex: tabIndex,\n value: \"\"\n });\n } // aria attributes makes the JSX \"noisy\", separated for clarity\n\n\n var ariaAttributes = {\n 'aria-autocomplete': 'list',\n 'aria-label': this.props['aria-label'],\n 'aria-labelledby': this.props['aria-labelledby']\n };\n var _this$commonProps = this.commonProps,\n cx = _this$commonProps.cx,\n theme = _this$commonProps.theme,\n selectProps = _this$commonProps.selectProps;\n return React.createElement(Input, _extends({\n autoCapitalize: \"none\",\n autoComplete: \"off\",\n autoCorrect: \"off\",\n cx: cx,\n getStyles: this.getStyles,\n id: id,\n innerRef: this.getInputRef,\n isDisabled: isDisabled,\n isHidden: inputIsHidden,\n onBlur: this.onInputBlur,\n onChange: this.handleInputChange,\n onFocus: this.onInputFocus,\n selectProps: selectProps,\n spellCheck: \"false\",\n tabIndex: tabIndex,\n theme: theme,\n type: \"text\",\n value: inputValue\n }, ariaAttributes));\n }\n }, {\n key: \"renderPlaceholderOrValue\",\n value: function renderPlaceholderOrValue() {\n var _this4 = this;\n\n var _this$components = this.components,\n MultiValue = _this$components.MultiValue,\n MultiValueContainer = _this$components.MultiValueContainer,\n MultiValueLabel = _this$components.MultiValueLabel,\n MultiValueRemove = _this$components.MultiValueRemove,\n SingleValue = _this$components.SingleValue,\n Placeholder = _this$components.Placeholder;\n var commonProps = this.commonProps;\n var _this$props15 = this.props,\n controlShouldRenderValue = _this$props15.controlShouldRenderValue,\n isDisabled = _this$props15.isDisabled,\n isMulti = _this$props15.isMulti,\n inputValue = _this$props15.inputValue,\n placeholder = _this$props15.placeholder;\n var _this$state8 = this.state,\n selectValue = _this$state8.selectValue,\n focusedValue = _this$state8.focusedValue,\n isFocused = _this$state8.isFocused;\n\n if (!this.hasValue() || !controlShouldRenderValue) {\n return inputValue ? null : React.createElement(Placeholder, _extends({}, commonProps, {\n key: \"placeholder\",\n isDisabled: isDisabled,\n isFocused: isFocused\n }), placeholder);\n }\n\n if (isMulti) {\n var selectValues = selectValue.map(function (opt) {\n var isOptionFocused = opt === focusedValue;\n return React.createElement(MultiValue, _extends({}, commonProps, {\n components: {\n Container: MultiValueContainer,\n Label: MultiValueLabel,\n Remove: MultiValueRemove\n },\n isFocused: isOptionFocused,\n isDisabled: isDisabled,\n key: _this4.getOptionValue(opt),\n removeProps: {\n onClick: function onClick() {\n return _this4.removeValue(opt);\n },\n onTouchEnd: function onTouchEnd() {\n return _this4.removeValue(opt);\n },\n onMouseDown: function onMouseDown(e) {\n e.preventDefault();\n e.stopPropagation();\n }\n },\n data: opt\n }), _this4.formatOptionLabel(opt, 'value'));\n });\n return selectValues;\n }\n\n if (inputValue) {\n return null;\n }\n\n var singleValue = selectValue[0];\n return React.createElement(SingleValue, _extends({}, commonProps, {\n data: singleValue,\n isDisabled: isDisabled\n }), this.formatOptionLabel(singleValue, 'value'));\n }\n }, {\n key: \"renderClearIndicator\",\n value: function renderClearIndicator() {\n var ClearIndicator = this.components.ClearIndicator;\n var commonProps = this.commonProps;\n var _this$props16 = this.props,\n isDisabled = _this$props16.isDisabled,\n isLoading = _this$props16.isLoading;\n var isFocused = this.state.isFocused;\n\n if (!this.isClearable() || !ClearIndicator || isDisabled || !this.hasValue() || isLoading) {\n return null;\n }\n\n var innerProps = {\n onMouseDown: this.onClearIndicatorMouseDown,\n onTouchEnd: this.onClearIndicatorTouchEnd,\n 'aria-hidden': 'true'\n };\n return React.createElement(ClearIndicator, _extends({}, commonProps, {\n innerProps: innerProps,\n isFocused: isFocused\n }));\n }\n }, {\n key: \"renderLoadingIndicator\",\n value: function renderLoadingIndicator() {\n var LoadingIndicator = this.components.LoadingIndicator;\n var commonProps = this.commonProps;\n var _this$props17 = this.props,\n isDisabled = _this$props17.isDisabled,\n isLoading = _this$props17.isLoading;\n var isFocused = this.state.isFocused;\n if (!LoadingIndicator || !isLoading) return null;\n var innerProps = {\n 'aria-hidden': 'true'\n };\n return React.createElement(LoadingIndicator, _extends({}, commonProps, {\n innerProps: innerProps,\n isDisabled: isDisabled,\n isFocused: isFocused\n }));\n }\n }, {\n key: \"renderIndicatorSeparator\",\n value: function renderIndicatorSeparator() {\n var _this$components2 = this.components,\n DropdownIndicator = _this$components2.DropdownIndicator,\n IndicatorSeparator = _this$components2.IndicatorSeparator; // separator doesn't make sense without the dropdown indicator\n\n if (!DropdownIndicator || !IndicatorSeparator) return null;\n var commonProps = this.commonProps;\n var isDisabled = this.props.isDisabled;\n var isFocused = this.state.isFocused;\n return React.createElement(IndicatorSeparator, _extends({}, commonProps, {\n isDisabled: isDisabled,\n isFocused: isFocused\n }));\n }\n }, {\n key: \"renderDropdownIndicator\",\n value: function renderDropdownIndicator() {\n var DropdownIndicator = this.components.DropdownIndicator;\n if (!DropdownIndicator) return null;\n var commonProps = this.commonProps;\n var isDisabled = this.props.isDisabled;\n var isFocused = this.state.isFocused;\n var innerProps = {\n onMouseDown: this.onDropdownIndicatorMouseDown,\n onTouchEnd: this.onDropdownIndicatorTouchEnd,\n 'aria-hidden': 'true'\n };\n return React.createElement(DropdownIndicator, _extends({}, commonProps, {\n innerProps: innerProps,\n isDisabled: isDisabled,\n isFocused: isFocused\n }));\n }\n }, {\n key: \"renderMenu\",\n value: function renderMenu() {\n var _this5 = this;\n\n var _this$components3 = this.components,\n Group = _this$components3.Group,\n GroupHeading = _this$components3.GroupHeading,\n Menu$$1 = _this$components3.Menu,\n MenuList$$1 = _this$components3.MenuList,\n MenuPortal$$1 = _this$components3.MenuPortal,\n LoadingMessage$$1 = _this$components3.LoadingMessage,\n NoOptionsMessage$$1 = _this$components3.NoOptionsMessage,\n Option = _this$components3.Option;\n var commonProps = this.commonProps;\n var _this$state9 = this.state,\n focusedOption = _this$state9.focusedOption,\n menuOptions = _this$state9.menuOptions;\n var _this$props18 = this.props,\n captureMenuScroll = _this$props18.captureMenuScroll,\n inputValue = _this$props18.inputValue,\n isLoading = _this$props18.isLoading,\n loadingMessage = _this$props18.loadingMessage,\n minMenuHeight = _this$props18.minMenuHeight,\n maxMenuHeight = _this$props18.maxMenuHeight,\n menuIsOpen = _this$props18.menuIsOpen,\n menuPlacement = _this$props18.menuPlacement,\n menuPosition = _this$props18.menuPosition,\n menuPortalTarget = _this$props18.menuPortalTarget,\n menuShouldBlockScroll = _this$props18.menuShouldBlockScroll,\n menuShouldScrollIntoView = _this$props18.menuShouldScrollIntoView,\n noOptionsMessage = _this$props18.noOptionsMessage,\n onMenuScrollToTop = _this$props18.onMenuScrollToTop,\n onMenuScrollToBottom = _this$props18.onMenuScrollToBottom;\n if (!menuIsOpen) return null; // TODO: Internal Option Type here\n\n var render = function render(props) {\n // for performance, the menu options in state aren't changed when the\n // focused option changes so we calculate additional props based on that\n var isFocused = focusedOption === props.data;\n props.innerRef = isFocused ? _this5.getFocusedOptionRef : undefined;\n return React.createElement(Option, _extends({}, commonProps, props, {\n isFocused: isFocused\n }), _this5.formatOptionLabel(props.data, 'menu'));\n };\n\n var menuUI;\n\n if (this.hasOptions()) {\n menuUI = menuOptions.render.map(function (item) {\n if (item.type === 'group') {\n var type = item.type,\n group = _objectWithoutProperties(item, [\"type\"]);\n\n var headingId = \"\".concat(item.key, \"-heading\");\n return React.createElement(Group, _extends({}, commonProps, group, {\n Heading: GroupHeading,\n headingProps: {\n id: headingId\n },\n label: _this5.formatGroupLabel(item.data)\n }), item.options.map(function (option) {\n return render(option);\n }));\n } else if (item.type === 'option') {\n return render(item);\n }\n });\n } else if (isLoading) {\n var message = loadingMessage({\n inputValue: inputValue\n });\n if (message === null) return null;\n menuUI = React.createElement(LoadingMessage$$1, commonProps, message);\n } else {\n var _message = noOptionsMessage({\n inputValue: inputValue\n });\n\n if (_message === null) return null;\n menuUI = React.createElement(NoOptionsMessage$$1, commonProps, _message);\n }\n\n var menuPlacementProps = {\n minMenuHeight: minMenuHeight,\n maxMenuHeight: maxMenuHeight,\n menuPlacement: menuPlacement,\n menuPosition: menuPosition,\n menuShouldScrollIntoView: menuShouldScrollIntoView\n };\n var menuElement = React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref6) {\n var ref = _ref6.ref,\n _ref6$placerProps = _ref6.placerProps,\n placement = _ref6$placerProps.placement,\n maxHeight = _ref6$placerProps.maxHeight;\n return React.createElement(Menu$$1, _extends({}, commonProps, menuPlacementProps, {\n innerRef: ref,\n innerProps: {\n onMouseDown: _this5.onMenuMouseDown,\n onMouseMove: _this5.onMenuMouseMove\n },\n isLoading: isLoading,\n placement: placement\n }), React.createElement(ScrollCaptorSwitch, {\n isEnabled: captureMenuScroll,\n onTopArrive: onMenuScrollToTop,\n onBottomArrive: onMenuScrollToBottom\n }, React.createElement(ScrollBlock, {\n isEnabled: menuShouldBlockScroll\n }, React.createElement(MenuList$$1, _extends({}, commonProps, {\n innerRef: _this5.getMenuListRef,\n isLoading: isLoading,\n maxHeight: maxHeight\n }), menuUI))));\n }); // positioning behaviour is almost identical for portalled and fixed,\n // so we use the same component. the actual portalling logic is forked\n // within the component based on `menuPosition`\n\n return menuPortalTarget || menuPosition === 'fixed' ? React.createElement(MenuPortal$$1, _extends({}, commonProps, {\n appendTo: menuPortalTarget,\n controlElement: this.controlRef,\n menuPlacement: menuPlacement,\n menuPosition: menuPosition\n }), menuElement) : menuElement;\n }\n }, {\n key: \"renderFormField\",\n value: function renderFormField() {\n var _this6 = this;\n\n var _this$props19 = this.props,\n delimiter = _this$props19.delimiter,\n isDisabled = _this$props19.isDisabled,\n isMulti = _this$props19.isMulti,\n name = _this$props19.name;\n var selectValue = this.state.selectValue;\n if (!name || isDisabled) return;\n\n if (isMulti) {\n if (delimiter) {\n var value = selectValue.map(function (opt) {\n return _this6.getOptionValue(opt);\n }).join(delimiter);\n return React.createElement(\"input\", {\n name: name,\n type: \"hidden\",\n value: value\n });\n } else {\n var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {\n return React.createElement(\"input\", {\n key: \"i-\".concat(i),\n name: name,\n type: \"hidden\",\n value: _this6.getOptionValue(opt)\n });\n }) : React.createElement(\"input\", {\n name: name,\n type: \"hidden\"\n });\n return React.createElement(\"div\", null, input);\n }\n } else {\n var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';\n\n return React.createElement(\"input\", {\n name: name,\n type: \"hidden\",\n value: _value\n });\n }\n }\n }, {\n key: \"renderLiveRegion\",\n value: function renderLiveRegion() {\n if (!this.state.isFocused) return null;\n return React.createElement(A11yText, {\n \"aria-live\": \"assertive\"\n }, React.createElement(\"p\", {\n id: \"aria-selection-event\"\n }, \"\\xA0\", this.state.ariaLiveSelection), React.createElement(\"p\", {\n id: \"aria-context\"\n }, \"\\xA0\", this.constructAriaLiveMessage()));\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this$components4 = this.components,\n Control = _this$components4.Control,\n IndicatorsContainer = _this$components4.IndicatorsContainer,\n SelectContainer = _this$components4.SelectContainer,\n ValueContainer = _this$components4.ValueContainer;\n var _this$props20 = this.props,\n className = _this$props20.className,\n id = _this$props20.id,\n isDisabled = _this$props20.isDisabled,\n menuIsOpen = _this$props20.menuIsOpen;\n var isFocused = this.state.isFocused;\n var commonProps = this.commonProps = this.getCommonProps();\n return React.createElement(SelectContainer, _extends({}, commonProps, {\n className: className,\n innerProps: {\n id: id,\n onKeyDown: this.onKeyDown\n },\n isDisabled: isDisabled,\n isFocused: isFocused\n }), this.renderLiveRegion(), React.createElement(Control, _extends({}, commonProps, {\n innerRef: this.getControlRef,\n innerProps: {\n onMouseDown: this.onControlMouseDown,\n onTouchEnd: this.onControlTouchEnd\n },\n isDisabled: isDisabled,\n isFocused: isFocused,\n menuIsOpen: menuIsOpen\n }), React.createElement(ValueContainer, _extends({}, commonProps, {\n isDisabled: isDisabled\n }), this.renderPlaceholderOrValue(), this.renderInput()), React.createElement(IndicatorsContainer, _extends({}, commonProps, {\n isDisabled: isDisabled\n }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());\n }\n }]);\n\n return Select;\n}(Component);\n\n_defineProperty(Select, \"defaultProps\", defaultProps);\n\nvar defaultProps$1 = {\n defaultInputValue: '',\n defaultMenuIsOpen: false,\n defaultValue: null\n};\n\nvar manageState = function manageState(SelectComponent) {\n var _class, _temp;\n\n return _temp = _class =\n /*#__PURE__*/\n function (_Component) {\n _inherits(StateManager, _Component);\n\n function StateManager() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, StateManager);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(StateManager)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"select\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n inputValue: _this.props.inputValue !== undefined ? _this.props.inputValue : _this.props.defaultInputValue,\n menuIsOpen: _this.props.menuIsOpen !== undefined ? _this.props.menuIsOpen : _this.props.defaultMenuIsOpen,\n value: _this.props.value !== undefined ? _this.props.value : _this.props.defaultValue\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onChange\", function (value, actionMeta) {\n _this.callProp('onChange', value, actionMeta);\n\n _this.setState({\n value: value\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onInputChange\", function (value, actionMeta) {\n // TODO: for backwards compatibility, we allow the prop to return a new\n // value, but now inputValue is a controllable prop we probably shouldn't\n var newValue = _this.callProp('onInputChange', value, actionMeta);\n\n _this.setState({\n inputValue: newValue !== undefined ? newValue : value\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onMenuOpen\", function () {\n _this.callProp('onMenuOpen');\n\n _this.setState({\n menuIsOpen: true\n });\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onMenuClose\", function () {\n _this.callProp('onMenuClose');\n\n _this.setState({\n menuIsOpen: false\n });\n });\n\n return _this;\n }\n\n _createClass(StateManager, [{\n key: \"focus\",\n value: function focus() {\n this.select.focus();\n }\n }, {\n key: \"blur\",\n value: function blur() {\n this.select.blur();\n } // FIXME: untyped flow code, return any\n\n }, {\n key: \"getProp\",\n value: function getProp(key) {\n return this.props[key] !== undefined ? this.props[key] : this.state[key];\n } // FIXME: untyped flow code, return any\n\n }, {\n key: \"callProp\",\n value: function callProp(name) {\n if (typeof this.props[name] === 'function') {\n var _this$props;\n\n for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {\n args[_key2 - 1] = arguments[_key2];\n }\n\n return (_this$props = this.props)[name].apply(_this$props, args);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var _this$props2 = this.props,\n defaultInputValue = _this$props2.defaultInputValue,\n defaultMenuIsOpen = _this$props2.defaultMenuIsOpen,\n defaultValue = _this$props2.defaultValue,\n props = _objectWithoutProperties(_this$props2, [\"defaultInputValue\", \"defaultMenuIsOpen\", \"defaultValue\"]);\n\n return React.createElement(SelectComponent, _extends({}, props, {\n ref: function ref(_ref) {\n _this2.select = _ref;\n },\n inputValue: this.getProp('inputValue'),\n menuIsOpen: this.getProp('menuIsOpen'),\n onChange: this.onChange,\n onInputChange: this.onInputChange,\n onMenuClose: this.onMenuClose,\n onMenuOpen: this.onMenuOpen,\n value: this.getProp('value')\n }));\n }\n }]);\n\n return StateManager;\n }(Component), _defineProperty(_class, \"defaultProps\", defaultProps$1), _temp;\n};\n\nvar defaultProps$2 = {\n cacheOptions: false,\n defaultOptions: false,\n filterOption: null\n};\nvar makeAsyncSelect = function makeAsyncSelect(SelectComponent) {\n var _class, _temp;\n\n return _temp = _class =\n /*#__PURE__*/\n function (_Component) {\n _inherits(Async, _Component);\n\n function Async(props) {\n var _this;\n\n _classCallCheck(this, Async);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(Async).call(this));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"select\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"lastRequest\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"mounted\", false);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"optionsCache\", {});\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"handleInputChange\", function (newValue, actionMeta) {\n var _this$props = _this.props,\n cacheOptions = _this$props.cacheOptions,\n onInputChange = _this$props.onInputChange; // TODO\n\n var inputValue = handleInputChange(newValue, actionMeta, onInputChange);\n\n if (!inputValue) {\n delete _this.lastRequest;\n\n _this.setState({\n inputValue: '',\n loadedInputValue: '',\n loadedOptions: [],\n isLoading: false,\n passEmptyOptions: false\n });\n\n return;\n }\n\n if (cacheOptions && _this.optionsCache[inputValue]) {\n _this.setState({\n inputValue: inputValue,\n loadedInputValue: inputValue,\n loadedOptions: _this.optionsCache[inputValue],\n isLoading: false,\n passEmptyOptions: false\n });\n } else {\n var request = _this.lastRequest = {};\n\n _this.setState({\n inputValue: inputValue,\n isLoading: true,\n passEmptyOptions: !_this.state.loadedInputValue\n }, function () {\n _this.loadOptions(inputValue, function (options) {\n if (!_this.mounted) return;\n\n if (options) {\n _this.optionsCache[inputValue] = options;\n }\n\n if (request !== _this.lastRequest) return;\n delete _this.lastRequest;\n\n _this.setState({\n isLoading: false,\n loadedInputValue: inputValue,\n loadedOptions: options || [],\n passEmptyOptions: false\n });\n });\n });\n }\n\n return inputValue;\n });\n\n _this.state = {\n defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined,\n inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '',\n isLoading: props.defaultOptions === true ? true : false,\n loadedOptions: [],\n passEmptyOptions: false\n };\n return _this;\n }\n\n _createClass(Async, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n this.mounted = true;\n var defaultOptions = this.props.defaultOptions;\n var inputValue = this.state.inputValue;\n\n if (defaultOptions === true) {\n this.loadOptions(inputValue, function (options) {\n if (!_this2.mounted) return;\n var isLoading = !!_this2.lastRequest;\n\n _this2.setState({\n defaultOptions: options || [],\n isLoading: isLoading\n });\n });\n }\n }\n }, {\n key: \"componentWillReceiveProps\",\n value: function componentWillReceiveProps(nextProps) {\n // if the cacheOptions prop changes, clear the cache\n if (nextProps.cacheOptions !== this.props.cacheOptions) {\n this.optionsCache = {};\n }\n\n if (nextProps.defaultOptions !== this.props.defaultOptions) {\n this.setState({\n defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined\n });\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.mounted = false;\n }\n }, {\n key: \"focus\",\n value: function focus() {\n this.select.focus();\n }\n }, {\n key: \"blur\",\n value: function blur() {\n this.select.blur();\n }\n }, {\n key: \"loadOptions\",\n value: function loadOptions(inputValue, callback) {\n var loadOptions = this.props.loadOptions;\n if (!loadOptions) return callback();\n var loader = loadOptions(inputValue, callback);\n\n if (loader && typeof loader.then === 'function') {\n loader.then(callback, function () {\n return callback();\n });\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this3 = this;\n\n var _this$props2 = this.props,\n loadOptions = _this$props2.loadOptions,\n props = _objectWithoutProperties(_this$props2, [\"loadOptions\"]);\n\n var _this$state = this.state,\n defaultOptions = _this$state.defaultOptions,\n inputValue = _this$state.inputValue,\n isLoading = _this$state.isLoading,\n loadedInputValue = _this$state.loadedInputValue,\n loadedOptions = _this$state.loadedOptions,\n passEmptyOptions = _this$state.passEmptyOptions;\n var options = passEmptyOptions ? [] : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];\n return React.createElement(SelectComponent, _extends({}, props, {\n ref: function ref(_ref) {\n _this3.select = _ref;\n },\n options: options,\n isLoading: isLoading,\n onInputChange: this.handleInputChange\n }));\n }\n }]);\n\n return Async;\n }(Component), _defineProperty(_class, \"defaultProps\", defaultProps$2), _temp;\n};\nvar SelectState = manageState(Select);\nvar Async = makeAsyncSelect(SelectState);\n\nvar compareOption = function compareOption() {\n var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n var option = arguments.length > 1 ? arguments[1] : undefined;\n var candidate = String(inputValue).toLowerCase();\n var optionValue = String(option.value).toLowerCase();\n var optionLabel = String(option.label).toLowerCase();\n return optionValue === candidate || optionLabel === candidate;\n};\n\nvar builtins = {\n formatCreateLabel: function formatCreateLabel(inputValue) {\n return \"Create \\\"\".concat(inputValue, \"\\\"\");\n },\n isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) {\n return !(!inputValue || selectValue.some(function (option) {\n return compareOption(inputValue, option);\n }) || selectOptions.some(function (option) {\n return compareOption(inputValue, option);\n }));\n },\n getNewOptionData: function getNewOptionData(inputValue, optionLabel) {\n return {\n label: optionLabel,\n value: inputValue,\n __isNew__: true\n };\n }\n};\nvar defaultProps$3 = _objectSpread({\n allowCreateWhileLoading: false,\n createOptionPosition: 'last'\n}, builtins);\nvar makeCreatableSelect = function makeCreatableSelect(SelectComponent) {\n var _class, _temp;\n\n return _temp = _class =\n /*#__PURE__*/\n function (_Component) {\n _inherits(Creatable, _Component);\n\n function Creatable(props) {\n var _this;\n\n _classCallCheck(this, Creatable);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(Creatable).call(this, props));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"select\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"onChange\", function (newValue, actionMeta) {\n var _this$props = _this.props,\n getNewOptionData = _this$props.getNewOptionData,\n inputValue = _this$props.inputValue,\n isMulti = _this$props.isMulti,\n onChange = _this$props.onChange,\n onCreateOption = _this$props.onCreateOption,\n value = _this$props.value;\n\n if (actionMeta.action !== 'select-option') {\n return onChange(newValue, actionMeta);\n }\n\n var newOption = _this.state.newOption;\n var valueArray = Array.isArray(newValue) ? newValue : [newValue];\n\n if (valueArray[valueArray.length - 1] === newOption) {\n if (onCreateOption) onCreateOption(inputValue);else {\n var newOptionData = getNewOptionData(inputValue, inputValue);\n var newActionMeta = {\n action: 'create-option'\n };\n\n if (isMulti) {\n onChange([].concat(_toConsumableArray(cleanValue(value)), [newOptionData]), newActionMeta);\n } else {\n onChange(newOptionData, newActionMeta);\n }\n }\n return;\n }\n\n onChange(newValue, actionMeta);\n });\n\n var options = props.options || [];\n _this.state = {\n newOption: undefined,\n options: options\n };\n return _this;\n }\n\n _createClass(Creatable, [{\n key: \"componentWillReceiveProps\",\n value: function componentWillReceiveProps(nextProps) {\n var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,\n createOptionPosition = nextProps.createOptionPosition,\n formatCreateLabel = nextProps.formatCreateLabel,\n getNewOptionData = nextProps.getNewOptionData,\n inputValue = nextProps.inputValue,\n isLoading = nextProps.isLoading,\n isValidNewOption = nextProps.isValidNewOption,\n value = nextProps.value;\n var options = nextProps.options || [];\n var newOption = this.state.newOption;\n\n if (isValidNewOption(inputValue, cleanValue(value), options)) {\n newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));\n } else {\n newOption = undefined;\n }\n\n this.setState({\n newOption: newOption,\n options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options\n });\n }\n }, {\n key: \"focus\",\n value: function focus() {\n this.select.focus();\n }\n }, {\n key: \"blur\",\n value: function blur() {\n this.select.blur();\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var props = _extends({}, this.props);\n\n var options = this.state.options;\n return React.createElement(SelectComponent, _extends({}, props, {\n ref: function ref(_ref) {\n _this2.select = _ref;\n },\n options: options,\n onChange: this.onChange\n }));\n }\n }]);\n\n return Creatable;\n }(Component), _defineProperty(_class, \"defaultProps\", defaultProps$3), _temp;\n}; // TODO: do this in package entrypoint\n\nvar SelectCreatable = makeCreatableSelect(Select);\nvar Creatable = manageState(SelectCreatable);\n\nvar SelectCreatable$1 = makeCreatableSelect(Select);\nvar SelectCreatableState = manageState(SelectCreatable$1);\nvar AsyncCreatable = makeAsyncSelect(SelectCreatableState);\n\n// strip transition props off before spreading onto select component\n// note we need to be explicit about innerRef for flow\nvar AnimatedInput = function AnimatedInput(WrappedComponent) {\n return function (_ref) {\n var inProp = _ref.in,\n onExited = _ref.onExited,\n appear = _ref.appear,\n enter = _ref.enter,\n exit = _ref.exit,\n props = _objectWithoutProperties(_ref, [\"in\", \"onExited\", \"appear\", \"enter\", \"exit\"]);\n\n return React.createElement(WrappedComponent, props);\n };\n};\n\nvar Fade = function Fade(_ref) {\n var Tag = _ref.component,\n _ref$duration = _ref.duration,\n duration = _ref$duration === void 0 ? 1 : _ref$duration,\n inProp = _ref.in,\n onExited = _ref.onExited,\n props = _objectWithoutProperties(_ref, [\"component\", \"duration\", \"in\", \"onExited\"]);\n\n var transition = {\n entering: {\n opacity: 0\n },\n entered: {\n opacity: 1,\n transition: \"opacity \".concat(duration, \"ms\")\n },\n exiting: {\n opacity: 0\n },\n exited: {\n opacity: 0\n }\n };\n return React.createElement(Transition, {\n mountOnEnter: true,\n unmountOnExit: true,\n in: inProp,\n timeout: duration\n }, function (state) {\n var innerProps = {\n style: _objectSpread({}, transition[state])\n };\n return React.createElement(Tag, _extends({\n innerProps: innerProps\n }, props));\n });\n}; // ==============================\n// Collapse Transition\n// ==============================\n\nvar collapseDuration = 260;\n// wrap each MultiValue with a collapse transition; decreases width until\n// finally removing from DOM\nvar Collapse =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(Collapse, _Component);\n\n function Collapse() {\n var _getPrototypeOf2;\n\n var _this;\n\n _classCallCheck(this, Collapse);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Collapse)).call.apply(_getPrototypeOf2, [this].concat(args)));\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"duration\", collapseDuration);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"rafID\", void 0);\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n width: 'auto'\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"transition\", {\n exiting: {\n width: 0,\n transition: \"width \".concat(_this.duration, \"ms ease-out\")\n },\n exited: {\n width: 0\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getWidth\", function (ref) {\n if (ref && isNaN(_this.state.width)) {\n /*\n Here we're invoking requestAnimationFrame with a callback invoking our\n call to getBoundingClientRect and setState in order to resolve an edge case\n around portalling. Certain portalling solutions briefly remove children from the DOM\n before appending them to the target node. This is to avoid us trying to call getBoundingClientrect\n while the Select component is in this state.\n */\n // cannot use `offsetWidth` because it is rounded\n _this.rafID = window.requestAnimationFrame(function () {\n var _ref$getBoundingClien = ref.getBoundingClientRect(),\n width = _ref$getBoundingClien.width;\n\n _this.setState({\n width: width\n });\n });\n }\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getStyle\", function (width) {\n return {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n width: width\n };\n });\n\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"getTransition\", function (state) {\n return _this.transition[state];\n });\n\n return _this;\n }\n\n _createClass(Collapse, [{\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n if (this.rafID) {\n window.cancelAnimationFrame(this.rafID);\n }\n } // width must be calculated; cannot transition from `undefined` to `number`\n\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var _this$props = this.props,\n children = _this$props.children,\n inProp = _this$props.in;\n var width = this.state.width;\n return React.createElement(Transition, {\n enter: false,\n mountOnEnter: true,\n unmountOnExit: true,\n in: inProp,\n timeout: this.duration\n }, function (state) {\n var style = _objectSpread({}, _this2.getStyle(width), _this2.getTransition(state));\n\n return React.createElement(\"div\", {\n ref: _this2.getWidth,\n style: style\n }, children);\n });\n }\n }]);\n\n return Collapse;\n}(Component);\n\nvar AnimatedMultiValue = function AnimatedMultiValue(WrappedComponent) {\n return function (_ref) {\n var inProp = _ref.in,\n onExited = _ref.onExited,\n props = _objectWithoutProperties(_ref, [\"in\", \"onExited\"]);\n\n return React.createElement(Collapse, {\n in: inProp,\n onExited: onExited\n }, React.createElement(WrappedComponent, _extends({\n cropWithEllipsis: inProp\n }, props)));\n };\n};\n\nvar AnimatedPlaceholder = function AnimatedPlaceholder(WrappedComponent) {\n return function (props) {\n return React.createElement(Fade, _extends({\n component: WrappedComponent,\n duration: props.isMulti ? collapseDuration : 1\n }, props));\n };\n};\n\nvar AnimatedSingleValue = function AnimatedSingleValue(WrappedComponent) {\n return function (props) {\n return React.createElement(Fade, _extends({\n component: WrappedComponent\n }, props));\n };\n};\n\n// make ValueContainer a transition group\nvar AnimatedValueContainer = function AnimatedValueContainer(WrappedComponent) {\n return function (props) {\n return React.createElement(TransitionGroup, _extends({\n component: WrappedComponent\n }, props));\n };\n};\n\nvar makeAnimated = function makeAnimated() {\n var externalComponents = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var components$$1 = defaultComponents({\n components: externalComponents\n });\n\n var Input = components$$1.Input,\n MultiValue = components$$1.MultiValue,\n Placeholder = components$$1.Placeholder,\n SingleValue = components$$1.SingleValue,\n ValueContainer = components$$1.ValueContainer,\n rest = _objectWithoutProperties(components$$1, [\"Input\", \"MultiValue\", \"Placeholder\", \"SingleValue\", \"ValueContainer\"]);\n\n return _objectSpread({\n Input: AnimatedInput(Input),\n MultiValue: AnimatedMultiValue(MultiValue),\n Placeholder: AnimatedPlaceholder(Placeholder),\n SingleValue: AnimatedSingleValue(SingleValue),\n ValueContainer: AnimatedValueContainer(ValueContainer)\n }, rest);\n};\n\nvar AnimatedComponents = makeAnimated();\nvar Input$1 = AnimatedComponents.Input;\nvar MultiValue$1 = AnimatedComponents.MultiValue;\nvar Placeholder$1 = AnimatedComponents.Placeholder;\nvar SingleValue$1 = AnimatedComponents.SingleValue;\nvar ValueContainer$1 = AnimatedComponents.ValueContainer;\nvar index = memoizeOne(makeAnimated, exportedEqual);\n\nvar index$1 = manageState(Select);\n\nexport default index$1;\nexport { Select as SelectBase, Async, makeAsyncSelect, AsyncCreatable, Creatable, makeCreatableSelect, createFilter, index as makeAnimated, components, mergeStyles, defaultTheme };\n","// This file defines standard colors for use within components in the bundle. For usage guidelines for these colors, please refer to the Style Guide\r\n\r\n// Brand Colors\r\nexport const hcssGreen = \"#009639\";\r\nexport const hcssGray = \"#636466\";\r\n\r\n// App Color\r\n\r\n// Same color for Project Management and Checkbox component background color\r\nexport const hcssHeavyJob = \"#005EB8\";\r\n\r\n// Same color as hcssGreen and Pre-Constructions, Insights, Bid Results\r\nexport const hcssHeavyBid = \"#009639\";\r\n\r\nexport const hcssSafety = \"#FF9E1B\";\r\nexport const hcssTelematics = \"#00B5E2\";\r\nexport const hcssDispatcher = \"#E35205\";\r\n\r\n// Same color for Maintenance Request\r\nexport const hcssE360 = \"#007681\";\r\n\r\nexport const hcssFuelerPlus = \"#642f6c\";\r\nexport const hcssCredentials = \"#5E7461\";\r\nexport const hcssELogs = \"#7A9A01\";\r\nexport const hcssCloud = \"#64A70B\";\r\nexport const hcssTrucking = \"#00B2A9\";\r\nexport const hcssForms = \"#418FDE\";\r\nexport const hcssPlans = \"#485CC7\";\r\nexport const hcssSkills = \"#4F758B\";\r\nexport const hcssIntelligence = \"#003A70\";\r\nexport const hcssEmployeeApp = \"#7B6469\";\r\n","// Success Green\r\nexport const successGreen = \"#006627\";\r\n\r\n// Error Red\r\nexport const errorRed = \"#A60000\";\r\n\r\n// New Grey Names\r\n\r\n// charcoalGray\r\nexport const gray800 = \"#1e1e1e\";\r\n\r\n// stoneGray\r\nexport const gray700 = \"#3e3e3e\";\r\n\r\n// mediumDarkGray\r\nexport const gray600 = \"#6e6e6e\";\r\n\r\n// mediumLightGray\r\nexport const gray500 = \"#cccccc\";\r\n\r\n// silverGray\r\nexport const gray400 = \"#d6d6d6\";\r\n\r\n// borderGray\r\nexport const gray300 = \"#ececec\";\r\n\r\n// lightGray\r\nexport const gray200 = \"#f0f0f0\";\r\n\r\n// offWhite\r\nexport const gray100 = \"#f6f6f6\";\r\n\r\n// Old Greys\r\n// export const charcoalGray = \"#1e1e1e\";\r\n// export const stoneGray = \"#3e3e3e\";\r\n// export const mediumDarkGray = \"#6e6e6e\";\r\n// export const mediumLightGray = \"#cccccc\";\r\n// export const silverGray = \"#d6d6d6\";\r\n// export const borderGray = \"#ececec\";\r\n// export const lightGray = \"#f0f0f0\";\r\n// export const offWhite = \"#f6f6f6\";\r\n","// Default Blues\r\n\r\nexport const blue400 = \"#003E8A\";\r\nexport const blue300 = \"#005BCA\";\r\nexport const blue200 = \"#0370F5\";\r\nexport const blue150 = \"#DFEFFB\";\r\nexport const blue100 = \"#ECF5FE\";\r\n\r\n// Success Greens\r\nexport const green500 = \"#072B21\";\r\nexport const green400 = \"#0C4B39\";\r\nexport const green300 = \"#11654D\";\r\nexport const green200 = \"#14AF80\";\r\nexport const green100 = \"#EEFBF5\";\r\n\r\n// Error Reds\r\nexport const red400 = \"#6E0303\";\r\nexport const red300 = \"#9E0A0A\";\r\nexport const red200 = \"#DB1010\";\r\nexport const red100 = \"#FFEEEE\";\r\n\r\n// Concrete Greys\r\nexport const gray700 = \"#1E1E1E\";\r\n// Formerly stoneGray = #3e3e3e\r\nexport const gray600 = \"#404040\";\r\nexport const gray500 = \"#707070\";\r\nexport const gray400 = \"#CCCCCC\";\r\nexport const gray300 = \"#ECECEC\";\r\nexport const gray200 = \"#F0F0F0\";\r\nexport const gray100 = \"#F6F6F6\";\r\n\r\n//Highlight Yellows\r\nexport const yellow100 = \"#FFF2BC\";\r\n//Used to highlight features that may be unexpectedly active (i.e. if search text is preserved when you come back to a table)\r\n","import * as ConcreteColors from \"./ConcreteColors\";\r\n\r\nexport type Theme = {\r\n baseTheme: \"Ace\" | \"Concrete\";\r\n primaryColor: string;\r\n navbarColor: string;\r\n navDropdownButtonColor: string;\r\n navDropdownButtonHoverColor: string;\r\n buttonColor?: string;\r\n pageColor: string;\r\n sidebarColor: string;\r\n sidebarItemColor: string;\r\n};\r\n\r\nconst credentials: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#39453A\",\r\n navbarColor: \"#5f7361\",\r\n navDropdownButtonColor: \"#485749\",\r\n navDropdownButtonHoverColor: \"#39453A\",\r\n buttonColor: \"#5f7361\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst heavyBid: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#009639\",\r\n navbarColor: \"#009639\",\r\n navDropdownButtonColor: \"#009639\",\r\n navDropdownButtonHoverColor: \"#009639\",\r\n buttonColor: \"#009639\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst heavyJob: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#005eb8\",\r\n navbarColor: \"#005eb8\",\r\n navDropdownButtonColor: \"#4D8FCD\",\r\n navDropdownButtonHoverColor: \"#5996D1\",\r\n buttonColor: \"#005eb8\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst employeeApp: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#7B6469\",\r\n navbarColor: \"#7B6469\",\r\n navDropdownButtonColor: \"#a18b90\",\r\n navDropdownButtonHoverColor: \"#a18b90\",\r\n buttonColor: \"#7B6469\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst telematics: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#00b5e2\",\r\n navbarColor: \"#00b5e2\",\r\n navDropdownButtonColor: \"#009ac0\",\r\n navDropdownButtonHoverColor: \"#08a\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst setups: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#005eb8\",\r\n navbarColor: \"#005eb8\",\r\n navDropdownButtonColor: \"#4D8FCD\",\r\n navDropdownButtonHoverColor: \"#5996D1\",\r\n buttonColor: \"#005eb8\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst safety: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#ff9e1b\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n pageColor: \"#f0f0f0\",\r\n sidebarColor: \"#ffffff\",\r\n sidebarItemColor: \"#ffffff\"\r\n}; //Needs to be themed properly\r\n\r\nconst skills: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#50748a\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n buttonColor: \"#50748a\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst forms: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#3f8ddf\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n buttonColor: \"#3f8ddf\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst eLogs: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#79993d\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n buttonColor: \"#79993d\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst community: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#0f9948\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n buttonColor: \"#0f9948\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst academy: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#009639\",\r\n navbarColor: \"#000000\",\r\n navDropdownButtonColor: \"#000000\",\r\n navDropdownButtonHoverColor: \"#000000\",\r\n buttonColor: \"#009639\",\r\n pageColor: \"#ffffff\",\r\n sidebarColor: \"#f2f2f2\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n}; //Needs to be themed properly\r\n\r\nconst projectmanager: Theme = {\r\n baseTheme: \"Concrete\",\r\n primaryColor: \"#005eb8\",\r\n navbarColor: \"#ffffff\",\r\n navDropdownButtonColor: \"#ffffff\",\r\n navDropdownButtonHoverColor: \"#f0f0f0\",\r\n buttonColor: \"#1e1e1e\",\r\n pageColor: \"#f0f0f0\",\r\n sidebarColor: \"#ffffff\",\r\n sidebarItemColor: \"#f0f0f0\"\r\n};\r\n\r\nconst preConstruction: Theme = {\r\n baseTheme: \"Concrete\",\r\n primaryColor: ConcreteColors.blue200,\r\n navbarColor: \"#ffffff\",\r\n navDropdownButtonColor: \"#6e6e6e\",\r\n navDropdownButtonHoverColor: \"#cccccc\",\r\n buttonColor: ConcreteColors.blue200,\r\n pageColor: \"#f2f2f2\",\r\n sidebarColor: \"#ffffff\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst equipment360: Theme = {\r\n baseTheme: \"Ace\",\r\n primaryColor: \"#007681\",\r\n navbarColor: \"#007681\",\r\n navDropdownButtonColor: \"#075f67\",\r\n navDropdownButtonHoverColor: \"#034248\",\r\n buttonColor: \"#007681\",\r\n pageColor: \"#f2f2f2\",\r\n sidebarColor: \"#ffffff\",\r\n sidebarItemColor: \"#f8f8f8\"\r\n};\r\n\r\nconst themes = {\r\n credentials,\r\n heavyJob,\r\n heavyBid,\r\n telematics,\r\n employeeApp,\r\n setups,\r\n safety,\r\n skills,\r\n forms,\r\n eLogs,\r\n community,\r\n academy,\r\n projectmanager,\r\n preConstruction,\r\n equipment360\r\n};\r\n\r\nexport default themes;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nconst DropdownGroup = styled.ul`\r\n list-style: none;\r\n margin: 0;\r\n -webkit-padding-start: 0;\r\n`;\r\n\r\nconst DropdownToggle = styled.a.attrs(() => ({ href: \"#\" }))`\r\n display: block;\r\n border: none;\r\n color: white;\r\n height: 100%;\r\n padding: 0 8px;\r\n text-align: left;\r\n &:focus {\r\n outline-color: transparent;\r\n }\r\n`;\r\n\r\nconst DropdownButton = styled(DropdownToggle)`\r\n background-color: ${props => props.theme.navDropdownButtonColor};\r\n &:hover {\r\n background-color: ${props => props.theme.navDropdownButtonHoverColor};\r\n }\r\n`;\r\n\r\nconst DropdownIcon = styled.i`\r\n font-size: 36px;\r\n`;\r\n\r\nexport type DropdownProps = {\r\n className?: string;\r\n children: any;\r\n};\r\n\r\nexport type DropdownState = {\r\n isOpen: boolean;\r\n};\r\n\r\nclass UnstyledDropdown extends React.Component {\r\n private dropdownToggleRef: React.RefObject = React.createRef();\r\n private dropdownMenuRef: React.RefObject = React.createRef();\r\n\r\n constructor(props: DropdownProps) {\r\n super(props);\r\n this.state = { isOpen: false };\r\n if (props.children.length !== 2) {\r\n throw new Error(\"Dropdown requires dropdown toggle and dropdown menu\");\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener(\"mousedown\", this.toggleClose);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener(\"mousedown\", this.toggleClose);\r\n }\r\n\r\n toggleClose = (event: any) => {\r\n if (\r\n this.dropdownToggleRef.current &&\r\n !this.dropdownToggleRef.current.contains(event.target) &&\r\n this.dropdownMenuRef.current &&\r\n !this.dropdownMenuRef.current.contains(event.target)\r\n ) {\r\n this.setState((prevState, props) => {\r\n return { isOpen: false };\r\n });\r\n }\r\n };\r\n\r\n handleToggleFromMenu = (event: any) => {\r\n this.setState((prevState, props) => {\r\n return { isOpen: !prevState.isOpen };\r\n });\r\n };\r\n\r\n handleToggle = (event: any) => {\r\n event.preventDefault();\r\n this.setState((prevState, props) => {\r\n return { isOpen: !prevState.isOpen };\r\n });\r\n };\r\n\r\n render() {\r\n //inner ref is used for styled components and ref should be used if dom element\r\n //currently only supporting inner ref as there isn't a use case yet for ref\r\n const dropdownToggle = React.cloneElement(\r\n this.props.children[0],\r\n {\r\n onClick: this.handleToggle,\r\n ref: this.dropdownToggleRef\r\n },\r\n this.props.children[0].props.children\r\n );\r\n\r\n const dropdownMenu = React.cloneElement(\r\n this.props.children[1],\r\n {\r\n isOpen: this.state.isOpen,\r\n onClick: this.handleToggleFromMenu,\r\n ref: this.dropdownMenuRef\r\n },\r\n this.props.children[1].props.children\r\n );\r\n\r\n return (\r\n \r\n {dropdownToggle}\r\n {dropdownMenu}\r\n \r\n );\r\n }\r\n}\r\n\r\nconst StyledDropdown = styled(UnstyledDropdown)`\r\n float: left;\r\n line-height: 45px;\r\n height: 45px;\r\n margin-left: 2px;\r\n position: relative;\r\n`;\r\n\r\nexport default class Dropdown extends React.Component {\r\n static Group = DropdownGroup;\r\n static Toggle = DropdownToggle;\r\n static ToggleButton = DropdownButton;\r\n static Icon = DropdownIcon;\r\n render() {\r\n const { children, ...props } = this.props;\r\n return {children};\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled, { css } from \"styled-components\";\r\n\r\nexport const Divider = styled.li`\r\n height: 1px;\r\n margin: 9px 0;\r\n overflow: hidden;\r\n background-color: #e5e5e5;\r\n font-size: 0;\r\n`;\r\n\r\nexport interface DropdownMenuProps extends React.HTMLProps {\r\n className?: string;\r\n /** @ignore */\r\n isOpen?: boolean;\r\n right?: boolean;\r\n}\r\n\r\nconst StyledDropdownMenu = styled.ul`\r\n z-index: 1031;\r\n top: 99%;\r\n position: absolute;\r\n list-style: none;\r\n background-color: white;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n border-radius: 0;\r\n border: 1px solid rgba(0, 0, 0, 0.15);\r\n -webkit-padding-start: 0;\r\n display: ${(props: DropdownMenuProps) => (props.isOpen ? \"block\" : \"none\")};\r\n ${(props: DropdownMenuProps) =>\r\n (props.right &&\r\n css`\r\n right: 0;\r\n left: auto;\r\n &::before {\r\n content: \"\";\r\n display: inline-block;\r\n position: absolute;\r\n border-bottom: 7px solid white;\r\n border-left: 7px solid transparent;\r\n border-right: 7px solid transparent;\r\n right: 9px;\r\n top: -6px;\r\n }\r\n `) as any};\r\n`;\r\n\r\nexport default StyledDropdownMenu;\r\n\r\n/** Causing issues when using ref and .contains in Dropdown.tsx when detecting if a click was made outside the dropdown.\r\n * Ref forwarding is a solution but exporting styled components is a lot simpler. */\r\n\r\n// export class DropdownMenu extends React.Component {\r\n// static defaultProps = { right: false };\r\n// render() {\r\n// const { children, ...props } = this.props;\r\n// return (\r\n// {children}\r\n// );\r\n// }\r\n// }\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nconst Icon = styled.i`\r\n width: 19.5px;\r\n margin-right: 10px;\r\n`;\r\n\r\nconst MenuItemLink = styled.a`\r\n display: block;\r\n font-size: 13px;\r\n line-height: 1.42857143;\r\n padding: 4px 12px;\r\n white-space: nowrap;\r\n min-width: 160px;\r\n cursor: pointer;\r\n &&,\r\n &&:hover {\r\n color: #333;\r\n }\r\n &&:hover {\r\n background-color: rgb(245, 245, 245);\r\n }\r\n`;\r\nexport interface DropdownMenuItemProps\r\n extends React.HTMLProps {\r\n iconClassName: string;\r\n children: string;\r\n}\r\n\r\nexport default function DropdownMenuItem({\r\n iconClassName,\r\n children,\r\n ...props\r\n}: DropdownMenuItemProps) {\r\n const { ref, href, ...rest } = props;\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n}\r\n","import * as React from \"react\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport DropdownMenu, { Divider } from \"./DropdownMenu\";\r\nimport DropdownMenuItem from \"./DropdownMenuItem\";\r\n\r\nexport type HelpMenuProps = {\r\n children?: any;\r\n};\r\n\r\nconst HelpMenu: React.StatelessComponent = ({ children }) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nHelpMenu.defaultProps = {\r\n children: (\r\n <>\r\n \r\n Help Center\r\n \r\n \r\n Live Chat with Support\r\n \r\n \r\n Contact Support\r\n \r\n \r\n Help Line: 1-800-444-3196\r\n \r\n \r\n \r\n Log a Product Suggestion\r\n \r\n \r\n About HCSS\r\n \r\n >\r\n )\r\n};\r\n\r\nexport default HelpMenu;\r\n","import * as React from \"react\";\r\nimport { Link as ReactRouterLink } from \"react-router-dom\";\r\nimport styled, { css } from \"styled-components\";\r\n\r\nexport interface LinkProps extends React.HTMLProps {\r\n /** Where does it go? */\r\n to?: any;\r\n /** The style of link you want to use. Currently only a Delete style can be chosen apart from the default one. Requires an onClick to be passed in order to apply the style. */\r\n hcssStyle?: \"Delete\";\r\n /** Force rendering of regular anchor tag, instead of react router link. Using the to prop is preferred over setting this prop. */\r\n renderHtmlAnchor?: boolean;\r\n testId?: string;\r\n}\r\n\r\nconst LinkStyle = ({ hcssStyle }: LinkProps) => css`\r\n cursor: pointer;\r\n color: ${hcssStyle === \"Delete\" ? \"#dd3214\" : \"#005eb8\"};\r\n\r\n :hover,\r\n :focus {\r\n color: ${hcssStyle === \"Delete\" ? \"#dd3214\" : \"#005eb8\"};\r\n }\r\n`;\r\n\r\nconst StyledLink = styled.a`\r\n ${LinkStyle}\r\n`;\r\n\r\nconst StyledReactRouterLink = styled(({ hcssStyle, ...rest }) => (\r\n \r\n))`\r\n ${LinkStyle}\r\n`;\r\n\r\nconst _defaultTestId = \"Link\";\r\n\r\nexport default class Link extends React.Component {\r\n render() {\r\n const {\r\n to,\r\n children,\r\n href,\r\n ref,\r\n renderHtmlAnchor,\r\n testId,\r\n as,\r\n ...props\r\n } = this.props;\r\n if (to !== undefined && !renderHtmlAnchor) {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport HelpMenu from \"./HelpMenu\";\r\nimport Link from \"../Link\";\r\nexport type NavbarProps = {\r\n className?: string;\r\n logoIcon?: any;\r\n productBrandLight: string;\r\n productBrandBold: string;\r\n homeTo?: string;\r\n hamburgerMenu?: any;\r\n helpMenu?: any;\r\n profileMenu?: any;\r\n renderHtmlAnchorForHomeTo?: boolean;\r\n};\r\n\r\nconst Nav = styled.nav`\r\n font-size: 14px;\r\n background-color: ${(props) => props.theme.navbarColor};\r\n height: 45px;\r\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),\r\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n z-index: 1000;\r\n\r\n & a,\r\n & a:hover {\r\n color: white;\r\n text-decoration: none;\r\n }\r\n`;\r\n\r\nconst ProductLogo = styled(Link)`\r\n color: white;\r\n margin-left: 10px;\r\n text-decoration: none;\r\n font-family: \"ProximaNova\";\r\n font-size: 28px;\r\n line-height: normal;\r\n\r\n & > b {\r\n font-family: \"ProximaNova Heavy\";\r\n }\r\n\r\n :focus {\r\n color: white;\r\n }\r\n`;\r\n\r\nconst NavbarHeader = styled.div`\r\n float: right;\r\n margin-right: 10px;\r\n`;\r\n\r\nconst StyledLogoIcon = styled.i`\r\n color: white;\r\n font-size: 28px;\r\n padding: auto;\r\n margin-top: 20px;\r\n margin-right: 5px;\r\n line-height: normal;\r\n`;\r\n\r\nexport default class Navbar extends React.Component {\r\n static defaultProps = { homeTo: \"/\", helpMenu: };\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport interface IconProps extends React.HTMLProps {\r\n /** The name of the Font Awesome or HCSS icon */\r\n name: string;\r\n /** Will place a 5px margin to the chosen side(s) of the icon*/\r\n margin?: \"left\" | \"right\" | \"both\";\r\n}\r\n\r\n/**\r\n * Use the standard FontAwesome v4.7 icon names [found here](https://fontawesome.com/v4.7.0/icons/) plus our [custom HCSS font names](https://hcss-pattern-library-test.azurewebsites.net/#!/elements/typography) (without the fa- prefix)\r\n * So, \"name: info\" not \"name: fa-info\"\r\n */\r\n\r\nconst StyledIcon = styled.i`\r\n padding-left: ${props =>\r\n props.margin === \"left\" || props.margin === \"both\" ? \"5px\" : 0};\r\n padding-right: ${props =>\r\n props.margin === \"right\" || props.margin === \"both\" ? \"5px\" : 0};\r\n`;\r\n\r\nexport class Icon extends React.Component {\r\n render() {\r\n var { className, name, margin, ...other } = this.props;\r\n\r\n if (className === undefined || className === null) className = \"\";\r\n var iconClass = className + \" fa fa-\" + name;\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Icon;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport Icon from \"../Icon\";\r\nimport { gray600, gray400 } from \"../../AceColors\";\r\n\r\nexport type HamburgerMenuProps = {\r\n children: any;\r\n};\r\n\r\nconst DropdownButton = styled(Dropdown.Toggle)`\r\n background: inherit;\r\n padding: 0 20px 0 8px;\r\n &:hover {\r\n opacity: 0.7;\r\n }\r\n`;\r\nconst HamburgerMenuDropdownIcon = styled(Dropdown.Icon)`\r\n font-size: 17pt;\r\n margin-top: 8px;\r\n`;\r\n\r\nconst HackedDropdownMenu = styled.ul`\r\n z-index: 1031;\r\n top: 99%;\r\n position: absolute;\r\n list-style: none;\r\n background-color: white;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n border-radius: 0;\r\n border: 1px solid rgba(0, 0, 0, 0.15);\r\n -webkit-padding-start: 0;\r\n margin-top: 0;\r\n & > li p {\r\n white-space: normal;\r\n }\r\n\r\n & > li:hover > a {\r\n background: unset;\r\n color: unset;\r\n }\r\n dropdownList > li > a:hover {\r\n background-color: rgb(245, 245, 245);\r\n }\r\n display: ${(props: any) => (props.isOpen ? \"block\" : \"none\")};\r\n\r\n .btn-home {\r\n margin: 15px 0;\r\n div {\r\n text-align: center;\r\n a {\r\n color: ${gray600};\r\n border: 1px solid ${gray400};\r\n padding: 10px 15px;\r\n font-size: 12px;\r\n border-radius: 5px;\r\n i {\r\n margin-right: 2px;\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\n/** NEEDS SOME WORK: Currently hacking it */\r\nexport default class HamburgerMenu extends React.Component<\r\n HamburgerMenuProps,\r\n {}\r\n> {\r\n getHomeLink = () => {\r\n let loc = window.location.href;\r\n if (loc.includes(\"dev\")) return \"https://dev.hcssapps.com\";\r\n else if (loc.includes(\"staging\")) return \"https://staging.hcssapps.com\";\r\n else return \"https://hcssapps.com\";\r\n };\r\n\r\n render() {\r\n let homeUrl: string = this.getHomeLink();\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport { Icon } from \"../Icon\";\r\nimport styled from \"styled-components\";\r\nimport classNames from \"classnames\";\r\nimport { gray600 } from \"../../AceColors\";\r\n\r\nconst MenuItemStlying = styled.li<{ color?: string }>`\r\n &.hamburgermenu-item {\r\n a {\r\n cursor: pointer;\r\n padding: 4px 12px;\r\n .product-name {\r\n color: ${props => props.color || \"#000\"};\r\n font-size: 18pt;\r\n font-family: \"ProximaNova\";\r\n line-height: 0.1;\r\n & > i {\r\n margin-right: 10px;\r\n }\r\n }\r\n .subtitle {\r\n font-size: 13px;\r\n color: ${gray600};\r\n }\r\n }\r\n }\r\n`;\r\nexport interface HamburgerMenuItemProps extends React.HTMLProps {\r\n iconName: string;\r\n subtitle?: string;\r\n color?: string;\r\n productBrandBold: string;\r\n productBrandLight: string;\r\n}\r\nexport const HamburgerMenuItem = (props: HamburgerMenuItemProps) => {\r\n let {\r\n iconName,\r\n productBrandBold,\r\n productBrandLight,\r\n subtitle,\r\n className,\r\n href,\r\n ref,\r\n ...others\r\n } = props;\r\n return (\r\n \r\n \r\n \r\n \r\n {productBrandLight}\r\n {productBrandBold}\r\n
\r\n {subtitle}
\r\n \r\n \r\n );\r\n};\r\nexport default HamburgerMenuItem;\r\n","import * as React from \"react\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport DropdownMenu from \"./DropdownMenu\";\r\n\r\nexport type ProfileMenuProps = {\r\n className?: string;\r\n /** MenuItem, Divider, or equivalent. */\r\n children: any;\r\n firstName: string;\r\n lastName: string;\r\n /** Depending on product this could be business unit or company. */\r\n subtext: string;\r\n};\r\n\r\nexport default class ProfileMenu extends React.Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {this.props.firstName}{\" \"}\r\n {this.props.lastName && this.props.lastName[0] + \".\"}\r\n \r\n {this.props.subtext}\r\n \r\n \r\n
\r\n \r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n","/** This is exported as a default module for testing purposes.\r\n * We should expect to use this for level 1 menu containers only.\r\n * This is very hacky and best I can think of right now.\r\n */\r\n\r\nexport default class ContainerSingularOpenManager {\r\n sidebarContainerMenuItemToCloseMap: { [name: string]: any } = {};\r\n containers: string[] = [];\r\n\r\n addCloseCallback = (name: string, close: any) => {\r\n this.sidebarContainerMenuItemToCloseMap[name] = close;\r\n };\r\n\r\n addContainer = (name: string) => {\r\n this.containers.push(name);\r\n };\r\n\r\n handleOnOpen = (name: string) => {\r\n if (!this.containers.some(c => c === name)) return;\r\n\r\n this.containers\r\n .filter(n => n !== name)\r\n .forEach((n: string) => this.sidebarContainerMenuItemToCloseMap[n]());\r\n };\r\n}\r\n\r\nconst containerSingularOpenManager = new ContainerSingularOpenManager();\r\nexport { containerSingularOpenManager };\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nconst ContainerArrow = styled.b.attrs(() => ({\r\n className: \"fa fa-angle-down\"\r\n}))`\r\n display: block;\r\n width: 14px !important;\r\n height: 14px;\r\n line-height: 14px;\r\n text-shadow: none;\r\n font-size: 18px;\r\n position: absolute;\r\n right: 10px;\r\n top: 12px;\r\n padding: 0;\r\n text-align: center;\r\n`;\r\n\r\nexport type ContainerMenuListProps = {\r\n children: any;\r\n};\r\n\r\nconst StyledContainerMenuList = styled.ul`\r\n background-color: #ffffff;\r\n border-color: #e5e5e5;\r\n margin: 0;\r\n padding: 0;\r\n position: relative;\r\n display: \"block\";\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n z-index: 1;\r\n left: 18px;\r\n top: 0;\r\n bottom: 0;\r\n border: 1px dotted #9dbdd6;\r\n border-width: 0 0 0 1px;\r\n }\r\n & > li > a {\r\n background-color: #ffffff;\r\n color: #616161;\r\n }\r\n\r\n & li:not(:first-of-type) {\r\n border-top-color: #e4e4e4;\r\n border-top-style: dotted;\r\n }\r\n\r\n & li > & > li:not(.active) a:not(:hover) {\r\n color: #757575;\r\n }\r\n\r\n & li > & > li > a {\r\n margin-left: 5px;\r\n }\r\n & > li a > i {\r\n font-size: 12px;\r\n line-height: 17px;\r\n vertical-align: top;\r\n }\r\n\r\n & > li::before {\r\n content: \"\";\r\n display: inline-block;\r\n position: absolute;\r\n z-index: 1;\r\n width: 7px;\r\n left: 20px;\r\n top: 17px;\r\n border-top: 1px dotted #9dbdd6;\r\n }\r\n\r\n & > li & > li::before {\r\n display: none;\r\n }\r\n`;\r\n\r\nfunction ContainerMenuList({ children, ...props }: ContainerMenuListProps) {\r\n return (\r\n {children}\r\n );\r\n}\r\n\r\nexport { ContainerArrow, ContainerMenuList };\r\n","import styled from \"styled-components\";\r\n\r\nconst SidebarMenuItem = styled.li.attrs(() => ({\r\n \"data-testid\": \"sidebar-menu-item\"\r\n}))`\r\n display: block;\r\n position: relative;\r\n float: none;\r\n padding: 0;\r\n border-style: solid;\r\n border-width: 1px 0px 0px;\r\n border-color: rgb(224, 224, 224);\r\n margin: 0;\r\n &.active > a {\r\n font-weight: 700;\r\n color: ${props => props.theme.primaryColor};\r\n }\r\n\r\n &.active::after {\r\n display: block;\r\n content: \"\";\r\n position: absolute;\r\n right: -2px;\r\n top: -1px;\r\n bottom: 0;\r\n z-index: 1;\r\n border: 2px solid ${props => props.theme.primaryColor};\r\n border-width: 0 2px 0 0;\r\n }\r\n`;\r\nexport default SidebarMenuItem;\r\n","import styled from \"styled-components\";\r\nimport Link from \"../Link\";\r\n\r\nconst SidebarMenuItemLink = styled(Link)`\r\n font-size: 13px;\r\n margin: 0;\r\n padding-left: 7px;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n display: block;\r\n height: 39px;\r\n line-height: 20px;\r\n text-shadow: none;\r\n position: relative;\r\n\r\n &,\r\n &:visited,\r\n &:focus,\r\n &:active,\r\n &:hover {\r\n color: rgb(64, 64, 64);\r\n text-decoration: none;\r\n }\r\n &:hover {\r\n background-color: #ffffff;\r\n font-weight: 700;\r\n color: ${props => props.theme.primaryColor};\r\n }\r\n`;\r\n\r\nconst SidebarMenuItemIcon = styled.i`\r\n font-size: 18px;\r\n display: inline-block;\r\n min-width: 30px;\r\n margin-right: 2px;\r\n vertical-align: sub;\r\n text-align: center;\r\n font-weight: 400;\r\n`;\r\n\r\nexport { SidebarMenuItemLink, SidebarMenuItemIcon };\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport SidebarMenuItem from \"./SidebarMenuItem\";\r\nimport {\r\n SidebarMenuItemIcon,\r\n SidebarMenuItemLink\r\n} from \"./SidebarMenuItemComponents\";\r\n\r\nexport type SidebarLinkMenuItemProps = {\r\n /** name of the menu item */\r\n children: any;\r\n to: string;\r\n onClick?: React.MouseEventHandler;\r\n toAlternatives?: string[];\r\n className?: string;\r\n iconClassName?: string;\r\n /** force rendering of html anchor tag, instead of react-router-link */\r\n renderHtmlAnchor?: boolean;\r\n /** @ignore */\r\n windowLocationPathname?: string;\r\n};\r\n\r\nexport function isSidebarLinkMenuItemActive(\r\n to: string,\r\n toAlternatives: string[] | undefined,\r\n windowLocationPathname = window.location.pathname\r\n) {\r\n return (\r\n windowLocationPathname.toLowerCase() === to.toLowerCase() ||\r\n (toAlternatives &&\r\n toAlternatives.some(t =>\r\n windowLocationPathname.toLowerCase().startsWith(t.toLowerCase())\r\n ))\r\n );\r\n}\r\nexport default function SidebarLinkMenuItem({\r\n children,\r\n to,\r\n toAlternatives,\r\n iconClassName,\r\n className,\r\n onClick,\r\n renderHtmlAnchor,\r\n windowLocationPathname = window.location.pathname\r\n}: SidebarLinkMenuItemProps) {\r\n return (\r\n \r\n \r\n {iconClassName && }\r\n {children}\r\n \r\n \r\n );\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Collapse } from \"react-bootstrap\";\r\nimport { containerSingularOpenManager } from \"./containerSingularOpenManager\";\r\nimport {\r\n ContainerArrow,\r\n ContainerMenuList\r\n} from \"./SidebarContainerMenuItemComponents\";\r\nimport SidebarLinkMenuItem, {\r\n isSidebarLinkMenuItemActive\r\n} from \"./SidebarLinkMenuItem\";\r\nimport SidebarMenuItem from \"./SidebarMenuItem\";\r\nimport {\r\n SidebarMenuItemIcon,\r\n SidebarMenuItemLink\r\n} from \"./SidebarMenuItemComponents\";\r\n\r\nexport type SidebarContainerMenuItemProps = {\r\n /** SidebarContainerMenuItem,SidebarLinkMenuItem, or equivalent */\r\n children: any;\r\n name: string;\r\n iconClassName?: string;\r\n /** force rendering of html anchor tag, instead of react-router-link */\r\n renderHtmlAnchor?: boolean;\r\n /** @ignore */\r\n windowLocationPathname?: string;\r\n};\r\n\r\nexport type SidebarContainerMenuItemState = {\r\n isActive: boolean;\r\n isOpen: boolean;\r\n};\r\n\r\nexport default class SidebarContainerMenuItem extends React.Component<\r\n SidebarContainerMenuItemProps,\r\n SidebarContainerMenuItemState\r\n> {\r\n static defaultProps = { windowLocationPathname: window.location.pathname };\r\n constructor(props: SidebarContainerMenuItemProps) {\r\n super(props);\r\n containerSingularOpenManager.addCloseCallback(props.name, this.close);\r\n const hasAnActiveDescendant = this.hasAnActiveDescendant(props.children);\r\n this.state = {\r\n isActive: hasAnActiveDescendant,\r\n isOpen: hasAnActiveDescendant\r\n };\r\n }\r\n\r\n close = () => {\r\n this.setState((prevState, props) => {\r\n return { isOpen: false };\r\n });\r\n };\r\n hasAnActiveDescendant = (children: any): boolean => {\r\n if (Array.isArray(children))\r\n return children.some(\r\n i =>\r\n (i.type === SidebarLinkMenuItem &&\r\n this.isSidebarLinkMenuItemActive(i.props)) ||\r\n (i.type === SidebarContainerMenuItem &&\r\n this.hasAnActiveDescendant(i.props.children))\r\n );\r\n else return this.isSidebarLinkMenuItemActive(children.props) || false;\r\n };\r\n\r\n isSidebarLinkMenuItemActive = ({\r\n to,\r\n toAlternatives,\r\n windowLocationPathname\r\n }: any) =>\r\n isSidebarLinkMenuItemActive(to, toAlternatives, windowLocationPathname);\r\n\r\n handleDropdownToggleClick = (e: any) => {\r\n e.preventDefault();\r\n this.setState((prevState, props) => {\r\n const isOpen = !prevState.isOpen;\r\n if (isOpen) containerSingularOpenManager.handleOnOpen(this.props.name);\r\n return { isOpen: isOpen };\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.iconClassName && (\r\n \r\n )}\r\n {this.props.name}\r\n\r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n );\r\n } //container-menu-text is hack to easily style :(\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport SidebarContainerMenuItem from \"./SidebarContainerMenuItem\";\r\nimport { containerSingularOpenManager } from \"./containerSingularOpenManager\";\r\n\r\nconst StyledSidebarMenuList = styled.ul`\r\n margin: 0px;\r\n padding: 0;\r\n list-style: none;\r\n & > li {\r\n background-color: ${(props: any) => props.theme.sidebarItemColor};\r\n }\r\n & > li:last-child {\r\n border-bottom-width: 1px;\r\n }\r\n & > li:hover::before {\r\n display: block;\r\n position: absolute;\r\n top: -1px;\r\n left: 0;\r\n z-index: 1;\r\n height: 41px;\r\n width: 3px;\r\n max-width: 3px;\r\n overflow: hidden;\r\n background-color: ${props => props.theme.primaryColor};\r\n content: \"\";\r\n }\r\n & > li ul {\r\n line-height: 19.5px;\r\n }\r\n & > li ul > li > a {\r\n height: 100%;\r\n padding-left: 37px;\r\n }\r\n & > li ul > li ul > li {\r\n line-height: 18px;\r\n }\r\n`;\r\n\r\nexport default class SidebarMenuList extends React.Component {\r\n constructor(props: any) {\r\n super(props);\r\n const children = props.children;\r\n if (!Array.isArray(children)) return;\r\n children.forEach(i => {\r\n if (i.type === SidebarContainerMenuItem)\r\n containerSingularOpenManager.addContainer(i.props.name);\r\n });\r\n }\r\n render() {\r\n return {this.props.children};\r\n }\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type SidebarToggleProps = {\r\n /** @ignore */\r\n className?: string;\r\n sidebarExpanded: boolean;\r\n onToggle?: () => void;\r\n};\r\n\r\nconst SidebarToggleContainer = styled.div`\r\n border-style: solid;\r\n border-width: 0 0 1px;\r\n text-align: center;\r\n padding: 3px 0;\r\n position: relative;\r\n border-color: #e0e0e0;\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n height: 0;\r\n\r\n border-top: 1px solid;\r\n border-color: inherit;\r\n position: absolute;\r\n left: 15px;\r\n right: 15px;\r\n top: 13px;\r\n }\r\n`;\r\n\r\nconst SidebarToggleIcon = styled.i`\r\n padding: 0 5px;\r\n line-height: 18px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n border-radius: 100%;\r\n position: relative;\r\n background-color: white;\r\n color: rgb(170, 170, 170);\r\n border-width: 1px;\r\n border-style: solid;\r\n border-color: rgb(224, 224, 224);\r\n border-image: initial;\r\n`;\r\n\r\nexport default class SidebarToggle extends React.Component {\r\n toggleExistingLayoutContainer = (expand: any) => {\r\n const sidebarContainer = document.getElementById(\"sidebar-container\");\r\n if (sidebarContainer === null) return;\r\n\r\n if (expand) sidebarContainer.classList.remove(\"menu-min\");\r\n else sidebarContainer.classList.add(\"menu-min\");\r\n };\r\n render() {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport SidebarMenuList from \"./SidebarMenuList\";\r\nimport SidebarToggle from \"./SidebarToggle\";\r\n\r\nexport type SidebarProps = {\r\n /** @ignore */\r\n className?: string;\r\n /** @ignore */\r\n viewportWidth?: number;\r\n /** SidebarLinkMenuItem, SidebarContainerMenuItem */\r\n children: any;\r\n navbarHeight?: string;\r\n sidebarExpanded?: boolean;\r\n onToggle?: () => void;\r\n};\r\n\r\nexport type SidebarState = {\r\n sidebarExpanded: boolean;\r\n};\r\n\r\nconst Nav = styled.nav`\r\n margin-top: 2px;\r\n width: 189px;\r\n background-color: ${(props: any) => props.theme.sidebarColor};\r\n border-style: solid;\r\n border-color: #cccccc;\r\n border-width: 0 1px 0 0;\r\n line-height: normal;\r\n height: calc(100% - 2px);\r\n\r\n &.menu-min {\r\n width: 42px;\r\n\r\n > ul > li > a > span {\r\n display: none;\r\n position: absolute;\r\n height: 39px;\r\n line-height: 38px;\r\n background-color: #f5f5f5;\r\n z-index: 121;\r\n box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2);\r\n padding-left: 12px;\r\n border: 1px solid #ccc;\r\n top: -1px;\r\n left: 42px;\r\n width: 173px;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n > ul > li > a > span.container-menu-text {\r\n border: none;\r\n box-shadow: none;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n > ul > li ul::before,\r\n > ul > li ul li::before,\r\n > ul > li > a > b,\r\n > ul > li ul i {\r\n display: none;\r\n }\r\n\r\n > ul > li > ul {\r\n background: #fff;\r\n position: absolute;\r\n z-index: 120;\r\n left: 41px;\r\n top: -2px;\r\n width: 175px;\r\n border: 1px solid #ccc;\r\n box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2);\r\n padding-top: 38px;\r\n padding-bottom: 2px;\r\n display: none;\r\n }\r\n\r\n > ul > li > ul > li > a {\r\n padding: 7px 0 8px 24px;\r\n }\r\n\r\n > ul > li:hover > a > span,\r\n > ul > li:hover > ul {\r\n display: block;\r\n }\r\n }\r\n`;\r\n\r\n//Interesting logic to support existing pages layout scenario\r\nexport default class Sidebar extends React.Component<\r\n SidebarProps,\r\n SidebarState\r\n> {\r\n static defaultProps = {\r\n viewportWidth: Math.max(\r\n document.documentElement.clientWidth,\r\n window.innerWidth || 0\r\n ),\r\n navbarHeight: \"47px\"\r\n };\r\n constructor(props: SidebarProps) {\r\n super(props);\r\n this.state = {\r\n sidebarExpanded: props.sidebarExpanded ?? props.viewportWidth! > 1024\r\n };\r\n }\r\n\r\n handleToggle = () => {\r\n this.setState((prevState, props) => {\r\n var newState = !prevState.sidebarExpanded;\r\n return { sidebarExpanded: newState };\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport Navbar from \"./Navbar\";\r\nimport HamburgerMenu from \"./HamburgerMenu\";\r\nimport HamburgerMenuItem from \"./HamburgerMenuItem\";\r\nimport HelpMenu from \"./HelpMenu\";\r\nimport ProfileMenu from \"./ProfileMenu\";\r\nimport Sidebar from \"./Sidebar\";\r\nimport styled from \"styled-components\";\r\nimport { Divider } from \"./DropdownMenu\";\r\nimport DropdownMenuItem from \"./DropdownMenuItem\";\r\nimport SidebarLinkMenuItem from \"./SidebarLinkMenuItem\";\r\nimport SidebarContainerMenuItem from \"./SidebarContainerMenuItem\";\r\n\r\nexport type LayoutProps = {\r\n navbar: any;\r\n sidebar?: any;\r\n mainContent: any;\r\n footer?: any;\r\n};\r\n\r\nconst SidebarAndMainContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n`;\r\n\r\nconst StyledMain = styled.main`\r\n width: 100%;\r\n`;\r\n\r\nconst StyledAppContainer = styled.div`\r\n background-color: ${(props: any) => props.theme.pageColor};\r\n`;\r\n\r\nexport default class Layout extends React.Component {\r\n render() {\r\n return (\r\n \r\n {this.props.navbar}
\r\n\r\n \r\n \r\n \r\n {this.props.mainContent}\r\n {this.props.footer}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n static Navbar = Navbar;\r\n static DropdownMenuItem = DropdownMenuItem;\r\n static DropdownDivider = Divider;\r\n static HamburgerMenu = HamburgerMenu;\r\n static HamburgerMenuItem = HamburgerMenuItem;\r\n static HelpMenu = HelpMenu;\r\n static ProfileMenu = ProfileMenu;\r\n static Sidebar = Sidebar;\r\n static SidebarLinkMenuItem = SidebarLinkMenuItem;\r\n static SidebarContainerMenuItem = SidebarContainerMenuItem;\r\n}\r\n","import * as React from \"react\";\r\n\r\nexport const DropdownContext = React.createContext(() => {});\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\nimport classNames from \"classnames\";\r\nimport { DropdownContext } from \"./DropdownContext\";\r\n\r\n// #region Styles\r\nconst StyledDropdownGroup = styled.ul`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: space-around;\r\n list-style-type: none;\r\n margin: 0;\r\n height: 100%;\r\n`;\r\n\r\nconst DropdownToggle = styled(\"a\").attrs(() => ({\r\n href: \"#\"\r\n}))`\r\n display: block;\r\n position: relative;\r\n border: none;\r\n height: 100%;\r\n text-align: left;\r\n\r\n &:hover,\r\n &:focus,\r\n &.dropdown-active {\r\n outline: none;\r\n }\r\n`;\r\n\r\nconst DropdownButton = styled(DropdownToggle)<{ togglewidth?: number }>`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n background: none;\r\n padding: 0 16px;\r\n font-size: 1.25rem;\r\n letter-spacing: 0.02rem;\r\n font-weight: 600;\r\n color: ${ConcreteColors.gray700};\r\n z-index: 3;\r\n transition: 0.2s;\r\n\r\n /* to prevent overriding from the default styling for anchor elements */\r\n &:focus:not(:hover):not(.dropdown-active) {\r\n color: ${ConcreteColors.gray700};\r\n }\r\n\r\n &:after {\r\n transition: 0.2s;\r\n }\r\n\r\n /* triangular pointer, shown only while Dropdown is active and DropdownMenu is visible */\r\n &:after {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n top: 100%;\r\n left: 0;\r\n background: none;\r\n border-top: 0px solid transparent;\r\n\r\n border-left-style: solid;\r\n border-left-color: transparent;\r\n border-left-width: calc(${props => props.togglewidth}px / 2);\r\n\r\n border-right-style: solid;\r\n border-right-color: transparent;\r\n border-right-width: calc(${props => props.togglewidth}px / 2);\r\n transition: 0.2s, border-right-width, border-left-width 0s; /* prevents glitching when toggle region's width changes for whatever reason */\r\n }\r\n\r\n &:hover {\r\n color: ${ConcreteColors.blue200};\r\n background: ${ConcreteColors.blue100};\r\n\r\n &:after {\r\n border-top-color: ${ConcreteColors.blue100};\r\n }\r\n }\r\n\r\n &.dropdown-active {\r\n color: white;\r\n background: ${ConcreteColors.blue200};\r\n\r\n &:after {\r\n border-top-color: ${ConcreteColors.blue200};\r\n }\r\n }\r\n\r\n &:hover,\r\n &.dropdown-active {\r\n text-decoration: none !important;\r\n }\r\n\r\n &.dropdown-active {\r\n &:after {\r\n border-top-width: 12px;\r\n /* if we go with the green background color instead, and hover background is same as active background, use the timing function below */\r\n /* transition: border-top-width 0.2s cubic-bezier(0.5, 0.0, 0.5, 0.5); */\r\n }\r\n }\r\n`;\r\n\r\nconst DropdownIcon = styled.i`\r\n font-size: 1.8rem;\r\n font-weight: 400;\r\n margin-top: -4px;\r\n`;\r\n\r\n// #endregion\r\n\r\nclass DropdownGroup extends React.Component> {\r\n render() {\r\n const { children, className, ...props } = this.props;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport type DropdownProps = {\r\n className?: string;\r\n children: any;\r\n fullWidth?: boolean;\r\n};\r\n\r\nexport type DropdownState = {\r\n isOpen: boolean;\r\n toggleRegionWidth: number;\r\n};\r\n\r\nclass UnstyledDropdown extends React.Component {\r\n private dropdownToggleRef: React.RefObject = React.createRef();\r\n private dropdownMenuRef: React.RefObject = React.createRef();\r\n private dropdownToggleRegionRef: React.RefObject = React.createRef();\r\n\r\n constructor(props: DropdownProps) {\r\n super(props);\r\n this.state = {\r\n isOpen: false,\r\n toggleRegionWidth: 0\r\n };\r\n if (props.children.length !== 2) {\r\n throw new Error(\"Dropdown requires dropdown toggle and dropdown menu\");\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener(\"mousedown\", this.toggleClose);\r\n setTimeout(() => {\r\n if (this.dropdownToggleRegionRef.current) {\r\n this.setState({\r\n toggleRegionWidth: (this.dropdownToggleRegionRef\r\n .current as Element).getBoundingClientRect().width\r\n });\r\n }\r\n }, 250);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener(\"mousedown\", this.toggleClose);\r\n }\r\n\r\n toggleClose = (event: any) => {\r\n if (\r\n this.dropdownToggleRef.current &&\r\n !this.dropdownToggleRef.current.contains(event.target) &&\r\n this.dropdownMenuRef.current &&\r\n !this.dropdownMenuRef.current.contains(event.target)\r\n ) {\r\n this.setState({ isOpen: false });\r\n }\r\n };\r\n\r\n forceClose = () => this.setState({ isOpen: false });\r\n\r\n handleToggleFromMenu = (event: any) => {\r\n /* prevent the dropdown menu from hiding if the user clicks somewhere inside the menu container, but not on a link in the menu */\r\n if (!(event.target.className as string).includes(\"dropdown-menu\")) {\r\n this.setState((prevState, props) => {\r\n return { isOpen: !prevState.isOpen };\r\n });\r\n }\r\n };\r\n\r\n handleToggle = (event: any) => {\r\n const toggleDropdown = () => {\r\n this.setState(prevState => {\r\n return { isOpen: !prevState.isOpen };\r\n });\r\n };\r\n event.preventDefault();\r\n /* immediately recalculate width of toggle region, then trigger the open/close animation, with the dropdown toggle button pointer */\r\n this.setState(\r\n {\r\n toggleRegionWidth: (this.dropdownToggleRegionRef\r\n .current as Element).getBoundingClientRect().width\r\n },\r\n toggleDropdown\r\n );\r\n };\r\n\r\n render() {\r\n //inner ref is used for styled components and ref should be used if dom element\r\n //currently only supporting inner ref as there isn't a use case yet for ref\r\n const dropdownToggle = React.cloneElement(\r\n this.props.children[0],\r\n {\r\n onClick: this.handleToggle,\r\n ref: this.dropdownToggleRef,\r\n className: classNames(\"dropdown-toggle\", {\r\n \"dropdown-active\": this.state.isOpen\r\n }),\r\n togglewidth: this.state.toggleRegionWidth\r\n },\r\n this.props.children[0].props.children\r\n );\r\n\r\n const dropdownMenu = React.cloneElement(\r\n this.props.children[1],\r\n {\r\n isOpen: this.state.isOpen,\r\n onClick: this.handleToggleFromMenu,\r\n ref: this.dropdownMenuRef,\r\n className: classNames(\"dropdown-menu\", {\r\n \"dropdown-active\": this.state.isOpen\r\n })\r\n },\r\n this.props.children[1].props.children\r\n );\r\n\r\n return (\r\n \r\n \r\n {dropdownToggle}\r\n {dropdownMenu}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nconst StyledDropdown = styled(UnstyledDropdown)`\r\n display: inline-block;\r\n height: 100%;\r\n z-index: 2000;\r\n`;\r\n\r\nexport default class UpgradedDropdown extends React.Component {\r\n static Group = DropdownGroup;\r\n static Toggle = DropdownToggle;\r\n static ToggleButton = DropdownButton;\r\n static Icon = DropdownIcon;\r\n render() {\r\n const { children, className, ...props } = this.props;\r\n return {children};\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled, { css } from \"styled-components\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\n// #region Styles\r\n\r\nexport const Divider = styled.div.attrs(() => ({\r\n className: \"dropdown-menu-divider\"\r\n}))`\r\n height: 1px;\r\n margin: 8px 0;\r\n overflow: hidden;\r\n background-color: ${ConcreteColors.gray300};\r\n font-size: 0;\r\n`;\r\n\r\nconst StyledDropdownMenu = styled.div`\r\n z-index: 1031;\r\n position: absolute;\r\n top: 42px;\r\n margin: 0;\r\n padding: 0 16px 48px 16px;\r\n background-color: white;\r\n border: none;\r\n border-radius: 0;\r\n box-shadow: -2px 6px 8px -6px ${ConcreteColors.gray500};\r\n z-index: 2;\r\n\r\n display: ${props => (props.isOpen ? \"block\" : \"none\")};\r\n ${props =>\r\n (props.right &&\r\n css`\r\n right: 0;\r\n left: auto;\r\n `) as any};\r\n ${props =>\r\n (props.widthEm &&\r\n css`\r\n width: 70vw;\r\n max-width: ${props.widthEm}em;\r\n `) as any};\r\n ${props =>\r\n (props.columnCount &&\r\n css`\r\n columns: ${props.columnWidthEm}em ${props.columnCount};\r\n `) as any};\r\n ${props =>\r\n (props.columnWidthEm &&\r\n css`\r\n column-width: ${props.columnWidthEm}em;\r\n `) as any};\r\n ${props =>\r\n props.fullWidth &&\r\n css`\r\n width: 100vw;\r\n left: 0px;\r\n margin-left: 0px;\r\n max-width: ${props.width};\r\n columns: ${props.columnCount} ${props.columnWidthEm}rem;\r\n `};\r\n`;\r\n\r\n// #endregion\r\n\r\nexport interface DropdownMenuProps extends React.HTMLProps {\r\n className?: string;\r\n /** @ignore */\r\n isOpen?: boolean;\r\n right?: boolean;\r\n fullWidth?: boolean;\r\n widthEm?: number;\r\n columnCount?: number;\r\n columnWidthEm?: number;\r\n width?: string;\r\n}\r\n\r\nexport default StyledDropdownMenu;\r\n\r\n/** Causing issues when using ref and .contains in Dropdown.tsx when detecting if a click was made outside the dropdown.\r\n * Ref forwarding is a solution but exporting styled components is a lot simpler. */\r\n\r\n// export default class UpgradedDropdownMenu extends React.Component<\r\n// DropdownMenuProps\r\n// > {\r\n// static defaultProps = { right: false };\r\n// render() {\r\n// const { children, ...props } = this.props;\r\n// return (\r\n// {children}\r\n// );\r\n// }\r\n// }\r\n","import * as React from \"react\";\r\nimport { DropdownContext } from \"./DropdownContext\";\r\n\r\nexport const useDropdownMenuManager = (WrappedComponent: any) => (\r\n props: any\r\n) => {\r\n return (\r\n \r\n {value => }\r\n \r\n );\r\n};\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport styled, { css } from \"styled-components\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\nimport { LinkProps } from \"../../Link\";\r\nimport { useDropdownMenuManager } from \"./DropdownMenuManager\";\r\n\r\nconst Icon = styled.i`\r\n width: 19.5px;\r\n margin-right: 10px;\r\n`;\r\n\r\nconst MenuItemLink = styled.div`\r\n .dropdown-menu-link {\r\n display: inline-block;\r\n font-size: 1.35rem;\r\n line-height: normal;\r\n padding: 6px 0;\r\n /* min-width: 160px; */\r\n max-width: 100%;\r\n color: ${ConcreteColors.gray700};\r\n cursor: pointer;\r\n }\r\n .dropdown-menu-link:hover {\r\n color: ${ConcreteColors.blue200};\r\n }\r\n\r\n .dropdown-menu-link:active {\r\n color: ${ConcreteColors.blue300};\r\n }\r\n`;\r\n\r\nexport interface DropdownMenuItemProps extends LinkProps {\r\n /** (Optional) Specify an icon class to use an icon at the beginning of your menu item */\r\n iconClassName?: string;\r\n}\r\n\r\nfunction UpgradedDropdownMenuItem({\r\n className,\r\n iconClassName,\r\n children,\r\n to,\r\n ref,\r\n onClick,\r\n ...props\r\n}: DropdownMenuItemProps) {\r\n const useReactRouterLink = to !== undefined;\r\n\r\n return (\r\n \r\n {useReactRouterLink ? (\r\n \r\n {iconClassName && }\r\n {children}\r\n \r\n ) : (\r\n \r\n {iconClassName && }\r\n {children}\r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nconst HcssDropdownMenuItem = styled(\r\n useDropdownMenuManager(UpgradedDropdownMenuItem)\r\n)`\r\n ${props =>\r\n props.disabled === true &&\r\n css`\r\n text-decoration: none;\r\n filter: alpha(opacity=65);\r\n -webkit-box-shadow: none;\r\n box-shadow: none;\r\n opacity: 0.65;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n `};\r\n`;\r\n\r\nexport default HcssDropdownMenuItem;\r\n","import * as React from \"react\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport DropdownMenu, { Divider } from \"./DropdownMenu\";\r\nimport DropdownMenuItem from \"./DropdownMenuItem\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type HelpMenuProps = {\r\n guest?: boolean;\r\n children?: any;\r\n};\r\n\r\nconst HelpDropdownMenu = styled(DropdownMenu)`\r\n padding: 16px 24px 12px 24px;\r\n\r\n & .dropdown-menu-item > a {\r\n padding: 10px 0;\r\n }\r\n`;\r\n\r\nconst HelpMenu: React.StatelessComponent = props => {\r\n const children =\r\n props.guest !== undefined && props.guest\r\n ? HelpMenuGuestProps.children\r\n : props.children;\r\n return (\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nconst HelpMenuGuestProps = {\r\n children: (\r\n <>\r\n \r\n Help Center\r\n \r\n \r\n Contact Support\r\n \r\n \r\n \r\n About HCSS\r\n \r\n >\r\n )\r\n};\r\n\r\nHelpMenu.defaultProps = {\r\n children: (\r\n <>\r\n \r\n Help Center\r\n \r\n \r\n Live Chat with Support\r\n \r\n \r\n Contact Support\r\n \r\n \r\n Help Line: 1-800-444-3196\r\n \r\n \r\n \r\n Log a Product Suggestion\r\n \r\n \r\n About HCSS\r\n \r\n >\r\n )\r\n};\r\n\r\nexport default HelpMenu;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport HelpMenu from \"./HelpMenu\";\r\nimport Link from \"../../Link\";\r\nimport Icon from \"../../Icon\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\nexport type NavbarProps = {\r\n className?: string;\r\n logoIcon?: any;\r\n productBrandLight: string;\r\n productBrandBold: string;\r\n homeTo?: string;\r\n hamburgerMenu?: any;\r\n helpMenu?: any;\r\n profileMenu?: any;\r\n renderHtmlAnchorForHomeTo?: boolean;\r\n navMenu?: any;\r\n};\r\n\r\nexport default class Navbar extends React.Component {\r\n static defaultProps = {\r\n homeTo: \"/\",\r\n helpMenu: ,\r\n logoIcon: \r\n };\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\nconst Nav = styled.nav`\r\n display: flex; /* will ensure responsiveness based on screen size */\r\n flex-direction: row;\r\n flex-wrap: nowrap; /* will prevent the tools on the right from jumping down when the screen is made smaller */\r\n align-items: center; /* ensures that text, icons, and other content will appear centered along the same x-axis, in the middle */\r\n justify-content: space-between; /* ensures that app logo area stays at left, and menus and tools stay at right */\r\n height: 45px;\r\n\r\n background-color: white;\r\n border-bottom: 2px solid ${ConcreteColors.gray300};\r\n font-size: 14px;\r\n z-index: 1000;\r\n`;\r\n\r\nconst NavLogoArea = styled(\"div\")`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: flex-start;\r\n height: 100%;\r\n`;\r\n\r\nconst NavFeatureMenus = styled(\"div\")`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: flex-end;\r\n height: 100%;\r\n`;\r\n\r\nconst ProductLogo = styled(Link)`\r\n position: relative;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n height: 100%;\r\n margin-left: 12px;\r\n font-family: \"ProximaNova\";\r\n font-size: 20px;\r\n\r\n &:hover,\r\n &:active {\r\n text-decoration: none;\r\n\r\n & > .navbar-product-name {\r\n color: ${props => props.theme.primaryColor};\r\n text-decoration: none !important;\r\n }\r\n }\r\n\r\n & > .navbar-product-icon,\r\n & > .navbar-product-name {\r\n display: inline-block;\r\n vertical-align: middle;\r\n transition: 0.2s;\r\n }\r\n\r\n & > .navbar-product-icon {\r\n color: ${props => props.theme.primaryColor};\r\n line-height: 0;\r\n margin: -1px 10px 0 0;\r\n\r\n & > i {\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n & > .navbar-product-name {\r\n color: ${ConcreteColors.gray700};\r\n font-family: \"Inter\", \"ProximaNova\", Arial, Helvetica, sans-serif;\r\n font-size: 1.7rem;\r\n margin: -1px 0 0 0;\r\n\r\n & > strong {\r\n font-weight: 800;\r\n }\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport DropdownMenu from \"./DropdownMenu\";\r\nimport styled from \"styled-components\";\r\n\r\nconst MenuGroup = styled.div.attrs(() => ({ className: \"nav-menu-group\" }))`\r\n display: block;\r\n line-height: normal;\r\n break-inside: avoid; // used to prevent breaking group across columns in mega-menu\r\n padding: 36px 24px 0 24px;\r\n`;\r\n\r\nexport type NavMenuProps = {\r\n /** (Optional) Additional class name to apply to this component */\r\n className?: string;\r\n /** (Optional) Specify name/label for the menu. Recommend use *either* icon *or* name, not both */\r\n menuName?: string;\r\n /** (Optional) Specify an icon for the menu. Recommend use *either* icon *or* name, not both */\r\n menuIcon?: string;\r\n /** (Optional) Make the menu the full width of the window */\r\n fullWidth?: boolean;\r\n /** (Optional) Set the width of the dropdown menu in em (actually rem - relative to base font size) */\r\n widthEm?: number;\r\n /** (Optional) The max number of columns for wide screens */\r\n columnCount?: number;\r\n /** (Optional) The minimum width of columns in em (actually rem) */\r\n columnWidthEm?: number;\r\n};\r\n\r\nexport default class NavMenu extends React.Component {\r\n static Group = MenuGroup;\r\n\r\n static defaultProps = {\r\n columnCount: 1,\r\n columnWidthEm: 15\r\n };\r\n\r\n render() {\r\n var iconClassName;\r\n if (this.props.menuIcon) {\r\n iconClassName = \"fa fa-\" + this.props.menuIcon;\r\n }\r\n var iconStyle;\r\n if (this.props.menuIcon && this.props.menuName) {\r\n iconStyle = { marginRight: \"0.25em\" };\r\n }\r\n\r\n if (this.props.fullWidth === true) {\r\n return (\r\n \r\n \r\n {this.props.menuIcon && (\r\n \r\n )}\r\n {this.props.menuName}\r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n );\r\n } else {\r\n return (\r\n \r\n \r\n {this.props.menuIcon && (\r\n \r\n )}\r\n {this.props.menuName}\r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n );\r\n }\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\nexport type HamburgerMenuProps = {\r\n children: any;\r\n};\r\n\r\nconst HamburgerDropdown = styled(Dropdown)``;\r\n\r\nconst HamburgerDropdownButton = styled(Dropdown.ToggleButton)`\r\n &:hover i {\r\n color: ${ConcreteColors.blue200};\r\n }\r\n\r\n &.dropdown-active i {\r\n color: white;\r\n }\r\n`;\r\n\r\nconst HamburgerMenuDropdownIcon = styled(Dropdown.Icon)`\r\n color: ${ConcreteColors.gray400};\r\n font-size: 2rem;\r\n margin-top: -3px;\r\n`;\r\n\r\nconst HamburgerDropdownMenu = styled.ul`\r\n position: absolute;\r\n top: 40px;\r\n padding: 16px 0;\r\n list-style: none;\r\n background-color: white;\r\n border: none;\r\n border-radius: 0;\r\n box-shadow: 0 6px 8px -6px ${ConcreteColors.gray500};\r\n z-index: 2;\r\n\r\n & > li p {\r\n white-space: normal;\r\n }\r\n\r\n & > li:hover > a {\r\n background: unset;\r\n color: unset;\r\n }\r\n\r\n display: ${(props: any) => (props.isOpen ? \"block\" : \"none\")};\r\n`;\r\n\r\nexport default class HamburgerMenu extends React.Component<\r\n HamburgerMenuProps,\r\n {}\r\n> {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\n//import { Icon, ConcreteColors } from \"../../../index\";\r\nimport styled from \"styled-components\";\r\nimport classNames from \"classnames\";\r\nimport Icon from \"../../Icon\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\nconst MenuItemStyling = styled(\"li\")<{ color?: string }>`\r\n &.hamburgermenu-item {\r\n a {\r\n padding: 16px 32px 16px 16px;\r\n cursor: pointer;\r\n\r\n &:hover,\r\n &:active {\r\n background: ${ConcreteColors.gray200};\r\n }\r\n\r\n .product-link {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: stretch;\r\n justify-content: flex-start;\r\n\r\n & > .product-link-icon {\r\n margin-top: -3px;\r\n margin-right: 8px;\r\n flex-shrink: 0;\r\n font-size: 3.2rem;\r\n color: ${props => props.color || ConcreteColors.gray700};\r\n }\r\n\r\n & > .product-link-info {\r\n flex-grow: 1;\r\n font-family: \"Inter\", Arial, Helvetica, sans-serif;\r\n\r\n & > .product-name {\r\n font-size: 2rem;\r\n font-weight: 400;\r\n color: ${props => props.color || ConcreteColors.gray700};\r\n line-height: 2.6rem;\r\n\r\n & > strong {\r\n font-weight: 800;\r\n }\r\n }\r\n\r\n & > .product-desc {\r\n font-size: 1.3rem;\r\n font-weight: 400;\r\n color: ${ConcreteColors.gray700};\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`;\r\nexport interface HamburgerMenuItemProps extends React.HTMLProps {\r\n iconName: string;\r\n subtitle?: string;\r\n color?: string;\r\n productBrandBold: string;\r\n productBrandLight: string;\r\n}\r\nexport const HamburgerMenuItem = ({ ...props }: HamburgerMenuItemProps) => {\r\n let {\r\n iconName,\r\n productBrandBold,\r\n productBrandLight,\r\n subtitle,\r\n className,\r\n href,\r\n ref,\r\n ...others\r\n } = props;\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {productBrandLight} {productBrandBold}\r\n
\r\n
{subtitle}
\r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default HamburgerMenuItem;\r\n","import React from \"react\";\r\nimport { UserInfoSectionProps as ComponentProps } from \"./Models\";\r\nimport * as ConcreteColors from \"../../../../ConcreteColors\";\r\nimport styled, { css } from \"styled-components\";\r\n\r\nconst UserInfoSection: React.FC = (props: ComponentProps) => {\r\n // Destructure props\r\n const { firstName, lastName, companyName } = props;\r\n\r\n // Get user's initials\r\n const getFirstInitial = () => firstName[0]?.toUpperCase() ?? \"\";\r\n const getLastInitial = () => (lastName && lastName[0]?.toUpperCase()) ?? \"\";\r\n\r\n // Render user's full name\r\n const getFullName = () => {\r\n if (!lastName || lastName.trim() === \"\") return firstName;\r\n return `${firstName} ${lastName}`;\r\n };\r\n\r\n //\r\n //\r\n //\r\n return (\r\n \r\n \r\n \r\n {getFirstInitial()}\r\n {getLastInitial()}\r\n \r\n
\r\n \r\n {getFullName()}\r\n
\r\n \r\n {companyName}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default UserInfoSection;\r\n\r\n// Styled components\r\nconst cutoffText = css`\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n`;\r\n\r\nconst StyledUserInfoSection = styled.div`\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n grid-template-rows: 2.4rem 2.8rem;\r\n grid-template-areas:\r\n \"initials name\"\r\n \"initials company\";\r\n grid-column-gap: 16px;\r\n grid-row-gap: 3px;\r\n margin: 1px 0 8px;\r\n padding: 24px 20px 0;\r\n background: #ffffff;\r\n box-shadow: inset 0 96px 24px -48px #ececec;\r\n\r\n & > .user-initials {\r\n grid-area: initials;\r\n display: flex;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n width: 60px;\r\n height: 60px;\r\n\r\n background: ${ConcreteColors.blue200};\r\n border-radius: 60px;\r\n color: #ffffff;\r\n font-family: \"ProximaNova\", Arial, Helvetica, sans-serif;\r\n font-size: 2.4rem;\r\n letter-spacing: 0.1rem;\r\n ${cutoffText}\r\n }\r\n\r\n & > .user-full-name {\r\n grid-area: name;\r\n color: ${ConcreteColors.gray700};\r\n font-family: \"ProximaNova Heavy\", Arial, Helvetica, sans-serif;\r\n font-size: 2rem;\r\n line-height: normal;\r\n ${cutoffText}\r\n }\r\n\r\n & > .user-company-name {\r\n grid-area: company;\r\n color: ${ConcreteColors.gray500};\r\n font-size: 1.3rem;\r\n align-self: self-start;\r\n line-height: normal;\r\n ${cutoffText}\r\n }\r\n`;\r\n","import React, { useMemo } from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { ProfileMenuItemProps } from \"./Models\";\r\nimport { Icon } from \"../../../Icon\";\r\nimport * as ConcreteColors from \"../../../../ConcreteColors\";\r\nimport styled, { css } from \"styled-components\";\r\n\r\nconst ProfileMenuItem: React.FC = (\r\n props: ProfileMenuItemProps\r\n) => {\r\n // Destructure props\r\n const { label, status, linkTo, onClick, testId, title, ...rest } = props;\r\n\r\n // Render the label of the menu item.\r\n const itemLabel = useMemo(() => {\r\n return (\r\n \r\n {label}\r\n \r\n );\r\n }, [label]);\r\n\r\n // Render the current status of the setting this item is related\r\n // to, if provided a status\r\n const itemStatus = useMemo(() => {\r\n if (!!status)\r\n return (\r\n \r\n {status}\r\n \r\n );\r\n return null;\r\n }, [status]);\r\n\r\n // Render a right-pointing caret as a click affordance, if a status\r\n // is provided (i.e. if this is \"setting\" item)\r\n const clickAffordance = useMemo(() => {\r\n if (!!status)\r\n return (\r\n \r\n \r\n \r\n );\r\n return null;\r\n }, [status]);\r\n\r\n // Render the click target that houses the menu item.\r\n // -- If a value is provided for \"onClick\", this click target will be\r\n // a \"button\" DOM node\r\n // -- If a value if provided for \"linkTo\" this click target will be an\r\n // anchor DOM node\r\n // -- If a value is passed for both, an anchor tag will be rendered, but\r\n // both the link (href) and \"onClick\" values will be passed to it.\r\n // -- If no value is passed for either, a static item will be rendered\r\n // and a warning will be thrown.\r\n const clickTarget = useMemo(() => {\r\n const itemTypeClass = !!status ? \"setting-item\" : \"standard-item\";\r\n\r\n if (!linkTo && !onClick) {\r\n console.warn(\r\n `Warning: Each ProfileMenu item should have a value for either the linkTo or the onClick property\r\n[HCSS Components Bundle | LayoutConcrete.ProfileMenu.ProfileMenuItem]`\r\n );\r\n return (\r\n \r\n {itemLabel}\r\n {itemStatus}\r\n {clickAffordance}\r\n
\r\n );\r\n }\r\n if (linkTo)\r\n return (\r\n \r\n {itemLabel}\r\n {itemStatus}\r\n {clickAffordance}\r\n \r\n );\r\n return (\r\n \r\n );\r\n }, [status, linkTo, onClick, title, itemLabel, itemStatus, clickAffordance]);\r\n\r\n //\r\n //\r\n //\r\n return (\r\n \r\n {clickTarget}\r\n \r\n );\r\n};\r\n\r\nexport default ProfileMenuItem;\r\n\r\n// Styled components\r\nconst MenuItemWrapper = styled.li`\r\n display: block;\r\n position: relative;\r\n padding: 0;\r\n width: 100%;\r\n`;\r\n\r\nconst clickTargetBaseProps = css`\r\n display: block;\r\n position: relative;\r\n width: 100%;\r\n padding: 10px 20px;\r\n\r\n transition: 0.2s;\r\n\r\n &.setting-item {\r\n display: grid;\r\n grid-template-columns: 1fr 24px;\r\n grid-template-rows: auto auto;\r\n grid-template-areas:\r\n \"label caret\"\r\n \"status caret\";\r\n\r\n margin: -16px 0 16px;\r\n padding: 16px 20px;\r\n\r\n border-bottom: 1px solid ${ConcreteColors.gray300};\r\n\r\n & > .profile-menu-item-label {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n letter-spacing: 0.02rem;\r\n text-transform: uppercase;\r\n }\r\n }\r\n\r\n &,\r\n &:active,\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n &,\r\n &:hover,\r\n &:active,\r\n &:focus,\r\n &:active:focus {\r\n text-decoration: none;\r\n }\r\n\r\n &:hover,\r\n &:active,\r\n &:focus,\r\n &:active:focus {\r\n background: ${ConcreteColors.blue150};\r\n cursor: pointer;\r\n\r\n &,\r\n & * {\r\n color: ${ConcreteColors.blue200};\r\n }\r\n }\r\n`;\r\n\r\nconst cutoffText = css`\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n`;\r\n\r\n// Simple fix in order to prevent an issue with styled-components\r\n// when trying to created styled extension on top of the react-router-dom\r\n// Link component\r\nconst MenuItemClickTargetWrapper = styled.div`\r\n & > .static-item,\r\n & > .link-item {\r\n ${clickTargetBaseProps}\r\n ${cutoffText}\r\n }\r\n\r\n & > .button-item {\r\n ${clickTargetBaseProps}\r\n background: none;\r\n border: 0;\r\n box-shadow: none;\r\n ${cutoffText}\r\n text-align: left;\r\n }\r\n`;\r\n\r\n// Content inside the menu item -- label, status, and click affordance\r\nconst MenuItemLabel = styled.div`\r\n grid-area: label;\r\n align-self: self-end;\r\n font-size: 1.5rem;\r\n\r\n color: ${ConcreteColors.gray600};\r\n ${cutoffText}\r\n`;\r\n\r\nconst MenuItemStatus = styled.div`\r\n grid-area: status;\r\n align-self: self-start;\r\n margin-top: 2px;\r\n\r\n color: ${ConcreteColors.gray700};\r\n font-size: 1.5rem;\r\n ${cutoffText}\r\n`;\r\n\r\nconst MenuItemClickAffordance = styled.div`\r\n grid-area: caret;\r\n align-self: center;\r\n justify-self: self-end;\r\n\r\n color: ${ConcreteColors.gray400};\r\n font-size: 2.2rem;\r\n\r\n & > i {\r\n transition: 0.2s;\r\n }\r\n`;\r\n","import React, { PropsWithChildren as WithChildren } from \"react\";\r\nimport { ProfileMenuProps } from \"./Models\";\r\nimport Dropdown from \"../Dropdown\";\r\nimport DropdownMenu from \"../DropdownMenu\";\r\nimport UserInfoSection from \"./UserInfoSection\";\r\nimport ProfileMenuItem from \"./ProfileMenuItem\";\r\n// import * as ConcreteColors from \"../../../../ConcreteColors\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type ProfileMenuComponent = React.FC> & {\r\n Item: typeof ProfileMenuItem;\r\n};\r\n\r\nconst ProfileMenu: ProfileMenuComponent = (\r\n props: WithChildren\r\n) => {\r\n // Destructure props\r\n const {\r\n firstName,\r\n lastName,\r\n companyName,\r\n children,\r\n className,\r\n menuClassName,\r\n userInfoComponent,\r\n menuIcon\r\n } = props;\r\n\r\n const renderUserInfo = () => {\r\n const UserInfo = userInfoComponent || UserInfoSection;\r\n return (\r\n \r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n {renderUserInfo()}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nProfileMenu.Item = ProfileMenuItem;\r\nexport default ProfileMenu;\r\n\r\n// Styled components\r\nconst MenuInnerWrapper = styled.div`\r\n position: relative;\r\n margin: 0 -16px;\r\n width: 360px;\r\n\r\n & > ul {\r\n margin: 32px 0 -32px;\r\n list-style-type: none;\r\n width: 100%;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nconst ContainerArrow = styled.b.attrs(() => ({\r\n className: \"fa fa-angle-down\"\r\n}))`\r\n display: block;\r\n width: 14px !important;\r\n height: 14px;\r\n line-height: 14px;\r\n text-shadow: none;\r\n font-size: 18px;\r\n position: absolute;\r\n right: 10px;\r\n top: 12px;\r\n padding: 0;\r\n text-align: center;\r\n`;\r\n\r\nexport type ContainerMenuListProps = {\r\n children: any;\r\n};\r\n\r\nconst StyledContainerMenuList = styled.ul`\r\n background-color: #ffffff;\r\n border-color: #e5e5e5;\r\n margin: 0;\r\n padding: 0;\r\n position: relative;\r\n display: \"block\";\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n z-index: 1;\r\n left: 18px;\r\n top: 0;\r\n bottom: 0;\r\n border: 1px dotted #9dbdd6;\r\n border-width: 0 0 0 1px;\r\n }\r\n & > li > a {\r\n background-color: #ffffff;\r\n color: #616161;\r\n }\r\n\r\n & li:not(:first-of-type) {\r\n border-top-color: #e4e4e4;\r\n border-top-style: dotted;\r\n }\r\n\r\n & li > & > li:not(.active) a:not(:hover) {\r\n color: #757575;\r\n }\r\n\r\n & li > & > li > a {\r\n margin-left: 5px;\r\n }\r\n & > li a > i {\r\n font-size: 12px;\r\n line-height: 17px;\r\n vertical-align: top;\r\n }\r\n\r\n & > li::before {\r\n content: \"\";\r\n display: inline-block;\r\n position: absolute;\r\n z-index: 1;\r\n width: 7px;\r\n left: 20px;\r\n top: 17px;\r\n border-top: 1px dotted #9dbdd6;\r\n }\r\n\r\n & > li & > li::before {\r\n display: none;\r\n }\r\n`;\r\n\r\nfunction ContainerMenuList({ children, ...props }: ContainerMenuListProps) {\r\n return (\r\n {children}\r\n );\r\n}\r\n\r\nexport { ContainerArrow, ContainerMenuList };\r\n","import styled from \"styled-components\";\r\n\r\nconst SidebarMenuItem = styled.li.attrs(() => ({\r\n \"data-testid\": \"sidebar-menu-item\"\r\n}))`\r\n display: block;\r\n position: relative;\r\n float: none;\r\n padding: 0;\r\n border-style: solid;\r\n border-width: 1px 0px 0px;\r\n border-color: rgb(224, 224, 224);\r\n margin: 0;\r\n &.active > a {\r\n font-weight: 700;\r\n color: ${props => props.theme.primaryColor};\r\n }\r\n\r\n &.active::after {\r\n display: block;\r\n content: \"\";\r\n position: absolute;\r\n right: -2px;\r\n top: -1px;\r\n bottom: 0;\r\n z-index: 1;\r\n border: 2px solid ${props => props.theme.primaryColor};\r\n border-width: 0 2px 0 0;\r\n }\r\n`;\r\n\r\nexport default SidebarMenuItem;\r\n","import styled from \"styled-components\";\r\nimport Link from \"../../Link\";\r\n\r\nconst SidebarMenuItemLink = styled(Link)`\r\n font-size: 13px;\r\n margin: 0;\r\n padding-left: 7px;\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n display: block;\r\n height: 39px;\r\n line-height: 20px;\r\n text-shadow: none;\r\n position: relative;\r\n\r\n &,\r\n &:visited,\r\n &:focus,\r\n &:active,\r\n &:hover {\r\n color: rgb(64, 64, 64);\r\n text-decoration: none;\r\n }\r\n &:hover {\r\n background-color: #f0f0f0;\r\n font-weight: 700;\r\n color: ${props => props.theme.primaryColor};\r\n }\r\n`;\r\n\r\nconst SidebarMenuItemIcon = styled.i`\r\n font-size: 18px;\r\n display: inline-block;\r\n min-width: 30px;\r\n margin-right: 2px;\r\n vertical-align: sub;\r\n text-align: center;\r\n font-weight: 400;\r\n`;\r\n\r\nexport { SidebarMenuItemLink, SidebarMenuItemIcon };\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport SidebarMenuItem from \"./SidebarMenuItem\";\r\nimport {\r\n SidebarMenuItemIcon,\r\n SidebarMenuItemLink\r\n} from \"./SidebarMenuItemComponents\";\r\n\r\nexport type SidebarLinkMenuItemProps = {\r\n /** name of the menu item */\r\n children: any;\r\n to: string;\r\n onClick?: React.MouseEventHandler;\r\n toAlternatives?: string[];\r\n className?: string;\r\n iconClassName?: string;\r\n /** force rendering of html anchor tag, instead of react-router-link */\r\n renderHtmlAnchor?: boolean;\r\n /** @ignore */\r\n windowLocationPathname?: string;\r\n};\r\n\r\nexport function isSidebarLinkMenuItemActive(\r\n to: string,\r\n toAlternatives: string[] | undefined,\r\n windowLocationPathname = window.location.pathname\r\n) {\r\n return (\r\n windowLocationPathname.toLowerCase() === to.toLowerCase() ||\r\n (toAlternatives &&\r\n toAlternatives.some(t =>\r\n windowLocationPathname.toLowerCase().startsWith(t.toLowerCase())\r\n ))\r\n );\r\n}\r\nexport default function SidebarLinkMenuItem({\r\n children,\r\n to,\r\n toAlternatives,\r\n iconClassName,\r\n className,\r\n onClick,\r\n renderHtmlAnchor,\r\n windowLocationPathname = window.location.pathname\r\n}: SidebarLinkMenuItemProps) {\r\n return (\r\n \r\n \r\n {iconClassName && }\r\n {children}\r\n \r\n \r\n );\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Collapse } from \"react-bootstrap\";\r\nimport { containerSingularOpenManager } from \"../containerSingularOpenManager\";\r\nimport {\r\n ContainerArrow,\r\n ContainerMenuList\r\n} from \"./SidebarContainerMenuItemComponents\";\r\nimport SidebarLinkMenuItem, {\r\n isSidebarLinkMenuItemActive\r\n} from \"./SidebarLinkMenuItem\";\r\nimport SidebarMenuItem from \"./SidebarMenuItem\";\r\nimport {\r\n SidebarMenuItemIcon,\r\n SidebarMenuItemLink\r\n} from \"./SidebarMenuItemComponents\";\r\n\r\nexport type SidebarContainerMenuItemProps = {\r\n /** SidebarContainerMenuItem,SidebarLinkMenuItem, or equivalent */\r\n children: any;\r\n name: string;\r\n iconClassName?: string;\r\n /** force rendering of html anchor tag, instead of react-router-link */\r\n renderHtmlAnchor?: boolean;\r\n /** @ignore */\r\n windowLocationPathname?: string;\r\n};\r\n\r\nexport type SidebarContainerMenuItemState = {\r\n isActive: boolean;\r\n isOpen: boolean;\r\n};\r\n\r\nexport default class SidebarContainerMenuItem extends React.Component<\r\n SidebarContainerMenuItemProps,\r\n SidebarContainerMenuItemState\r\n> {\r\n static defaultProps = { windowLocationPathname: window.location.pathname };\r\n constructor(props: SidebarContainerMenuItemProps) {\r\n super(props);\r\n containerSingularOpenManager.addCloseCallback(props.name, this.close);\r\n const hasAnActiveDescendant = this.hasAnActiveDescendant(props.children);\r\n this.state = {\r\n isActive: hasAnActiveDescendant,\r\n isOpen: hasAnActiveDescendant\r\n };\r\n }\r\n\r\n close = () => {\r\n this.setState((prevState, props) => {\r\n return { isOpen: false };\r\n });\r\n };\r\n hasAnActiveDescendant = (children: any): boolean => {\r\n if (Array.isArray(children))\r\n return children.some(\r\n i =>\r\n (i.type === SidebarLinkMenuItem &&\r\n this.isSidebarLinkMenuItemActive(i.props)) ||\r\n (i.type === SidebarContainerMenuItem &&\r\n this.hasAnActiveDescendant(i.props.children))\r\n );\r\n else return this.isSidebarLinkMenuItemActive(children.props) || false;\r\n };\r\n\r\n isSidebarLinkMenuItemActive = ({\r\n to,\r\n toAlternatives,\r\n windowLocationPathname\r\n }: any) =>\r\n isSidebarLinkMenuItemActive(to, toAlternatives, windowLocationPathname);\r\n\r\n handleDropdownToggleClick = (e: any) => {\r\n e.preventDefault();\r\n this.setState((prevState, props) => {\r\n const isOpen = !prevState.isOpen;\r\n if (isOpen) containerSingularOpenManager.handleOnOpen(this.props.name);\r\n return { isOpen: isOpen };\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.iconClassName && (\r\n \r\n )}\r\n {this.props.name}\r\n\r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport SidebarContainerMenuItem from \"./SidebarContainerMenuItem\";\r\nimport { containerSingularOpenManager } from \"../containerSingularOpenManager\";\r\n\r\nconst StyledSidebarMenuList = styled.ul`\r\n margin: 0px;\r\n padding: 0;\r\n list-style: none;\r\n & > li {\r\n background-color: #ffffff;\r\n }\r\n & > li:last-child {\r\n border-bottom-width: 1px;\r\n }\r\n & > li:hover::before {\r\n display: block;\r\n position: absolute;\r\n top: -1px;\r\n left: 0;\r\n z-index: 1;\r\n height: 41px;\r\n width: 3px;\r\n max-width: 3px;\r\n overflow: hidden;\r\n background-color: ${props => props.theme.primaryColor};\r\n content: \"\";\r\n }\r\n & > li ul {\r\n line-height: 19.5px;\r\n }\r\n & > li ul > li > a {\r\n height: 100%;\r\n padding-left: 37px;\r\n }\r\n & > li ul > li ul > li {\r\n line-height: 18px;\r\n }\r\n`;\r\n\r\nexport default class SidebarMenuList extends React.Component {\r\n constructor(props: any) {\r\n super(props);\r\n const children = props.children;\r\n if (!Array.isArray(children)) return;\r\n children.forEach(i => {\r\n if (i.type === SidebarContainerMenuItem)\r\n containerSingularOpenManager.addContainer(i.props.name);\r\n });\r\n }\r\n render() {\r\n return {this.props.children};\r\n }\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type SidebarToggleProps = {\r\n /** @ignore */\r\n className?: string;\r\n sidebarExpanded: boolean;\r\n onToggle?: () => void;\r\n};\r\n\r\nconst SidebarToggleContainer = styled.div`\r\n border-style: solid;\r\n border-width: 0 0 1px;\r\n text-align: center;\r\n padding: 3px 0;\r\n position: relative;\r\n border-color: #e0e0e0;\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n height: 0;\r\n\r\n border-top: 1px solid;\r\n border-color: inherit;\r\n position: absolute;\r\n left: 15px;\r\n right: 15px;\r\n top: 13px;\r\n }\r\n`;\r\n\r\nconst SidebarToggleIcon = styled.i`\r\n padding: 0 5px;\r\n line-height: 18px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n border-radius: 100%;\r\n position: relative;\r\n background-color: white;\r\n color: rgb(170, 170, 170);\r\n border-width: 1px;\r\n border-style: solid;\r\n border-color: rgb(224, 224, 224);\r\n border-image: initial;\r\n`;\r\n\r\nexport default class SidebarToggle extends React.Component {\r\n toggleExistingLayoutContainer = (expand: any) => {\r\n const sidebarContainer = document.getElementById(\"sidebar-container\");\r\n if (sidebarContainer === null) return;\r\n\r\n if (expand) sidebarContainer.classList.remove(\"menu-min\");\r\n else sidebarContainer.classList.add(\"menu-min\");\r\n };\r\n render() {\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport SidebarMenuList from \"./SidebarMenuList\";\r\nimport SidebarToggle from \"./SidebarToggle\";\r\n\r\nexport type SidebarProps = {\r\n /** @ignore */\r\n className?: string;\r\n /** @ignore */\r\n viewportWidth?: number;\r\n /** SidebarLinkMenuItem, SidebarContainerMenuItem */\r\n children: any;\r\n navbarHeight?: string;\r\n sidebarExpanded?: boolean;\r\n onToggle?: () => void;\r\n};\r\n\r\nexport type SidebarState = {\r\n sidebarExpanded: boolean;\r\n};\r\n\r\nconst Nav = styled.nav`\r\n width: 190px;\r\n background-color: #fff;\r\n line-height: normal;\r\n height: calc(100% - 2px);\r\n border-right: 2px solid #ececec;\r\n\r\n > ul > li:first-child {\r\n border-top-width: 0 !important;\r\n }\r\n\r\n &.menu-min {\r\n width: 42px;\r\n\r\n > ul > li > a > span {\r\n display: none;\r\n position: absolute;\r\n height: 39px;\r\n line-height: 38px;\r\n background-color: #f5f5f5;\r\n z-index: 121;\r\n box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2);\r\n padding-left: 12px;\r\n border: 1px solid #ccc;\r\n top: -1px;\r\n left: 42px;\r\n width: 173px;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n > ul > li > a > span.container-menu-text {\r\n border: none;\r\n box-shadow: none;\r\n border-bottom: 1px solid #ddd;\r\n }\r\n\r\n > ul > li ul::before,\r\n > ul > li ul li::before,\r\n > ul > li > a > b,\r\n > ul > li ul i {\r\n display: none;\r\n }\r\n\r\n > ul > li > ul {\r\n background: #fff;\r\n position: absolute;\r\n z-index: 120;\r\n left: 41px;\r\n top: -2px;\r\n width: 175px;\r\n border: 1px solid #ccc;\r\n box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, 0.2);\r\n padding-top: 38px;\r\n padding-bottom: 2px;\r\n display: none;\r\n }\r\n\r\n > ul > li > ul > li > a {\r\n padding: 7px 0 8px 24px;\r\n }\r\n\r\n > ul > li:hover > a > span,\r\n > ul > li:hover > ul {\r\n display: block;\r\n }\r\n }\r\n`;\r\n\r\n//Interesting logic to support existing pages layout scenario\r\nexport default class Sidebar extends React.Component<\r\n SidebarProps,\r\n SidebarState\r\n> {\r\n static defaultProps = {\r\n viewportWidth: Math.max(\r\n document.documentElement.clientWidth,\r\n window.innerWidth || 0\r\n ),\r\n navbarHeight: \"47px\"\r\n };\r\n constructor(props: SidebarProps) {\r\n super(props);\r\n this.state = {\r\n sidebarExpanded: props.sidebarExpanded ?? props.viewportWidth! > 1024\r\n };\r\n }\r\n\r\n handleToggle = () => {\r\n this.setState((prevState, props) => {\r\n var newState = !prevState.sidebarExpanded;\r\n return { sidebarExpanded: newState };\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\nconst Icon = styled.i`\r\n width: 19.5px;\r\n margin-right: 10px;\r\n`;\r\n\r\nconst MenuHeading = styled.div`\r\n display: block;\r\n font-size: 1.22rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n margin: 0 0 12px 0;\r\n color: ${ConcreteColors.gray600};\r\n`;\r\nexport interface DropdownMenuHeadingProps {\r\n /** (Optional) Specify an icon class to use an icon at the beginning of your heading */\r\n iconClassName?: string;\r\n children: string;\r\n}\r\n\r\nexport default function DropdownMenuHeading({\r\n iconClassName,\r\n children\r\n}: DropdownMenuHeadingProps) {\r\n return (\r\n \r\n {iconClassName && }\r\n {children}\r\n \r\n );\r\n}\r\n","import * as React from \"react\";\r\nimport Navbar from \"./Navbar\";\r\nimport NavMenu from \"./NavMenu\";\r\nimport HamburgerMenu from \"./HamburgerMenu\";\r\nimport HamburgerMenuItem from \"./HamburgerMenuItem\";\r\nimport HelpMenu from \"./HelpMenu\";\r\nimport ProfileMenu from \"./ProfileMenu\";\r\nimport Sidebar from \"./Sidebar\";\r\nimport styled from \"styled-components\";\r\nimport { Divider } from \"./DropdownMenu\";\r\nimport Dropdown from \"./Dropdown\";\r\nimport DropdownMenuItem from \"./DropdownMenuItem\";\r\nimport DropdownMenuHeading from \"./DropdownMenuHeading\";\r\nimport SidebarLinkMenuItem from \"./SidebarLinkMenuItem\";\r\nimport SidebarContainerMenuItem from \"./SidebarContainerMenuItem\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\n\r\nexport type LayoutProps = {\r\n navbar: any;\r\n sidebar?: any;\r\n mainContent: any;\r\n footer?: any;\r\n};\r\n\r\nconst SidebarAndMainContainer = styled(\"div\")`\r\n display: flex;\r\n flex-direction: row;\r\n`;\r\n\r\nconst StyledMain = styled.main`\r\n width: 100%;\r\n`;\r\n\r\nconst BackgroundColorDiv = styled.div`\r\n background-color: ${ConcreteColors.gray200};\r\n`;\r\n\r\nexport default class Layout extends React.Component {\r\n render() {\r\n return (\r\n \r\n {this.props.navbar}\r\n \r\n \r\n \r\n {this.props.mainContent}\r\n {this.props.footer}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n static Navbar = Navbar;\r\n static DropdownMenuItem = DropdownMenuItem;\r\n static DropdownMenuHeading = DropdownMenuHeading;\r\n static DropdownDivider = Divider;\r\n static HamburgerMenu = HamburgerMenu;\r\n static HamburgerMenuItem = HamburgerMenuItem;\r\n static HelpMenu = HelpMenu;\r\n static ProfileMenu = ProfileMenu;\r\n static Sidebar = Sidebar;\r\n static SidebarLinkMenuItem = SidebarLinkMenuItem;\r\n static SidebarContainerMenuItem = SidebarContainerMenuItem;\r\n static NavMenu = NavMenu;\r\n static Dropdown = Dropdown;\r\n}\r\n","import * as React from \"react\";\r\nimport { Icon } from \"../Icon\";\r\nimport { BreadcrumbItem, BreadcrumbItemProps } from \"./BreadcrumbItem\";\r\nimport { gray600 } from \"../../AceColors\";\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst BreadcrumbsWrapper = styled(\"div\")`\r\n & > .breadcrumb {\r\n margin: 10px 0 10px;\r\n font-size: 13px;\r\n padding: 0;\r\n background-color: unset;\r\n\r\n > i {\r\n font-size: 18px;\r\n }\r\n\r\n > li:last-child {\r\n font-weight: bold;\r\n }\r\n }\r\n & > .breadcrumb > li {\r\n padding: 0 3px;\r\n }\r\n & > .breadcrumb > li > a {\r\n color: #0370f5;\r\n }\r\n & > .breadcrumb > li + li:before {\r\n font-family: FontAwesome;\r\n font-size: 14px;\r\n content: \"\\f105\";\r\n color: ${gray600};\r\n padding: 0;\r\n margin-right: 6px;\r\n font-weight: normal;\r\n }\r\n`;\r\n\r\nexport type BreadcrumbsProps = {\r\n /** FontAwesome 4 icon name without 'fa fa-' prefix */\r\n iconName?: string;\r\n /** Children prop takes a list of Breadcrumbs.Item components */\r\n children?:\r\n | React.ReactElement\r\n | React.ReactElement[];\r\n};\r\n\r\nexport default class Breadcrumbs extends React.Component {\r\n static defaultProps = {};\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.iconName && (\r\n \r\n )}\r\n {this.props.children}\r\n
\r\n \r\n );\r\n }\r\n\r\n static Item = BreadcrumbItem;\r\n}\r\n","import * as React from \"react\";\r\nimport Link from \"../Link\";\r\nimport { LinkProps } from \"react-router-dom\";\r\nimport { LocationDescriptor } from \"history\";\r\nimport classNames from \"classnames\";\r\n\r\ntype Omit = Pick>;\r\ntype ReducedLinkProps = Omit;\r\n\r\nexport interface BreadcrumbItemProps extends ReducedLinkProps {\r\n to?: LocationDescriptor;\r\n}\r\n\r\nexport const BreadcrumbItem = (props: BreadcrumbItemProps) => {\r\n const { className, ...other } = props;\r\n if (other.to) {\r\n return (\r\n \r\n \r\n {props.children}\r\n \r\n \r\n );\r\n }\r\n\r\n return {props.children};\r\n};\r\n","import * as React from \"react\";\r\nimport styled, { withTheme } from \"styled-components\";\r\nimport { Button as BootstrapButton } from \"react-bootstrap\";\r\nimport { Theme } from \"../themes\";\r\nimport * as AceColors from \"../AceColors\";\r\nimport * as ConcreteColors from \"../ConcreteColors\";\r\n\r\n// Concrete buttons have additional styling applied in ConcreteButton\r\nconst ButtonStyle = styled(\r\n ({ buttontextcolor, buttonbackgroundcolor, buttonbordercolor, ...rest }) => (\r\n \r\n )\r\n)<{\r\n buttontextcolor: string;\r\n buttonbackgroundcolor: string;\r\n buttonbordercolor: string;\r\n}>`\r\n border-radius: 0;\r\n border-width: 1px;\r\n border-color: ${props => props.buttonbordercolor};\r\n background-color: ${props => props.buttonbackgroundcolor};\r\n color: ${props => props.buttontextcolor};\r\n :hover:not(.btn-link) {\r\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),\r\n 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);\r\n background-color: ${props => props.buttonbackgroundcolor};\r\n border-color: ${props => props.buttonbordercolor};\r\n color: ${props => props.buttontextcolor};\r\n }\r\n :active {\r\n background-color: ${props => props.buttonbackgroundcolor};\r\n border-color: ${props => props.buttonbordercolor};\r\n box-shadow: none;\r\n color: ${props => props.buttontextcolor};\r\n }\r\n :focus {\r\n background-color: ${props => props.buttonbackgroundcolor};\r\n border-color: ${props => props.buttonbordercolor};\r\n color: ${props => props.buttontextcolor};\r\n }\r\n :active:focus {\r\n background-color: ${props => props.buttonbackgroundcolor};\r\n border-color: ${props => props.buttonbordercolor};\r\n color: ${props => props.buttontextcolor};\r\n }\r\n :disabled,\r\n :disabled:hover {\r\n background-color: #f9f9f9;\r\n color: #696969;\r\n border-color: #ccc;\r\n opacity: 1;\r\n box-shadow: none;\r\n }\r\n`;\r\n\r\nexport interface ButtonProps extends BootstrapButton.ButtonProps {\r\n /** The style of the button you want to use */\r\n hcssStyle?:\r\n | \"Theme\"\r\n | \"ThemeInverted\"\r\n | \"Delete\"\r\n | \"DeleteInverted\"\r\n | \"Success\"\r\n | \"SuccessInverted\";\r\n theme?: Theme;\r\n testId?: string;\r\n backgroundColor?: string;\r\n color?: string;\r\n}\r\n\r\nexport function Button({\r\n children,\r\n theme,\r\n testId,\r\n hcssStyle,\r\n backgroundColor,\r\n color,\r\n ...props\r\n}: ButtonProps) {\r\n const buttonColor =\r\n theme && theme.buttonColor ? theme.buttonColor : AceColors.gray800;\r\n\r\n let buttontextcolor = \"white\";\r\n let buttonbackgroundcolor = buttonColor;\r\n let buttonbordercolor = buttonColor;\r\n let defaultTestId = \"Button\";\r\n\r\n if (theme && theme.baseTheme === \"Ace\") {\r\n switch (hcssStyle) {\r\n default:\r\n case \"Theme\":\r\n buttontextcolor = \"white\";\r\n buttonbackgroundcolor = buttonColor;\r\n buttonbordercolor = buttonColor;\r\n break;\r\n case \"ThemeInverted\":\r\n buttontextcolor = buttonColor;\r\n buttonbackgroundcolor = \"white\";\r\n buttonbordercolor = buttonColor;\r\n break;\r\n case \"Delete\":\r\n buttontextcolor = \"white\";\r\n buttonbackgroundcolor = AceColors.errorRed;\r\n buttonbordercolor = AceColors.errorRed;\r\n break;\r\n case \"DeleteInverted\":\r\n buttontextcolor = AceColors.errorRed;\r\n buttonbackgroundcolor = \"white\";\r\n buttonbordercolor = AceColors.errorRed;\r\n break;\r\n case \"Success\":\r\n buttontextcolor = \"white\";\r\n buttonbackgroundcolor = AceColors.successGreen;\r\n buttonbordercolor = AceColors.successGreen;\r\n break;\r\n case \"SuccessInverted\":\r\n buttontextcolor = AceColors.successGreen;\r\n buttonbackgroundcolor = \"white\";\r\n buttonbordercolor = AceColors.successGreen;\r\n break;\r\n }\r\n\r\n // override theme color if custom colors are sent\r\n if (backgroundColor) {\r\n buttonbackgroundcolor = backgroundColor;\r\n }\r\n if (color) {\r\n buttontextcolor = color;\r\n }\r\n\r\n if (testId) {\r\n defaultTestId = testId;\r\n }\r\n }\r\n\r\n return (\r\n <>\r\n {props.bsStyle ? (\r\n \r\n {children}\r\n \r\n ) : theme && theme.baseTheme === \"Concrete\" ? (\r\n \r\n {children}\r\n \r\n ) : (\r\n \r\n {children}\r\n \r\n )}\r\n >\r\n );\r\n}\r\n\r\nexport type ConcreteButtonProps = {\r\n backgroundColor?: string;\r\n textColor?: string;\r\n hcssStyle?:\r\n | \"Theme\" // considered as default\r\n | \"ThemeInverted\" // considered as default inverted\r\n | \"Success\"\r\n | \"SuccessInverted\"\r\n | \"Delete\"\r\n | \"DeleteInverted\";\r\n} & BootstrapButton.ButtonProps;\r\n\r\nconst StyledConcreteButton = styled(BootstrapButton)`\r\n display: inline-flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n border-radius: 100px;\r\n font-size: 1.25rem;\r\n letter-spacing: 0.06rem;\r\n line-height: normal;\r\n text-transform: uppercase;\r\n padding: 5px 20px;\r\n\r\n /*\r\n Standard (pre-interaction) colors\r\n - If hcssStyle prop is supplied a value, it takes precedence\r\n - Otherwise, use the custom color values, if supplied, or use the default accent blue and default white text color\r\n */\r\n &:not(:disabled) {\r\n font-weight: 800;\r\n background-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle.endsWith(\"Inverted\")) return \"white\";\r\n else if (props.hcssstyle === \"Theme\") return ConcreteColors.blue200;\r\n else if (props.hcssstyle === \"Success\") return ConcreteColors.green300;\r\n else if (props.hcssstyle === \"Delete\") return ConcreteColors.red200;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue200;\r\n }};\r\n border-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle.startsWith(\"Theme\")) return ConcreteColors.blue200;\r\n else if (props.hcssstyle.startsWith(\"Success\"))\r\n return ConcreteColors.green300;\r\n else if (props.hcssstyle.startsWith(\"Delete\"))\r\n return ConcreteColors.red200;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue200;\r\n }};\r\n color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (!props.hcssstyle.endsWith(\"Inverted\")) return \"white\";\r\n else if (props.hcssstyle === \"ThemeInverted\")\r\n return ConcreteColors.blue200;\r\n else if (props.hcssstyle === \"SuccessInverted\")\r\n return ConcreteColors.green300;\r\n else if (props.hcssstyle === \"DeleteInverted\")\r\n return ConcreteColors.red200;\r\n }\r\n return props.textcolor || \"white\";\r\n }};\r\n }\r\n\r\n /* Hover-state colors */\r\n &:not(:disabled):hover {\r\n background-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle === \"Theme\") return ConcreteColors.blue300;\r\n else if (props.hcssstyle === \"ThemeInverted\")\r\n return ConcreteColors.blue100;\r\n else if (props.hcssstyle === \"Success\") return ConcreteColors.green400;\r\n else if (props.hcssstyle === \"SuccessInverted\")\r\n return ConcreteColors.green100;\r\n else if (props.hcssstyle === \"Delete\") return ConcreteColors.red300;\r\n else if (props.hcssstyle === \"DeleteInverted\")\r\n return ConcreteColors.red100;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue300;\r\n }};\r\n border-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle.startsWith(\"Theme\")) return ConcreteColors.blue300;\r\n else if (props.hcssstyle.startsWith(\"Success\"))\r\n return ConcreteColors.green400;\r\n else if (props.hcssstyle.startsWith(\"Delete\"))\r\n return ConcreteColors.red300;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue300;\r\n }};\r\n color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (!props.hcssstyle.endsWith(\"Inverted\")) return \"white\";\r\n else if (props.hcssstyle === \"ThemeInverted\")\r\n return ConcreteColors.blue300;\r\n else if (props.hcssstyle === \"SuccessInverted\")\r\n return ConcreteColors.green400;\r\n else if (props.hcssstyle === \"DeleteInverted\")\r\n return ConcreteColors.red300;\r\n }\r\n return props.textcolor || \"white\";\r\n }};\r\n }\r\n\r\n /* Active-state and focus-state colors */\r\n &:not(:disabled):active,\r\n &:not(:disabled):focus {\r\n outline: none;\r\n background-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle === \"Theme\") return ConcreteColors.blue400;\r\n else if (props.hcssstyle === \"ThemeInverted\")\r\n return ConcreteColors.blue100;\r\n else if (props.hcssstyle === \"Success\") return ConcreteColors.green500;\r\n else if (props.hcssstyle === \"SuccessInverted\")\r\n return ConcreteColors.green100;\r\n else if (props.hcssstyle === \"Delete\") return ConcreteColors.red400;\r\n else if (props.hcssstyle === \"DeleteInverted\")\r\n return ConcreteColors.red100;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue400;\r\n }};\r\n border-color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (props.hcssstyle.startsWith(\"Theme\")) return ConcreteColors.blue400;\r\n else if (props.hcssstyle.startsWith(\"Success\"))\r\n return ConcreteColors.green500;\r\n else if (props.hcssstyle.startsWith(\"Delete\"))\r\n return ConcreteColors.red400;\r\n }\r\n return props.backgroundcolor || ConcreteColors.blue400;\r\n }};\r\n color: ${(props: {\r\n backgroundcolor: string;\r\n textcolor: string;\r\n hcssstyle: string;\r\n }) => {\r\n if (props.hcssstyle) {\r\n if (!props.hcssstyle.endsWith(\"Inverted\")) return \"white\";\r\n else if (props.hcssstyle === \"ThemeInverted\")\r\n return ConcreteColors.blue400;\r\n else if (props.hcssstyle === \"SuccessInverted\")\r\n return ConcreteColors.green500;\r\n else if (props.hcssstyle === \"DeleteInverted\")\r\n return ConcreteColors.red400;\r\n }\r\n return props.textcolor || \"white\";\r\n }};\r\n }\r\n\r\n &,\r\n &:hover,\r\n &:active,\r\n &:focus {\r\n box-shadow: none;\r\n cursor: pointer;\r\n }\r\n\r\n &:disabled,\r\n &:disabled:hover,\r\n &:disabled:active &:disabled:focus {\r\n background: ${ConcreteColors.gray100};\r\n border-color: ${ConcreteColors.gray400};\r\n color: ${ConcreteColors.gray500};\r\n font-weight: 600;\r\n opacity: 1;\r\n cursor: not-allowed;\r\n }\r\n\r\n &.btn-sm {\r\n font-size: 1.1rem;\r\n padding: 4px 16px;\r\n }\r\n\r\n &.btn-lg {\r\n font-size: 1.6rem;\r\n padding: 8px 50px;\r\n }\r\n\r\n & > i {\r\n height: 15px;\r\n font-size: 1.22rem;\r\n }\r\n`;\r\n\r\nclass ConcreteButton extends React.Component {\r\n render() {\r\n const { hcssStyle, textColor, backgroundColor, ...rest } = this.props;\r\n return (\r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n\r\nvar stupidVariable = withTheme(Button);\r\nexport default stupidVariable;\r\n","import * as React from \"react\";\r\nimport styled, { withTheme } from \"styled-components\";\r\nimport { DropdownButton as BootstrapDropdownButton } from \"react-bootstrap\";\r\nimport { Theme } from \"../themes\";\r\nimport * as ConcreteColors from \"../ConcreteColors\";\r\n\r\nexport type DropdownButtonProps = {\r\n color?: string;\r\n inverted?: boolean;\r\n theme?: Theme;\r\n testId?: string;\r\n} & BootstrapDropdownButton.DropdownButtonProps;\r\n\r\nconst StyledDropdownButton = styled(\r\n ({ backgroundColor, foregroundColor, borderColor, baseTheme, ...rest }) => (\r\n \r\n )\r\n)<{\r\n backgroundColor: string;\r\n foregroundColor: string;\r\n borderColor: string;\r\n baseTheme: string;\r\n}>`\r\n border-radius: ${props => (props.baseTheme === \"Concrete\" ? \"32px\" : \"0px\")};\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:active,\r\n &:active:focus,\r\n .open > &.dropdown-toggle.btn-default,\r\n .open > &.dropdown-toggle.btn-default:focus {\r\n color: ${props => props.foregroundColor};\r\n border-color: ${props => props.borderColor};\r\n background-color: ${props => props.backgroundColor};\r\n }\r\n :hover:not(:disabled) {\r\n box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,\r\n rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\r\n }\r\n &.btn .caret {\r\n margin-left: 5px;\r\n }\r\n &:disabled,\r\n &:disabled:hover {\r\n background-color: #f9f9f9;\r\n color: #696969;\r\n border-color: #ccc;\r\n opacity: 1;\r\n box-shadow: none;\r\n }\r\n`;\r\n\r\nexport function DropdownButton({\r\n children,\r\n color,\r\n inverted = false,\r\n testId,\r\n ...props\r\n}: DropdownButtonProps) {\r\n let buttonBackgroundColor = ConcreteColors.gray700;\r\n let buttonForegroundColor = \"white\";\r\n let buttonBorderColor = ConcreteColors.gray700;\r\n let defaultTestId = \"DropdownButton\";\r\n\r\n if (color) {\r\n buttonBackgroundColor = color;\r\n buttonBorderColor = color;\r\n } else if (props.theme && props.theme.buttonColor) {\r\n buttonBackgroundColor = props.theme.buttonColor;\r\n buttonBorderColor = props.theme.buttonColor;\r\n }\r\n\r\n if (inverted) {\r\n buttonForegroundColor = buttonBackgroundColor;\r\n buttonBackgroundColor = \"white\";\r\n }\r\n\r\n let baseTheme = \"\";\r\n if (props.theme) {\r\n baseTheme = props.theme.baseTheme;\r\n }\r\n\r\n if (testId) {\r\n defaultTestId = testId;\r\n }\r\n\r\n return (\r\n <>\r\n \r\n {children}\r\n \r\n >\r\n );\r\n}\r\n\r\nvar ThemedDropdownButton = withTheme(DropdownButton);\r\n\r\nexport default ThemedDropdownButton;\r\n","import * as React from \"react\";\r\n\r\nexport interface PaneledPageContextState {\r\n maxPageWidth: number | null;\r\n contentAlign: \"center\" | \"left\";\r\n asideWidth: number;\r\n setAsideWidth: (updatedWidth: number | undefined) => void;\r\n filtersPanelExpanded: boolean;\r\n filtersHasOpenDropdown: boolean;\r\n activeDropdownId: string | null;\r\n onToggleFiltersPanel: (event?: any) => void;\r\n onDefaultExpandFilters: () => void;\r\n onClickInsideFilters: (event?: any) => void;\r\n onClickInsideContent: (filtersPanelShouldHide: boolean) => void;\r\n}\r\nexport const PaneledPageContext = React.createContext(\r\n {} as PaneledPageContextState\r\n);\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport {\r\n PaneledPageContext,\r\n PaneledPageContextState\r\n} from \"./PaneledPageContext\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\n\r\nexport interface HeaderPanelTitleProps extends PaneledPageExtendedProps {\r\n /** Automation testing id for the PaneledPage Header Title component. Defaults to \"paneledpage-header-title\". */\r\n testId?: string;\r\n}\r\nexport class HeaderPanelTitle extends React.PureComponent<\r\n HeaderPanelTitleProps\r\n> {\r\n render() {\r\n const { children, passThroughProps } = this.props;\r\n return (\r\n \r\n {children}
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport interface HeaderPanelSubtitleProps extends PaneledPageExtendedProps {\r\n /** Automation testing id for the PaneledPage Header Subtitle component. Defaults to \"paneledpage-header-subtitle\". */\r\n testId?: string;\r\n}\r\nexport class HeaderPanelSubtitle extends React.PureComponent<\r\n HeaderPanelSubtitleProps\r\n> {\r\n render() {\r\n const { children, passThroughProps } = this.props;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport interface HeaderPanelToolsProps extends PaneledPageExtendedProps {\r\n /** Automation testing id for the PaneledPage Header Tools component. Defaults to \"paneledpage-header-tools\". */\r\n testId?: string;\r\n}\r\nexport class HeaderPanelTools extends React.PureComponent<\r\n HeaderPanelToolsProps\r\n> {\r\n render() {\r\n const { children, passThroughProps } = this.props;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport interface HeaderPanelFiltersTemplateProps\r\n extends PaneledPageExtendedProps {\r\n defaultExpanded?: boolean;\r\n panelLabel?: string;\r\n status?: any;\r\n templateTools?: any;\r\n defaultContentPadding?: boolean;\r\n /** Automation testing id for the PaneledPage Filters component. Defaults to \"paneledpage-header-filters\". */\r\n testId?: string;\r\n}\r\nexport class HeaderPanelFiltersTemplate extends React.PureComponent<\r\n HeaderPanelFiltersTemplateProps\r\n> {\r\n render() {\r\n return (\r\n \r\n {(pageContext: PaneledPageContextState) => (\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\ninterface HeaderPanelFiltersProps extends HeaderPanelFiltersTemplateProps {\r\n pageContext: PaneledPageContextState;\r\n}\r\nclass HeaderPanelFilters extends React.PureComponent {\r\n componentDidMount() {\r\n if (\r\n this.props.defaultExpanded &&\r\n this.props.pageContext.onDefaultExpandFilters\r\n )\r\n this.props.pageContext.onDefaultExpandFilters();\r\n }\r\n\r\n render() {\r\n const pageContext: PaneledPageContextState = this.props.pageContext;\r\n return (\r\n \r\n {this.props.templateTools && (\r\n This feature is not yet supported.
\r\n )}\r\n \r\n {!pageContext.filtersPanelExpanded && (\r\n
\r\n )}\r\n
\r\n
\r\n {this.props.panelLabel || \"Filters\"}\r\n \r\n {this.props.status && (\r\n
\r\n {this.props.status || \"\"}\r\n
\r\n )}\r\n
\r\n {this.props.children}
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default class PageHeaderPanelTemplate extends React.PureComponent<\r\n PaneledPageExtendedProps\r\n> {\r\n static Title = HeaderPanelTitle;\r\n static Subtitle = HeaderPanelSubtitle;\r\n static Tools = HeaderPanelTools;\r\n static Filters = HeaderPanelFiltersTemplate;\r\n\r\n render() {\r\n const { children, passThroughProps } = this.props;\r\n return (\r\n \r\n {(pageContext: PaneledPageContextState) => (\r\n \r\n {children}\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledPageHeaderPanel = styled(\"div\")<{ maxpagewidth?: number }>`\r\n background: ${ConcreteColors.gray100};\r\n border-bottom: 2px solid ${ConcreteColors.gray300};\r\n z-index: 1;\r\n\r\n & > div {\r\n padding: 0 16px;\r\n }\r\n & > div:first-child {\r\n padding-top: 10px;\r\n margin-bottom: 4px;\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n & > div:last-child:not(.header-panel-filters) {\r\n padding-bottom: 10px;\r\n }\r\n\r\n & > * {\r\n max-width: ${props =>\r\n props.maxpagewidth ? `${props.maxpagewidth}px` : \"none\"};\r\n }\r\n\r\n &[data-content-align=\"center\"] > * {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n &[data-content-align=\"left\"] > * {\r\n margin-left: 0;\r\n margin-right: auto;\r\n }\r\n`;\r\nexport const StyledHeaderPanelTitle = styled(\"div\")`\r\n margin: 6px auto;\r\n border-bottom: none;\r\n\r\n & > h1 {\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.1em;\r\n font-weight: 700;\r\n color: #000000;\r\n }\r\n\r\n @media print {\r\n & > h1 {\r\n font-size: 22px;\r\n margin-bottom: 12px;\r\n }\r\n }\r\n`;\r\nexport const StyledHeaderPanelSubtitle = styled(\"div\")`\r\n font-size: 0.92em;\r\n @media print {\r\n margin-bottom: 10px;\r\n }\r\n`;\r\nexport const StyledHeaderPanelTools = styled(\"div\")`\r\n margin: 16px auto 8px auto;\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\nexport const StyledFiltersPanelContainer = styled(\"div\")`\r\n position: relative;\r\n margin-top: 12px;\r\n padding: 10x 16px;\r\n transition: 0.2s;\r\n\r\n @media print {\r\n display: none;\r\n }\r\n\r\n & > .filters-content {\r\n font-size: 0.92em;\r\n }\r\n\r\n &[data-panel-expanded=\"true\"] {\r\n background: #ffffff;\r\n .filters-content {\r\n padding-top: 10px;\r\n padding-bottom: 20px;\r\n background: #ffffff;\r\n box-shadow: -8px 16px 20px -12px #aaaaaa, 8px 16px 20px -12px #aaaaaa;\r\n overflow: visible;\r\n }\r\n }\r\n &[data-panel-expanded=\"false\"] {\r\n background: #d6d6d6;\r\n & > .filters-controls {\r\n & > .filters-collapsed-toggle-region {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n cursor: pointer;\r\n z-index: 0;\r\n }\r\n }\r\n .filters-content {\r\n max-height: 0;\r\n background: #d6d6d6;\r\n box-shadow: none;\r\n overflow: hidden;\r\n }\r\n }\r\n\r\n & > .filters-controls {\r\n padding: 10px 0;\r\n overflow: auto;\r\n\r\n & > .filters-controls-toggle,\r\n & > .filters-controls-label,\r\n & > .filters-controls-status {\r\n position: relative;\r\n cursor: pointer;\r\n z-index: 2;\r\n }\r\n\r\n & > .filters-controls-toggle {\r\n font-size: 1em;\r\n margin-top: ${props =>\r\n props.theme.baseTheme === \"Concrete\" ? \"1px\" : \"0\"};\r\n margin-right: 10px;\r\n vertical-align: text-top;\r\n }\r\n & > .filters-controls-label {\r\n margin-right: 4px;\r\n font-size: 0.85em;\r\n font-weight: ${props =>\r\n props.theme.baseTheme === \"Concrete\" ? 600 : 700};\r\n text-transform: uppercase;\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n & > .filters-controls-status {\r\n font-size: 0.9em;\r\n }\r\n }\r\n\r\n & > .filters-content {\r\n position: absolute;\r\n left: 0;\r\n width: 100%;\r\n transition: 0.2s;\r\n z-index: 50;\r\n }\r\n\r\n &.default-content-padding {\r\n & > .filters-content {\r\n padding-left: 20px;\r\n padding-right: 20px;\r\n }\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { debounce } from \"lodash\";\r\nimport styled from \"styled-components\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\n\r\nexport interface ContentMainProps extends PaneledPageExtendedProps {\r\n mainContainerRef: React.RefObject;\r\n onScroll?: (event: any, updatedScrollPosition: number) => void;\r\n onMount?: () => void;\r\n id?: string;\r\n testId?: string;\r\n innerWrapperId?: string;\r\n innerWrapperTestId?: string;\r\n}\r\nexport default class ContentMain extends React.PureComponent {\r\n componentDidMount() {\r\n if (this.props.mainContainerRef && this.props.mainContainerRef.current) {\r\n const node: Element | Text | null = ReactDOM.findDOMNode(\r\n this.props.mainContainerRef.current as any\r\n );\r\n if (node)\r\n (node as Element).addEventListener(\"scroll\", this.handleScroll, true);\r\n }\r\n if (this.props.onMount) this.props.onMount();\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.props.mainContainerRef && this.props.mainContainerRef.current) {\r\n const node: Element | Text | null = ReactDOM.findDOMNode(\r\n this.props.mainContainerRef.current as any\r\n );\r\n if (node)\r\n (node as Element).removeEventListener(\r\n \"scroll\",\r\n this.handleScroll,\r\n true\r\n );\r\n }\r\n }\r\n\r\n handleScroll = debounce(event => {\r\n if (this.props.onScroll) this.props.onScroll(event, event.target.scrollTop);\r\n }, 200);\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.children}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledContentMain = styled(\"main\")`\r\n @media print {\r\n height: auto;\r\n overflow: visible !important;\r\n\r\n .content-inner-wrapper {\r\n height: auto;\r\n overflow: visible !important;\r\n }\r\n }\r\n\r\n display: inline-block;\r\n position: relative;\r\n flex: 1 0;\r\n z-index: 1;\r\n\r\n .content-inner-wrapper {\r\n position: relative;\r\n padding: 12px 16px;\r\n min-height: 100%;\r\n\r\n & > h1,\r\n h2,\r\n h3,\r\n h4,\r\n h5,\r\n h6 {\r\n margin: 6px 0;\r\n font-weight: 700;\r\n }\r\n\r\n & > h1 {\r\n font-size: 1.6em;\r\n }\r\n & > h2 {\r\n font-size: 1.4em;\r\n }\r\n & > h3 {\r\n font-size: 1.2em;\r\n }\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport { PaneledPageContextState } from \"./PaneledPageContext\";\r\n\r\nexport const defaultAsideWidth: number = 200;\r\n\r\nexport const isContentAsideTemplate = (\r\n node: any\r\n): node is ContentAsideTemplate => {\r\n if (\r\n node &&\r\n (node as any).props &&\r\n (node as any).type.componentType === \"ContentAsideTemplate\" &&\r\n (node as ContentAsideTemplate).props.width !== undefined\r\n )\r\n return true;\r\n else return false;\r\n};\r\n\r\nexport interface ContentAsideTemplateProps extends PaneledPageExtendedProps {\r\n /** Automation testing id for the PaneledPage.Aside component. Defaults to \"paneledpage-content-aside\". */\r\n testId?: string;\r\n /** Custom width, in pixels, for the PaneledPage.Aside component. Defaults to 200. */\r\n width?: number;\r\n /** When set to true, PaneledPage.Aside height is set to the height of the container.\r\n * When set to false, the content determines the height, up to the height of the container.\r\n * In both cases, once the container's height is reached, scroll overflow is activated.\r\n * Defaults to \"true\". */\r\n fillContentHeight?: boolean;\r\n}\r\nexport class ContentAsideTemplate extends React.PureComponent<\r\n ContentAsideTemplateProps\r\n> {\r\n static defaultProps: ContentAsideTemplateProps = {\r\n testId: \"paneledpage-content-aside\",\r\n width: 200,\r\n fillContentHeight: true\r\n };\r\n static componentType = \"ContentAsideTemplate\";\r\n}\r\n\r\ninterface ContentAsideProps extends ContentAsideTemplateProps {\r\n pageContext: PaneledPageContextState;\r\n}\r\nexport default class ContentAside extends React.PureComponent<\r\n ContentAsideProps\r\n> {\r\n static componentType = \"ContentAside\";\r\n\r\n componentDidMount() {\r\n if (this.props.pageContext.setAsideWidth) {\r\n this.props.pageContext.setAsideWidth(this.props.width);\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps: ContentAsideProps) {\r\n if (\r\n this.props.width !== prevProps.width &&\r\n this.props.pageContext.setAsideWidth\r\n ) {\r\n this.props.pageContext.setAsideWidth(this.props.width);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n\r\n/* eslint-disable-next-line */\r\nexport const StyledContentAside = styled.aside<{\r\n expandedwidth: number;\r\n}>`\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n max-height: 100%;\r\n width: ${props => `${props.expandedwidth}px`};\r\n padding: 12px 16px;\r\n overflow: auto;\r\n z-index: 2;\r\n\r\n &[data-fill-content-height=\"true\"] {\r\n height: 100%;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport { SectionListModel } from \"./ContentSectionDataModels\";\r\n\r\nexport const isContentSectionTemplate = (\r\n node: any\r\n): node is ContentSectionTemplate => {\r\n if (\r\n node &&\r\n (node as any).props &&\r\n (node as any).type.componentType === \"ContentSectionTemplate\" &&\r\n (node as ContentSectionTemplate).props.title !== undefined\r\n )\r\n return true;\r\n else return false;\r\n};\r\n\r\nexport interface ContentSectionTemplateProps extends PaneledPageExtendedProps {\r\n /** Title of this section */\r\n title: string;\r\n /** Optional small toolbar at the top-right corner of the section */\r\n tools?: any;\r\n /** When set to true, allows the section to be collapsed and expanded by the user. Defaults to false. */\r\n collapsible?: boolean;\r\n /** When set to true, the section is initially rendered as collapsed and must be expanded by the user to view its contents. Defaults to false. If set to true, the 'collapsible' property must also be set to true. */\r\n defaultCollapsed?: boolean;\r\n /** When set to true, the section is marked as \"flagged\". If the PaneledPage's table of contents is shown, the section will have said flag next to its name. Defaults to false. */\r\n flagged?: boolean;\r\n /** When set to true, un-mounts content inside the section's body whenever the section is collapsed. Defaults to false. */\r\n unmountContentOnCollapse?: boolean;\r\n /** Optional callback to be executed when the user collapses a section. */\r\n onSectionCollapse?: (targetSectionListModel: SectionListModel) => void;\r\n /** Optional callback to be executed when the user expands a section. */\r\n onSectionExpand?: (targetSectionListModel: SectionListModel) => void;\r\n /** Automation testing id for the ContentSection component. Defaults to \"paneledpage-content-section-{sectionIndex}\".\r\n * Available wildcards:\r\n * %INDEX% - the section index value\r\n * %TITLE% - the section's title, in lowercase characters */\r\n testId?: string;\r\n}\r\nexport class ContentSectionTemplate extends React.PureComponent<\r\n ContentSectionTemplateProps\r\n> {\r\n static componentType = \"ContentSectionTemplate\";\r\n}\r\n\r\nexport interface ContentSectionProps extends ContentSectionTemplateProps {\r\n index: number;\r\n isCurrentSection: boolean;\r\n isLastSection: boolean;\r\n onHeightChange?: (isLastSection: boolean) => void;\r\n tableOfContentsActive?: boolean;\r\n}\r\nexport interface ContentSectionState {\r\n collapsed: boolean;\r\n haveContentReady: boolean;\r\n}\r\nexport default class ContentSection extends React.PureComponent<\r\n ContentSectionProps,\r\n ContentSectionState\r\n> {\r\n static componentType = \"ContentSection\";\r\n readonly componentClassIdentifier: string =\r\n \"paneled-page-content-main-section\";\r\n private resizeListener: React.RefObject = React.createRef();\r\n readonly state = {\r\n collapsed:\r\n this.props.collapsible && this.props.defaultCollapsed\r\n ? this.props.defaultCollapsed\r\n : false,\r\n haveContentReady:\r\n this.props.collapsible && this.props.defaultCollapsed ? false : true\r\n };\r\n\r\n componentDidMount() {\r\n this.resizeListener.current.contentWindow.addEventListener(\r\n \"resize\",\r\n this.handleHeightChange,\r\n true\r\n );\r\n }\r\n\r\n componentWillUnmount() {\r\n this.resizeListener.current.contentWindow.removeEventListener(\r\n \"resize\",\r\n this.handleHeightChange,\r\n true\r\n );\r\n }\r\n\r\n componentDidUpdate(\r\n prevProps: ContentSectionProps,\r\n prevState: ContentSectionState\r\n ) {\r\n /* this way, the callbacks are executed after the section-widget has been collapsed/expanded */\r\n if (this.state.collapsed !== prevState.collapsed) {\r\n const targetSectionListModel: SectionListModel = {\r\n sectionIndex: this.props.index,\r\n sectionTitle: this.props.title,\r\n sectionFlagged: this.props.flagged\r\n };\r\n\r\n if (this.state.collapsed) {\r\n if (this.props.onSectionCollapse)\r\n this.props.onSectionCollapse(targetSectionListModel);\r\n if (this.props.unmountContentOnCollapse)\r\n this.setState({ haveContentReady: false });\r\n } else {\r\n if (this.props.onSectionExpand)\r\n this.props.onSectionExpand(targetSectionListModel);\r\n if (!this.state.haveContentReady)\r\n this.setState({ haveContentReady: true });\r\n }\r\n }\r\n }\r\n\r\n handleHeightChange = (event: any) => {\r\n // Sections can unexpectedly change height due to lazy-loaded content 'jumping' into appearance.\r\n if (this.props.onHeightChange)\r\n this.props.onHeightChange(this.props.isLastSection);\r\n };\r\n\r\n toggleCollapse = () => {\r\n this.setState({\r\n collapsed: this.props.collapsible ? !this.state.collapsed : false\r\n });\r\n };\r\n\r\n onSectionToolsClicked = (event: any) => {\r\n if (this.state.collapsed) {\r\n this.setState({\r\n collapsed: false\r\n });\r\n }\r\n };\r\n\r\n renderTestId = (): string => {\r\n if (this.props.testId)\r\n return this.props.testId\r\n .replace(/%(INDEX)%/g, `${this.props.index}`)\r\n .replace(/%(TITLE)%/g, `${this.props.title}`);\r\n else return `paneledpage-content-section-${this.props.index}`;\r\n };\r\n\r\n render() {\r\n const sectionId: string = `section-${this.props.index}`;\r\n const hasSectionTools: boolean =\r\n this.props.tools && this.props.tools !== \"\";\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n {this.props.collapsible && (\r\n
\r\n \r\n
\r\n )}\r\n
\r\n {this.props.title}\r\n
\r\n
\r\n {hasSectionTools && (\r\n
\r\n {this.props.tools}\r\n
\r\n )}\r\n
\r\n\r\n \r\n {this.state.haveContentReady && (\r\n
{this.props.children}
\r\n )}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledContentSection = styled(\"section\")`\r\n position: relative;\r\n box-sizing: border-box;\r\n margin-bottom: 32px;\r\n padding: 0;\r\n border-radius: 4px;\r\n border-left: 4px solid transparent;\r\n /*box-shadow: 0 0 0 0 transparent*/\r\n background: #ffffff;\r\n transition: 0.3s;\r\n\r\n &[data-table-of-contents=\"active\"] {\r\n &[data-current-section=\"true\"] {\r\n box-shadow: -4px 4px 10px -2px #d6d6d6;\r\n }\r\n &:not([data-current-section=\"true\"]) {\r\n box-shadow: -4px 4px 10px -12px #d6d6d6;\r\n }\r\n }\r\n\r\n & > .content-section-header {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 20px 24px 24px 24px;\r\n\r\n & > .content-at-left {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n flex-direction: row;\r\n align-items: stretch;\r\n flex-grow: 1;\r\n }\r\n & > .content-at-right {\r\n flex-shrink: 0;\r\n margin-left: 36px;\r\n text-align: right;\r\n }\r\n\r\n .content-section-collapse-toggle {\r\n display: inline-block;\r\n position: relative;\r\n margin-right: 8px;\r\n font-size: 1em;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n width: 20px;\r\n height: 20px;\r\n\r\n & > i {\r\n position: absolute;\r\n transition: 0.2s;\r\n }\r\n\r\n &:hover > i,\r\n &:active > i {\r\n color: #0370f5;\r\n }\r\n }\r\n\r\n & .content-section-title {\r\n display: inline-block;\r\n margin: 2px 0 0 0;\r\n font-size: 1.2em;\r\n font-weight: 500;\r\n vertical-align: middle;\r\n\r\n &.section-collapsible {\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n\r\n & > .content-section-body {\r\n padding: 0 24px 28px 24px;\r\n height: auto;\r\n font-size: 0.95em;\r\n\r\n h4,\r\n h5,\r\n h6 {\r\n color: #404040;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n }\r\n }\r\n\r\n &[data-widget-collapsed=\"false\"] {\r\n min-height: 192px;\r\n\r\n & > .content-section-header {\r\n .content-section-collapse-toggle > i {\r\n transform: rotate(0deg);\r\n margin-top: ${props =>\r\n props.theme.baseTheme === \"Concrete\" ? \"2px\" : \"1px\"};\r\n }\r\n }\r\n\r\n & > .content-section-body {\r\n & > .content-inner-container {\r\n height: auto;\r\n }\r\n }\r\n }\r\n &[data-widget-collapsed=\"true\"] {\r\n & > .content-section-header {\r\n padding-bottom: 0;\r\n .content-section-collapse-toggle > i {\r\n transform: rotate(-90deg);\r\n margin-top: ${props =>\r\n props.theme.baseTheme === \"Concrete\" ? \"4px\" : \"3px\"};\r\n margin-left: -1px;\r\n }\r\n }\r\n\r\n & > .content-section-body {\r\n & > .content-inner-container {\r\n height: 0;\r\n overflow: hidden;\r\n }\r\n }\r\n }\r\n\r\n & > .height-resize-listener {\r\n display: block !important;\r\n position: absolute;\r\n width: 0;\r\n height: 100%;\r\n background-color: none;\r\n border: none;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport Icon from \"../Icon\";\r\n\r\nexport const StyledStatusFlag = styled(\"div\")`\r\n display: inline-block;\r\n cursor: pointer;\r\n\r\n & > i {\r\n font-size: 0.92em;\r\n }\r\n\r\n & > .icon-spacer {\r\n display: inline-block;\r\n margin-right: 8px;\r\n }\r\n`;\r\n\r\nexport interface StatusFlagProps {\r\n additionalClassNames?: string;\r\n /** FontAwesome code (e.g. \"asterisk\") for the Status Flag's icon. Default value is \"asterisk\" */\r\n flagIcon?: string;\r\n /** Color of the Status Flag. Default value is #ff3f1f */\r\n flagIconColor?: string;\r\n}\r\nexport default class StatusFlag extends React.PureComponent<\r\n StatusFlagProps,\r\n any\r\n> {\r\n render() {\r\n let combinedClassNames = this.props.additionalClassNames\r\n ? `status-flag ${this.props.additionalClassNames}`\r\n : \"status-flag\";\r\n let flagIconColor = this.props.flagIconColor || \"#ff3f1f\";\r\n return (\r\n \r\n \r\n {this.props.children ? : \"\"}\r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled, { withTheme } from \"styled-components\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport {\r\n PaneledPageContext,\r\n PaneledPageContextState\r\n} from \"./PaneledPageContext\";\r\nimport ContentAside from \"./ContentAside\";\r\nimport { SectionListModel } from \"./ContentSectionDataModels\";\r\nimport StatusFlag from \"./StatusFlag\";\r\n\r\nexport const StyledTableOfContents = styled(\"div\")`\r\n @media print {\r\n display: none;\r\n }\r\n\r\n position: relative;\r\n z-index: 2;\r\n\r\n & > ul {\r\n list-style: none;\r\n margin: 0 0 0 2px;\r\n padding: 0;\r\n\r\n & > li {\r\n height: 28px;\r\n\r\n & > a {\r\n display: inline-block;\r\n max-width: calc(100% - 20px);\r\n font-size: 13px;\r\n line-height: 28px;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n transition: 0.2s;\r\n color: #1e1e1e;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: #0370f5;\r\n }\r\n }\r\n\r\n & > .section-flag-container {\r\n display: inline-block;\r\n position: absolute;\r\n height: 28px;\r\n right: 0;\r\n line-height: 28px;\r\n\r\n & * {\r\n display: inline-block;\r\n }\r\n }\r\n\r\n &[data-current-section=\"true\"] {\r\n & > a {\r\n font-weight: 600;\r\n font-size: 14.5px;\r\n color: #0370f5;\r\n }\r\n }\r\n }\r\n }\r\n\r\n & .selected-section-indicator {\r\n position: absolute;\r\n margin-left: -12px;\r\n transition: 0.5s;\r\n\r\n &:before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n border-top: 5px solid transparent;\r\n border-bottom: 5px solid transparent;\r\n border-left: 8px solid #0370f5;\r\n }\r\n }\r\n`;\r\n\r\nexport const isTableOfContentsTemplate = (\r\n node: any\r\n): node is SectionTableOfContentsTemplate => {\r\n if (\r\n node &&\r\n (node as any).props &&\r\n (node as any).type.componentType === \"SectionTableOfContentsTemplate\" &&\r\n (node as SectionTableOfContentsTemplate).props.sectionFlag !== undefined\r\n )\r\n return true;\r\n else return false;\r\n};\r\n\r\nexport interface SectionTableOfContentsTemplateProps\r\n extends PaneledPageExtendedProps {\r\n /** Optional \"flag\" displayed in table of contents next to the name of any section that is \"flagged\". Defaults to an orange asterisk. */\r\n sectionFlag?: any;\r\n /** Automation testing id for the ContentSection component. Defaults to \"paneledpage-content-section-{sectionIndex}\".\r\n * Available wildcards:\r\n * %CURRENTINDEX% - the index of the current section */\r\n testId?: string;\r\n}\r\nexport class SectionTableOfContentsTemplate extends React.PureComponent<\r\n SectionTableOfContentsTemplateProps\r\n> {\r\n static componentType = \"SectionTableOfContentsTemplate\";\r\n\r\n static defaultProps: SectionTableOfContentsTemplateProps = {\r\n sectionFlag: \r\n };\r\n}\r\n\r\nexport interface SectionTableOfContentsProps\r\n extends SectionTableOfContentsTemplateProps {\r\n allSections: SectionListModel[];\r\n currentSectionIndex: number | null;\r\n onSelectSection: (sectionIndex: number) => void;\r\n theme?: any;\r\n}\r\nclass SectionTableOfContents extends React.PureComponent<\r\n SectionTableOfContentsProps\r\n> {\r\n static componentType = \"SectionTableOfContents\";\r\n\r\n moveIndicatorToCurrentSection = (\r\n currentSectionIndex: number | null\r\n ): string => {\r\n const getOffsetCompensationAmount = (): number => {\r\n if (this.props.theme) {\r\n return this.props.theme.baseTheme === \"Concrete\" ? 19 : 20;\r\n } else return 20;\r\n };\r\n if (currentSectionIndex !== null) {\r\n let offsetFactor = 28;\r\n return `${offsetFactor * (currentSectionIndex + 1) -\r\n getOffsetCompensationAmount()}px`;\r\n } else return \"-500px\";\r\n };\r\n\r\n renderTestId = (): string => {\r\n if (this.props.testId)\r\n return this.props.testId.replace(\r\n /%(CURRENTINDEX)%/g,\r\n `${this.props.currentSectionIndex}`\r\n );\r\n else return \"paneledpage-content-tableofcontents\";\r\n };\r\n\r\n // The Table of Contents is rendered inside a ContentAside which acts as a wrapper\r\n // This allows for more consistent styling and layout rules.\r\n\r\n render() {\r\n return (\r\n \r\n {(pageContext: PaneledPageContextState) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default withTheme(SectionTableOfContents);\r\n","import * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport styled from \"styled-components\";\r\nimport { debounce } from \"lodash\";\r\nimport {\r\n SectionListModel,\r\n ScrollOffsetListModel\r\n} from \"./ContentSectionDataModels\";\r\nimport ContentMain from \"./ContentMain\";\r\nimport ContentAside, {\r\n ContentAsideTemplate,\r\n isContentAsideTemplate\r\n} from \"./ContentAside\";\r\nimport ContentSection, {\r\n ContentSectionTemplate,\r\n isContentSectionTemplate\r\n} from \"./ContentSection\";\r\nimport SectionTableOfContents, {\r\n SectionTableOfContentsTemplate,\r\n isTableOfContentsTemplate\r\n} from \"./SectionTableOfContents\";\r\nimport {\r\n PaneledPageContext,\r\n PaneledPageContextState\r\n} from \"./PaneledPageContext\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\n\r\nconst getContentSectionListFromChildren = (\r\n children?: React.ReactNode | React.ReactNode[]\r\n): SectionListModel[] => {\r\n if (children) {\r\n let sections: SectionListModel[] = [];\r\n let contentSectionCount: number = 0;\r\n React.Children.forEach(children, (node, index) => {\r\n if (isContentSectionTemplate(node)) {\r\n sections.push({\r\n sectionIndex: contentSectionCount,\r\n sectionTitle: (node as ContentSectionTemplate).props.title,\r\n sectionFlagged: (node as ContentSectionTemplate).props.flagged\r\n });\r\n contentSectionCount++;\r\n }\r\n });\r\n return sections;\r\n } else return [] as SectionListModel[];\r\n};\r\n\r\nconst checkForTableOfContents = (\r\n children?: React.ReactNode | React.ReactNode[]\r\n): boolean => {\r\n let tableOfContentsFound = false;\r\n\r\n if (children) {\r\n let numTOCChildNodes: number = 0;\r\n const childArray = React.Children.toArray(children);\r\n for (let index = 0; index < childArray.length; index++) {\r\n const node = childArray[index];\r\n if (isTableOfContentsTemplate(node)) {\r\n if (process.env.NODE_ENV === \"development\") {\r\n tableOfContentsFound = true;\r\n numTOCChildNodes++;\r\n } else {\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n if (numTOCChildNodes > 1) {\r\n // No need to print more than one warning message if, for some bizarre reason, there was\r\n // an attempt to mount more than two components.\r\n console.warn(\r\n \"Invalid number of inside PaneledPage content\\n\" +\r\n \"No more than one component should be used simultaneously in a PaneledPage's content.\"\r\n );\r\n }\r\n }\r\n\r\n return tableOfContentsFound;\r\n};\r\n\r\nconst checkForAside = (\r\n children?: React.ReactNode | React.ReactNode[]\r\n): boolean => {\r\n let asideFound: boolean = false;\r\n\r\n if (children) {\r\n let numAsideChildNodes: number = 0;\r\n const childArray = React.Children.toArray(children);\r\n for (let index = 0; index < childArray.length; index++) {\r\n const node = childArray[index];\r\n if (isContentAsideTemplate(node)) {\r\n if (process.env.NODE_ENV === \"development\") {\r\n asideFound = true;\r\n numAsideChildNodes++;\r\n } else {\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n if (numAsideChildNodes > 1) {\r\n // No need to print more than one warning message if, for some bizarre reason, there was\r\n // an attempt to mount more than two components.\r\n console.warn(\r\n \"Invalid number of inside PaneledPage content\\n\" +\r\n \"No more than one component should be used simultaneously in a PaneledPage's content.\"\r\n );\r\n }\r\n }\r\n\r\n return asideFound;\r\n};\r\n\r\nconst refreshSectionFlagging = (\r\n currentSectionList: SectionListModel[],\r\n children?: React.ReactNode | React.ReactNode[]\r\n): SectionListModel[] => {\r\n if (children) {\r\n let updatedSectionList: SectionListModel[] = [...currentSectionList];\r\n let contentSectionCount: number = 0;\r\n React.Children.forEach(children, (node, index) => {\r\n if (isContentSectionTemplate(node)) {\r\n updatedSectionList[\r\n contentSectionCount\r\n ].sectionFlagged = (node as ContentSectionTemplate).props.flagged;\r\n contentSectionCount++;\r\n }\r\n });\r\n return updatedSectionList;\r\n } else return [] as SectionListModel[];\r\n};\r\n\r\nexport interface PageContentPanelTemplateProps\r\n extends PaneledPageExtendedProps {\r\n /** When set to true, closes an open filters panel when the user clicks inside the content. */\r\n hideFiltersOnContentClicked?: boolean;\r\n /** Automation testing id for the PaneledPage.Content component. Defaults to \"paneledpage-content\". */\r\n testId?: string;\r\n /** Regular HTML id for the Content.Main component. Defaults to \"paneledpage-content-main\". */\r\n mainContainerId?: string;\r\n /** Automation testing id for the Content.Main component. Defaults to \"paneledpage-content-main\". */\r\n mainContainerTestId?: string;\r\n /** Regular HTML id for the inner content wrapper, which sits inside the Content.Main component, and which contains the actual content.\r\n * Defaults to \"paneledpage-content-main-inner-wrapper-id\". */\r\n contentInnerWrapperId?: string;\r\n /** Automation testing id for the inner content wrapper, which sits inside the Content.Main component, and which contains the actual content.\r\n * Defaults to \"paneledpage-content-main-inner-wrapper\". */\r\n contentInnerWrapperTestId?: string;\r\n /** Child elements of the PaneledPage.Content component. These can be anything, including the\r\n * PaneledPage.Content.Section component and the PaneledPage.Content.Aside component.\r\n * When using the PaneledPage.Content.Aside component, be sure to use only one, and mount it as\r\n * the first child of the PaneledPage.Content. */\r\n children?: React.ReactNode | React.ReactNode[];\r\n}\r\nexport default class PageContentPanelTemplate extends React.PureComponent<\r\n PageContentPanelTemplateProps\r\n> {\r\n static Section = ContentSectionTemplate;\r\n static Aside = ContentAsideTemplate;\r\n static TableOfContents = SectionTableOfContentsTemplate;\r\n\r\n render() {\r\n return (\r\n \r\n {(pageContext: PaneledPageContextState) => (\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport interface PageContentPanelProps extends PageContentPanelTemplateProps {\r\n pageContext: PaneledPageContextState;\r\n}\r\nexport interface PageContentPanelState {\r\n allSections: SectionListModel[];\r\n sectionScrollOffsets: ScrollOffsetListModel[];\r\n currentSectionIndex: number | null;\r\n contentScrollPosition: number;\r\n contentResizingCalcInProgress: boolean;\r\n currentWidth: number;\r\n fillerHeight: number;\r\n fillerWasResized: boolean;\r\n userRequestedScrollToSection: boolean;\r\n hasContentAside: boolean;\r\n hasTableOfContents: boolean;\r\n}\r\n\r\nconst defaultScrollUpBuffer: number = 74;\r\nconst defaultScrollDownBuffer: number = 56;\r\n\r\nexport class PageContentPanel extends React.PureComponent<\r\n PageContentPanelProps,\r\n PageContentPanelState\r\n> {\r\n private mainContainerRef: React.RefObject = React.createRef();\r\n readonly state: PageContentPanelState = {\r\n allSections: getContentSectionListFromChildren(this.props.children),\r\n sectionScrollOffsets: [],\r\n currentSectionIndex: null,\r\n contentScrollPosition: 0,\r\n contentResizingCalcInProgress: false,\r\n currentWidth: 0,\r\n fillerHeight: 0,\r\n fillerWasResized: false,\r\n userRequestedScrollToSection: false,\r\n hasContentAside: checkForAside(this.props.children),\r\n hasTableOfContents: checkForTableOfContents(this.props.children)\r\n };\r\n\r\n componentDidMount() {\r\n let updatedScrollOffsets: ScrollOffsetListModel[] = this.getUpdatedSectionScrollOffsets(\r\n this.props.children,\r\n 0\r\n );\r\n let updatedWidth: number = this.calculateWidth();\r\n\r\n this.setState(\r\n {\r\n allSections: getContentSectionListFromChildren(this.props.children),\r\n contentScrollPosition: 0,\r\n currentWidth: updatedWidth,\r\n sectionScrollOffsets: updatedScrollOffsets,\r\n userRequestedScrollToSection: false,\r\n hasContentAside: checkForAside(this.props.children),\r\n hasTableOfContents: checkForTableOfContents(this.props.children)\r\n },\r\n () => {\r\n if (this.state.hasContentAside && this.state.hasTableOfContents) {\r\n console.warn(\r\n \"Invalid simultaneous use of children and \\n\" +\r\n \" and components should not be used simultaneously in a PaneledPage's content.\"\r\n );\r\n }\r\n this.setState(prevState => ({\r\n currentSectionIndex:\r\n prevState.allSections && prevState.allSections.length > 0\r\n ? prevState.allSections[0].sectionIndex\r\n : null\r\n }));\r\n }\r\n );\r\n\r\n window.addEventListener(\"resize\", this.handleWindowResize, true);\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.handleWindowResize, true);\r\n }\r\n\r\n componentDidUpdate(prevProps: PageContentPanelProps) {\r\n if (prevProps.children !== this.props.children)\r\n this.setState({\r\n allSections: refreshSectionFlagging(\r\n this.state.allSections,\r\n this.props.children\r\n )\r\n });\r\n }\r\n\r\n handleMainContainerMounted = () => {\r\n let fillerHeight: number = this.calculateFillerHeight();\r\n let updatedScrollOffsets: ScrollOffsetListModel[] = this.getUpdatedSectionScrollOffsets(\r\n this.props.children,\r\n 0\r\n );\r\n\r\n this.setState(prevState => ({\r\n sectionScrollOffsets: updatedScrollOffsets,\r\n currentSectionIndex:\r\n prevState.allSections && prevState.allSections.length > 0\r\n ? prevState.allSections[0].sectionIndex\r\n : null,\r\n fillerHeight: fillerHeight\r\n }));\r\n };\r\n\r\n handleWindowResize = (event: any) => {\r\n this.setState({\r\n currentWidth: this.calculateWidth(),\r\n fillerHeight: this.calculateFillerHeight()\r\n });\r\n };\r\n\r\n calculateWidth = (): number => {\r\n let selfElement: Element = ReactDOM.findDOMNode(this) as Element;\r\n return selfElement ? selfElement.getBoundingClientRect().width : 0;\r\n };\r\n\r\n calculateFillerHeight = (): number => {\r\n let allSections: SectionListModel[] = this.state.allSections;\r\n if (allSections && allSections.length > 0) {\r\n let container: Element | Text | null = ReactDOM.findDOMNode(\r\n this.mainContainerRef.current\r\n );\r\n let lastSection: Element | null = (ReactDOM.findDOMNode(\r\n this\r\n ) as Element).querySelector(\r\n `.content-section[data-section-index=\"${\r\n allSections[allSections.length - 1].sectionIndex\r\n }\"]`\r\n );\r\n\r\n if (container && lastSection) {\r\n let containerHeight: number = (container as Element).getBoundingClientRect()\r\n .height;\r\n let lastSectionHeight: number = (lastSection as Element).getBoundingClientRect()\r\n .height;\r\n let baseMargin: number = 82; // Takes into account the 32px bottom margin underneath each section\r\n return lastSectionHeight + baseMargin <= containerHeight\r\n ? containerHeight - (lastSectionHeight + baseMargin)\r\n : 0;\r\n } else return 0;\r\n } else return 0;\r\n };\r\n\r\n calculateScrollUpBuffer = (): number => {\r\n let container: Element | Text | null = ReactDOM.findDOMNode(\r\n this.mainContainerRef.current\r\n );\r\n return container\r\n ? 0.68 * (container as Element).getBoundingClientRect().height\r\n : 0;\r\n };\r\n\r\n calculateScrollDownBuffer = (): number => {\r\n let container: Element | Text | null = ReactDOM.findDOMNode(\r\n this.mainContainerRef.current\r\n );\r\n return container\r\n ? 0.52 * (container as Element).getBoundingClientRect().height\r\n : 0;\r\n };\r\n\r\n getUpdatedSectionScrollOffsets = (\r\n childNodes: any,\r\n updatedScrollPosition: number\r\n ): ScrollOffsetListModel[] => {\r\n let sectionScrollOffsets: ScrollOffsetListModel[] = [];\r\n\r\n if (this.mainContainerRef) {\r\n let container: Element = ReactDOM.findDOMNode(\r\n this.mainContainerRef.current\r\n ) as Element;\r\n let contentSectionCount: number = 0;\r\n\r\n React.Children.forEach(childNodes, (node, index) => {\r\n if (isContentSectionTemplate(node)) {\r\n let section: Element | null = container\r\n ? (container.querySelector(\r\n `.content-section[data-section-index=\"${contentSectionCount}\"]`\r\n ) as Element)\r\n : null;\r\n let scrollOffset: number = section\r\n ? Math.abs(\r\n Math.round(\r\n section.getBoundingClientRect().top -\r\n (container.getBoundingClientRect().top +\r\n 12 -\r\n updatedScrollPosition)\r\n )\r\n )\r\n : -1;\r\n\r\n sectionScrollOffsets.push({\r\n sectionIndex: contentSectionCount,\r\n sectionScrollOffset: scrollOffset\r\n });\r\n\r\n contentSectionCount++;\r\n }\r\n });\r\n }\r\n return sectionScrollOffsets;\r\n };\r\n\r\n getCurrentSectionWithUpdatedPosition = (\r\n currentScrollPosition: number,\r\n updatedScrollOffsets: ScrollOffsetListModel[],\r\n scrollChange?: number\r\n ): number | null => {\r\n let lastPassedSectionIndex: number | null = null;\r\n let scrollUpBuffer: number = this.calculateScrollUpBuffer();\r\n let scrollDownBuffer: number = this.calculateScrollDownBuffer();\r\n\r\n const triggerInterferenceWithPreviousSections = (\r\n currentIndex: number,\r\n currentSectionOffset: number,\r\n calculatedBuffer: number,\r\n defaultBuffer: number\r\n ): boolean => {\r\n if (currentSectionOffset < calculatedBuffer) return true;\r\n else if (\r\n currentSectionOffset <\r\n 2 * calculatedBuffer - defaultBuffer + 100\r\n ) {\r\n let allSections: SectionListModel[] = this.state.allSections;\r\n let previousSection: Element | null =\r\n allSections && allSections.length > 0\r\n ? (ReactDOM.findDOMNode(this) as Element).querySelector(\r\n `.content-section[data-section-index=\"${currentIndex - 1}\"]`\r\n )\r\n : null;\r\n let previousSectionHeight: number = previousSection\r\n ? previousSection.getBoundingClientRect().height\r\n : -1;\r\n if (previousSectionHeight > 0)\r\n return calculatedBuffer > 0\r\n ? previousSectionHeight < calculatedBuffer\r\n : previousSectionHeight < defaultBuffer;\r\n else return true;\r\n } else return false;\r\n };\r\n\r\n if (updatedScrollOffsets && updatedScrollOffsets.length > 0) {\r\n let index: number = 0;\r\n let passedPreviousTrigger: boolean = true;\r\n while (index < updatedScrollOffsets.length && passedPreviousTrigger) {\r\n let lowTrigger: number;\r\n let sectionAtIndex: ScrollOffsetListModel = updatedScrollOffsets[index];\r\n\r\n if (index === 0) lowTrigger = 0;\r\n else {\r\n let sectionScrollOffset: number = sectionAtIndex.sectionScrollOffset;\r\n if (scrollChange && scrollChange < 0) {\r\n lowTrigger =\r\n scrollUpBuffer &&\r\n !triggerInterferenceWithPreviousSections(\r\n index,\r\n sectionScrollOffset,\r\n scrollUpBuffer,\r\n defaultScrollUpBuffer\r\n )\r\n ? sectionScrollOffset - scrollUpBuffer\r\n : sectionScrollOffset - defaultScrollUpBuffer;\r\n } else {\r\n lowTrigger =\r\n scrollDownBuffer &&\r\n !triggerInterferenceWithPreviousSections(\r\n index,\r\n sectionScrollOffset,\r\n scrollDownBuffer,\r\n defaultScrollDownBuffer\r\n )\r\n ? sectionScrollOffset - scrollDownBuffer\r\n : sectionScrollOffset - defaultScrollDownBuffer;\r\n }\r\n }\r\n\r\n if (lowTrigger <= currentScrollPosition)\r\n lastPassedSectionIndex = sectionAtIndex.sectionIndex;\r\n else passedPreviousTrigger = false;\r\n index++;\r\n }\r\n }\r\n\r\n return lastPassedSectionIndex !== null\r\n ? lastPassedSectionIndex\r\n : this.state.currentSectionIndex;\r\n };\r\n\r\n handleClickInside = (event: any) => {\r\n this.props.pageContext.onClickInsideContent(\r\n this.props.hideFiltersOnContentClicked || true\r\n );\r\n };\r\n\r\n handleScrollContent = (event: any, updatedScrollPosition: number) => {\r\n if (!this.state.fillerWasResized) {\r\n let scrollChange: number = this.state.userRequestedScrollToSection\r\n ? 0\r\n : updatedScrollPosition - this.state.contentScrollPosition;\r\n let updatedSectionIndex: number | null = !this.state\r\n .userRequestedScrollToSection\r\n ? this.getCurrentSectionWithUpdatedPosition(\r\n updatedScrollPosition,\r\n this.state.sectionScrollOffsets,\r\n scrollChange\r\n )\r\n : this.state.currentSectionIndex;\r\n this.setState({\r\n contentScrollPosition: updatedScrollPosition,\r\n currentSectionIndex: updatedSectionIndex\r\n });\r\n this.delayUserScrollRequestReset();\r\n }\r\n };\r\n\r\n delayUserScrollRequestReset = debounce(() => {\r\n this.setState({ userRequestedScrollToSection: false });\r\n }, 200);\r\n\r\n delayFillerResizeStatusReset = debounce(() => {\r\n this.setState({ fillerWasResized: false });\r\n }, 200);\r\n\r\n handleSectionChangedHeight = (isLastSection: boolean) => {\r\n if (isLastSection)\r\n this.setState(\r\n {\r\n fillerHeight: this.calculateFillerHeight(),\r\n fillerWasResized: true\r\n },\r\n this.delayFillerResizeStatusReset\r\n );\r\n else\r\n this.setState({\r\n sectionScrollOffsets: this.getUpdatedSectionScrollOffsets(\r\n this.props.children,\r\n this.state.contentScrollPosition\r\n )\r\n });\r\n };\r\n\r\n handleSelectSection = debounce((selectedSectionIndex: number) => {\r\n if (this.state.sectionScrollOffsets) {\r\n let sectionPosition = this.state.sectionScrollOffsets[\r\n selectedSectionIndex\r\n ].sectionScrollOffset;\r\n this.mainContainerRef.current.scrollTop =\r\n sectionPosition > defaultScrollDownBuffer\r\n ? sectionPosition - defaultScrollDownBuffer\r\n : 0;\r\n this.setState({\r\n userRequestedScrollToSection: true,\r\n currentSectionIndex: selectedSectionIndex\r\n });\r\n }\r\n }, 250);\r\n\r\n render() {\r\n let contentSectionCount: number = 0;\r\n\r\n return (\r\n \r\n {React.Children.map(this.props.children, (node, index) => {\r\n // Render only ContentAside and TableOfContents child elements outside the main container\r\n if (isContentAsideTemplate(node)) {\r\n return (\r\n \r\n );\r\n } else if (isTableOfContentsTemplate(node)) {\r\n return (\r\n \r\n );\r\n }\r\n return null;\r\n })}\r\n \r\n {React.Children.map(this.props.children, (node, index) => {\r\n const numSections: number = this.state.allSections.length;\r\n if (node && isContentSectionTemplate(node)) {\r\n contentSectionCount++;\r\n const sectionIndex: number = contentSectionCount - 1;\r\n let isLast: boolean = sectionIndex === numSections - 1;\r\n return (\r\n \r\n );\r\n // prevent render of ContentAside and Table of Contents child elements inside the Main container\r\n } else if (\r\n !isContentAsideTemplate(node) &&\r\n !isTableOfContentsTemplate(node)\r\n )\r\n return node;\r\n\r\n return null;\r\n })}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledPageContentPanel = styled.div<{\r\n maxpagewidth: number | null;\r\n containerwidth: number;\r\n asidewidth: number;\r\n fillerheight: number | null;\r\n}>`\r\n display: flex;\r\n flex: 1 0;\r\n flex-wrap: nowrap;\r\n align-items: stretch;\r\n position: relative;\r\n overflow: hidden;\r\n background: ${ConcreteColors.gray200};\r\n z-index: 0;\r\n\r\n @media print {\r\n height: auto;\r\n overflow: visible;\r\n }\r\n\r\n &[data-has-table-of-contents=\"true\"] .page-content-main {\r\n & > .content-inner-wrapper {\r\n padding-bottom: ${props =>\r\n props.fillerheight ? `${props.fillerheight}px` : 0};\r\n }\r\n }\r\n\r\n &:before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0.8;\r\n transition: 0.2s;\r\n }\r\n &[data-modal-overlay-active=\"true\"] {\r\n .page-content-main {\r\n overflow: hidden;\r\n }\r\n\r\n &:before {\r\n background: ${ConcreteColors.gray400};\r\n z-index: 5;\r\n }\r\n }\r\n &[data-modal-overlay-active=\"false\"] {\r\n .page-content-main {\r\n overflow: auto;\r\n }\r\n\r\n &:before {\r\n background: transparent;\r\n z-index: -5;\r\n }\r\n }\r\n\r\n &[data-has-content-aside=\"true\"],\r\n &[data-has-table-of-contents=\"true\"] {\r\n &[data-content-align=\"center\"] {\r\n .page-content-aside {\r\n left: ${props =>\r\n props.maxpagewidth && props.maxpagewidth < props.containerwidth\r\n ? `calc(50% - ${props.maxpagewidth * 0.5}px)`\r\n : \"0\"};\r\n }\r\n .page-content-main > .content-inner-wrapper {\r\n margin-left: ${props =>\r\n props.maxpagewidth && props.maxpagewidth < props.containerwidth\r\n ? `calc(50% - ${props.maxpagewidth * 0.5 - props.asidewidth}px)`\r\n : `${props.asidewidth}px`};\r\n margin-right: ${props =>\r\n props.maxpagewidth && props.maxpagewidth < props.containerwidth\r\n ? `calc(50% - ${props.maxpagewidth * 0.5}px)`\r\n : \"0\"};\r\n max-width: ${props =>\r\n props.maxpagewidth\r\n ? `${props.maxpagewidth - props.asidewidth}px`\r\n : \"none\"};\r\n }\r\n }\r\n\r\n &[data-content-align=\"left\"] {\r\n .page-content-aside {\r\n left: 0;\r\n }\r\n .page-content-main > .content-inner-wrapper {\r\n margin-left: ${props => `${props.asidewidth}px`};\r\n margin-right: auto;\r\n max-width: ${props =>\r\n props.maxpagewidth\r\n ? `${props.maxpagewidth - props.asidewidth}px`\r\n : \"none\"};\r\n }\r\n }\r\n }\r\n\r\n &[data-has-content-aside=\"false\"][data-has-table-of-contents=\"false\"] {\r\n .page-content-main > .content-inner-wrapper {\r\n max-width: ${props =>\r\n props.maxpagewidth ? `${props.maxpagewidth}px` : \"none\"};\r\n }\r\n\r\n &[data-content-align=\"center\"] {\r\n .page-content-main > .content-inner-wrapper {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n &[data-content-align=\"left\"] {\r\n .page-content-main > .content-inner-wrapper {\r\n margin-left: 0;\r\n margin-right: auto;\r\n }\r\n }\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport {\r\n PaneledPageContext,\r\n PaneledPageContextState\r\n} from \"./PaneledPageContext\";\r\n\r\n// With the FiltersToggle, you can create custom components to toggle the filters panel open or closed,\r\n// and can place them anywhere within the PaneledPage's structure, when it becomes necessary. Examples include: an\r\n// 'Apply' button inside the filter panel's contents, or a link/button inside the PaneledPage's content area.\r\nexport interface FiltersToggleProps {\r\n /** Determines what event will actually toggle the filters panel. Default is \"click\"; i.e. clicking the FiltersToggle will toggle the filters panel. */\r\n toggleFiltersOnEvent: \"click\" | \"hover\";\r\n}\r\nexport default class FiltersToggle extends React.PureComponent<\r\n FiltersToggleProps,\r\n any\r\n> {\r\n handleClick = (event: any, pageContext: PaneledPageContextState) => {\r\n if (\r\n this.props.toggleFiltersOnEvent === \"click\" &&\r\n pageContext.onToggleFiltersPanel\r\n )\r\n pageContext.onToggleFiltersPanel(event);\r\n };\r\n\r\n handleMouseEnter = (event: any, pageContext: PaneledPageContextState) => {\r\n if (\r\n this.props.toggleFiltersOnEvent === \"hover\" &&\r\n pageContext.onToggleFiltersPanel\r\n )\r\n pageContext.onToggleFiltersPanel(event);\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {(pageContext: PaneledPageContextState) => (\r\n this.handleClick(event, pageContext)}\r\n onMouseDown={event => this.handleMouseEnter(event, pageContext)}\r\n >\r\n {this.props.children}\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport PageHeaderPanelTemplate from \"./PageHeaderPanel\";\r\nimport PageContentPanelTemplate from \"./PageContentPanel\";\r\nimport { defaultAsideWidth } from \"./ContentAside\";\r\nimport {\r\n PaneledPageContext,\r\n PaneledPageContextState\r\n} from \"./PaneledPageContext\";\r\nimport { PaneledPageExtendedProps } from \"./ExtendedProps\";\r\nimport FiltersToggle from \"./FiltersToggle\";\r\n\r\nexport interface PaneledPageProps extends PaneledPageExtendedProps {\r\n /** Optional property for fixing height fit issues when the PaneledPage is inside some kind of container or wrapper. Default: 'page'. */\r\n fitTo?: \"page\" | \"container\";\r\n /** Optional property to set a maximum width for PaneledPage content, beyond which the content is centered on the page. */\r\n maxWidth?: number;\r\n /** Alignment of content on the page, if maxWidth is supplied and once maximum width is reached. Defaults to \"center\" */\r\n contentAlign?: \"center\" | \"left\";\r\n /** Automation testing id for the PaneledPage container component. Defaults to \"paneledpage-container\". */\r\n testId?: string;\r\n /** Sub-components of PaneledPage. Only the PaneledPage.Header and PaneledPage.Content components should be used as immediate children of the PaneledPage.\r\n * The Header component should be used before the Content component.\r\n */\r\n children?: React.ReactNode | React.ReactNode[];\r\n}\r\nexport interface PaneledPageState {\r\n filtersPanelExpanded: boolean;\r\n filtersHasOpenDropdown: boolean;\r\n activeDropdownId: string | null;\r\n asideWidth: number;\r\n}\r\nexport default class PaneledPage extends React.PureComponent<\r\n PaneledPageProps,\r\n PaneledPageState\r\n> {\r\n static Header = PageHeaderPanelTemplate;\r\n static Content = PageContentPanelTemplate;\r\n static FiltersToggle = FiltersToggle;\r\n static defaultProps: PaneledPageProps = {\r\n testId: \"paneledpage-container\"\r\n };\r\n static componentType = \"PaneledPage\";\r\n\r\n private dropdownCheckTimeout: any;\r\n private mounted = true;\r\n\r\n readonly state: PaneledPageState = {\r\n filtersPanelExpanded: false,\r\n filtersHasOpenDropdown: false,\r\n activeDropdownId: null,\r\n asideWidth: 200\r\n };\r\n\r\n componentDidMount() {\r\n this.checkForInvalidNodes();\r\n }\r\n\r\n componentWillUnmount() {\r\n this.mounted = false;\r\n if (!!this.dropdownCheckTimeout) clearTimeout(this.dropdownCheckTimeout);\r\n }\r\n\r\n showFilters = () => this.setState({ filtersPanelExpanded: true });\r\n hideFilters = () => this.setState({ filtersPanelExpanded: false });\r\n\r\n handleClickInsidePage = (event?: any) => {\r\n this.dropdownCheckTimeout = setTimeout(() => {\r\n if (this.mounted) this.checkForOpenDropdowns();\r\n }, 50);\r\n };\r\n\r\n handleClickInsideFilters = (event?: any) => {\r\n if (!this.state.filtersPanelExpanded) this.showFilters();\r\n };\r\n\r\n handleFiltersPanelToggled = (event?: any) => {\r\n if (event) event.stopPropagation();\r\n if (!this.state.filtersPanelExpanded) this.showFilters();\r\n else this.hideFilters();\r\n };\r\n\r\n // The animation is a lot smoother and more effective when the default expansion of the filters is delayed somewhat.\r\n // It also catches a user's attention more readily when it occurs just a fraction of a second after the page loads.\r\n handleDefaultExpandFilters = () => setTimeout(this.showFilters, 450);\r\n\r\n checkForInvalidNodes = () => {\r\n if (process.env.NODE_ENV === \"development\" && this.props.children) {\r\n let numHeaderPanelNodes: number = 0;\r\n let numContentPanelNodes: number = 0;\r\n\r\n React.Children.forEach(\r\n this.props.children,\r\n (node: React.ReactNode, index) => {\r\n if (node && (node as any).type !== undefined) {\r\n let nodeComponentTypeName: string | null =\r\n (node as any).type.name || null;\r\n if (nodeComponentTypeName === \"PageHeaderPanelTemplate\")\r\n numHeaderPanelNodes++;\r\n else if (nodeComponentTypeName === \"PageContentPanelTemplate\")\r\n numContentPanelNodes++;\r\n else {\r\n console.warn(\r\n \"Invalid child node of \\n\" +\r\n `<${\r\n (node as any).type\r\n }> is not a valid immediate child of a component. ` +\r\n \"We recommend using only or as immediate children of a .\"\r\n );\r\n }\r\n }\r\n }\r\n );\r\n\r\n if (numHeaderPanelNodes > 1) {\r\n console.warn(\r\n \"Invalid duplicate children\\n\" +\r\n \" should not have more than one as a child component. \" +\r\n \"Duplicate nodes will be ignored\"\r\n );\r\n }\r\n\r\n if (numContentPanelNodes > 1) {\r\n console.warn(\r\n \"Invalid duplicate children\\n\" +\r\n \" should not have more than one as a child component. \" +\r\n \"Duplicate nodes will be ignored\"\r\n );\r\n }\r\n }\r\n };\r\n\r\n checkForOpenDropdowns = () => {\r\n let activeElementId: string | null = document.activeElement\r\n ? document.activeElement.id || \"unknown\"\r\n : null;\r\n if (activeElementId && activeElementId.indexOf(\"react-select\") !== -1) {\r\n if (this.state.filtersHasOpenDropdown) {\r\n // If there already was an open dropdown in the filters panel, check if it's the same one the user just focused.\r\n // If so, the dropdown will hide; otherwise, the user opened some other dropdown in that panel.\r\n this.setState(prevState => ({\r\n filtersHasOpenDropdown:\r\n activeElementId !== prevState.activeDropdownId,\r\n activeDropdownId: activeElementId\r\n }));\r\n } else\r\n this.setState({\r\n filtersHasOpenDropdown: true,\r\n activeDropdownId: activeElementId\r\n });\r\n } else\r\n this.setState({\r\n filtersHasOpenDropdown: false,\r\n activeDropdownId: null\r\n });\r\n };\r\n\r\n handleClickInsideContent = (filtersPanelShouldHide: boolean) => {\r\n if (this.mounted) {\r\n if (!this.state.filtersHasOpenDropdown)\r\n filtersPanelShouldHide && this.hideFilters();\r\n else this.setState({ filtersHasOpenDropdown: false });\r\n }\r\n };\r\n\r\n setAsideWidth = (updatedWidth: number | undefined) => {\r\n this.setState({ asideWidth: updatedWidth || defaultAsideWidth });\r\n };\r\n\r\n userExpandedAnyDropdown = (): boolean => {\r\n if (\r\n document.activeElement &&\r\n document.activeElement.id &&\r\n document.activeElement.id.indexOf(\"react-select\") !== -1\r\n )\r\n return true;\r\n else return false;\r\n };\r\n\r\n render() {\r\n const maxPageWidth: number | null =\r\n this.props.maxWidth && this.props.maxWidth > 0\r\n ? this.props.maxWidth\r\n : null;\r\n const contentAlign: \"center\" | \"left\" = this.props.contentAlign || \"center\";\r\n const contextState: PaneledPageContextState = {\r\n maxPageWidth: maxPageWidth,\r\n contentAlign: contentAlign,\r\n asideWidth: this.state.asideWidth,\r\n setAsideWidth: this.setAsideWidth,\r\n filtersPanelExpanded: this.state.filtersPanelExpanded,\r\n filtersHasOpenDropdown: this.state.filtersHasOpenDropdown,\r\n activeDropdownId: this.state.activeDropdownId,\r\n onToggleFiltersPanel: this.handleFiltersPanelToggled,\r\n onDefaultExpandFilters: this.handleDefaultExpandFilters,\r\n onClickInsideFilters: this.handleClickInsideFilters,\r\n onClickInsideContent: this.handleClickInsideContent\r\n };\r\n return (\r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport const StyledPaneledPage = styled(\"div\")`\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow-y: visible;\r\n overflow-x: hidden;\r\n\r\n @media print {\r\n display: inline;\r\n }\r\n\r\n &.fit-to-page {\r\n height: calc(100vh - 45px);\r\n }\r\n &.fit-to-container {\r\n height: 100%;\r\n }\r\n\r\n .filters-panel-toggle-listener {\r\n cursor: pointer;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\n\r\nexport type DetailPageTitleProps = {\r\n children: any;\r\n};\r\n\r\nexport default class DetailPageTitle extends React.Component<\r\n DetailPageTitleProps\r\n> {\r\n static defaultProps = {\r\n title: \"Details Page Title\"\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n Filter: Unregistered Equipment\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n | \r\n \r\n \r\n \r\n Registered\r\n \r\n \r\n \r\n \r\n | \r\n \r\n
\r\n | \r\n \r\n \r\n \r\n Unregistered\r\n \r\n \r\n \r\n \r\n | \r\n \r\n
\r\n | \r\n \r\n \r\n \r\n All\r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n APV-2\r\n \r\n \r\n \r\n \r\n | \r\n \r\n \r\n | \r\n | \r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n \r\n
{this.props.children}
\r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type SubTitleProps = {\r\n children: any;\r\n};\r\n\r\nconst StyledSubTitle = styled.div`\r\n h3 {\r\n font-size: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? \"1.7rem\" : \"1.38rem\"};\r\n color: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? \"#808080\" : \"#000000\"};\r\n }\r\n`;\r\n\r\nexport default class SubTitle extends React.Component
{\r\n render() {\r\n return (\r\n \r\n \r\n
{this.props.children}
\r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nexport type FooterProps = {\r\n children?: string;\r\n};\r\nexport default class Footer extends React.Component {\r\n static defaultProps = {\r\n children: \" - Product 0.0.1\"\r\n };\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { Collapse } from \"react-bootstrap\";\r\nimport { Icon } from \"../Icon\";\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\nimport * as AceColors from \"../../AceColors\";\r\n\r\nconst SectionWrapper = styled(\"div\")`\r\n white-space: nowrap;\r\n`;\r\n\r\nconst SectionHeader = styled(\"div\")`\r\n background: ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\"\r\n ? AceColors.gray300\r\n : ConcreteColors.gray300};\r\n padding: 0.2em 0.5em;\r\n font-size: 1.2em;\r\n border-bottom: 1px solid\r\n ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\"\r\n ? AceColors.gray400\r\n : ConcreteColors.gray400};\r\n height: 36px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n i {\r\n margin-right: 0.5em;\r\n }\r\n\r\n i.arrow {\r\n float: right;\r\n margin-top: 0.2em;\r\n transition: transform 0.2s ease-in 0s;\r\n\r\n &.open {\r\n transform: rotate(90deg);\r\n }\r\n }\r\n`;\r\n\r\nconst SectionBody = styled(\"div\")``;\r\n\r\n//Wrapping div around Section Body to fix choppy animations\r\nconst SectionCollapse = styled(Collapse)`\r\n & > div {\r\n padding: 0.5em;\r\n }\r\n`;\r\n\r\nexport interface AsideSectionProps extends React.HTMLProps {\r\n title?: string;\r\n collapse?: boolean;\r\n iconName?: string;\r\n}\r\n\r\nexport interface AsideSectionState {\r\n show: boolean;\r\n}\r\n\r\nexport default class AsideSection extends React.Component<\r\n AsideSectionProps,\r\n AsideSectionState\r\n> {\r\n constructor(props: AsideSectionProps) {\r\n super(props);\r\n\r\n this.state = {\r\n show: !this.props.collapse\r\n };\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n this.props.collapse && this.setState({ show: !this.state.show })\r\n }\r\n >\r\n {this.props.iconName && }\r\n {this.props.title}\r\n {this.props.collapse && (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport AsideSection from \"./AsideSection\";\r\n//need to import ace-elements and ace-extra\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\nimport * as AceColors from \"../../AceColors\";\r\n\r\nconst AsideWrapper = styled(\"div\")`\r\n position: absolute;\r\n z-index: 998;\r\n right: 0;\r\n top: auto;\r\n`;\r\n\r\nconst AsideContent = styled.div<{ maxHeight: number; maxWidth?: string }>`\r\n display: block;\r\n background-color: white;\r\n border: 0px solid\r\n ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\"\r\n ? AceColors.gray300\r\n : ConcreteColors.gray300};\r\n box-shadow: -2px 1px 2px 0 rgba(0, 0, 0, 0.15);\r\n border-radius: 0px;\r\n overflow-y: auto;\r\n width: auto;\r\n max-width: 0;\r\n max-height: 0;\r\n float: left;\r\n transition: max-width 0.25s linear 0s, max-height 0s linear 0.25s,\r\n padding 0s linear 0.25s, border-width 0s linear 0.25s;\r\n\r\n &.show {\r\n max-width: ${props => (props.maxWidth ? props.maxWidth : \"420px\")};\r\n max-height: ${props => props.maxHeight}px;\r\n transition-delay: 0s;\r\n }\r\n`;\r\n\r\nconst AsideHeader = styled(\"div\")`\r\n font-size: 1.5em;\r\n background-color: ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\" ? props.theme.navbarColor : \"white\"};\r\n color: ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\" ? \"white\" : \"black\"};\r\n height: 40px;\r\n font-weight: 600;\r\n line-height: 1.8;\r\n padding-left: 0.5em;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n\r\n & > button {\r\n border: 0px;\r\n background: none;\r\n opacity: 0.75;\r\n height: 40px;\r\n color: white;\r\n cursor: pointer;\r\n outline: none;\r\n font-size: 1.5em;\r\n line-height: 0.5;\r\n float: right;\r\n\r\n &:hover {\r\n opacity: 1;\r\n }\r\n }\r\n`;\r\n\r\nconst AsideBody = styled(\"div\")`\r\n overflow: hidden;\r\n`;\r\n\r\nconst ModalButton = styled(\"button\")`\r\n width: 42px;\r\n height: 40px;\r\n font-size: 18px;\r\n font-weight: 400;\r\n color: #fff;\r\n text-align: center;\r\n border: none;\r\n border-radius: 6px 0px 0px 6px;\r\n padding: 6px 0 8px;\r\n line-height: 1.7;\r\n position: relative;\r\n background: repeat-x\r\n ${(props: any) =>\r\n props.theme.baseTheme === \"Ace\"\r\n ? \"#ffb44b\"\r\n : ConcreteColors.blue200} !important;\r\n z-index: 999;\r\n position: relative;\r\n float: left;\r\n outline: 0;\r\n`;\r\n\r\nexport interface AsideProps extends React.HTMLProps {\r\n /** Title of the modal aside */\r\n title?: string;\r\n /** The icon used to close the modal aside */\r\n closeIcon?: string;\r\n /** The icon used to open the modal aside. If you want to set the same icon to both close and open state then pass this prop only */\r\n openIcon?: string;\r\n /** (Optional) The maximum width for the panel (for example, \"50vw\" or \"500px\") */\r\n panelMaxWidth?: string;\r\n /** (Optional) Set to true if the panel should load in the open position (💙 HJW). Ignored if you set 'open' */\r\n defaultOpen?: boolean;\r\n /** (Optional) Use this prop if you want to manually open and close the aside. If this is set, the open and close buttons will use callback functions instead of setting the state themselves. */\r\n open?: boolean;\r\n /** (Optional) Only fires when the aside is controlled using the \"open\" prop*/\r\n onOpen?: () => void;\r\n /** (Optional) Only fires when the aside is controlled using the \"open\" prop*/\r\n onClose?: () => void;\r\n}\r\n\r\nexport interface AsideState {\r\n show: boolean;\r\n}\r\n\r\n// This needs to be a class so that it can export the AsideSection as a static property\r\nexport default class ModalAside extends React.Component<\r\n AsideProps,\r\n AsideState\r\n> {\r\n constructor(props: AsideProps) {\r\n super(props);\r\n\r\n if (props.defaultOpen && typeof props.open !== \"boolean\") {\r\n this.state = { show: true };\r\n } else {\r\n this.state = { show: false };\r\n }\r\n }\r\n\r\n handleOpen = () => {\r\n // if we actually set the 'open' prop\r\n if (typeof this.props.open === \"boolean\" && this.props.onOpen) {\r\n // controlled behavior\r\n this.props.onOpen();\r\n } else {\r\n // uncontrolled behavior\r\n this.setState({ show: true });\r\n }\r\n };\r\n\r\n handleClose = () => {\r\n // if we actually set the 'open' prop\r\n if (typeof this.props.open === \"boolean\" && this.props.onClose) {\r\n // controlled behavior\r\n this.props.onClose();\r\n } else {\r\n // uncontrolled behavior\r\n this.setState({ show: false });\r\n }\r\n };\r\n\r\n toggleClick = () => {\r\n if (this.state.show === true) {\r\n this.handleClose();\r\n } else {\r\n this.handleOpen();\r\n }\r\n };\r\n\r\n componentDidUpdate() {\r\n if (this.props.open === true && this.state.show === false) {\r\n this.setState({ show: true });\r\n }\r\n if (this.props.open === false && this.state.show === true) {\r\n this.setState({ show: false });\r\n }\r\n }\r\n\r\n render() {\r\n const maxHeight = Math.floor(window.innerHeight * 0.9);\r\n const open = this.props.openIcon ?? \"fa fa-plus\";\r\n const close = this.props.closeIcon ?? \"fa fa-minus\";\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {this.props.title}\r\n \r\n \r\n\r\n \r\n {this.props.children}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n static Section = AsideSection;\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport type LoadingProps = {\r\n /** Any extra class to apply to the loader */\r\n className?: string;\r\n /** Is it loading? */\r\n isLoading: boolean;\r\n /** If you need to increase the size of the loading spinner, pass in a number to multiply the size by that number. ONLY works on whole numbers 2, 3, 4, 5. */\r\n size?: number;\r\n};\r\n\r\nclass L extends React.Component {\r\n render() {\r\n return this.props.isLoading ? (\r\n \r\n ) : null;\r\n }\r\n}\r\n\r\nconst StyledLoading = styled(L)`\r\n line-height: normal;\r\n`;\r\n\r\nexport default function Loading(props: LoadingProps) {\r\n return ;\r\n} //HACK: Somehow this is not working so doing this for now: https://react-styleguidist.js.org/docs/thirdparties.html#styled-components\r\n","import * as React from \"react\";\r\nimport styled, { css } from \"styled-components\";\r\nimport Loading from \"./Loading\";\r\nexport type LoadingContainerProps = {\r\n /** The node that will be contained by the loading. */\r\n children: any;\r\n /** Is it loading? */\r\n isLoading: boolean;\r\n /** If you need to increase the size of the loading spinner, pass in a number to multiply the size by that number. ONLY works on whole numbers 2, 3, 4, 5. */\r\n size?: number;\r\n /** Any extra class to apply to the loader */\r\n className?: string;\r\n /** Allows the container to resize - smaller or larger - to fit the content it contains, instead of 100% */\r\n fitContentWidth?: boolean;\r\n};\r\n\r\nclass UnstyledLoadingContainer extends React.Component {\r\n static defaultProps = {\r\n isLoading: false,\r\n fitContentWidth: false\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst StyledLoadingContainer = styled(UnstyledLoadingContainer)`\r\n position: relative;\r\n\r\n ${(props: any) =>\r\n props.fitContentWidth &&\r\n css`\r\n width: fit-content;\r\n `} ${(props: any) =>\r\n props.isLoading &&\r\n css`\r\n & > div:last-child {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n right: 0;\r\n background-color: rgba(255, 255, 255, 0.7);\r\n overflow: hidden;\r\n z-index: 1000;\r\n }\r\n `}\r\n\r\n\r\n & > div:last-child > i {\r\n position: absolute;\r\n top: 35%;\r\n width: 100%;\r\n text-align: center;\r\n }\r\n`; //HACK: stupid ts. Had to add any to props or else failing right now\r\n\r\nexport default function LoadingContainer({\r\n children,\r\n ...props\r\n}: LoadingContainerProps) {\r\n return {children};\r\n} //HACK: Somehow this is not working so doing this for now: https://react-styleguidist.js.org/docs/thirdparties.html#styled-components\r\n","import { createContext } from \"react\";\r\n\r\nexport interface WidgetContextProps {\r\n open?: boolean;\r\n handleToggle?: () => void;\r\n}\r\n\r\nexport const WidgetContext = createContext({\r\n open: undefined,\r\n handleToggle: undefined\r\n});\r\n","import * as React from \"react\";\r\nimport { Collapse } from \"react-bootstrap\";\r\nimport styled from \"styled-components\";\r\nimport { WidgetContext } from \"./Context\";\r\n\r\nexport interface WidgetBodyProps extends React.HTMLProps {\r\n /** Make it look disabled - does not change functionality at this time */\r\n disabled?: boolean;\r\n}\r\n\r\nconst Body = ({ className, ref, children, ...props }: WidgetBodyProps) => {\r\n const context = React.useContext(WidgetContext);\r\n if (context.open !== undefined)\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n );\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Body;\r\n\r\nconst WidgetBodyStyled = styled.div<{ disabled?: boolean }>`\r\n color: ${props => (props.disabled ? \"#707070\" : \"inherit\")};\r\n`;\r\n\r\nconst WidgetMain = styled.div`\r\n padding: 12px;\r\n`;\r\n","import * as React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport styled, { withTheme } from \"styled-components\";\r\nimport * as AceColors from \"../../AceColors\";\r\nimport { WidgetContext } from \"./Context\";\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\nimport { Theme } from \"../../themes\";\r\n\r\nexport interface WidgetHeaderProps extends React.HTMLProps {\r\n /** Turn off the bottom border on the widget header */\r\n hideBorder?: boolean;\r\n /** Make the widget appear draggable - no dragging functionality yet */\r\n draggable?: boolean;\r\n theme?: Theme;\r\n}\r\n\r\nexport const Header = ({\r\n className,\r\n ref,\r\n children,\r\n draggable,\r\n theme,\r\n ...props\r\n}: WidgetHeaderProps) => {\r\n const context = React.useContext(WidgetContext);\r\n\r\n let noBorder = false;\r\n if (props.hideBorder === true) {\r\n noBorder = true;\r\n }\r\n if (!context.open) {\r\n noBorder = true;\r\n }\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nvar ThemedHeader = withTheme(Header);\r\n\r\nexport default ThemedHeader;\r\n\r\nconst StyledHeader = styled.div<{ noBorder?: boolean }>`\r\n box-sizing: content-box;\r\n position: relative;\r\n height: 36px;\r\n color: ${props =>\r\n props.theme && props.theme.baseTheme === \"Concrete\"\r\n ? ConcreteColors.gray700\r\n : AceColors.gray800};\r\n border-bottom: ${props => (props.noBorder ? \"0px\" : \"1px solid #ddd\")};\r\n padding-left: 12px;\r\n\r\n &.draggable {\r\n cursor: move;\r\n cursor: grab;\r\n &:before {\r\n content: \"\\\\e951\";\r\n font-family: \"FontAwesome\";\r\n margin-right: 10px;\r\n width: 16px;\r\n display: inline-block;\r\n }\r\n &:hover {\r\n background-color: ${props =>\r\n props.theme !== undefined && props.theme.baseTheme === \"Concrete\"\r\n ? ConcreteColors.blue100\r\n : AceColors.gray100};\r\n }\r\n }\r\n &.draggable.active {\r\n cursor: grabbing;\r\n }\r\n &:before,\r\n &:after {\r\n content: \"\";\r\n display: table;\r\n line-height: 0;\r\n }\r\n\r\n &:after {\r\n clear: right;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport styled from \"styled-components\";\r\nimport { WidgetContext } from \"./Context\";\r\n\r\nexport interface WidgetTitleProps extends React.HTMLProps {\r\n disabled?: boolean;\r\n}\r\n\r\nconst Title = ({ className, ref, children, ...props }: WidgetTitleProps) => {\r\n const context = React.useContext(WidgetContext);\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Title;\r\n\r\nconst StyledWidgetTitle = styled.h4<{ disabled?: boolean }>`\r\n font-weight: ${props => (props.disabled ? \"normal\" : \"bold\")};\r\n color: ${props => (props.disabled ? \"#707070\" : \"inherit\")};\r\n\r\n &.collapse {\r\n cursor: pointer;\r\n &::before {\r\n content: \"\\\\f105\";\r\n font-family: \"FontAwesome\";\r\n margin-right: 10px;\r\n width: 12px;\r\n }\r\n }\r\n &.collapse.in {\r\n &::before {\r\n content: \"\\\\f107\";\r\n }\r\n display: inline;\r\n }\r\n\r\n line-height: 36px;\r\n padding: 0;\r\n margin: 0;\r\n display: inline;\r\n\r\n & > i,\r\n & > .ace-icon {\r\n margin-right: 0.7em;\r\n font-weight: 400;\r\n display: inline-block;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nexport interface WidgetToolsProps extends React.HTMLProps {}\r\n\r\nconst Tools = ({ className, ref, children, ...props }: WidgetToolsProps) => {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Tools;\r\n\r\nconst Toolbar = styled.div`\r\n line-height: 36px;\r\n padding: 0;\r\n margin: 0;\r\n display: block;\r\n padding: 0 10px;\r\n line-height: 36px;\r\n float: right;\r\n position: relative;\r\n &:before {\r\n display: inline-block;\r\n content: \"\";\r\n position: absolute;\r\n top: 3px;\r\n bottom: 3px;\r\n left: -1px;\r\n border: 1px solid #d9d9d9;\r\n border-width: 0 1px 0 0;\r\n }\r\n\r\n &.no-border:before {\r\n display: none;\r\n }\r\n\r\n & > label {\r\n display: inline-block;\r\n vertical-align: middle;\r\n margin-bottom: 0;\r\n }\r\n\r\n & > .widget-menu {\r\n display: inline-block;\r\n position: relative;\r\n }\r\n\r\n & > .widget-menu > a,\r\n & > a {\r\n font-size: 14px;\r\n display: inline-block;\r\n padding: 0;\r\n line-height: 36px;\r\n }\r\n\r\n & > .widget-menu > a:hover,\r\n & > a:hover {\r\n text-decoration: none;\r\n }\r\n\r\n & > .widget-menu > a[data-action],\r\n & > a[data-action] {\r\n -webkit-transition: transform 0.1s;\r\n -o-transition: transform 0.1s;\r\n transition: transform 0.1s;\r\n }\r\n & > .widget-menu > a[data-action] > .ace-icon,\r\n & > a[data-action] > .ace-icon {\r\n margin-right: 0;\r\n }\r\n & > .widget-menu > a[data-action]:focus,\r\n & > a[data-action]:focus {\r\n text-decoration: none;\r\n outline: 0;\r\n }\r\n & > .widget-menu > a[data-action]:hover,\r\n & > a[data-action]:hover {\r\n -moz-transform: scale(1.2);\r\n -webkit-transform: scale(1.2);\r\n -o-transform: scale(1.2);\r\n -ms-transform: scale(1.2);\r\n transform: scale(1.2);\r\n }\r\n & .progress {\r\n vertical-align: middle;\r\n display: inline-block;\r\n margin: 0;\r\n }\r\n & > .dropdown,\r\n & > .dropup {\r\n display: inline-block;\r\n }\r\n .widget-toolbox.toolbox-vertical,\r\n .widget-toolbox.toolbox-vertical + .widget-main {\r\n display: table-cell;\r\n vertical-align: top;\r\n }\r\n & > .nav-tabs {\r\n border-bottom-width: 0;\r\n margin-bottom: 0;\r\n top: auto;\r\n margin-top: 3px !important;\r\n }\r\n & > .nav-tabs > li {\r\n margin-bottom: auto;\r\n }\r\n & > .nav-tabs > li > a {\r\n box-shadow: none;\r\n position: relative;\r\n top: 1px;\r\n margin-top: 1px;\r\n }\r\n & > .nav-tabs > li:not(.active) > a {\r\n border-color: transparent;\r\n background-color: transparent;\r\n }\r\n & > .nav-tabs > li:not(.active) > a:hover {\r\n background-color: transparent;\r\n }\r\n & > .nav-tabs > li.active > a {\r\n background-color: #fff;\r\n border-bottom-color: transparent;\r\n box-shadow: none;\r\n margin-top: auto;\r\n }\r\n & > .nav-tabs .widget-color-orange > .widget-header > li > a {\r\n color: #855d10;\r\n }\r\n\r\n & > .btn-toolbar {\r\n margin: 0 !important;\r\n padding: 0;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport Body from \"./WidgetBody\";\r\nimport Header from \"./WidgetHeader\";\r\nimport Title from \"./WidgetTitle\";\r\nimport Tools from \"./WidgetTools\";\r\nimport styled from \"styled-components\";\r\nimport { WidgetContext } from \"./Context\";\r\n\r\nexport interface WidgetProps extends React.HTMLProps {\r\n /** Enables collapsing of the widget body. Requires toggle prop on Widget.Title component */\r\n collapsible?: boolean;\r\n /** If True Widget is expanded on initial render, only used with collapsible prop */\r\n open?: boolean;\r\n /** Do you want to style this widget as a card (with a drop shadow). Defaults to true. Applies 'card' class from main.css */\r\n isCard?: boolean;\r\n /** Hide the outer border of the widget */\r\n hideBorder?: boolean;\r\n /** To define a background color, set this prop to a valid CSS color value */\r\n overrideBackgroundColor?: string;\r\n /** Make the widget appear disabled - limited right now to changing bg and font colors */\r\n disabled?: boolean;\r\n}\r\nexport interface WidgetState {\r\n open: boolean;\r\n handleToggle: () => void;\r\n}\r\n\r\nexport default class Widget extends React.Component {\r\n constructor(props: WidgetProps) {\r\n super(props);\r\n this.state = {\r\n open: props.open ? props.open : false,\r\n handleToggle: this.handleToggle\r\n };\r\n }\r\n\r\n public static defaultProps = {\r\n isCard: true,\r\n hideBorder: false\r\n };\r\n\r\n handleToggle = () => {\r\n this.setState({ open: !this.state.open });\r\n };\r\n\r\n render() {\r\n let {\r\n className,\r\n ref,\r\n children,\r\n collapsible,\r\n hideBorder,\r\n ...props\r\n } = this.props;\r\n let additionalClasses = \"\";\r\n if (this.props.isCard) {\r\n additionalClasses = \" card \";\r\n }\r\n\r\n let noBorder = false;\r\n if (this.props.hideBorder) {\r\n noBorder = true;\r\n }\r\n\r\n let backgroundColor = \"\";\r\n if (this.props.disabled) {\r\n backgroundColor = \"#f6f6f6\";\r\n }\r\n if (this.props.overrideBackgroundColor) {\r\n backgroundColor = this.props.overrideBackgroundColor;\r\n }\r\n\r\n let disabled = false;\r\n if (this.props.disabled) {\r\n disabled = true;\r\n }\r\n\r\n const WidgetComponent = (\r\n \r\n {children}\r\n \r\n );\r\n\r\n if (collapsible)\r\n return (\r\n \r\n {WidgetComponent}\r\n \r\n );\r\n else return <>{WidgetComponent}>;\r\n }\r\n\r\n static Body = Body;\r\n static Header = Header;\r\n static Title = Title;\r\n static Tools = Tools;\r\n}\r\n\r\nconst WidgetContainer = styled.div<{ backgroundColor?: string }>`\r\n background-color: ${props => props.backgroundColor || \"#fff\"};\r\n`;\r\n\r\nconst WidgetBox = styled.div<{ hideBorder?: boolean }>`\r\n padding: 0;\r\n margin: 3px 0;\r\n border: ${props => (props.hideBorder ? \"0px\" : \"1px solid #ccc\")};\r\n`;\r\n","import * as React from \"react\";\r\n\r\nexport interface TextFieldProps extends React.HTMLProps {\r\n /** Specify number of pixels of padding for the left side of the field. Omit to use the default */\r\n leftUnit?: any;\r\n /** Specify number of pixels of padding for the right side of the field. Omit to use the default */\r\n rightUnit?: any;\r\n}\r\n\r\nexport type TextFieldState = {\r\n paddingStyle: Object;\r\n};\r\n\r\nexport default class TextField extends React.Component<\r\n TextFieldProps,\r\n TextFieldState\r\n> {\r\n private leftLabel: HTMLLabelElement | null = null;\r\n private rightLabel: HTMLLabelElement | null = null;\r\n\r\n constructor(props: TextFieldProps) {\r\n super(props);\r\n this.state = {\r\n paddingStyle: {}\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n let leftPadding =\r\n this.props.leftUnit && this.leftLabel\r\n ? this.leftLabel.offsetWidth + 10 + \"px\"\r\n : \"4px\";\r\n let rightPadding =\r\n this.props.rightUnit && this.rightLabel\r\n ? this.rightLabel.offsetWidth + 10 + \"px\"\r\n : \"4px\";\r\n let fieldWidth =\r\n this.props.leftUnit || this.props.rightUnit ? \"180px\" : \"auto\";\r\n\r\n if (this.props.leftUnit || this.props.rightUnit) {\r\n this.setState({\r\n paddingStyle: {\r\n paddingLeft: leftPadding,\r\n paddingRight: rightPadding,\r\n width: fieldWidth\r\n }\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n let { leftUnit, rightUnit, ...other } = this.props;\r\n var base = ;\r\n var left = this.props.leftUnit ? (\r\n \r\n ) : null;\r\n var right = this.props.rightUnit ? (\r\n \r\n ) : null;\r\n\r\n if (this.props.rightUnit || this.props.leftUnit) {\r\n return (\r\n \r\n {left}\r\n {base}\r\n {right}\r\n
\r\n );\r\n }\r\n\r\n return base;\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { default as ReactDatePicker } from \"react-date-picker/dist/entry.nostyle\";\r\nimport { DatePickerProps as DatePickerPackageProps } from \"react-date-picker\";\r\nimport classNames from \"classnames\";\r\n\r\nconst DatePickerWrapper = styled.div`\r\n .react-date-picker {\r\n display: inline-flex;\r\n position: relative;\r\n -moz-box-sizing: border-box;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n\r\n & *,\r\n & *:before,\r\n & *:after {\r\n -moz-box-sizing: border-box;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n }\r\n\r\n &.react-date-picker--disabled {\r\n background-color: #f0f0f0;\r\n color: #6d6d6d;\r\n }\r\n\r\n & .react-date-picker__button {\r\n display: flex;\r\n border: 0px;\r\n\r\n & > .react-date-picker__button__input:not(:disabled):hover,\r\n & > .react-date-picker__button__input:not(:disabled):hover,\r\n & > .react-date-picker__button__icon:not([disabled]):hover,\r\n & > .react-date-picker__button__icon:not([disabled]):hover {\r\n border-color: #ff893c;\r\n z-index: 100;\r\n }\r\n\r\n & > .react-date-picker__button__input:focus,\r\n & > .react-date-picker__button__icon:focus {\r\n border-color: #f59942;\r\n }\r\n\r\n & .react-date-picker__button__input {\r\n min-width: calc(4px + (4px * 3) + 4.32em + 0.434em);\r\n flex-grow: 1;\r\n display: flex;\r\n padding: 0 5px;\r\n border: 1px solid #cccccc;\r\n margin-right: -1px;\r\n align-items: baseline;\r\n\r\n .react-date-picker__button__input__divider {\r\n padding: 1px 2px;\r\n }\r\n .react-date-picker__button__input__input {\r\n min-width: 0.54em;\r\n height: 100%;\r\n position: relative;\r\n padding: 0px;\r\n border: 0;\r\n background: none;\r\n -moz-appearance: textfield;\r\n\r\n &::-webkit-inner-spin-button,\r\n &::-webkit-outer-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n &:invalid {\r\n background: #ffc0d0;\r\n background: rgba(255, 0, 0, 0.1);\r\n }\r\n\r\n &.react-date-picker__button__input__input--hasLeadingZero {\r\n min-width: calc(4px + 1.08em);\r\n margin-left: -0.54em;\r\n padding-left: calc(1px + 0.54em);\r\n }\r\n }\r\n }\r\n\r\n & .react-date-picker__clear-button {\r\n display: none;\r\n }\r\n\r\n & .react-date-picker__calendar-button {\r\n &:hover,\r\n &:focus {\r\n color: #005eb8;\r\n }\r\n\r\n &:disabled {\r\n > i {\r\n color: #6d6d6d;\r\n }\r\n }\r\n }\r\n\r\n .react-date-picker__button__icon {\r\n border: 1px solid #cccccc;\r\n background: #eeeeee;\r\n padding: 4px 8px;\r\n\r\n &:enabled {\r\n cursor: pointer;\r\n\r\n & svg {\r\n display: inherit;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .react-date-picker__calendar {\r\n position: absolute;\r\n width: 300px;\r\n max-width: 100vw;\r\n padding: 4px;\r\n margin-top: 40px;\r\n margin-left: ${props => props.xOffset * -1 + -5 + \"px\"};\r\n z-index: 150;\r\n background: #ffffff;\r\n border: 1px solid #cccccc;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n\r\n &:before {\r\n content: \"\\\\25B2\";\r\n display: block;\r\n position: absolute;\r\n top: -14px;\r\n left: ${props => props.xOffset + 36 + \"px\"};\r\n color: #ffffff;\r\n text-shadow: 0px -3px 0px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n &.react-date-picker__calendar--closed {\r\n display: none;\r\n }\r\n &.react-date-picker__calendar--above-label {\r\n bottom: 100%;\r\n top: auto;\r\n }\r\n\r\n & .react-calendar {\r\n border: 1px thin #a0a096;\r\n background: #ffffff;\r\n font-family: Arial, Helvetica, sans-serif;\r\n line-height: 1.125em;\r\n\r\n & button {\r\n margin: 0;\r\n border: 0;\r\n outline: none;\r\n\r\n &:enabled:hover {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n & > .react-calendar__navigation {\r\n height: 30px;\r\n margin-bottom: 0;\r\n font-weight: 700;\r\n\r\n & button {\r\n min-width: 30px;\r\n background: none;\r\n padding-bottom: 5px;\r\n\r\n &:enabled {\r\n &:hover,\r\n &:focus {\r\n background: #e6e6e6;\r\n }\r\n }\r\n\r\n &[disabled],\r\n &:disabled {\r\n background: #f0f0f0;\r\n }\r\n\r\n &.react-calendar__navigation__arrow {\r\n font-size: 1.1em;\r\n }\r\n &.react-calendar__navigation__label {\r\n font-size: 0.9em;\r\n line-height: 28px;\r\n }\r\n\r\n &.react-calendar__navigation__prev2-button,\r\n &.react-calendar__navigation__next2-button {\r\n display: none !important;\r\n }\r\n }\r\n }\r\n\r\n & > .react-calendar__month-view {\r\n & .react-calendar__month-view__weekdays {\r\n text-align: center;\r\n font-weight: 700;\r\n font-size: 0.875em;\r\n\r\n & .react-calendar__month-view__weekdays__weekday {\r\n padding: 0.4em 0.2em 0.4em 0.5em;\r\n }\r\n }\r\n\r\n & .react-calendar__month-view__days__day--neighboringMonth {\r\n color: #969696;\r\n }\r\n }\r\n\r\n & .react-calendar__year-view .react-calendar__tile,\r\n & .react-calendar__decade-view .react-calendar__tile,\r\n & .react-calendar__century-view .react-calendar__tile {\r\n padding: 2em 0.5em;\r\n }\r\n\r\n & .react-calendar__tile {\r\n max-width: 100%;\r\n font-size: 0.95em;\r\n font-weight: 400;\r\n text-align: center;\r\n padding: 0.5em 0.2em;\r\n background: none;\r\n\r\n &:disabled,\r\n &[disabled] {\r\n background-color: #f0f0f0;\r\n }\r\n\r\n &:enabled {\r\n &:hover,\r\n &:focus {\r\n background: #ececec;\r\n }\r\n }\r\n }\r\n\r\n & .react-calendar__tile--hasActive {\r\n background: #76baff;\r\n &:enabled {\r\n &:hover,\r\n &:focus {\r\n background: #a9d4ff;\r\n }\r\n }\r\n }\r\n\r\n .react-calendar__tile--active {\r\n background: #005eb8;\r\n color: #ffffff;\r\n\r\n &:enabled {\r\n &:hover,\r\n &:focus {\r\n background: #1087ff;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport interface DatePickerProps extends DatePickerPackageProps {\r\n /** optional attribute for setting additional classes on the DatePickerWrapper */\r\n containerClassName?: string;\r\n}\r\n\r\ninterface DatePickerState {\r\n xOffset: number;\r\n}\r\n\r\nexport default class DatePicker extends React.Component<\r\n DatePickerProps,\r\n DatePickerState\r\n> {\r\n public datePicker: React.RefObject = React.createRef();\r\n\r\n static defaultProps = {\r\n locale: \"en-US\",\r\n minDetail: \"decade\",\r\n calendarIcon: \r\n };\r\n\r\n state: DatePickerState = {\r\n xOffset: 0\r\n };\r\n\r\n componentDidMount() {\r\n this.calculateOffset();\r\n }\r\n\r\n calculateOffset = () => {\r\n const windowWidth = window.innerWidth;\r\n const dpDomRect = this.datePicker.current.getBoundingClientRect();\r\n const leftDisp = dpDomRect.left;\r\n const distanceFromRight = windowWidth - leftDisp;\r\n\r\n if (distanceFromRight < 300) {\r\n let xOffset = Math.abs(distanceFromRight - 300);\r\n this.setState({ xOffset });\r\n } else {\r\n this.setState({ xOffset: 0 });\r\n }\r\n };\r\n\r\n render() {\r\n var {\r\n className,\r\n calendarClassName,\r\n containerClassName,\r\n ...other\r\n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport {\r\n default as ReactDropzone,\r\n DropzoneProps as ReactDropzoneProps\r\n} from \"react-dropzone\";\r\nimport { gray500 } from \"../AceColors\";\r\nimport styled from \"styled-components\";\r\n\r\nconst StyledDropzone = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n & > div.drop-zone-class {\r\n color: #f00;\r\n width: 100%;\r\n height: 100%;\r\n display: table;\r\n vertical-align: middle;\r\n border: 2px dashed ${gray500};\r\n }\r\n & > div.drop-zone-class > div {\r\n width: 100%;\r\n height: 100%;\r\n display: table-cell;\r\n vertical-align: middle;\r\n text-align: center;\r\n display: inline-cell;\r\n color: #000;\r\n margin: 10px;\r\n }\r\n`;\r\n\r\nexport interface DropzoneProps extends ReactDropzoneProps {\r\n message?: string;\r\n}\r\n\r\nexport default class Dropzone extends React.Component {\r\n render() {\r\n const message = this.props.message\r\n ? this.props.message\r\n : \"Please drop your file(s) here or click to select\";\r\n return (\r\n \r\n \r\n {message}
\r\n \r\n \r\n );\r\n }\r\n}\r\n","import { createGlobalStyle } from \"styled-components\";\r\n\r\nconst GlobalStyle = createGlobalStyle`\r\n label.required::after {\r\n content: \" *\";\r\n color: red;\r\n } /* Putting this here as I don't know where else to put it*/\r\n `;\r\n\r\nexport default GlobalStyle;\r\n","import * as React from \"react\";\r\nimport { ThemeProvider, ThemeProviderProps } from \"styled-components\";\r\nimport GlobalStyle from \"./GlobalStyle\";\r\nexport default class extends React.Component> {\r\n render() {\r\n const { children, ...props } = this.props;\r\n return (\r\n \r\n <>\r\n \r\n {children}\r\n >\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\n// @ts-ignore\r\nimport { AlertList } from \"react-bs-notifier\";\r\nimport { Button } from \"./Button\";\r\nimport { createGlobalStyle, withTheme } from \"styled-components\";\r\nimport { Theme } from \"../themes\";\r\nimport * as ConcreteColors from \"../ConcreteColors\";\r\n\r\nexport type NotificationState = {\r\n alerts: any[];\r\n};\r\n\r\nexport type NotificationProps = {\r\n /** Optional, automatically provided by your site theme */\r\n theme?: Theme;\r\n};\r\n\r\n/** Expect single instance of Notification */\r\n/** @ignore */\r\nexport class Notification extends React.Component<\r\n NotificationProps,\r\n NotificationState\r\n> {\r\n readonly state = { alerts: [] };\r\n static Instance: Notification;\r\n\r\n constructor(props: NotificationProps) {\r\n super(props);\r\n Notification.Instance = this;\r\n }\r\n\r\n onAlertDismissed = (alert: any) => {\r\n this.setState(prevState => {\r\n return {\r\n alerts: prevState.alerts.filter(a => a !== alert)\r\n };\r\n });\r\n };\r\n\r\n formatAlertMessage = (\r\n alertId: number,\r\n message?: React.ReactChild\r\n ): React.ReactChild => {\r\n const handleDismiss = () => {\r\n const currentAlert: any = this.state.alerts.find(\r\n (a: any) => a.id === alertId\r\n );\r\n this.onAlertDismissed(currentAlert);\r\n };\r\n\r\n const renderMessageBody = () => (\r\n {message}
\r\n );\r\n\r\n const renderMessageFooter = () => {\r\n if (!!this.props.theme && this.props.theme.baseTheme === \"Concrete\") {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n return null;\r\n };\r\n\r\n return (\r\n \r\n {!!message && renderMessageBody()}\r\n {renderMessageFooter()}\r\n
\r\n );\r\n };\r\n\r\n notify = (\r\n type: \"success\" | \"info\" | \"warning\" | \"danger\",\r\n headline: string,\r\n message: React.ReactChild = \"\",\r\n timeout: number\r\n ) => {\r\n this.setState(prevState => {\r\n const newAlertId = new Date().getTime();\r\n return {\r\n alerts: [\r\n ...prevState.alerts,\r\n {\r\n id: newAlertId,\r\n type,\r\n headline,\r\n message: this.formatAlertMessage(newAlertId, message),\r\n timeout\r\n }\r\n ]\r\n };\r\n });\r\n };\r\n\r\n renderConcreteStyleOverrides = () => {\r\n if (!!this.props.theme && this.props.theme.baseTheme === \"Concrete\")\r\n return ;\r\n return null;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n {this.renderConcreteStyleOverrides()}\r\n \r\n >\r\n );\r\n }\r\n}\r\n\r\nexport function notify(\r\n type: \"success\" | \"info\" | \"warning\" | \"danger\",\r\n headline: string,\r\n message?: React.ReactChild,\r\n timeout: number = 5000\r\n) {\r\n Notification.Instance.notify(type, headline, message, timeout);\r\n}\r\n\r\nconst ConcreteStyles = createGlobalStyle`\r\n div[class^=\"AlertContainer-container\"] {\r\n top: 50px;\r\n z-index: 1051;\r\n }\r\n\r\n div.alert {\r\n position: relative !important;\r\n padding: 20px 24px 16px 24px;\r\n min-width: 300px;\r\n max-width: 400px;\r\n font-family: Inter, Arial, sans-serif;\r\n }\r\n\r\n div.alert-success,\r\n div.alert-info,\r\n div.alert-warning,\r\n div.alert-danger {\r\n background-color: ${ConcreteColors.gray700};\r\n color: white;\r\n border: 0px solid white;\r\n border-left-width: 40px;\r\n box-shadow: 0 2px 8px -2px ${ConcreteColors.gray500};\r\n border-radius: 4px;\r\n }\r\n\r\n .alert:before {\r\n position: absolute;\r\n font-size: 20px;\r\n }\r\n\r\n div.alert-success h4,\r\n div.alert-info h4,\r\n div.alert-warning h4,\r\n div.alert-danger h4 {\r\n font-weight: 600;\r\n margin-bottom: 10px;\r\n }\r\n div.alert-success {\r\n border-color: ${ConcreteColors.green200};\r\n }\r\n\r\n div.alert-info {\r\n border-color: ${ConcreteColors.blue200};\r\n }\r\n div.alert-warning {\r\n border-color: #f67e17;\r\n }\r\n div.alert-danger {\r\n border-color: ${ConcreteColors.red200};\r\n }\r\n div.alert-success i,\r\n div.alert-info i,\r\n div.alert-warning i,\r\n div.alert-danger i {\r\n display: none;\r\n }\r\n\r\n div.alert-success:before,\r\n div.alert-info:before,\r\n div.alert-warning:before,\r\n div.alert-danger:before {\r\n font-family: \"FontAwesome\";\r\n display: block;\r\n width: 10px;\r\n height: 0px;\r\n }\r\n\r\n div.alert-success:before {\r\n content: \"\\f00c\";\r\n top: 13px;\r\n left: -30px;\r\n }\r\n div.alert-info:before {\r\n content: \"\\f129\";\r\n top: 14px;\r\n left: -23px;\r\n }\r\n div.alert-warning:before {\r\n content: \"\\f071\";\r\n top: 14px;\r\n left: -30px;\r\n }\r\n div.alert-danger:before {\r\n content: \"\\f12a\";\r\n top: 14px;\r\n left: -23px;\r\n }\r\n\r\n .alert-dismissable > button[class*=\"close\"] {\r\n display: none !important;\r\n }\r\n\r\n .alert > div[class*=\"msgContainer\"] {\r\n width: 100%;\r\n }\r\n .alert > div[class*=\"msgContainer\"] > h4[class*=\"headline\"] {\r\n font-size: 1.8rem;\r\n color: #ffffff;\r\n }\r\n .alert > div[class*=\"msgContainer\"] > div[class*=\"body\"] {\r\n font-size: 1.4rem;\r\n white-space: normal;\r\n word-break: break-all;\r\n overflow: hidden;\r\n max-width: unset;\r\n color: ${ConcreteColors.gray400};\r\n }\r\n\r\n .alert .message-container {\r\n & > .message-body-wrapper {\r\n margin-bottom: 20px;\r\n }\r\n & > .message-footer-wrapper {\r\n & > .alert-action-button {\r\n padding: 4px 0;\r\n margin-right: 8px;\r\n\r\n border-width: 0;\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n color: #ffffff;\r\n\r\n opacity: 1;\r\n outline: none;\r\n\r\n &,\r\n &:active,\r\n &:active:focus {\r\n outline: none;\r\n }\r\n\r\n &:active,\r\n &:active:focus {\r\n color: ${ConcreteColors.gray400};\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\nvar ThemedNotification = withTheme(Notification);\r\nexport default ThemedNotification;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport {\r\n Modal as BootstrapModal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalDialog,\r\n ModalFooter,\r\n ModalTitle\r\n} from \"react-bootstrap\";\r\nimport classNames from \"classnames\";\r\n\r\nconst ModalWrapper = styled(BootstrapModal)`\r\n @media (min-width: 768px) {\r\n .modal-dialog {\r\n margin-top: 60px;\r\n }\r\n }\r\n\r\n .modal-content {\r\n border-radius: 0;\r\n box-shadow: none;\r\n }\r\n .modal-header {\r\n background-color: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? props.theme.navbarColor : \"White\"};\r\n color: ${props => (props.theme.baseTheme === \"Ace\" ? \"White\" : \"Black\")};\r\n border-bottom-width: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? \"1px\" : \"0px\"};\r\n\r\n & > button.close {\r\n color: ${props => (props.theme.baseTheme === \"Ace\" ? \"White\" : \"Black\")};\r\n opacity: 0.4;\r\n font-size: 28px;\r\n :hover {\r\n opacity: 0.9;\r\n }\r\n }\r\n }\r\n\r\n .modal-footer {\r\n background-color: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? \"#EFF3F8\" : \"White\"};\r\n border-top-color: ${props =>\r\n props.theme.baseTheme === \"Ace\" ? \"#E4E9EE\" : \"White\"};\r\n }\r\n\r\n &.modal-draggable {\r\n .modal-dialog {\r\n margin: 0;\r\n }\r\n .modal-header {\r\n :before {\r\n content: \"\\\\e951\";\r\n font-family: \"FontAwesome\";\r\n display: inline-block;\r\n font-size: 16px;\r\n margin-right: 8px;\r\n }\r\n & > h4 {\r\n display: inline-block;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport interface ModalProps extends BootstrapModal.ModalProps {\r\n draggable?: boolean;\r\n}\r\n\r\nexport default class Modal extends React.Component {\r\n private _modalRef: React.RefObject;\r\n private _waitingForMouseUp: boolean = false;\r\n private _ignoreBackdropClick: boolean = false;\r\n\r\n constructor(props: ModalProps) {\r\n super(props);\r\n this._modalRef = React.createRef();\r\n }\r\n\r\n // Check if user clicked down in modal\r\n handleMouseDown = (event: any) => {\r\n if (event.target.dataset.__tag__ !== \"hcss-modal-wrapper\") {\r\n this._waitingForMouseUp = true;\r\n }\r\n };\r\n\r\n // Check If user started down click in modal and\r\n // up click was in the backdrop. If so, ignore backdrop click.\r\n handleMouseUp = (event: any) => {\r\n if (\r\n this._waitingForMouseUp &&\r\n event.target.dataset.__tag__ === \"hcss-modal-wrapper\"\r\n ) {\r\n this._ignoreBackdropClick = true;\r\n }\r\n\r\n this._waitingForMouseUp = false;\r\n };\r\n\r\n // Ignore Hiding if we are bypassing backdrop click\r\n handleOnHide = () => {\r\n if (this._ignoreBackdropClick) {\r\n this._ignoreBackdropClick = false;\r\n return;\r\n }\r\n\r\n this.props.onHide();\r\n };\r\n\r\n render() {\r\n let { children, className, draggable, onHide, ...props } = this.props;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n static Header = ModalHeader;\r\n static Body = ModalBody;\r\n static Footer = ModalFooter;\r\n static Title = ModalTitle;\r\n static Dialog = ModalDialog;\r\n}\r\n","import * as React from \"react\";\r\nimport ReactSelect from \"react-select\";\r\nimport styled from \"styled-components\";\r\nimport { Props } from \"react-select/lib/Select\";\r\nimport classNames from \"classnames\";\r\nimport { blue200, blue100, gray300, red100, red200 } from \"../ConcreteColors\";\r\n\r\nconst StyledSelect = styled(ReactSelect)`\r\n .react-select__control {\r\n &.react-select__control--is-focused {\r\n border-color: ${blue200};\r\n }\r\n }\r\n\r\n .react-select__option {\r\n &.react-select__option--is-focused:not(.react-select__option--is-selected) {\r\n background-color: ${blue100};\r\n }\r\n &.react-select__option--is-selected {\r\n background-color: ${blue200};\r\n }\r\n }\r\n\r\n .react-select__multi-value {\r\n background-color: ${gray300};\r\n }\r\n .react-select__multi-value__remove {\r\n :hover {\r\n color: ${red200};\r\n background-color: ${red100};\r\n }\r\n }\r\n`;\r\n\r\nexport default class Select extends React.Component {\r\n render() {\r\n const { children, className, classNamePrefix, ...props } = this.props;\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport {\r\n Accordion as BootstrapAccordion,\r\n Panel as BootstrapPanel,\r\n PanelGroup\r\n} from \"react-bootstrap\";\r\nimport { Toolbar } from \"./AccordionToolbar\";\r\nimport PanelToggle from \"react-bootstrap/lib/PanelToggle\";\r\nimport PanelHeading from \"react-bootstrap/lib/PanelHeading\";\r\nimport PanelBody from \"react-bootstrap/lib/PanelBody\";\r\n\r\nfunction ToggabledTitle({ children, ...props }: PanelToggle.PanelToggleProps) {\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n}\r\n\r\nconst StyledAccordion = styled(BootstrapAccordion)`\r\n .panel {\r\n border: none;\r\n box-shadow: none;\r\n }\r\n\r\n a.collapsed {\r\n .panel-title {\r\n background-color: rgb(246, 246, 246);\r\n color: #343434;\r\n font-weight: 400;\r\n :hover {\r\n }\r\n ::before {\r\n content: \"\\\\F105\";\r\n }\r\n }\r\n\r\n .panel-heading {\r\n border-left: solid 2px rgb(217, 217, 217);\r\n }\r\n }\r\n\r\n & > a:hover {\r\n text-decoration: none;\r\n }\r\n\r\n .panel + .panel {\r\n margin-top: 4px;\r\n }\r\n\r\n .panel-heading {\r\n padding: 0;\r\n background-color: rgb(245, 245, 245);\r\n min-height: 36px;\r\n }\r\n\r\n .panel-title {\r\n font-size: 13px;\r\n padding: 10px;\r\n display: inline-block;\r\n position: relative;\r\n line-height: 1;\r\n color: #343434;\r\n font-weight: 700;\r\n :hover {\r\n text-decoration: none;\r\n }\r\n\r\n ::before {\r\n content: \"\\\\F107\";\r\n font-family: \"FontAwesome\";\r\n margin: 0 10px 0 5px;\r\n width: 9px;\r\n display: inline-block;\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n .panel-toolbar {\r\n float: right;\r\n line-height: 36px;\r\n display: block;\r\n position: relative;\r\n padding-right: 10px;\r\n\r\n & label {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n .collapse {\r\n background-color: #fff;\r\n }\r\n\r\n .panel.panel-default > .panel-collapse.in > div.panel-body {\r\n border-top: 2px solid;\r\n border-color: ${props => props.theme.primaryColor};\r\n }\r\n .panel.panel-default > .panel-collapse > div.panel-body {\r\n border-color: ${props => props.theme.primaryColor};\r\n border-width: 2px;\r\n }\r\n`;\r\n\r\nexport interface AccordionProps extends PanelGroup.PanelGroupProps {}\r\n\r\nexport default class Accordion extends React.Component {\r\n render() {\r\n let { children, ...props } = this.props;\r\n return {children};\r\n }\r\n\r\n static Panel = BootstrapPanel;\r\n static Heading = PanelHeading;\r\n static Title = ToggabledTitle;\r\n static Toggle = PanelToggle;\r\n static Body = PanelBody;\r\n static Toolbar = Toolbar;\r\n}\r\n","import classNames from \"classnames\";\r\nimport * as React from \"react\";\r\n\r\nexport interface ToolbarProps extends React.HTMLProps {}\r\n\r\nexport const Toolbar = ({ children, className, ...props }: ToolbarProps) => {\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n\r\nexport default Toolbar;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport {\r\n TabContainer,\r\n TabContent,\r\n Tab as BootstrapTab,\r\n TabPane\r\n} from \"react-bootstrap\";\r\n\r\nconst StyledContainer = styled(TabContainer)`\r\n .nav-tabs {\r\n border-color: #c5d0dc;\r\n margin-left: 0;\r\n position: relative;\r\n top: 1px;\r\n li > a {\r\n border-radius: 0;\r\n border-color: #c5d0dc;\r\n background-color: #f9f9f9;\r\n margin-right: -1px;\r\n color: #999;\r\n padding: 7px 12px 8px;\r\n line-height: 18px;\r\n :hover,\r\n :focus {\r\n background-color: #fff;\r\n color: #4c8fbd;\r\n }\r\n :focus {\r\n outline: none;\r\n }\r\n }\r\n li.active > a,\r\n li.active > a:focus,\r\n li.active > a:hover {\r\n border-color: #c5d0dc #c5d0dc transparent;\r\n border-top: 2px solid #4c8fbd;\r\n box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.15);\r\n margin-top: -1px;\r\n z-index: 1;\r\n background-color: #fff;\r\n }\r\n li.dropdown.open > a {\r\n background-color: #4f99c6;\r\n border-color: #4f99c6;\r\n color: #fff;\r\n }\r\n li.dropdown.active a {\r\n cursor: pointer;\r\n }\r\n ul.dropdown-menu {\r\n border-radius: 0;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n li > a {\r\n padding: 1px 11px 4px;\r\n background-color: #fff;\r\n color: #333;\r\n margin: 0;\r\n :hover,\r\n :focus,\r\n :active {\r\n background-color: #6fb3e0;\r\n color: #fff;\r\n }\r\n }\r\n li.active > a {\r\n background-color: #6fb3e0;\r\n color: #fff;\r\n border: none;\r\n box-shadow: none;\r\n :hover {\r\n margin: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .tab-content {\r\n border: 1px solid #c5d0dc;\r\n padding: 16px 12px;\r\n }\r\n`;\r\n\r\nexport interface TabProps extends BootstrapTab.TabProps {}\r\n\r\nexport default class Tab extends React.Component {\r\n render() {\r\n let { children, ...props } = this.props;\r\n return {children};\r\n }\r\n static Container = StyledContainer;\r\n static Pane = TabPane;\r\n static Content = TabContent;\r\n}\r\n\r\nexport { StyledContainer };\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { hcssHeavyJob } from \"../StandardColors\";\r\nimport classNames from \"classnames\";\r\n\r\nconst StyledLabel = styled.label`\r\n font-weight: normal;\r\n cursor: pointer;\r\n padding-left: 10px;\r\n position: relative;\r\n\r\n &.disabled:hover {\r\n cursor: not-allowed;\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n opacity: 0;\r\n }\r\n .checkbox-hcss {\r\n display: inline-block;\r\n width: 16px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: absolute;\r\n top: 3px;\r\n left: 0;\r\n margin: 1px;\r\n background-color: #fafafa;\r\n border-radius: 2px;\r\n\r\n :hover {\r\n border-color: #ff893c;\r\n }\r\n }\r\n input[type=\"checkbox\"]:disabled + .checkbox-hcss,\r\n input[type=\"checkbox\"]:disabled:checked + .checkbox-hcss {\r\n background-color: #ddd;\r\n border-color: #ccc;\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + .checkbox-hcss {\r\n background-color: ${hcssHeavyJob};\r\n border-color: ${hcssHeavyJob};\r\n border-radius: 2px;\r\n }\r\n input[type=\"checkbox\"]:checked + .checkbox-hcss::before {\r\n font-family: \"FontAwesome\";\r\n content: \"\\\\F00C\";\r\n position: absolute;\r\n left: 1px;\r\n color: #fff;\r\n font-size: 12px;\r\n line-height: 12px;\r\n }\r\n input[type=\"checkbox\"]:checked:disabled + .checkbox-hcss::before {\r\n color: #bbb;\r\n }\r\n\r\n input[type=\"checkbox\"]:focus + .checkbox-hcss {\r\n border-color: #ff893c;\r\n }\r\n`;\r\n\r\nexport interface CheckboxProps extends React.HTMLProps {}\r\n\r\nexport const Checkbox = ({\r\n children,\r\n type,\r\n className,\r\n ...props\r\n}: CheckboxProps) => {\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Checkbox;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { hcssHeavyJob } from \"../StandardColors\";\r\nimport classNames from \"classnames\";\r\n\r\nconst StyledLabel = styled.label`\r\n font-weight: normal;\r\n cursor: pointer;\r\n &.disabled:hover {\r\n cursor: not-allowed;\r\n }\r\n\r\n input[type=\"radio\"] {\r\n display: none;\r\n }\r\n .radio-hcss {\r\n display: inline-block;\r\n width: 16px;\r\n height: 16px;\r\n border: 1px solid #ccc;\r\n position: relative;\r\n top: 3px;\r\n margin: 1px;\r\n background-color: #fafafa;\r\n border-radius: 50px;\r\n margin-right: 5px;\r\n\r\n :hover {\r\n border-color: #ff893c;\r\n }\r\n }\r\n input[type=\"radio\"]:disabled + .radio-hcss,\r\n input[type=\"radio\"]:disabled:checked + .radio-hcss {\r\n background-color: #ddd;\r\n border-color: #ccc;\r\n }\r\n\r\n input[type=\"radio\"]:checked + .radio-hcss {\r\n background-color: #fff;\r\n border-color: #ff893c;\r\n border-radius: 50px;\r\n }\r\n\r\n input[type=\"radio\"]:checked + .radio-hcss::before {\r\n font-family: \"FontAwesome\";\r\n content: \"\\\\F111\";\r\n position: absolute;\r\n top: -3px;\r\n left: 2.25px;\r\n color: ${hcssHeavyJob};\r\n font-size: 12px;\r\n }\r\n\r\n input[type=\"radio\"]:checked:disabled + .radio-hcss::before {\r\n color: #bbb;\r\n }\r\n`;\r\n\r\nexport interface RadioProps extends React.HTMLProps {}\r\n\r\nexport const Radio = ({ children, type, className, ...props }: RadioProps) => {\r\n return (\r\n \r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default Radio;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nconst StyledLabel = styled.label`\r\n input[type=\"checkbox\"] {\r\n cursor: pointer;\r\n display: none;\r\n\r\n + span {\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n\r\n & + span::before,\r\n &::after {\r\n font-family: \"FontAwesome\";\r\n font-weight: lighter;\r\n transition: background 0.25s ease;\r\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n & + span::before {\r\n content: \"\\\\f00d\";\r\n font-size: 16px;\r\n border: 1px solid #ccc;\r\n text-indent: 32px;\r\n width: 52px;\r\n height: 22px;\r\n position: relative;\r\n display: inline-block;\r\n border-radius: 12px;\r\n background-color: #888;\r\n color: #f2f2f2;\r\n box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.15);\r\n line-height: 18px;\r\n border-width: 0;\r\n }\r\n\r\n & + span::after {\r\n content: \"\";\r\n border: 4px solid #fff;\r\n height: 18px;\r\n width: 18px;\r\n position: absolute;\r\n border-radius: 100%;\r\n background-color: #fff;\r\n text-align: center;\r\n box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\r\n top: 0;\r\n left: 3px;\r\n transition: left 0.25s ease;\r\n }\r\n\r\n &:checked + span {\r\n ::before {\r\n content: \"\\\\f00c\";\r\n color: #f2f2f2;\r\n background-color: #ff9e1b;\r\n text-indent: 6px;\r\n }\r\n ::after {\r\n left: 32px;\r\n }\r\n }\r\n\r\n &:disabled + span::before {\r\n background-color: #ddd;\r\n box-shadow: none;\r\n color: #bbb;\r\n }\r\n &:disabled + span::after {\r\n box-shadow: none;\r\n }\r\n\r\n &:disabled + span:hover {\r\n cursor: not-allowed;\r\n }\r\n }\r\n`;\r\n\r\nexport interface ToggleProps extends React.HTMLProps {}\r\n\r\nexport class Toggle extends React.Component {\r\n render() {\r\n let { type, ...props } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Toggle;\r\n","import styled from \"styled-components\";\r\nimport { ToggleButtonGroup as BootstrapToggleButtonGroup } from \"react-bootstrap\";\r\nimport * as AceColors from \"../AceColors\";\r\n\r\nexport default styled(BootstrapToggleButtonGroup)`\r\n .btn.btn-default {\r\n background-color: transparent;\r\n border-color: transparent;\r\n border-radius: 0px;\r\n border: 0px solid transparent;\r\n border-bottom-width: 4px;\r\n color: black;\r\n line-height: 1.5;\r\n margin-right: 10px;\r\n padding-left: 5px;\r\n padding-right: 5px;\r\n }\r\n .btn.btn-default:hover {\r\n border-color: ${AceColors.gray500};\r\n }\r\n .btn.btn-default.active {\r\n border-color: ${AceColors.gray700};\r\n box-shadow: none;\r\n }\r\n .btn.btn-default:active {\r\n box-shadow: none;\r\n }\r\n\r\n .btn.btn-default.active:after,\r\n .btn.btn-default.active:before {\r\n top: 100%;\r\n left: 50%;\r\n border: solid transparent;\r\n content: \" \";\r\n height: 0;\r\n width: 0;\r\n position: absolute;\r\n pointer-events: none;\r\n }\r\n\r\n .btn.btn-default.active:after {\r\n border-color: rgba(136, 183, 213, 0);\r\n border-bottom-color: ${AceColors.gray700};\r\n border-width: 8px;\r\n margin-left: -8px;\r\n margin-top: -13px;\r\n }\r\n`;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport classNames from \"classnames\";\r\nimport { Icon } from \"../Icon\";\r\n\r\nconst ModalPanelHeaderWrapper = styled.div`\r\n height: 41px;\r\n vertical-align: middle;\r\n transition: all 0.2s ease 0s;\r\n padding: 10px 16px;\r\n background-color: #d6d6d6;\r\n :hover {\r\n cursor: pointer;\r\n }\r\n\r\n & > .fa.fa-chevron-down {\r\n margin-right: 10px;\r\n margin-top: 2px;\r\n font-size: 12px;\r\n vertical-align: text-top;\r\n }\r\n`;\r\n\r\nexport interface ModalPanelHeaderProps\r\n extends React.HTMLProps {}\r\n\r\nexport const ModalPanelHeader = (props: ModalPanelHeaderProps) => {\r\n const { className, children, ref, ...other } = props;\r\n return (\r\n \r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default ModalPanelHeader;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport classNames from \"classnames\";\r\n\r\nconst ModalPanelBodyWrapper = styled.div`\r\n position: absolute;\r\n width: 100%;\r\n z-index: 50;\r\n height: 0;\r\n overflow: hidden;\r\n transition: 0.25s;\r\n`;\r\n\r\nexport interface ModalPanelBodyProps extends React.HTMLProps {}\r\n\r\nexport const ModalPanelBody = (props: ModalPanelBodyProps) => {\r\n const { className, ref, ...other } = props;\r\n return (\r\n \r\n {props.children}\r\n \r\n );\r\n};\r\n\r\nexport default ModalPanelBody;\r\n","import * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport styled from \"styled-components\";\r\n\r\nconst BackdropWrapper = styled.div`\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n background-color: #d6d6d6;\r\n opacity: 0.8;\r\n top: 0;\r\n left: 0;\r\n`;\r\n\r\nexport interface BackdropProps extends React.HTMLProps {\r\n /** A ref of the container that will be covered by the backdrop. */\r\n elementRef: React.RefObject;\r\n}\r\n\r\nexport class Backdrop extends React.Component {\r\n render() {\r\n const { elementRef, ...other } = this.props;\r\n if (elementRef.current) {\r\n return ReactDOM.createPortal(\r\n ,\r\n elementRef.current\r\n );\r\n } else {\r\n console.warn(\"Ref passed to `Backdrop` is null\");\r\n return null;\r\n }\r\n }\r\n}\r\n\r\nexport default Backdrop;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport classNames from \"classnames\";\r\nimport { ModalPanelHeader } from \"./ModalPanelHeader\";\r\nimport { ModalPanelBody } from \"./ModalPanelBody\";\r\nimport { Backdrop } from \"../Backdrop\";\r\n\r\nconst ModalPanelWrapper = styled.div`\r\n position: relative;\r\n margin-top: 10px;\r\n transition: 0.25s;\r\n background-color: white;\r\n\r\n &.open {\r\n & > .modal-panel-header {\r\n background-color: #fff;\r\n & > .fa.fa-chevron-down {\r\n transform: rotate(-180deg);\r\n padding-bottom: 2px;\r\n }\r\n }\r\n & > .modal-panel-body {\r\n overflow: visible;\r\n background: #fff;\r\n box-shadow: 0 16px 20px -12px #aaaaaa, 0 16px 20px -12px #aaaaaa;\r\n height: auto;\r\n }\r\n }\r\n`;\r\n\r\nexport interface ModalPanelProps extends React.HTMLProps {\r\n /** Function that toggles the open prop. */\r\n onClose: () => void;\r\n /** Controls collapse and expansion on the ModalPanel. */\r\n open: boolean;\r\n /** A ref that points to the container that the ModalPanel is above. This is used to apply the backdrop. */\r\n contentContainerRef: React.RefObject;\r\n}\r\n\r\nexport class ModalPanel extends React.Component {\r\n render() {\r\n const {\r\n className,\r\n children,\r\n open,\r\n contentContainerRef,\r\n onClose,\r\n ref,\r\n ...other\r\n } = this.props;\r\n\r\n return (\r\n \r\n {this.props.children}\r\n {this.props.open && (\r\n \r\n )}\r\n \r\n );\r\n }\r\n\r\n static Header = ModalPanelHeader;\r\n static Body = ModalPanelBody;\r\n}\r\n\r\nexport default ModalPanel;\r\n","import styled from \"styled-components\";\r\nimport { hcssHeavyJob } from \"../../StandardColors\";\r\n\r\nexport const TreeSelectorWrapper = styled.div`\r\n /* This is a copy & paste from 'react-checkbox-tree/lib/react-checkbox-tree.css';*/\r\n .react-checkbox-tree {\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: reverse;\r\n -ms-flex-direction: row-reverse;\r\n flex-direction: row-reverse;\r\n font-size: 16px;\r\n }\r\n\r\n .react-checkbox-tree > ol {\r\n -webkit-box-flex: 1;\r\n -ms-flex: 1 1 auto;\r\n flex: 1 1 auto;\r\n }\r\n\r\n .react-checkbox-tree ol {\r\n margin: 0;\r\n padding-left: 0;\r\n list-style-type: none;\r\n }\r\n\r\n .react-checkbox-tree ol ol {\r\n padding-left: 24px;\r\n }\r\n\r\n .react-checkbox-tree button {\r\n line-height: normal;\r\n color: inherit;\r\n }\r\n\r\n .react-checkbox-tree button:focus {\r\n outline: none;\r\n }\r\n\r\n .react-checkbox-tree button:disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n .react-checkbox-tree .rct-bare-label {\r\n cursor: default;\r\n }\r\n\r\n .react-checkbox-tree label {\r\n margin-bottom: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .react-checkbox-tree label:hover {\r\n background: rgba(51, 51, 204, 0.1);\r\n }\r\n\r\n .react-checkbox-tree label:active {\r\n background: rgba(51, 51, 204, 0.15);\r\n }\r\n\r\n .react-checkbox-tree:not(.rct-native-display) input {\r\n display: none;\r\n }\r\n\r\n .react-checkbox-tree.rct-native-display input {\r\n margin: 0 5px;\r\n }\r\n\r\n .react-checkbox-tree .rct-icon {\r\n font-family: \"FontAwesome\";\r\n font-style: normal;\r\n }\r\n\r\n .rct-disabled > .rct-text > label {\r\n opacity: 0.75;\r\n cursor: not-allowed;\r\n }\r\n\r\n .rct-disabled > .rct-text > label:hover {\r\n background: transparent;\r\n }\r\n\r\n .rct-disabled > .rct-text > label:active {\r\n background: transparent;\r\n }\r\n\r\n .rct-text {\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n }\r\n\r\n .rct-options {\r\n -webkit-box-flex: 0;\r\n -ms-flex: 0 0 auto;\r\n flex: 0 0 auto;\r\n margin-left: 0.5rem;\r\n text-align: right;\r\n }\r\n\r\n .rct-option {\r\n opacity: 0.75;\r\n border: 0;\r\n background: none;\r\n cursor: pointer;\r\n padding: 0 4px;\r\n font-size: 18px;\r\n }\r\n\r\n .rct-option:hover {\r\n opacity: 1;\r\n }\r\n\r\n .rct-option + .rct-option {\r\n margin-left: 2px;\r\n }\r\n\r\n .rct-collapse,\r\n .rct-checkbox,\r\n .rct-node-icon {\r\n padding: 0 5px;\r\n }\r\n\r\n .rct-collapse *,\r\n .rct-checkbox *,\r\n .rct-node-icon * {\r\n display: inline-block;\r\n margin: 0;\r\n width: 14px;\r\n }\r\n\r\n .rct-collapse {\r\n border: 0;\r\n background: none;\r\n line-height: normal;\r\n color: inherit;\r\n font-size: 12px;\r\n }\r\n\r\n .rct-collapse.rct-collapse-btn {\r\n cursor: pointer;\r\n }\r\n\r\n .rct-collapse > .rct-icon-expand-close {\r\n opacity: 0.5;\r\n }\r\n\r\n .rct-collapse > .rct-icon-expand-close:hover {\r\n opacity: 1;\r\n }\r\n\r\n .rct-native-display .rct-checkbox {\r\n display: none;\r\n }\r\n\r\n .rct-node-clickable {\r\n cursor: pointer;\r\n }\r\n\r\n .rct-node-clickable:hover {\r\n background: rgba(51, 51, 204, 0.1);\r\n }\r\n\r\n .rct-node-clickable:focus {\r\n outline: 0;\r\n background: rgba(51, 51, 204, 0.2);\r\n }\r\n\r\n .rct-node-icon {\r\n color: #33c;\r\n }\r\n\r\n .rct-title {\r\n padding: 0 5px;\r\n }\r\n\r\n .rct-icon-expand-close::before {\r\n content: \"\\f054\";\r\n }\r\n\r\n .rct-icon-expand-open::before {\r\n content: \"\\f078\";\r\n }\r\n\r\n .rct-icon-uncheck::before {\r\n content: \"\\f096\";\r\n }\r\n\r\n .rct-icon-check::before {\r\n content: \"\\f046\";\r\n }\r\n\r\n .rct-icon-half-check::before {\r\n opacity: 0.5;\r\n content: \"\\f046\";\r\n }\r\n\r\n .rct-icon-leaf::before {\r\n content: \"\\f016\";\r\n }\r\n\r\n .rct-icon-parent-open::before {\r\n content: \"\\f115\";\r\n }\r\n\r\n .rct-icon-parent-close::before {\r\n content: \"\\f114\";\r\n }\r\n\r\n .rct-icon-expand-all::before {\r\n content: \"\\f0fe\";\r\n }\r\n\r\n .rct-icon-collapse-all::before {\r\n content: \"\\f146\";\r\n }\r\n\r\n /*Custom styles begin here*/\r\n .rct-node-icon {\r\n color: ${props => props.theme.primaryColor};\r\n padding: 0;\r\n\r\n & > span {\r\n }\r\n }\r\n\r\n .rct-checkbox {\r\n color: ${hcssHeavyJob};\r\n }\r\n\r\n .rct-title {\r\n padding: 0 5px;\r\n font-weight: normal;\r\n font-size: 15px;\r\n }\r\n`;\r\n","export enum ExpandableContentStatus {\r\n Collapsed = \"collapsed\",\r\n Collapsing = \"collapsing\",\r\n Expanded = \"expanded\",\r\n Expanding = \"expanding\"\r\n}\r\n","import * as React from \"react\";\r\nimport { TreeSelectorWrapper } from \"./Styled\";\r\nimport { Icons, Language } from \"react-checkbox-tree\";\r\nconst CheckboxTree = require(\"react-checkbox-tree\");\r\n\r\nexport { Icons, Language };\r\n\r\n/** Redeclare type definitions from react-checkbox-tree because they are\r\n * currently wrong, if its fixed we could just use and re-export them\r\n * see: https://github.com/jakezatecky/react-checkbox-tree/issues/145\r\n * https://github.com/jakezatecky/react-checkbox-tree/issues/127\r\n * https://github.com/jakezatecky/react-checkbox-tree/pull/48\r\n */\r\nexport interface Node {\r\n label: React.ReactNode; // On the typed definitions this JSX.Element\r\n value: string | number;\r\n children?: Array;\r\n className?: string;\r\n disabled?: boolean;\r\n icon?: JSX.Element;\r\n showCheckbox?: boolean;\r\n title?: string;\r\n}\r\n\r\nexport interface CheckboxProps {\r\n nodes: Array;\r\n checked: Array;\r\n expanded: Array;\r\n onCheck: (checked: Array) => void;\r\n onExpand: (expanded: Array) => void;\r\n\r\n disabled?: boolean;\r\n expandDisabled?: boolean;\r\n expandOnClick?: boolean;\r\n icons?: Icons;\r\n lang?: Language;\r\n name?: string;\r\n nameAsArray?: boolean;\r\n nativeCheckboxes?: boolean;\r\n noCascade?: boolean;\r\n onlyLeafCheckboxes?: boolean;\r\n optimisticToggle?: boolean;\r\n showExpandAll?: boolean;\r\n showNodeIcon?: boolean;\r\n showNodeTitles?: boolean;\r\n onClick?: (event: { checked: boolean; value: string | number }) => void;\r\n}\r\n\r\nconst defaultIcons = {\r\n check: ,\r\n uncheck: ,\r\n halfCheck: ,\r\n expandClose: ,\r\n expandOpen: ,\r\n expandAll: ,\r\n collapseAll: ,\r\n parentClose: \"\",\r\n parentOpen: \"\",\r\n leaf: \"\"\r\n};\r\n\r\nexport default class TreeSelector extends React.Component {\r\n render() {\r\n const icons = this.props.icons ? this.props.icons : defaultIcons;\r\n return (\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport {\r\n BaseDataSelectorProps,\r\n BaseDataSelectorState,\r\n IDataSelector\r\n} from \"../Models\";\r\n\r\nexport interface SimpleTableSelectorProps extends BaseDataSelectorProps {}\r\n\r\nexport interface SimpleTableSelectorState extends BaseDataSelectorState {}\r\n\r\n/**\r\n * A Simple Data Selector component for the SelectModal component to be able\r\n * to offer an out of the box selection, it simply shows all the data on a Table,\r\n * no paging, sorting, filtering or any of that functionalities yet which makes this\r\n * Selector not very useful unless is used with small amount of data but perhaps\r\n * we could improve this selector so that the SelectModal can offer a decent out of the box\r\n * functionality without the caller needing to create it's own DataSelector component\r\n */\r\nexport class SimpleTableSelector\r\n extends React.Component\r\n implements IDataSelector {\r\n state: Readonly = {\r\n selectedItems: []\r\n };\r\n columnKey: string;\r\n\r\n constructor(props: SimpleTableSelectorProps) {\r\n super(props);\r\n this.columnKey = props.columnKey;\r\n if (props.initialSelectedIds) {\r\n const selectedItems = props.initialSelectedIds.map(id => {\r\n return props.rows.find(r => r[props.columnKey] === id);\r\n });\r\n this.state = {\r\n selectedItems\r\n };\r\n }\r\n }\r\n\r\n onRowClick = (selectedItem: any) => {\r\n if (this.state.selectedItems.indexOf(selectedItem) === -1) {\r\n this.addItem(selectedItem);\r\n } else {\r\n this.removeItem(selectedItem);\r\n }\r\n };\r\n\r\n addItem = (selectedItem: any) => {\r\n this.setState(state => {\r\n const selectedItems = [...state.selectedItems, selectedItem];\r\n return {\r\n selectedItems\r\n };\r\n });\r\n };\r\n\r\n removeItem = (selectedItem: any) => {\r\n this.setState(state => {\r\n const selectedItems = state.selectedItems.filter(\r\n item => item[this.columnKey] !== selectedItem[this.columnKey]\r\n );\r\n return {\r\n selectedItems\r\n };\r\n });\r\n };\r\n\r\n getItemsSelected = () => {\r\n return this.state.selectedItems;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n {this.props.columns.map(c => {\r\n return {c.title} | ;\r\n })}\r\n
\r\n \r\n \r\n {this.props.rows.map(r => {\r\n const isSelected = this.state.selectedItems.indexOf(r) !== -1;\r\n return (\r\n this.onRowClick(r)}\r\n className={isSelected ? \"active\" : \"\"}\r\n >\r\n {this.props.columns.map(c => {\r\n return {r[c.name]} | ;\r\n })}\r\n
\r\n );\r\n })}\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import { LocalizationMessages } from \"./SelectModal\";\r\n\r\nexport const isFunction = (functionToCheck: any) => {\r\n const getType = {};\r\n return (\r\n functionToCheck &&\r\n getType.toString.call(functionToCheck) === \"[object Function]\"\r\n );\r\n};\r\n\r\nexport const getDefaultSelectModalMessages = (): LocalizationMessages => {\r\n return {\r\n ok: \"Ok\",\r\n cancel: \"Cancel\"\r\n };\r\n};\r\n","import * as React from \"react\";\r\nimport Modal, { ModalProps } from \"../Modal\";\r\nimport Button from \"../Button\";\r\nimport Icon from \"../Icon\";\r\nimport { SimpleTableSelector } from \"./DataSelectors/SimpleTableSelector\";\r\nimport { BaseDataSelectorProps } from \"./Models\";\r\nimport { isFunction } from \"./Utils\";\r\n\r\nexport interface SelectModalProps extends ModalProps, BaseDataSelectorProps {\r\n /** Avaible for the caller to receive the selected items once the user clicks Ok */\r\n onSelectionConfirm: (selectedItems: any[]) => any;\r\n dataSelector?: any; // TODO: Find a way to mark this a ReactComponentClass or ReactElement that implements IDataSelector\r\n rows: any;\r\n messages?: LocalizationMessages;\r\n}\r\n\r\nexport interface LocalizationMessages {\r\n ok?: string;\r\n cancel?: string;\r\n}\r\n\r\n/**\r\n * Basic Selection Modal, it shows a Modal with a default modal header title\r\n * and a footer with a Cancel and Ok Button, the way the data is going to selected\r\n * is up to the caller since the prop dataSelector expect a React component that display\r\n * and select the data the only condition is that it must Implement IDataSelector and\r\n * returns the selected items on the getItemsSelected method if no dataSelector is provided\r\n * it will use a default SimpleTable Selector\r\n */\r\nexport default class SelectModal extends React.Component {\r\n dataSelector: any;\r\n\r\n setDataSelectorRef = (dataSelector: any) => {\r\n this.dataSelector = dataSelector;\r\n };\r\n\r\n /**\r\n * It checks if a Custom Data Selector has been provided, if it has\r\n * it create the CustomDataSelector and pass the corresponding properties and\r\n * add the reference in order be able to call it's getItemsSelected method\r\n * if no dataSelector is provided it's uses SimpleTableSelector\r\n */\r\n createDataSelector = () => {\r\n const CustomDataSelector = this.props.dataSelector;\r\n const dataSelectorProps: BaseDataSelectorProps = {\r\n columnKey: this.props.columnKey,\r\n columns: this.props.columns,\r\n rows: this.props.rows,\r\n initialSelectedIds: this.props.initialSelectedIds\r\n };\r\n\r\n if (React.isValidElement(CustomDataSelector)) {\r\n return React.cloneElement(CustomDataSelector, {\r\n ...{ ref: this.setDataSelectorRef },\r\n ...dataSelectorProps\r\n });\r\n }\r\n\r\n if (CustomDataSelector && isFunction(CustomDataSelector)) {\r\n return (\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n );\r\n };\r\n\r\n onHide = () => {\r\n // Cancel\r\n this.props.onHide();\r\n };\r\n\r\n onSelectionConfirm = () => {\r\n // Confirm selected items\r\n const selectedItems = this.dataSelector.getItemsSelected();\r\n this.props.onSelectionConfirm(selectedItems);\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n {this.props.title}
\r\n \r\n {this.createDataSelector()}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport debounce from \"lodash/debounce\";\r\nimport { ExpandableContentStatus } from \"../ExpandableContentStatus\";\r\n\r\nexport interface SlideoutPanelHeaderProps {\r\n onHide: (event: any) => void;\r\n panelTitle: string;\r\n}\r\nexport class SlideoutPanelHeader extends React.PureComponent<\r\n SlideoutPanelHeaderProps,\r\n any\r\n> {\r\n handleHidePanelRequested = (event: any) => {\r\n this.props.onHide(event);\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {this.props.panelTitle}\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nexport class SlideoutPanelBody extends React.PureComponent {\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport class SlideoutPanelFooter extends React.PureComponent {\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n \r\n );\r\n }\r\n}\r\n\r\nexport interface SlideoutPanelProps {\r\n className?: string;\r\n isActive: boolean;\r\n onHide: () => void;\r\n}\r\nexport interface SlideoutPanelState {\r\n panelStatus: ExpandableContentStatus;\r\n}\r\nexport class SlideoutPanel extends React.PureComponent<\r\n SlideoutPanelProps,\r\n SlideoutPanelState\r\n> {\r\n static Header = SlideoutPanelHeader;\r\n static Body = SlideoutPanelBody;\r\n static Footer = SlideoutPanelFooter;\r\n\r\n readonly state = {\r\n panelStatus: ExpandableContentStatus.Collapsed\r\n };\r\n\r\n componentDidUpdate(\r\n prevProps: SlideoutPanelProps,\r\n prevState: SlideoutPanelState\r\n ) {\r\n if (prevProps.isActive !== this.props.isActive) {\r\n document.addEventListener(\"keydown\", this.handleKeyPressed, false);\r\n if (this.props.isActive) {\r\n this.setState(\r\n { panelStatus: ExpandableContentStatus.Expanding },\r\n debounce(\r\n () =>\r\n this.setState({ panelStatus: ExpandableContentStatus.Expanded }),\r\n 50\r\n )\r\n );\r\n } else {\r\n document.removeEventListener(\"keydown\", this.handleKeyPressed, false);\r\n this.setState(\r\n { panelStatus: ExpandableContentStatus.Collapsing },\r\n debounce(\r\n () =>\r\n this.setState({ panelStatus: ExpandableContentStatus.Collapsed }),\r\n 425\r\n )\r\n );\r\n }\r\n }\r\n }\r\n\r\n handleHidePanelRequested = () => {\r\n this.props.onHide();\r\n };\r\n\r\n handleKeyPressed = (event: any) => {\r\n if (event.key === \"Escape\") this.handleHidePanelRequested();\r\n };\r\n\r\n render() {\r\n return (\r\n this.state.panelStatus !== ExpandableContentStatus.Collapsed && (\r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n \r\n )\r\n );\r\n }\r\n}\r\n\r\nexport default SlideoutPanel;\r\n\r\nconst StyledSlideoutPanel = styled(\"div\")`\r\n position: absolute;\r\n margin: 0;\r\n padding: 0;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n\r\n &[data-panel-status=\"expanding\"] {\r\n & > .modal-panel-overlay-screen {\r\n opacity: 0;\r\n }\r\n & > .modal-panel-content {\r\n right: -500px;\r\n }\r\n }\r\n &[data-panel-status=\"expanded\"] {\r\n .modal-panel-overlay-screen {\r\n opacity: 1;\r\n }\r\n & > .modal-panel-content {\r\n right: 0;\r\n }\r\n }\r\n &[data-panel-status=\"collapsing\"] {\r\n .modal-panel-overlay-screen {\r\n opacity: 0;\r\n }\r\n & > .modal-panel-content {\r\n right: -500px;\r\n }\r\n }\r\n &[data-panel-status=\"collapsed\"] {\r\n .modal-panel-overlay-screen {\r\n opacity: 0;\r\n }\r\n & > .modal-panel-content {\r\n right: -500px;\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSlideoutPanelOverlayScreen = styled(\"div\")`\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n z-index: 2010;\r\n transition: 0.3s;\r\n`;\r\n\r\nconst StyledSlideoutPanelContent = styled(\"div\")`\r\n display: flex;\r\n flex-wrap: nowrap;\r\n flex-direction: column;\r\n position: absolute;\r\n width: 480px;\r\n top: 0;\r\n height: 100%;\r\n background: #ffffff;\r\n box-shadow: 0 0 20px -5px #000000;\r\n z-index: 2020;\r\n transition: 0.4s;\r\n`;\r\n\r\nconst StyledSlideoutPanelHeader = styled(\"div\")`\r\n position: relative;\r\n padding: 36px 20px 16px 20px;\r\n background: #f6f6f6;\r\n`;\r\n\r\nconst StyledSlideoutPanelCloseButton = styled(\"div\")`\r\n display: inline-block;\r\n position: absolute;\r\n top: 36px;\r\n right: 20px;\r\n font-size: 20px;\r\n color: #707070;\r\n line-height: 24px;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n\r\n &:hover {\r\n color: #1e1e1e;\r\n }\r\n`;\r\n\r\nconst StyledSlideoutPanelTitle = styled(\"h3\")`\r\n display: inline-block;\r\n font-size: 20px;\r\n font-weight: 700;\r\n vertical-align: middle;\r\n margin: 0;\r\n`;\r\n\r\nconst StyledSlideoutPanelBody = styled(\"div\")`\r\n height: 100px;\r\n flex-grow: 1;\r\n margin-bottom: 16px;\r\n padding: 0 20px;\r\n overflow: auto;\r\n`;\r\n\r\nconst StyledSlideoutPanelFooter = styled(\"div\")`\r\n width: 100%;\r\n margin-bottom: 24px;\r\n padding: 0 20px 20px 20px;\r\n background: #ffffff;\r\n text-align: center;\r\n`;\r\n","import * as React from \"react\";\r\nimport Modal, { ModalProps } from \"../Modal\";\r\nimport styled from \"styled-components\";\r\nimport Button from \"../Button\";\r\nimport Icon from \"../Icon\";\r\nimport TreeSelector from \"../TreeSelector/TreeSelector\";\r\nimport Link from \"../Link\";\r\nimport { Node } from \"../TreeSelector/TreeSelector\";\r\nimport { LocalizationMessages } from \"./SelectModal\";\r\nimport { getDefaultSelectModalMessages } from \"./Utils\";\r\nimport { CheckboxProps } from \"../TreeSelector/TreeSelector\";\r\n\r\nconst LinkWrapper = styled(Link)`\r\n float: left;\r\n\r\n :hover {\r\n text-decoration: none;\r\n }\r\n`;\r\n\r\nexport interface TreeSelectModalProps extends ModalProps {\r\n /** Avaible for the caller to receive the selected items once the user clicks Ok */\r\n onSelectionConfirm: (selectedItems: Array) => void;\r\n nodes?: Array;\r\n initialCheckedValues?: Array;\r\n initialExpandedValues?: Array;\r\n messages?: TreeLocalizationMessages;\r\n checkBoxProps?: CheckboxProps;\r\n}\r\n\r\ninterface TreeLocalizationMessages extends LocalizationMessages {\r\n clearAllSelection?: string;\r\n}\r\n\r\ninterface TreeSelectModalState {\r\n checked: Array;\r\n expanded: Array;\r\n}\r\n\r\nexport default class TreeSelectModal extends React.Component<\r\n TreeSelectModalProps,\r\n TreeSelectModalState\r\n> {\r\n state: TreeSelectModalState = {\r\n checked: this.props.initialCheckedValues || [],\r\n expanded: this.props.initialExpandedValues || []\r\n };\r\n\r\n onHide = () => {\r\n // Cancel\r\n this.props.onHide();\r\n };\r\n\r\n onSelectionConfirm = () => {\r\n // Confirm selected items\r\n this.props.onSelectionConfirm(this.state.checked);\r\n };\r\n\r\n render() {\r\n let defaultMessages: TreeLocalizationMessages = getDefaultSelectModalMessages();\r\n let defaultCheckBoxProps: CheckboxProps = {\r\n nodes: this.props.nodes ? this.props.nodes : [],\r\n checked: this.state.checked,\r\n expanded: this.state.expanded,\r\n onCheck: checked => this.setState({ checked }),\r\n onExpand: expanded => this.setState({ expanded })\r\n };\r\n if (this.props.checkBoxProps) {\r\n defaultCheckBoxProps = { ...this.props.checkBoxProps };\r\n }\r\n defaultMessages.clearAllSelection = \"Clear all selection\";\r\n const {\r\n title,\r\n nodes,\r\n onSelectionConfirm,\r\n messages,\r\n initialCheckedValues,\r\n initialExpandedValues,\r\n checkBoxProps,\r\n ...modalProps\r\n } = this.props;\r\n defaultMessages = { ...defaultMessages, ...messages };\r\n return (\r\n \r\n \r\n {title}
\r\n \r\n \r\n \r\n \r\n \r\n this.setState({ checked: [] })}\r\n hcssStyle=\"Delete\"\r\n >\r\n \r\n {defaultMessages.clearAllSelection}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import * as React from \"react\";\r\nimport { ValidationStateType } from \"./models\";\r\n\r\nexport interface InputFieldContextType extends ValidationStateType {\r\n required?: boolean;\r\n}\r\n\r\nexport const InputFieldContext = React.createContext({\r\n validationState: null,\r\n required: false\r\n});\r\n","import * as React from \"react\";\r\nimport { HelpBlock } from \"react-bootstrap\";\r\nimport Icon, { IconProps } from \"../Icon\";\r\nimport { InputFieldContext } from \"./Context\";\r\nimport styled from \"styled-components\";\r\nimport * as AceColors from \"../../AceColors\";\r\nimport classNames from \"classnames\";\r\nimport { ValidationStateType } from \"./models\";\r\n\r\nconst MessageWrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin-top: 4px;\r\n\r\n > .help-block {\r\n margin: 1px 0 0 0;\r\n font-size: 12px;\r\n color: ${AceColors.gray700};\r\n &[data-message-shown=\"true\"] {\r\n display: block;\r\n }\r\n &[data-message-shown=\"false\"] {\r\n display: none;\r\n }\r\n }\r\n\r\n > .fa {\r\n padding-right: 6px;\r\n font-size: 14px;\r\n padding-bottom: 2px;\r\n }\r\n > .fa-exclamation-circle {\r\n color: ${AceColors.errorRed};\r\n }\r\n > .fa-check-circle {\r\n color: ${AceColors.successGreen};\r\n }\r\n\r\n &.has-error > .help-block {\r\n color: ${AceColors.errorRed};\r\n }\r\n`;\r\n\r\nexport interface MessageProps\r\n extends React.HTMLProps,\r\n ValidationStateType {}\r\n\r\nexport const Message = ({ children, className, ...props }: MessageProps) => {\r\n const context = React.useContext(InputFieldContext);\r\n\r\n let feedback: null | React.ReactElement = null;\r\n if (context.validationState === \"error\")\r\n feedback = ;\r\n else if (context.validationState === \"success\")\r\n feedback = ;\r\n\r\n const classes = classNames(\"form-feedback\", className, {\r\n \"has-error\":\r\n context.validationState === \"error\" || props.validationState === \"error\",\r\n \"has-success\":\r\n context.validationState === \"success\" ||\r\n props.validationState === \"success\"\r\n });\r\n\r\n return (\r\n \r\n {feedback}\r\n {children}\r\n \r\n );\r\n};\r\n","import * as React from \"react\";\r\nimport { ControlLabel, ControlLabelProps } from \"react-bootstrap\";\r\nimport styled from \"styled-components\";\r\nimport { InputFieldContext } from \"./Context\";\r\nimport { Icon } from \"../Icon\";\r\nimport * as AceColors from \"../../AceColors\";\r\nimport classNames from \"classnames\";\r\nimport { ValidationStateType } from \"./models\";\r\n\r\nconst LabelWrapper = styled(ControlLabel)`\r\n font-size: 13px;\r\n font-family: Arial, Helvetica, sans-serif;\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n line-height: normal;\r\n .fa-asterisk {\r\n position: absolute;\r\n margin-left: 2px;\r\n margin-top: -1px;\r\n font-size: 9px;\r\n color: ${AceColors.errorRed};\r\n }\r\n\r\n &.has-error {\r\n color: ${AceColors.errorRed};\r\n }\r\n &.has-success {\r\n color: ${AceColors.successGreen};\r\n }\r\n`;\r\n\r\nexport interface LabelProps extends ControlLabelProps, ValidationStateType {}\r\n\r\nexport const Label = ({ children, className, ...props }: LabelProps) => {\r\n const context = React.useContext(InputFieldContext);\r\n const classes = classNames(className, {\r\n \"has-error\":\r\n context.validationState === \"error\" || props.validationState === \"error\",\r\n \"has-success\":\r\n context.validationState === \"success\" ||\r\n props.validationState === \"success\"\r\n });\r\n return (\r\n \r\n {children}\r\n {(context.required || props.required) && }\r\n \r\n );\r\n};\r\n","import * as React from \"react\";\r\nimport { FormControl } from \"react-bootstrap\";\r\nimport styled from \"styled-components\";\r\nimport * as ConcreteColors from \"../../ConcreteColors\";\r\nimport { InputFieldContext } from \"./Context\";\r\nimport { ValidationStateType } from \"./models\";\r\nimport classNames from \"classnames\";\r\n\r\nconst StyledField = styled(FormControl)`\r\n display: block;\r\n width: 100%;\r\n padding: 4px 8px;\r\n transition: 0.2s;\r\n :focus {\r\n box-shadow: none;\r\n border-color: ${ConcreteColors.blue200};\r\n }\r\n\r\n &.has-error {\r\n background: #ffeff0;\r\n }\r\n`;\r\n\r\nexport interface TextFieldProps\r\n extends FormControl.FormControlProps,\r\n ValidationStateType {}\r\n\r\nexport const TextField = ({\r\n children,\r\n className,\r\n required,\r\n ...props\r\n}: TextFieldProps) => {\r\n const context = React.useContext(InputFieldContext);\r\n\r\n const classes = classNames(className, {\r\n \"has-error\":\r\n context.validationState === \"error\" || props.validationState === \"error\",\r\n \"has-success\":\r\n context.validationState === \"success\" ||\r\n props.validationState === \"success\"\r\n });\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\n\r\nexport default TextField;\r\n","import * as React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { FormGroup, FormGroupProps } from \"react-bootstrap\";\r\nimport { InputFieldContext, InputFieldContextType } from \"./Context\";\r\nimport { Message } from \"./Message\";\r\nimport { Label } from \"./Label\";\r\nimport { TextField } from \"./TextField\";\r\nimport { ValidationStateType } from \"./models\";\r\nimport { Omit } from \"../../typehelpers\";\r\n\r\nconst StyledGroup = styled(FormGroup)`\r\n &.form-group {\r\n display: block;\r\n }\r\n\r\n /* &.has-success {\r\n .form-control,\r\n .form-control:focus {\r\n box-shadow: none;\r\n }\r\n\r\n .help-block {\r\n color: #006627;\r\n }\r\n } */\r\n\r\n /* &.has-error {\r\n .control-label {\r\n color: #a60000;\r\n }\r\n\r\n .form-control,\r\n .form-control:focus {\r\n background: #ffeff0;\r\n box-shadow: none;\r\n }\r\n\r\n .help-block {\r\n color: #a60000;\r\n }\r\n } */\r\n`;\r\n\r\nexport interface InputProps\r\n extends Omit,\r\n ValidationStateType {}\r\n\r\nexport default class Input extends React.Component {\r\n render() {\r\n let { children, ref, ...props } = this.props;\r\n const value: InputFieldContextType = {\r\n validationState: props.validationState,\r\n required: props.required\r\n };\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n }\r\n\r\n static Message = Message;\r\n static Label = Label;\r\n static TextField = TextField;\r\n}\r\n","import React from \"react\";\r\nimport { StepCompleteIndicatorProps } from \"./Models\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\nimport { Icon } from \"../../Icon\";\r\nimport styled from \"styled-components\";\r\n\r\nconst StepCompleteIndicator: React.FC = (\r\n props: StepCompleteIndicatorProps\r\n) => {\r\n // Deconstruct props\r\n const { index, containerBackground, ...rest } = props;\r\n\r\n const useCustomBackgroundClear = () => {\r\n if (containerBackground)\r\n return {\r\n background: containerBackground,\r\n boxShadow: `0 0 0 2px ${containerBackground}`\r\n };\r\n return undefined;\r\n };\r\n\r\n //\r\n //\r\n //\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\nexport default StepCompleteIndicator;\r\n\r\n// Styled components\r\nconst StyledCompletionIndicatorContainer = styled.div`\r\n position: absolute;\r\n top: 22px;\r\n right: 14px;\r\n\r\n background: #ffffff;\r\n box-shadow: 0 0 0 2px #ffffff;\r\n border-radius: 50px;\r\n\r\n color: ${ConcreteColors.green200};\r\n font-size: 18px;\r\n line-height: 1;\r\n z-index: 5;\r\n\r\n & > i {\r\n line-height: 0;\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { ProgressStepProps as ComponentProps } from \"./Models\";\r\nimport StepCompleteIndicator from \"./StepCompleteIndicator\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\nimport styled from \"styled-components\";\r\n\r\nconst ProgressStep: React.FC = (props: ComponentProps) => {\r\n // Destructure props\r\n const {\r\n index,\r\n name,\r\n onClick,\r\n isClickable,\r\n isComplete,\r\n isCurrentStep,\r\n stepCompleteIndicatorComponent,\r\n containerBackground\r\n } = props;\r\n\r\n const handleStepRequested = () => {\r\n if (isClickable) onClick(index);\r\n };\r\n\r\n const useCustomBackgroundClear = () => {\r\n if (containerBackground)\r\n return {\r\n background: containerBackground,\r\n boxShadow: `0 0 0 8px ${containerBackground}`\r\n };\r\n return undefined;\r\n };\r\n\r\n const getButtonClassName = () => {\r\n let value = \"wizard-progress-step-button\";\r\n if (isClickable) value += \" is-clickable\";\r\n if (isCurrentStep) value += \" is-current\";\r\n return value;\r\n };\r\n\r\n //\r\n //\r\n //\r\n const renderStepCompleteIndicator = () => {\r\n const Indicator = stepCompleteIndicatorComponent || StepCompleteIndicator;\r\n if (isComplete)\r\n return (\r\n \r\n );\r\n return null;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {index + 1}\r\n
\r\n \r\n {name}\r\n
\r\n {renderStepCompleteIndicator()}\r\n \r\n \r\n );\r\n};\r\nexport default ProgressStep;\r\n\r\n// Styled components\r\nconst ProgressStepWrapper = styled.li`\r\n display: inline-block;\r\n position: relative;\r\n padding: 16px 20px 6px;\r\n`;\r\n\r\nconst ProgressStepButton = styled.button`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\r\n position: relative;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n\r\n transition: 0.3s;\r\n\r\n & > .step-number,\r\n & > .step-name {\r\n text-align: center;\r\n width: 64px;\r\n cursor: default;\r\n }\r\n\r\n & > .step-number {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n justify-content: space-around;\r\n margin-bottom: 8px;\r\n transition: 0.3s;\r\n\r\n & > span {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n\r\n background: #ffffff;\r\n box-shadow: 0 0 0 8px #ffffff;\r\n border: 2px solid ${ConcreteColors.gray100};\r\n border-radius: 96px;\r\n\r\n color: ${ConcreteColors.gray400};\r\n font-size: 1.8rem;\r\n font-weight: 600;\r\n transition: 0.3s;\r\n }\r\n }\r\n\r\n & > .step-name {\r\n width: 80px;\r\n height: 60px;\r\n\r\n color: ${ConcreteColors.gray500};\r\n font-size: 1.3rem;\r\n letter-spacing: 0.02em;\r\n line-height: 16px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n\r\n transition: color 0.3s;\r\n }\r\n\r\n &.is-current {\r\n & > .step-number {\r\n & > span {\r\n border: 2px solid ${ConcreteColors.blue200};\r\n font-weight: 800;\r\n color: ${ConcreteColors.gray700};\r\n }\r\n }\r\n\r\n & > .step-name {\r\n color: ${ConcreteColors.gray700};\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n &.is-clickable:not(.is-current) {\r\n cursor: pointer;\r\n\r\n & > .step-number,\r\n & > .step-name {\r\n cursor: pointer;\r\n }\r\n\r\n & > .step-number {\r\n & > span {\r\n border: 2px solid ${ConcreteColors.gray400};\r\n color: ${ConcreteColors.gray500};\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n & > .step-name {\r\n color: ${ConcreteColors.gray700};\r\n font-weight: 400;\r\n }\r\n\r\n &:hover {\r\n & > .step-name,\r\n & > .step-number > span {\r\n color: ${ConcreteColors.blue200};\r\n }\r\n }\r\n }\r\n\r\n :focus,\r\n :active:focus {\r\n outline: none;\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { ProgressTrackProps as ComponentProps } from \"./Models\";\r\nimport * as ConcreteColors from \"../../../ConcreteColors\";\r\nimport styled from \"styled-components\";\r\n\r\nconst ProgressTrack: React.FC = (props: ComponentProps) => {\r\n // Destructure props\r\n const { currentStep } = props;\r\n\r\n const calcCompletionTrackLength = (): number => {\r\n const numberMarkerWidth = 40;\r\n return (currentStep + 1) * numberMarkerWidth + currentStep * 80;\r\n };\r\n\r\n //\r\n //\r\n //\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\nexport default ProgressTrack;\r\n\r\n// Styled components\r\nconst TrackContainer = styled.div`\r\n position: absolute;\r\n height: 2px;\r\n width: calc(100% - 80px);\r\n margin-top: 36px;\r\n margin-left: 40px;\r\n\r\n background: ${ConcreteColors.gray300};\r\n transform: translateZ(0);\r\n transition: 0.3s linear;\r\n`;\r\n\r\nconst CompletionTrack = styled.div`\r\n display: inline-block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n\r\n background: ${ConcreteColors.gray400};\r\n transform: translateZ(0);\r\n transition: 0.3s linear;\r\n`;\r\n","import React from \"react\";\r\nimport { WizardProgressProps } from \"./Models\";\r\nimport ProgressStep from \"./ProgressStep\";\r\nimport ProgressTrack from \"./ProgressTrack\";\r\nimport styled from \"styled-components\";\r\n\r\nconst WizardProgress: React.FC = (\r\n props: WizardProgressProps\r\n) => {\r\n // Destructure props\r\n const {\r\n currentStep,\r\n onChangeStep,\r\n stepNames,\r\n lastCompletedStepIndex,\r\n progressStepComponent,\r\n progressTrackComponent,\r\n stepCompleteIndicatorComponent,\r\n style,\r\n testId,\r\n containerBackground\r\n } = props;\r\n\r\n //\r\n //\r\n //\r\n // Render a clickable step marker in the progress bar for\r\n // each individual step in the Wizard\r\n const renderProgressStep = (name: string, index: number) => {\r\n const isComplete = index <= lastCompletedStepIndex;\r\n const isCurrentStep = index === currentStep;\r\n const isClickable = index <= lastCompletedStepIndex + 1 && !isCurrentStep;\r\n\r\n const StepMarker = progressStepComponent || ProgressStep;\r\n\r\n return (\r\n \r\n );\r\n };\r\n\r\n //\r\n //\r\n //\r\n // Render the track line that connects the step markers in the\r\n // progress bar and helps indicate to the user how much they've\r\n // completed and how much is left.\r\n const renderProgressTrack = () => {\r\n const TrackLine = progressTrackComponent || ProgressTrack;\r\n return ;\r\n };\r\n\r\n //\r\n //\r\n //\r\n return (\r\n \r\n \r\n {renderProgressTrack()}\r\n
\r\n {stepNames.map(renderProgressStep)}\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default WizardProgress;\r\n\r\n// Styled components\r\nconst ProgressContainer = styled.div`\r\n display: flex;\r\n position: relative;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n\r\n font-family: \"Inter\", Arial, Helvetica, sans-serif;\r\n transform: translateZ(0);\r\n\r\n & > .progress-container-inner-wrapper {\r\n display: inline-block;\r\n position: relative;\r\n transform: translateZ(0);\r\n }\r\n`;\r\n\r\nconst ProgressStepList = styled.ul`\r\n margin: 0;\r\n list-style-type: none;\r\n transform: translateZ(0);\r\n`;\r\n","import React from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { StepContainerProps as ComponentProps } from \"./Models\";\r\n\r\nconst StepContainer: React.FC = (props: ComponentProps) => {\r\n // Deconstruct props\r\n const {\r\n currentStepIndex,\r\n isTransitioning,\r\n minContentHeight,\r\n testId,\r\n style,\r\n children\r\n } = props;\r\n\r\n const getClassName = (): string => {\r\n let value = \"wizard-step-container wizard-current-step-content-container\";\r\n value += ` step-${currentStepIndex + 1}-content-container`;\r\n if (isTransitioning) value += \" transition-active\";\r\n return value;\r\n };\r\n\r\n return (\r\n \r\n {children}\r\n \r\n );\r\n};\r\nexport default StepContainer;\r\n\r\n// Styled components\r\nconst StyledStepContainer = styled.div`\r\n position: relative;\r\n opacity: 1;\r\n transform: translateZ(0);\r\n transition: 0.25s;\r\n\r\n &.transition-active {\r\n opacity: 0;\r\n }\r\n`;\r\n","import React, { useEffect, useMemo, useState } from \"react\";\r\nimport { WizardProps as ComponentProps } from \"./Models\";\r\nimport WizardProgress from \"./WizardProgress/\";\r\nimport StepContainer from \"./StepContainer\";\r\nimport styled from \"styled-components\";\r\n\r\nconst Wizard: React.FC = (props: ComponentProps) => {\r\n // Destructure props\r\n const {\r\n currentStep,\r\n onChangeStep,\r\n steps,\r\n components,\r\n styles,\r\n className,\r\n testIds,\r\n containerBackground,\r\n disableTransitionEffect,\r\n minContentHeight,\r\n children\r\n } = props;\r\n\r\n //\r\n //\r\n //\r\n // Store the names of each step\r\n const [stepNames, setStepNames] = useState([]);\r\n useEffect(() => {\r\n // Only update stored step name array if there has been some\r\n // kind of change, either in the actual names themselves or in\r\n // the order of the steps.\r\n // This is meant to prevent unnecessary props updates to (and\r\n // rerenders of) the progress bar, which uses the array of names\r\n // to render the progress steps.\r\n const updatedNames = steps.map(step => step.name);\r\n setStepNames(names =>\r\n JSON.stringify(names) !== JSON.stringify(updatedNames)\r\n ? updatedNames\r\n : names\r\n );\r\n }, [steps]);\r\n\r\n //\r\n //\r\n //\r\n // Track the user's completion\r\n const [lastCompletedStepIndex, setLastCompletedStepIndex] = useState(\r\n currentStep ? currentStep - 1 : -1\r\n );\r\n useEffect(() => {\r\n setLastCompletedStepIndex(last =>\r\n currentStep - 1 > last ? currentStep - 1 : last\r\n );\r\n }, [currentStep]);\r\n\r\n //\r\n //\r\n //\r\n // Render the progress bar\r\n const progressBar = useMemo(() => {\r\n const ProgressBar = components?.progress || WizardProgress;\r\n return (\r\n \r\n );\r\n }, [\r\n currentStep,\r\n onChangeStep,\r\n lastCompletedStepIndex,\r\n stepNames,\r\n components,\r\n styles,\r\n testIds,\r\n containerBackground\r\n ]);\r\n\r\n //\r\n //\r\n // Transition between displayed content as user progresses\r\n // through the steps in the Wizard. Disable this effect if\r\n // disableTransitionEffect is set to false.\r\n const [displayedStep, setDisplayedStep] = useState(currentStep);\r\n const [isTransitioning, setIsTransitioning] = useState(true);\r\n useEffect(() => {\r\n let transitionTimeout: any;\r\n\r\n if (disableTransitionEffect) {\r\n setDisplayedStep(currentStep);\r\n setIsTransitioning(false);\r\n } else {\r\n setIsTransitioning(true);\r\n transitionTimeout = setTimeout(() => {\r\n setDisplayedStep(currentStep);\r\n setIsTransitioning(false);\r\n }, 500);\r\n }\r\n\r\n return () => {\r\n if (!!transitionTimeout) clearTimeout(transitionTimeout);\r\n };\r\n }, [currentStep, disableTransitionEffect]);\r\n\r\n // Render the content of the displayed step\r\n const renderCurrentStepContent = () => {\r\n const CurrentStep = components?.stepContainer || StepContainer;\r\n return (\r\n \r\n {steps[displayedStep].content}\r\n \r\n );\r\n };\r\n\r\n //\r\n //\r\n //\r\n const Wrapper = components?.wrapper || StyledWizardWrapper;\r\n return (\r\n \r\n {progressBar}\r\n {renderCurrentStepContent()}\r\n {children}\r\n \r\n );\r\n};\r\nexport default Wizard;\r\n\r\n// Styled components\r\nconst StyledWizardWrapper = styled.div`\r\n position: relative;\r\n transform: translateZ(0);\r\n`;\r\n","import { default as WizardProgress } from \"./WizardProgress/\";\r\nimport { default as ProgressStep } from \"./WizardProgress/ProgressStep\";\r\nimport { default as ProgressTrack } from \"./WizardProgress/ProgressTrack\";\r\nimport { default as StepContainer } from \"./StepContainer\";\r\n\r\nexport { default as Wizard } from \"./Wizard\";\r\n\r\nexport const WizardComponents = {\r\n Progress: WizardProgress,\r\n ProgressStep: ProgressStep,\r\n ProgressTrack: ProgressTrack,\r\n StepContainer: StepContainer\r\n};\r\n","export { makeRumPublicApi } from './boot/rumPublicApi';\nexport { startRum } from './boot/startRum';\nexport { LifeCycle } from './domain/lifeCycle';\nexport { startViewContexts } from './domain/contexts/viewContexts';\nexport { getMutationObserverConstructor } from './browser/domMutationObservable';\nexport { initViewportObservable, getViewportDimension } from './browser/viewportObservable';\nexport { getScrollX, getScrollY } from './browser/scroll';\nexport { DEFAULT_PROGRAMMATIC_ACTION_NAME_ATTRIBUTE } from './domain/action/getActionNameFromElement';\nexport { STABLE_ATTRIBUTES } from './domain/getSelectorFromElement';\nexport * from './browser/htmlDomUtils';\nexport * from './browser/polyfills';\nexport { getSessionReplayUrl } from './domain/getSessionReplayUrl';\nexport { isLongDataUrl, sanitizeDataUrl, MAX_ATTRIBUTE_VALUE_CHAR_LENGTH } from './domain/resource/resourceUtils';\nexport * from './domain/privacy';\n//# sourceMappingURL=index.js.map","// render modes\n\nexport const NO_RENDER = 0;\nexport const SYNC_RENDER = 1;\nexport const FORCE_RENDER = 2;\nexport const ASYNC_RENDER = 3;\n\n\nexport const ATTR_KEY = '__preactattr_';\n\n// DOM properties that should NOT have \"px\" added when numeric\nexport const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;\n\n","// @flow\n\nimport { SPLITTER, SC_ATTR, SC_ATTR_ACTIVE, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport { getIdForGroup, setGroupForId } from './GroupIDAllocator';\nimport type { Sheet } from './types';\n\nconst SELECTOR = `style[${SC_ATTR}][${SC_ATTR_VERSION}=\"${SC_VERSION}\"]`;\nconst MARKER_RE = new RegExp(`^${SC_ATTR}\\\\.g(\\\\d+)\\\\[id=\"([\\\\w\\\\d-]+)\"\\\\].*?\"([^\"]*)`);\n\nexport const outputSheet = (sheet: Sheet) => {\n const tag = sheet.getTag();\n const { length } = tag;\n\n let css = '';\n for (let group = 0; group < length; group++) {\n const id = getIdForGroup(group);\n if (id === undefined) continue;\n\n const names = sheet.names.get(id);\n const rules = tag.getGroup(group);\n if (!names || !rules || !names.size) continue;\n\n const selector = `${SC_ATTR}.g${group}[id=\"${id}\"]`;\n\n let content = '';\n if (names !== undefined) {\n names.forEach(name => {\n if (name.length > 0) {\n content += `${name},`;\n }\n });\n }\n\n // NOTE: It's easier to collect rules and have the marker\n // after the actual rules to simplify the rehydration\n css += `${rules}${selector}{content:\"${content}\"}${SPLITTER}`;\n }\n\n return css;\n};\n\nconst rehydrateNamesFromContent = (sheet: Sheet, id: string, content: string) => {\n const names = content.split(',');\n let name;\n\n for (let i = 0, l = names.length; i < l; i++) {\n // eslint-disable-next-line\n if ((name = names[i])) {\n sheet.registerName(id, name);\n }\n }\n};\n\nconst rehydrateSheetFromTag = (sheet: Sheet, style: HTMLStyleElement) => {\n const parts = (style.innerHTML || '').split(SPLITTER);\n const rules: string[] = [];\n\n for (let i = 0, l = parts.length; i < l; i++) {\n const part = parts[i].trim();\n if (!part) continue;\n\n const marker = part.match(MARKER_RE);\n\n if (marker) {\n const group = parseInt(marker[1], 10) | 0;\n const id = marker[2];\n\n if (group !== 0) {\n // Rehydrate componentId to group index mapping\n setGroupForId(id, group);\n // Rehydrate names and rules\n // looks like: data-styled.g11[id=\"idA\"]{content:\"nameA,\"}\n rehydrateNamesFromContent(sheet, id, marker[3]);\n sheet.getTag().insertRules(group, rules);\n }\n\n rules.length = 0;\n } else {\n rules.push(part);\n }\n }\n};\n\nexport const rehydrateSheet = (sheet: Sheet) => {\n const nodes = document.querySelectorAll(SELECTOR);\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const node = ((nodes[i]: any): HTMLStyleElement);\n if (node && node.getAttribute(SC_ATTR) !== SC_ATTR_ACTIVE) {\n rehydrateSheetFromTag(sheet, node);\n\n if (node.parentNode) {\n node.parentNode.removeChild(node);\n }\n }\n }\n};\n","// @flow\n/* eslint-disable no-use-before-define */\n\nimport { makeStyleTag, getSheet } from './dom';\nimport type { SheetOptions, Tag } from './types';\n\n/** Create a CSSStyleSheet-like tag depending on the environment */\nexport const makeTag = ({ isServer, useCSSOMInjection, target }: SheetOptions): Tag => {\n if (isServer) {\n return new VirtualTag(target);\n } else if (useCSSOMInjection) {\n return new CSSOMTag(target);\n } else {\n return new TextTag(target);\n }\n};\n\nexport class CSSOMTag implements Tag {\n element: HTMLStyleElement;\n\n sheet: CSSStyleSheet;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n\n // Avoid Edge bug where empty style elements don't create sheets\n element.appendChild(document.createTextNode(''));\n\n this.sheet = getSheet(element);\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n try {\n this.sheet.insertRule(rule, index);\n this.length++;\n return true;\n } catch (_error) {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.sheet.deleteRule(index);\n this.length--;\n }\n\n getRule(index: number): string {\n const rule = this.sheet.cssRules[index];\n // Avoid IE11 quirk where cssText is inaccessible on some invalid rules\n if (rule !== undefined && typeof rule.cssText === 'string') {\n return rule.cssText;\n } else {\n return '';\n }\n }\n}\n\n/** A Tag that emulates the CSSStyleSheet API but uses text nodes */\nexport class TextTag implements Tag {\n element: HTMLStyleElement;\n\n nodes: NodeList;\n\n length: number;\n\n constructor(target?: HTMLElement) {\n const element = (this.element = makeStyleTag(target));\n this.nodes = element.childNodes;\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length && index >= 0) {\n const node = document.createTextNode(rule);\n const refNode = this.nodes[index];\n this.element.insertBefore(node, refNode || null);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.element.removeChild(this.nodes[index]);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.nodes[index].textContent;\n } else {\n return '';\n }\n }\n}\n\n/** A completely virtual (server-side) Tag that doesn't manipulate the DOM */\nexport class VirtualTag implements Tag {\n rules: string[];\n\n length: number;\n\n constructor(_target?: HTMLElement) {\n this.rules = [];\n this.length = 0;\n }\n\n insertRule(index: number, rule: string): boolean {\n if (index <= this.length) {\n this.rules.splice(index, 0, rule);\n this.length++;\n return true;\n } else {\n return false;\n }\n }\n\n deleteRule(index: number): void {\n this.rules.splice(index, 1);\n this.length--;\n }\n\n getRule(index: number): string {\n if (index < this.length) {\n return this.rules[index];\n } else {\n return '';\n }\n }\n}\n","// @flow\nimport { DISABLE_SPEEDY, IS_BROWSER } from '../constants';\nimport { EMPTY_OBJECT } from '../utils/empties';\nimport { makeGroupedTag } from './GroupedTag';\nimport { getGroupForId } from './GroupIDAllocator';\nimport { outputSheet, rehydrateSheet } from './Rehydration';\nimport { makeTag } from './Tag';\nimport type { GroupedTag, Sheet, SheetOptions } from './types';\n\nlet SHOULD_REHYDRATE = IS_BROWSER;\n\ntype SheetConstructorArgs = {\n isServer?: boolean,\n useCSSOMInjection?: boolean,\n target?: HTMLElement,\n};\n\ntype GlobalStylesAllocationMap = { [key: string]: number };\ntype NamesAllocationMap = Map>;\n\nconst defaultOptions: SheetOptions = {\n isServer: !IS_BROWSER,\n useCSSOMInjection: !DISABLE_SPEEDY,\n};\n\n/** Contains the main stylesheet logic for stringification and caching */\nexport default class StyleSheet implements Sheet {\n gs: GlobalStylesAllocationMap;\n\n names: NamesAllocationMap;\n\n options: SheetOptions;\n\n server: boolean;\n\n tag: void | GroupedTag;\n\n /** Register a group ID to give it an index */\n static registerId(id: string): number {\n return getGroupForId(id);\n }\n\n constructor(\n options: SheetConstructorArgs = EMPTY_OBJECT,\n globalStyles?: GlobalStylesAllocationMap = {},\n names?: NamesAllocationMap\n ) {\n this.options = {\n ...defaultOptions,\n ...options,\n };\n\n this.gs = globalStyles;\n this.names = new Map(names);\n this.server = !!options.isServer;\n\n // We rehydrate only once and use the sheet that is created first\n if (!this.server && IS_BROWSER && SHOULD_REHYDRATE) {\n SHOULD_REHYDRATE = false;\n rehydrateSheet(this);\n }\n }\n\n reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {\n return new StyleSheet(\n { ...this.options, ...options },\n this.gs,\n (withNames && this.names) || undefined\n );\n }\n\n allocateGSInstance(id: string) {\n return (this.gs[id] = (this.gs[id] || 0) + 1);\n }\n\n /** Lazily initialises a GroupedTag for when it's actually needed */\n getTag(): GroupedTag {\n return this.tag || (this.tag = makeGroupedTag(makeTag(this.options)));\n }\n\n /** Check whether a name is known for caching */\n hasNameForId(id: string, name: string): boolean {\n return this.names.has(id) && (this.names.get(id): any).has(name);\n }\n\n /** Mark a group's name as known for caching */\n registerName(id: string, name: string) {\n getGroupForId(id);\n\n if (!this.names.has(id)) {\n const groupNames = new Set();\n groupNames.add(name);\n this.names.set(id, groupNames);\n } else {\n (this.names.get(id): any).add(name);\n }\n }\n\n /** Insert new rules which also marks the name as known */\n insertRules(id: string, name: string, rules: string[]) {\n this.registerName(id, name);\n this.getTag().insertRules(getGroupForId(id), rules);\n }\n\n /** Clears all cached names for a given group ID */\n clearNames(id: string) {\n if (this.names.has(id)) {\n (this.names.get(id): any).clear();\n }\n }\n\n /** Clears all rules for a given group ID */\n clearRules(id: string) {\n this.getTag().clearGroup(getGroupForId(id));\n this.clearNames(id);\n }\n\n /** Clears the entire tag which deletes all rules but not its names */\n clearTag() {\n // NOTE: This does not clear the names, since it's only used during SSR\n // so that we can continuously output only new rules\n this.tag = undefined;\n }\n\n /** Outputs the current sheet as a CSS string with markers for SSR */\n toString(): string {\n return outputSheet(this);\n }\n}\n","// @flow\nimport isFunction from './isFunction';\nimport isStyledComponent from './isStyledComponent';\nimport type { RuleSet } from '../types';\n\nexport default function isStaticRules(rules: RuleSet): boolean {\n for (let i = 0; i < rules.length; i += 1) {\n const rule = rules[i];\n\n if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n return true;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport { type Stringifier } from '../types';\nimport throwStyledError from '../utils/error';\nimport { masterStylis } from './StyleSheetManager';\n\nexport default class Keyframes {\n id: string;\n\n name: string;\n\n rules: string;\n\n constructor(name: string, rules: string) {\n this.name = name;\n this.id = `sc-keyframes-${name}`;\n this.rules = rules;\n }\n\n inject = (styleSheet: StyleSheet, stylisInstance: Stringifier = masterStylis) => {\n const resolvedName = this.name + stylisInstance.hash;\n\n if (!styleSheet.hasNameForId(this.id, resolvedName)) {\n styleSheet.insertRules(\n this.id,\n resolvedName,\n stylisInstance(this.rules, resolvedName, '@keyframes')\n );\n }\n };\n\n toString = () => {\n return throwStyledError(12, String(this.name));\n };\n\n getName(stylisInstance: Stringifier = masterStylis) {\n return this.name + stylisInstance.hash;\n }\n}\n","// @flow\nimport validAttr from '@emotion/is-prop-valid';\nimport hoist from 'hoist-non-react-statics';\nimport React, { createElement, type Ref, useContext, useDebugValue } from 'react';\nimport { SC_VERSION } from '../constants';\nimport type {\n Attrs,\n IStyledComponent,\n IStyledStatics,\n RuleSet,\n ShouldForwardProp,\n Target,\n} from '../types';\nimport { checkDynamicCreation } from '../utils/checkDynamicCreation';\nimport createWarnTooManyClasses from '../utils/createWarnTooManyClasses';\nimport determineTheme from '../utils/determineTheme';\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from '../utils/empties';\nimport escape from '../utils/escape';\nimport generateComponentId from '../utils/generateComponentId';\nimport generateDisplayName from '../utils/generateDisplayName';\nimport getComponentName from '../utils/getComponentName';\nimport isFunction from '../utils/isFunction';\nimport isStyledComponent from '../utils/isStyledComponent';\nimport isTag from '../utils/isTag';\nimport joinStrings from '../utils/joinStrings';\nimport merge from '../utils/mixinDeep';\nimport ComponentStyle from './ComponentStyle';\nimport { useStyleSheet, useStylis } from './StyleSheetManager';\nimport { ThemeContext } from './ThemeProvider';\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName?: string, parentComponentId?: string) {\n const name = typeof displayName !== 'string' ? 'sc' : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] || 0) + 1;\n\n const componentId = `${name}-${generateComponentId(\n // SC_VERSION gives us isolation between multiple runtimes on the page at once\n // this is improved further with use of the babel plugin \"namespace\" feature\n SC_VERSION + name + identifiers[name]\n )}`;\n\n return parentComponentId ? `${parentComponentId}-${componentId}` : componentId;\n}\n\nfunction useResolvedAttrs(theme: any = EMPTY_OBJECT, props: Config, attrs: Attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach(attrDef => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n /* eslint-disable guard-for-in */\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] =\n key === 'className'\n ? joinStrings(resolvedAttrs[key], resolvedAttrDef[key])\n : resolvedAttrDef[key];\n }\n /* eslint-enable guard-for-in */\n });\n\n return [context, resolvedAttrs];\n}\n\nfunction useInjectedStyle(\n componentStyle: ComponentStyle,\n isStatic: boolean,\n resolvedAttrs: T,\n warnTooManyClasses?: $Call\n) {\n const styleSheet = useStyleSheet();\n const stylis = useStylis();\n\n const className = isStatic\n ? componentStyle.generateAndInjectStyles(EMPTY_OBJECT, styleSheet, stylis)\n : componentStyle.generateAndInjectStyles(resolvedAttrs, styleSheet, stylis);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(className);\n\n if (process.env.NODE_ENV !== 'production' && !isStatic && warnTooManyClasses) {\n warnTooManyClasses(className);\n }\n\n return className;\n}\n\nfunction useStyledComponentImpl(\n forwardedComponent: IStyledComponent,\n props: Object,\n forwardedRef: Ref,\n isStatic: boolean\n) {\n const {\n attrs: componentAttrs,\n componentStyle,\n defaultProps,\n foldedComponentIds,\n shouldForwardProp,\n styledComponentId,\n target,\n } = forwardedComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n if (process.env.NODE_ENV !== 'production') useDebugValue(styledComponentId);\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(props, useContext(ThemeContext), defaultProps);\n\n const [context, attrs] = useResolvedAttrs(theme || EMPTY_OBJECT, props, componentAttrs);\n\n const generatedClassName = useInjectedStyle(\n componentStyle,\n isStatic,\n context,\n process.env.NODE_ENV !== 'production' ? forwardedComponent.warnTooManyClasses : undefined\n );\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated: Target = attrs.$as || props.$as || attrs.as || props.as || target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === '$' || key === 'as') continue;\n else if (key === 'forwardedAs') {\n propsForElement.as = computedProps[key];\n } else if (\n shouldForwardProp\n ? shouldForwardProp(key, validAttr, elementToBeCreated)\n : isTargetTag\n ? validAttr(key)\n : true\n ) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (props.style && attrs.style !== props.style) {\n propsForElement.style = { ...props.style, ...attrs.style };\n }\n\n propsForElement.className = Array.prototype\n .concat(\n foldedComponentIds,\n styledComponentId,\n generatedClassName !== styledComponentId ? generatedClassName : null,\n props.className,\n attrs.className\n )\n .filter(Boolean)\n .join(' ');\n\n propsForElement.ref = refToForward;\n\n return createElement(elementToBeCreated, propsForElement);\n}\n\nexport default function createStyledComponent(\n target: $PropertyType,\n options: {\n attrs?: Attrs,\n componentId: string,\n displayName?: string,\n parentComponentId?: string,\n shouldForwardProp?: ShouldForwardProp,\n },\n rules: RuleSet\n) {\n const isTargetStyledComp = isStyledComponent(target);\n const isCompositeComponent = !isTag(target);\n\n const {\n attrs = EMPTY_ARRAY,\n componentId = generateId(options.displayName, options.parentComponentId),\n displayName = generateDisplayName(target),\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n isTargetStyledComp && ((target: any): IStyledComponent).attrs\n ? Array.prototype.concat(((target: any): IStyledComponent).attrs, attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (options.shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn, elementToBeCreated) =>\n ((((target: any): IStyledComponent).shouldForwardProp: any): ShouldForwardProp)(\n prop,\n filterFn,\n elementToBeCreated\n ) &&\n ((options.shouldForwardProp: any): ShouldForwardProp)(prop, filterFn, elementToBeCreated);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = ((target: any): IStyledComponent).shouldForwardProp;\n }\n }\n\n const componentStyle = new ComponentStyle(\n rules,\n styledComponentId,\n isTargetStyledComp ? ((target: Object).componentStyle: ComponentStyle) : undefined\n );\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n const isStatic = componentStyle.isStatic && attrs.length === 0;\n\n /**\n * forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent: IStyledComponent;\n\n const forwardRef = (props, ref) =>\n // eslint-disable-next-line\n useStyledComponentImpl(WrappedStyledComponent, props, ref, isStatic);\n\n forwardRef.displayName = displayName;\n\n WrappedStyledComponent = ((React.forwardRef(forwardRef): any): IStyledComponent);\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n // this static is used to preserve the cascade of static classes for component selector\n // purposes; this is especially important with usage of the css prop\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp\n ? Array.prototype.concat(\n ((target: any): IStyledComponent).foldedComponentIds,\n ((target: any): IStyledComponent).styledComponentId\n )\n : EMPTY_ARRAY;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp\n ? ((target: any): IStyledComponent).target\n : target;\n\n WrappedStyledComponent.withComponent = function withComponent(tag: Target) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${isTag(tag) ? tag : escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n this._foldedDefaultProps = isTargetStyledComp\n ? merge({}, ((target: any): IStyledComponent).defaultProps, obj)\n : obj;\n },\n });\n\n if (process.env.NODE_ENV !== 'production') {\n checkDynamicCreation(displayName, styledComponentId);\n\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(\n displayName,\n styledComponentId\n );\n }\n\n WrappedStyledComponent.toString = () => `.${WrappedStyledComponent.styledComponentId}`;\n\n if (isCompositeComponent) {\n hoist<\n IStyledStatics,\n $PropertyType,\n { [key: $Keys]: true }\n >(WrappedStyledComponent, ((target: any): $PropertyType), {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n shouldForwardProp: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n }\n\n return WrappedStyledComponent;\n}\n","// @flow\nimport StyleSheet from '../sheet';\nimport type { RuleSet, Stringifier } from '../types';\nimport flatten from '../utils/flatten';\nimport isStaticRules from '../utils/isStaticRules';\n\nexport default class GlobalStyle {\n componentId: string;\n\n isStatic: boolean;\n\n rules: RuleSet;\n\n constructor(rules: RuleSet, componentId: string) {\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules);\n\n // pre-register the first instance to ensure global styles\n // load before component ones\n StyleSheet.registerId(this.componentId + 1);\n }\n\n createStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n const flatCSS = flatten(this.rules, executionContext, styleSheet, stylis);\n const css = stylis(flatCSS.join(''), '');\n const id = this.componentId + instance;\n\n // NOTE: We use the id as a name as well, since these rules never change\n styleSheet.insertRules(id, id, css);\n }\n\n removeStyles(instance: number, styleSheet: StyleSheet) {\n styleSheet.clearRules(this.componentId + instance);\n }\n\n renderStyles(\n instance: number,\n executionContext: Object,\n styleSheet: StyleSheet,\n stylis: Stringifier\n ) {\n if (instance > 2) StyleSheet.registerId(this.componentId + instance);\n\n // NOTE: Remove old styles, then inject the new ones\n this.removeStyles(instance, styleSheet);\n this.createStyles(instance, executionContext, styleSheet, stylis);\n }\n}\n","// @flow\n/* eslint-disable no-underscore-dangle */\nimport React from 'react';\nimport { IS_BROWSER, SC_ATTR, SC_ATTR_VERSION, SC_VERSION } from '../constants';\nimport throwStyledError from '../utils/error';\nimport getNonce from '../utils/nonce';\nimport StyleSheet from '../sheet';\nimport StyleSheetManager from './StyleSheetManager';\n\ndeclare var __SERVER__: boolean;\n\nconst CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\n\nexport default class ServerStyleSheet {\n isStreaming: boolean;\n\n instance: StyleSheet;\n\n sealed: boolean;\n\n constructor() {\n this.instance = new StyleSheet({ isServer: true });\n this.sealed = false;\n }\n\n _emitSheetCSS = (): string => {\n const css = this.instance.toString();\n if (!css) return '';\n\n const nonce = getNonce();\n const attrs = [nonce && `nonce=\"${nonce}\"`, `${SC_ATTR}=\"true\"`, `${SC_ATTR_VERSION}=\"${SC_VERSION}\"`];\n const htmlAttr = attrs.filter(Boolean).join(' ');\n\n return ``;\n };\n\n collectStyles(children: any) {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return {children};\n }\n\n getStyleTags = (): string => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n return this._emitSheetCSS();\n };\n\n getStyleElement = () => {\n if (this.sealed) {\n return throwStyledError(2);\n }\n\n const props = {\n [SC_ATTR]: '',\n [SC_ATTR_VERSION]: SC_VERSION,\n dangerouslySetInnerHTML: {\n __html: this.instance.toString(),\n },\n };\n\n const nonce = getNonce();\n if (nonce) {\n (props: any).nonce = nonce;\n }\n\n // v4 returned an array for this fn, so we'll do the same for v5 for backward compat\n return [];\n };\n\n // eslint-disable-next-line consistent-return\n interleaveWithNodeStream(input: any) {\n if (!__SERVER__ || IS_BROWSER) {\n return throwStyledError(3);\n } else if (this.sealed) {\n return throwStyledError(2);\n }\n\n if (__SERVER__) {\n this.seal();\n\n // eslint-disable-next-line global-require\n const { Readable, Transform } = require('stream');\n\n const readableStream: Readable = input;\n const { instance: sheet, _emitSheetCSS } = this;\n\n const transformer = new Transform({\n transform: function appendStyleChunks(chunk, /* encoding */ _, callback) {\n // Get the chunk and retrieve the sheet's CSS as an HTML chunk,\n // then reset its rules so we get only new ones for the next chunk\n const renderedHtml = chunk.toString();\n const html = _emitSheetCSS();\n\n sheet.clearTag();\n\n // prepend style html to chunk, unless the start of the chunk is a\n // closing tag in which case append right after that\n if (CLOSING_TAG_R.test(renderedHtml)) {\n const endOfClosingTag = renderedHtml.indexOf('>') + 1;\n const before = renderedHtml.slice(0, endOfClosingTag);\n const after = renderedHtml.slice(endOfClosingTag);\n\n this.push(before + html + after);\n } else {\n this.push(html + renderedHtml);\n }\n\n callback();\n },\n });\n\n readableStream.on('error', err => {\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n }\n }\n\n seal = () => {\n this.sealed = true;\n };\n}\n","import { contains } from './array.js';\nimport { pickShallow } from './object.js';\n\n/**\n * Create a factory function, which can be used to inject dependencies.\n *\n * The created functions are memoized, a consecutive call of the factory\n * with the exact same inputs will return the same function instance.\n * The memoized cache is exposed on `factory.cache` and can be cleared\n * if needed.\n *\n * Example:\n *\n * const name = 'log'\n * const dependencies = ['config', 'typed', 'divideScalar', 'Complex']\n *\n * export const createLog = factory(name, dependencies, ({ typed, config, divideScalar, Complex }) => {\n * // ... create the function log here and return it\n * }\n *\n * @param {string} name Name of the function to be created\n * @param {string[]} dependencies The names of all required dependencies\n * @param {function} create Callback function called with an object with all dependencies\n * @param {Object} [meta] Optional object with meta information that will be attached\n * to the created factory function as property `meta`.\n * @returns {function}\n */\nexport function factory(name, dependencies, create, meta) {\n function assertAndCreate(scope) {\n // we only pass the requested dependencies to the factory function\n // to prevent functions to rely on dependencies that are not explicitly\n // requested.\n var deps = pickShallow(scope, dependencies.map(stripOptionalNotation));\n assertDependencies(name, dependencies, scope);\n return create(deps);\n }\n assertAndCreate.isFactory = true;\n assertAndCreate.fn = name;\n assertAndCreate.dependencies = dependencies.slice().sort();\n if (meta) {\n assertAndCreate.meta = meta;\n }\n return assertAndCreate;\n}\n\n/**\n * Sort all factories such that when loading in order, the dependencies are resolved.\n *\n * @param {Array} factories\n * @returns {Array} Returns a new array with the sorted factories.\n */\nexport function sortFactories(factories) {\n var factoriesByName = {};\n factories.forEach(factory => {\n factoriesByName[factory.fn] = factory;\n });\n function containsDependency(factory, dependency) {\n // TODO: detect circular references\n if (isFactory(factory)) {\n if (contains(factory.dependencies, dependency.fn || dependency.name)) {\n return true;\n }\n if (factory.dependencies.some(d => containsDependency(factoriesByName[d], dependency))) {\n return true;\n }\n }\n return false;\n }\n var sorted = [];\n function addFactory(factory) {\n var index = 0;\n while (index < sorted.length && !containsDependency(sorted[index], factory)) {\n index++;\n }\n sorted.splice(index, 0, factory);\n }\n\n // sort regular factory functions\n factories.filter(isFactory).forEach(addFactory);\n\n // sort legacy factory functions AFTER the regular factory functions\n factories.filter(factory => !isFactory(factory)).forEach(addFactory);\n return sorted;\n}\n\n// TODO: comment or cleanup if unused in the end\nexport function create(factories) {\n var scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n sortFactories(factories).forEach(factory => factory(scope));\n return scope;\n}\n\n/**\n * Test whether an object is a factory. This is the case when it has\n * properties name, dependencies, and a function create.\n * @param {*} obj\n * @returns {boolean}\n */\nexport function isFactory(obj) {\n return typeof obj === 'function' && typeof obj.fn === 'string' && Array.isArray(obj.dependencies);\n}\n\n/**\n * Assert that all dependencies of a list with dependencies are available in the provided scope.\n *\n * Will throw an exception when there are dependencies missing.\n *\n * @param {string} name Name for the function to be created. Used to generate a useful error message\n * @param {string[]} dependencies\n * @param {Object} scope\n */\nexport function assertDependencies(name, dependencies, scope) {\n var allDefined = dependencies.filter(dependency => !isOptionalDependency(dependency)) // filter optionals\n .every(dependency => scope[dependency] !== undefined);\n if (!allDefined) {\n var missingDependencies = dependencies.filter(dependency => scope[dependency] === undefined);\n\n // TODO: create a custom error class for this, a MathjsError or something like that\n throw new Error(\"Cannot create function \\\"\".concat(name, \"\\\", \") + \"some dependencies are missing: \".concat(missingDependencies.map(d => \"\\\"\".concat(d, \"\\\"\")).join(', '), \".\"));\n }\n}\nexport function isOptionalDependency(dependency) {\n return dependency && dependency[0] === '?';\n}\nexport function stripOptionalNotation(dependency) {\n return dependency && dependency[0] === '?' ? dependency.slice(1) : dependency;\n}","import '@redux-saga/symbols';\nimport '@babel/runtime/helpers/esm/extends';\nimport { channel, stringableFunc, func, notUndef } from '@redux-saga/is';\nimport { q as makeIterator, K as take, L as fork, M as cancel, N as call, O as actionChannel, Q as sliding, U as delay, V as race, c as check } from './io-6de156f3.js';\nexport { O as actionChannel, _ as all, $ as apply, N as call, M as cancel, a4 as cancelled, a0 as cps, U as delay, W as effectTypes, a5 as flush, L as fork, a6 as getContext, a2 as join, Y as put, Z as putResolve, V as race, a3 as select, a7 as setContext, a1 as spawn, K as take, X as takeMaybe } from './io-6de156f3.js';\nimport '@redux-saga/delay-p';\n\nvar done = function done(value) {\n return {\n done: true,\n value: value\n };\n};\n\nvar qEnd = {};\nfunction safeName(patternOrChannel) {\n if (channel(patternOrChannel)) {\n return 'channel';\n }\n\n if (stringableFunc(patternOrChannel)) {\n return String(patternOrChannel);\n }\n\n if (func(patternOrChannel)) {\n return patternOrChannel.name;\n }\n\n return String(patternOrChannel);\n}\nfunction fsmIterator(fsm, startState, name) {\n var stateUpdater,\n errorState,\n effect,\n nextState = startState;\n\n function next(arg, error) {\n if (nextState === qEnd) {\n return done(arg);\n }\n\n if (error && !errorState) {\n nextState = qEnd;\n throw error;\n } else {\n stateUpdater && stateUpdater(arg);\n var currentState = error ? fsm[errorState](error) : fsm[nextState]();\n nextState = currentState.nextState;\n effect = currentState.effect;\n stateUpdater = currentState.stateUpdater;\n errorState = currentState.errorState;\n return nextState === qEnd ? done(arg) : effect;\n }\n }\n\n return makeIterator(next, function (error) {\n return next(null, error);\n }, name);\n}\n\nfunction takeEvery(patternOrChannel, worker) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n\n var yTake = {\n done: false,\n value: take(patternOrChannel)\n };\n\n var yFork = function yFork(ac) {\n return {\n done: false,\n value: fork.apply(void 0, [worker].concat(args, [ac]))\n };\n };\n\n var action,\n setAction = function setAction(ac) {\n return action = ac;\n };\n\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yTake,\n stateUpdater: setAction\n };\n },\n q2: function q2() {\n return {\n nextState: 'q1',\n effect: yFork(action)\n };\n }\n }, 'q1', \"takeEvery(\" + safeName(patternOrChannel) + \", \" + worker.name + \")\");\n}\n\nfunction takeLatest(patternOrChannel, worker) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n\n var yTake = {\n done: false,\n value: take(patternOrChannel)\n };\n\n var yFork = function yFork(ac) {\n return {\n done: false,\n value: fork.apply(void 0, [worker].concat(args, [ac]))\n };\n };\n\n var yCancel = function yCancel(task) {\n return {\n done: false,\n value: cancel(task)\n };\n };\n\n var task, action;\n\n var setTask = function setTask(t) {\n return task = t;\n };\n\n var setAction = function setAction(ac) {\n return action = ac;\n };\n\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yTake,\n stateUpdater: setAction\n };\n },\n q2: function q2() {\n return task ? {\n nextState: 'q3',\n effect: yCancel(task)\n } : {\n nextState: 'q1',\n effect: yFork(action),\n stateUpdater: setTask\n };\n },\n q3: function q3() {\n return {\n nextState: 'q1',\n effect: yFork(action),\n stateUpdater: setTask\n };\n }\n }, 'q1', \"takeLatest(\" + safeName(patternOrChannel) + \", \" + worker.name + \")\");\n}\n\nfunction takeLeading(patternOrChannel, worker) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n\n var yTake = {\n done: false,\n value: take(patternOrChannel)\n };\n\n var yCall = function yCall(ac) {\n return {\n done: false,\n value: call.apply(void 0, [worker].concat(args, [ac]))\n };\n };\n\n var action;\n\n var setAction = function setAction(ac) {\n return action = ac;\n };\n\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yTake,\n stateUpdater: setAction\n };\n },\n q2: function q2() {\n return {\n nextState: 'q1',\n effect: yCall(action)\n };\n }\n }, 'q1', \"takeLeading(\" + safeName(patternOrChannel) + \", \" + worker.name + \")\");\n}\n\nfunction throttle(delayLength, pattern, worker) {\n for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {\n args[_key - 3] = arguments[_key];\n }\n\n var action, channel;\n var yActionChannel = {\n done: false,\n value: actionChannel(pattern, sliding(1))\n };\n\n var yTake = function yTake() {\n return {\n done: false,\n value: take(channel)\n };\n };\n\n var yFork = function yFork(ac) {\n return {\n done: false,\n value: fork.apply(void 0, [worker].concat(args, [ac]))\n };\n };\n\n var yDelay = {\n done: false,\n value: delay(delayLength)\n };\n\n var setAction = function setAction(ac) {\n return action = ac;\n };\n\n var setChannel = function setChannel(ch) {\n return channel = ch;\n };\n\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yActionChannel,\n stateUpdater: setChannel\n };\n },\n q2: function q2() {\n return {\n nextState: 'q3',\n effect: yTake(),\n stateUpdater: setAction\n };\n },\n q3: function q3() {\n return {\n nextState: 'q4',\n effect: yFork(action)\n };\n },\n q4: function q4() {\n return {\n nextState: 'q2',\n effect: yDelay\n };\n }\n }, 'q1', \"throttle(\" + safeName(pattern) + \", \" + worker.name + \")\");\n}\n\nfunction retry(maxTries, delayLength, fn) {\n var counter = maxTries;\n\n for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {\n args[_key - 3] = arguments[_key];\n }\n\n var yCall = {\n done: false,\n value: call.apply(void 0, [fn].concat(args))\n };\n var yDelay = {\n done: false,\n value: delay(delayLength)\n };\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yCall,\n errorState: 'q10'\n };\n },\n q2: function q2() {\n return {\n nextState: qEnd\n };\n },\n q10: function q10(error) {\n counter -= 1;\n\n if (counter <= 0) {\n throw error;\n }\n\n return {\n nextState: 'q1',\n effect: yDelay\n };\n }\n }, 'q1', \"retry(\" + fn.name + \")\");\n}\n\nfunction debounceHelper(delayLength, patternOrChannel, worker) {\n for (var _len = arguments.length, args = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {\n args[_key - 3] = arguments[_key];\n }\n\n var action, raceOutput;\n var yTake = {\n done: false,\n value: take(patternOrChannel)\n };\n var yRace = {\n done: false,\n value: race({\n action: take(patternOrChannel),\n debounce: delay(delayLength)\n })\n };\n\n var yFork = function yFork(ac) {\n return {\n done: false,\n value: fork.apply(void 0, [worker].concat(args, [ac]))\n };\n };\n\n var yNoop = function yNoop(value) {\n return {\n done: false,\n value: value\n };\n };\n\n var setAction = function setAction(ac) {\n return action = ac;\n };\n\n var setRaceOutput = function setRaceOutput(ro) {\n return raceOutput = ro;\n };\n\n return fsmIterator({\n q1: function q1() {\n return {\n nextState: 'q2',\n effect: yTake,\n stateUpdater: setAction\n };\n },\n q2: function q2() {\n return {\n nextState: 'q3',\n effect: yRace,\n stateUpdater: setRaceOutput\n };\n },\n q3: function q3() {\n return raceOutput.debounce ? {\n nextState: 'q1',\n effect: yFork(action)\n } : {\n nextState: 'q2',\n effect: yNoop(raceOutput.action),\n stateUpdater: setAction\n };\n }\n }, 'q1', \"debounce(\" + safeName(patternOrChannel) + \", \" + worker.name + \")\");\n}\n\nvar validateTakeEffect = function validateTakeEffect(fn, patternOrChannel, worker) {\n check(patternOrChannel, notUndef, fn.name + \" requires a pattern or channel\");\n check(worker, notUndef, fn.name + \" requires a saga parameter\");\n};\n\nfunction takeEvery$1(patternOrChannel, worker) {\n if (process.env.NODE_ENV !== 'production') {\n validateTakeEffect(takeEvery$1, patternOrChannel, worker);\n }\n\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n\n return fork.apply(void 0, [takeEvery, patternOrChannel, worker].concat(args));\n}\nfunction takeLatest$1(patternOrChannel, worker) {\n if (process.env.NODE_ENV !== 'production') {\n validateTakeEffect(takeLatest$1, patternOrChannel, worker);\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {\n args[_key2 - 2] = arguments[_key2];\n }\n\n return fork.apply(void 0, [takeLatest, patternOrChannel, worker].concat(args));\n}\nfunction takeLeading$1(patternOrChannel, worker) {\n if (process.env.NODE_ENV !== 'production') {\n validateTakeEffect(takeLeading$1, patternOrChannel, worker);\n }\n\n for (var _len3 = arguments.length, args = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {\n args[_key3 - 2] = arguments[_key3];\n }\n\n return fork.apply(void 0, [takeLeading, patternOrChannel, worker].concat(args));\n}\nfunction throttle$1(ms, pattern, worker) {\n if (process.env.NODE_ENV !== 'production') {\n check(pattern, notUndef, 'throttle requires a pattern');\n check(worker, notUndef, 'throttle requires a saga parameter');\n }\n\n for (var _len4 = arguments.length, args = new Array(_len4 > 3 ? _len4 - 3 : 0), _key4 = 3; _key4 < _len4; _key4++) {\n args[_key4 - 3] = arguments[_key4];\n }\n\n return fork.apply(void 0, [throttle, ms, pattern, worker].concat(args));\n}\nfunction retry$1(maxTries, delayLength, worker) {\n for (var _len5 = arguments.length, args = new Array(_len5 > 3 ? _len5 - 3 : 0), _key5 = 3; _key5 < _len5; _key5++) {\n args[_key5 - 3] = arguments[_key5];\n }\n\n return call.apply(void 0, [retry, maxTries, delayLength, worker].concat(args));\n}\nfunction debounce(delayLength, pattern, worker) {\n for (var _len6 = arguments.length, args = new Array(_len6 > 3 ? _len6 - 3 : 0), _key6 = 3; _key6 < _len6; _key6++) {\n args[_key6 - 3] = arguments[_key6];\n }\n\n return fork.apply(void 0, [debounceHelper, delayLength, pattern, worker].concat(args));\n}\n\nexport { debounce, retry$1 as retry, takeEvery$1 as takeEvery, takeLatest$1 as takeLatest, takeLeading$1 as takeLeading, throttle$1 as throttle };\n","import {\n StringType,\n EmptyAction,\n PayloadAction,\n PayloadMetaAction,\n} from './types';\n\nexport function action(type: T): EmptyAction;\n\nexport function action(\n type: T,\n payload: P\n): PayloadAction;\n\nexport function action(\n type: T,\n payload: P,\n meta: M\n): PayloadMetaAction;\n\n/**\n * @description flux standard action factory\n * @example\n * ```\n * const add = (amount: number, meta?: MetaShape) => action('INCREMENT', amount, meta);\n * ```\n */\nexport function action(\n type: T,\n payload?: P,\n meta?: M\n) {\n return { type, payload, meta } as any;\n}\n","import clone from 'lodash/clone';\nimport toPath from 'lodash/toPath';\nimport * as React from 'react';\n\n// Assertions\n\n/** @private is the value an empty array? */\nexport const isEmptyArray = (value?: any) =>\n Array.isArray(value) && value.length === 0;\n\n/** @private is the given object a Function? */\nexport const isFunction = (obj: any): obj is Function =>\n typeof obj === 'function';\n\n/** @private is the given object an Object? */\nexport const isObject = (obj: any): obj is Object =>\n obj !== null && typeof obj === 'object';\n\n/** @private is the given object an integer? */\nexport const isInteger = (obj: any): boolean =>\n String(Math.floor(Number(obj))) === obj;\n\n/** @private is the given object a string? */\nexport const isString = (obj: any): obj is string =>\n Object.prototype.toString.call(obj) === '[object String]';\n\n/** @private is the given object a NaN? */\n// eslint-disable-next-line no-self-compare\nexport const isNaN = (obj: any): boolean => obj !== obj;\n\n/** @private Does a React component have exactly 0 children? */\nexport const isEmptyChildren = (children: any): boolean =>\n React.Children.count(children) === 0;\n\n/** @private is the given object/value a promise? */\nexport const isPromise = (value: any): value is PromiseLike =>\n isObject(value) && isFunction(value.then);\n\n/** @private is the given object/value a type of synthetic event? */\nexport const isInputEvent = (value: any): value is React.SyntheticEvent =>\n value && isObject(value) && isObject(value.target);\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?Document} doc Defaults to current document.\n * @return {Element | null}\n * @see https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/dom/getActiveElement.js\n */\nexport function getActiveElement(doc?: Document): Element | null {\n doc = doc || (typeof document !== 'undefined' ? document : undefined);\n if (typeof doc === 'undefined') {\n return null;\n }\n try {\n return doc.activeElement || doc.body;\n } catch (e) {\n return doc.body;\n }\n}\n\n/**\n * Deeply get a value from an object via its path.\n */\nexport function getIn(\n obj: any,\n key: string | string[],\n def?: any,\n p: number = 0\n) {\n const path = toPath(key);\n while (obj && p < path.length) {\n obj = obj[path[p++]];\n }\n return obj === undefined ? def : obj;\n}\n\n/**\n * Deeply set a value from in object via it's path. If the value at `path`\n * has changed, return a shallow copy of obj with `value` set at `path`.\n * If `value` has not changed, return the original `obj`.\n *\n * Existing objects / arrays along `path` are also shallow copied. Sibling\n * objects along path retain the same internal js reference. Since new\n * objects / arrays are only created along `path`, we can test if anything\n * changed in a nested structure by comparing the object's reference in\n * the old and new object, similar to how russian doll cache invalidation\n * works.\n *\n * In earlier versions of this function, which used cloneDeep, there were\n * issues whereby settings a nested value would mutate the parent\n * instead of creating a new object. `clone` avoids that bug making a\n * shallow copy of the objects along the update path\n * so no object is mutated in place.\n *\n * Before changing this function, please read through the following\n * discussions.\n *\n * @see https://github.com/developit/linkstate\n * @see https://github.com/jaredpalmer/formik/pull/123\n */\nexport function setIn(obj: any, path: string, value: any): any {\n let res: any = clone(obj); // this keeps inheritance when obj is a class\n let resVal: any = res;\n let i = 0;\n let pathArray = toPath(path);\n\n for (; i < pathArray.length - 1; i++) {\n const currentPath: string = pathArray[i];\n let currentObj: any = getIn(obj, pathArray.slice(0, i + 1));\n\n if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {\n resVal = resVal[currentPath] = clone(currentObj);\n } else {\n const nextPath: string = pathArray[i + 1];\n resVal = resVal[currentPath] =\n isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};\n }\n }\n\n // Return original object if new value is the same as current\n if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {\n return obj;\n }\n\n if (value === undefined) {\n delete resVal[pathArray[i]];\n } else {\n resVal[pathArray[i]] = value;\n }\n\n // If the path array has a single element, the loop did not run.\n // Deleting on `resVal` had no effect in this scenario, so we delete on the result instead.\n if (i === 0 && value === undefined) {\n delete res[pathArray[i]];\n }\n\n return res;\n}\n\n/**\n * Recursively a set the same value for all keys and arrays nested object, cloning\n * @param object\n * @param value\n * @param visited\n * @param response\n */\nexport function setNestedObjectValues(\n object: any,\n value: any,\n visited: any = new WeakMap(),\n response: any = {}\n): T {\n for (let k of Object.keys(object)) {\n const val = object[k];\n if (isObject(val)) {\n if (!visited.get(val)) {\n visited.set(val, true);\n // In order to keep array values consistent for both dot path and\n // bracket syntax, we need to check if this is an array so that\n // this will output { friends: [true] } and not { friends: { \"0\": true } }\n response[k] = Array.isArray(val) ? [] : {};\n setNestedObjectValues(val, value, visited, response[k]);\n }\n } else {\n response[k] = value;\n }\n }\n\n return response;\n}\n","import { ActionCreator, StringOrSymbol } from './types';\n\n/**\n * @description decorate any action-creator to make it compatible with `typesafe-actions`\n * @description (usefull to make third-party action-creator work with typesafe helpers)\n */\nexport function createActionWithType<\n T extends StringOrSymbol,\n AC extends ActionCreator = () => { type: T }\n>(type: T, actionCreatorHandler?: (type: T) => AC): AC {\n const actionCreator: AC =\n actionCreatorHandler != null\n ? actionCreatorHandler(type)\n : ((() => ({ type })) as AC);\n\n return Object.assign(actionCreator, {\n getType: () => type,\n // redux-actions compatibility\n toString: () => type,\n });\n}\n","import { StringType, ActionCreator } from './types';\nimport { validateActionType } from './utils';\nimport { action } from './action';\n\nexport type PayloadMetaAction = P extends undefined\n ? M extends undefined\n ? { type: T }\n : { type: T; meta: M }\n : M extends undefined\n ? { type: T; payload: P }\n : { type: T; payload: P; meta: M };\n\n/**\n * @description typesafe action-creator factory\n */\nexport function createAction<\n T extends StringType,\n AC extends ActionCreator = () => { type: T }\n>(\n actionType: T,\n actionResolverHandler?: (\n resolve: (\n payload?: P,\n meta?: M\n ) => PayloadMetaAction\n ) => AC\n): AC {\n validateActionType(actionType);\n\n const actionCreator: AC =\n actionResolverHandler == null\n ? ((() => action(actionType)) as AC)\n : actionResolverHandler(action.bind(null, actionType) as any);\n\n return Object.assign(actionCreator, {\n getType: () => actionType,\n // redux-actions compatibility\n toString: () => actionType,\n });\n}\n","import { StringType, Box, FsaBuilder, FsaMapBuilder } from './types';\nimport { createActionWithType } from './create-action-with-type';\nimport { validateActionType } from './utils';\n\nexport interface CreateStandardAction {\n (): FsaBuilder, Box>;\n map(\n fn: (payload: P, meta: M) => R\n ): FsaMapBuilder, Box, Box>;\n}\n\n/**\n * @description create an action-creator of a given function that contains hidden \"type\" metadata\n */\nexport function createStandardAction(\n actionType: T\n): CreateStandardAction {\n validateActionType(actionType);\n\n function constructor(): FsaBuilder, Box> {\n return createActionWithType(actionType, type => (payload: P, meta: M) => ({\n type,\n payload,\n meta,\n })) as FsaBuilder, Box>;\n }\n\n function map(\n fn: (payload: P, meta: M) => R\n ): FsaMapBuilder, Box, Box> {\n return createActionWithType(actionType, type => (payload: P, meta: M) =>\n Object.assign(fn(payload, meta), { type })\n ) as FsaMapBuilder, Box, Box>;\n }\n\n return Object.assign(constructor, { map });\n}\n","import { StringType, Box, FsaMapBuilder, FsaBuilder } from './types';\nimport { createActionWithType } from './create-action-with-type';\nimport { validateActionType } from './utils';\n\nexport interface CreateAsyncAction<\n T1 extends StringType,\n T2 extends StringType,\n T3 extends StringType\n> {\n // tslint:disable-next-line:callable-types\n (): AsyncActionBuilder;\n // withMappers(\n // requestMapper: (a?: A1) => P1,\n // successMapper: (a?: A2) => P2,\n // failureMapper: (a?: A3) => P3\n // ): AsyncActionWithMappers;\n}\n\nexport type AsyncActionBuilder<\n T1 extends StringType,\n T2 extends StringType,\n T3 extends StringType,\n P1,\n P2,\n P3\n> = {\n request: FsaBuilder>;\n success: FsaBuilder>;\n failure: FsaBuilder>;\n};\n\nexport type AsyncActionWithMappers<\n T1 extends StringType,\n T2 extends StringType,\n T3 extends StringType,\n A1 = void,\n P1 = void,\n A2 = void,\n P2 = void,\n A3 = void,\n P3 = void\n> = {\n request: FsaMapBuilder, Box>;\n success: FsaMapBuilder, Box>;\n failure: FsaMapBuilder, Box>;\n};\n\n/** implementation */\nexport function createAsyncAction<\n T1 extends StringType,\n T2 extends StringType,\n T3 extends StringType\n>(\n requestType: T1,\n successType: T2,\n failureType: T3\n): CreateAsyncAction {\n [requestType, successType, failureType].forEach((arg, idx) => {\n validateActionType(arg, idx + 1);\n });\n\n function constructor(): AsyncActionBuilder<\n T1,\n T2,\n T3,\n P1,\n P2,\n P3\n > {\n return {\n request: createActionWithType(requestType, type => (payload?: P1) => ({\n type: requestType,\n payload,\n })) as FsaBuilder>,\n success: createActionWithType(successType, type => (payload?: P2) => ({\n type: successType,\n payload,\n })) as FsaBuilder>,\n failure: createActionWithType(failureType, type => (payload?: P3) => ({\n type: failureType,\n payload,\n })) as FsaBuilder>,\n };\n }\n\n // function withMappers(\n // requestMapper: (a?: A1) => P1,\n // successMapper: (a?: A2) => P2,\n // failureMapper: (a?: A3) => P3\n // ): AsyncActionWithMappers {\n // return {\n // request: createActionWithType(requestType, type => (payload?: A1) => ({\n // type,\n // payload: requestMapper != null ? requestMapper(payload) : undefined,\n // })) as MapBuilder, B>,\n // success: createActionWithType(successType, type => (payload?: A2) => ({\n // type,\n // payload: successMapper != null ? successMapper(payload) : undefined,\n // })) as MapBuilder, B>,\n // failure: createActionWithType(failureType, type => (payload?: A3) => ({\n // type,\n // payload: failureMapper != null ? failureMapper(payload) : undefined,\n // })) as MapBuilder, B>,\n // };\n // }\n\n return Object.assign(constructor, {});\n}\n","import { StringType, ActionCreator, TypeMeta } from './types';\n\n/**\n * @description get the \"type literal\" of a given action-creator\n */\nexport function getType(\n creator: ActionCreator & TypeMeta\n): T {\n if (creator == null) {\n throw new Error('first argument is missing');\n }\n\n if (creator.getType == null) {\n throw new Error('first argument is not an instance of \"typesafe-actions\"');\n }\n\n return creator.getType();\n}\n","import { StringType } from './types';\nimport { validateActionType } from './utils';\n/**\n * @description (curried assert function) check if action type is equal given type-constant\n * @description it works with discriminated union types\n */\nexport function isOfType(\n type: T,\n action: A\n): action is A extends { type: T } ? A : never;\n\n/**\n * @description (curried assert function) check if action type is equal given type-constant\n * @description it works with discriminated union types\n */\nexport function isOfType<\n T extends K[],\n K extends StringType,\n A extends { type: StringType }\n>(type: T, action: A): action is A extends { type: T } ? A : never;\n\n/**\n * @description (curried assert function) check if action type is equal given type-constant\n * @description it works with discriminated union types\n */\nexport function isOfType(\n type: T\n): (\n action: A\n) => action is A extends { type: T } ? A : never;\n\n/**\n * @description (curried assert function) check if action type is equal given type-constant\n * @description it works with discriminated union types\n */\nexport function isOfType(\n type: T\n): (\n action: A\n) => action is A extends { type: T } ? A : never;\n\n/** implementation */\nexport function isOfType<\n T extends StringType | StringType[],\n A extends { type: StringType }\n>(actionType: T, actionOrNil?: A) {\n Array.isArray(actionType)\n ? actionType.forEach(type => validateActionType(type))\n : validateActionType(actionType);\n\n const assertFn = Array.isArray(actionType)\n ? (action: A) => actionType.includes(action.type)\n : (action: A) => action.type === actionType;\n\n // with 1 arg return assertFn\n if (actionOrNil == null) {\n return assertFn;\n }\n // with 2 args invoke assertFn and return the result\n return assertFn(actionOrNil);\n}\n","import { TypeMeta } from './types';\n\nexport type AC = ((...args: any[]) => T) &\n TypeMeta;\n\n/**\n * @description (curried assert function) check if an action is the instance of given action-creator(s)\n * @description it works with discriminated union types\n * @inner If you need more than 5 arguments -> use switch\n */\nexport function isActionOf(\n actionCreators: [AC],\n action: { type: string }\n): action is [T1][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A\n>(\n actionCreators: [AC, AC],\n action: { type: string }\n): action is [T1, T2][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A\n>(\n actionCreators: [AC, AC, AC],\n action: { type: string }\n): action is [T1, T2, T3][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A,\n T4 extends A\n>(\n actionCreators: [AC, AC, AC, AC],\n action: { type: string }\n): action is [T1, T2, T3, T4][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A,\n T4 extends A,\n T5 extends A\n>(\n actionCreators: [AC, AC, AC, AC, AC],\n action: { type: string }\n): action is [T1, T2, T3, T4, T5][number];\n\n/**\n * @description (curried assert function) check if an action is the instance of given action-creator(s)\n * @description it works with discriminated union types\n */\nexport function isActionOf(\n actionCreator: AC,\n action: { type: string }\n): action is T1;\n\n/**\n * @description (curried assert function) check if an action is the instance of given action-creator(s)\n * @description it works with discriminated union types\n * @inner If you need more than 5 arguments -> use switch\n */\nexport function isActionOf(\n actionCreators: [AC]\n): (action: A) => action is [T1][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A\n>(actionCreators: [AC, AC]): (action: A) => action is [T1, T2][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A\n>(\n actionCreators: [AC, AC, AC]\n): (action: A) => action is [T1, T2, T3][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A,\n T4 extends A\n>(\n actionCreators: [AC, AC, AC, AC]\n): (action: A) => action is [T1, T2, T3, T4][number];\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A,\n T4 extends A,\n T5 extends A\n>(\n actionCreators: [AC, AC, AC, AC, AC]\n): (action: A) => action is [T1, T2, T3, T4, T5][number];\n\n/**\n * @description (curried assert function) check if an action is the instance of given action-creator(s)\n * @description it works with discriminated union types\n */\nexport function isActionOf(\n actionCreator: AC\n): (action: A) => action is T1;\n\n/** implementation */\nexport function isActionOf<\n A extends { type: string },\n T1 extends A,\n T2 extends A,\n T3 extends A,\n T4 extends A,\n T5 extends A\n>(\n creatorOrCreators:\n | AC\n | [AC]\n | [AC, AC]\n | [AC, AC, AC]\n | [AC, AC, AC, AC]\n | [AC, AC, AC, AC, AC],\n actionOrNil?: A\n) {\n if (creatorOrCreators == null) {\n throw new Error('first argument is missing');\n }\n\n if (Array.isArray(creatorOrCreators)) {\n (creatorOrCreators as any[]).forEach((actionCreator, index) => {\n if (actionCreator.getType == null) {\n throw new Error(`first argument contains element\n that is not created with \"typesafe-actions\" at index [${index}]`);\n }\n });\n } else {\n if (creatorOrCreators.getType == null) {\n throw new Error('first argument is not created with \"typesafe-actions\"');\n }\n }\n\n const assertFn = (action: A): action is [T1, T2, T3, T4, T5][number] => {\n const actionCreators: any[] = Array.isArray(creatorOrCreators)\n ? creatorOrCreators\n : [creatorOrCreators];\n\n return actionCreators.some((actionCreator, index) => {\n return actionCreator.getType() === action.type;\n });\n };\n\n // with 1 arg return assertFn\n if (actionOrNil == null) {\n return assertFn;\n }\n // with 2 args invoke assertFn and return the result\n return assertFn(actionOrNil);\n}\n","import { StringOrSymbol } from './types';\n\nexport interface FSA {\n type: T;\n payload?: P;\n meta?: M;\n error?: E;\n}\n\n/**\n * @description create an action-creator of a given function that contains hidden \"type\" metadata\n */\nexport function createActionDeprecated<\n T extends StringOrSymbol,\n AC extends (...args: any[]) => FSA\n>(actionType: T, creatorFunction: AC): AC;\n\n/**\n * @description create an action-creator of a given function that contains hidden \"type\" metadata\n */\nexport function createActionDeprecated<\n T extends StringOrSymbol,\n AC extends () => { type: T }\n>(actionType: T): AC;\n\n/**\n * implementation\n */\nexport function createActionDeprecated<\n T extends StringOrSymbol,\n AC extends (...args: any[]) => FSA\n>(actionType: T, creatorFunction?: AC): AC {\n let actionCreator: AC;\n\n if (creatorFunction != null) {\n if (typeof creatorFunction !== 'function') {\n throw new Error('second argument is not a function');\n }\n\n actionCreator = creatorFunction as AC;\n } else {\n actionCreator = (() => ({ type: actionType })) as AC;\n }\n\n if (actionType != null) {\n if (typeof actionType !== 'string' && typeof actionType !== 'symbol') {\n throw new Error('first argument should be type of: string | symbol');\n }\n } else {\n throw new Error('first argument is missing');\n }\n\n return actionCreator;\n}\n","// type checks for all known types\n//\n// note that:\n//\n// - check by duck-typing on a property like `isUnit`, instead of checking instanceof.\n// instanceof cannot be used because that would not allow to pass data from\n// one instance of math.js to another since each has it's own instance of Unit.\n// - check the `isUnit` property via the constructor, so there will be no\n// matches for \"fake\" instances like plain objects with a property `isUnit`.\n// That is important for security reasons.\n// - It must not be possible to override the type checks used internally,\n// for security reasons, so these functions are not exposed in the expression\n// parser.\n\nexport function isNumber(x) {\n return typeof x === 'number';\n}\nexport function isBigNumber(x) {\n if (!x || typeof x !== 'object' || typeof x.constructor !== 'function') {\n return false;\n }\n if (x.isBigNumber === true && typeof x.constructor.prototype === 'object' && x.constructor.prototype.isBigNumber === true) {\n return true;\n }\n if (typeof x.constructor.isDecimal === 'function' && x.constructor.isDecimal(x) === true) {\n return true;\n }\n return false;\n}\nexport function isComplex(x) {\n return x && typeof x === 'object' && Object.getPrototypeOf(x).isComplex === true || false;\n}\nexport function isFraction(x) {\n return x && typeof x === 'object' && Object.getPrototypeOf(x).isFraction === true || false;\n}\nexport function isUnit(x) {\n return x && x.constructor.prototype.isUnit === true || false;\n}\nexport function isString(x) {\n return typeof x === 'string';\n}\nexport var isArray = Array.isArray;\nexport function isMatrix(x) {\n return x && x.constructor.prototype.isMatrix === true || false;\n}\n\n/**\n * Test whether a value is a collection: an Array or Matrix\n * @param {*} x\n * @returns {boolean} isCollection\n */\nexport function isCollection(x) {\n return Array.isArray(x) || isMatrix(x);\n}\nexport function isDenseMatrix(x) {\n return x && x.isDenseMatrix && x.constructor.prototype.isMatrix === true || false;\n}\nexport function isSparseMatrix(x) {\n return x && x.isSparseMatrix && x.constructor.prototype.isMatrix === true || false;\n}\nexport function isRange(x) {\n return x && x.constructor.prototype.isRange === true || false;\n}\nexport function isIndex(x) {\n return x && x.constructor.prototype.isIndex === true || false;\n}\nexport function isBoolean(x) {\n return typeof x === 'boolean';\n}\nexport function isResultSet(x) {\n return x && x.constructor.prototype.isResultSet === true || false;\n}\nexport function isHelp(x) {\n return x && x.constructor.prototype.isHelp === true || false;\n}\nexport function isFunction(x) {\n return typeof x === 'function';\n}\nexport function isDate(x) {\n return x instanceof Date;\n}\nexport function isRegExp(x) {\n return x instanceof RegExp;\n}\nexport function isObject(x) {\n return !!(x && typeof x === 'object' && x.constructor === Object && !isComplex(x) && !isFraction(x));\n}\nexport function isNull(x) {\n return x === null;\n}\nexport function isUndefined(x) {\n return x === undefined;\n}\nexport function isAccessorNode(x) {\n return x && x.isAccessorNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isArrayNode(x) {\n return x && x.isArrayNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isAssignmentNode(x) {\n return x && x.isAssignmentNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isBlockNode(x) {\n return x && x.isBlockNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isConditionalNode(x) {\n return x && x.isConditionalNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isConstantNode(x) {\n return x && x.isConstantNode === true && x.constructor.prototype.isNode === true || false;\n}\n\n/* Very specialized: returns true for those nodes which in the numerator of\n a fraction means that the division in that fraction has precedence over implicit\n multiplication, e.g. -2/3 x parses as (-2/3) x and 3/4 x parses as (3/4) x but\n 6!/8 x parses as 6! / (8x). It is located here because it is shared between\n parse.js and OperatorNode.js (for parsing and printing, respectively).\n\n This should *not* be exported from mathjs, unlike most of the tests here.\n Its name does not start with 'is' to prevent utils/snapshot.js from thinking\n it should be exported.\n*/\nexport function rule2Node(node) {\n return isConstantNode(node) || isOperatorNode(node) && node.args.length === 1 && isConstantNode(node.args[0]) && '-+~'.includes(node.op);\n}\nexport function isFunctionAssignmentNode(x) {\n return x && x.isFunctionAssignmentNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isFunctionNode(x) {\n return x && x.isFunctionNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isIndexNode(x) {\n return x && x.isIndexNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isNode(x) {\n return x && x.isNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isObjectNode(x) {\n return x && x.isObjectNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isOperatorNode(x) {\n return x && x.isOperatorNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isParenthesisNode(x) {\n return x && x.isParenthesisNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isRangeNode(x) {\n return x && x.isRangeNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isRelationalNode(x) {\n return x && x.isRelationalNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isSymbolNode(x) {\n return x && x.isSymbolNode === true && x.constructor.prototype.isNode === true || false;\n}\nexport function isChain(x) {\n return x && x.constructor.prototype.isChain === true || false;\n}\nexport function typeOf(x) {\n var t = typeof x;\n if (t === 'object') {\n if (x === null) return 'null';\n if (isBigNumber(x)) return 'BigNumber'; // Special: weird mashup with Decimal\n if (x.constructor && x.constructor.name) return x.constructor.name;\n return 'Object'; // just in case\n }\n\n return t; // can be 'string', 'number', 'boolean', 'function', 'bigint', ...\n}","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","import * as React from 'react';\nimport { PluginHost, PluginPositionFn } from '@devexpress/dx-core';\n\n/** @internal */\nexport interface TemplateHostInterface {\n params(...args): any;\n templates(...args): any;\n}\n\n/** @internal */\nexport const PluginHostContext = React.createContext(null);\n/** @internal */\nexport const PositionContext = React.createContext(() => []);\n/** @internal */\nexport const TemplateHostContext = React.createContext(null);\n","import * as React from 'react';\nimport { PluginPositionFn } from '@devexpress/dx-core';\nimport { PositionContext } from './contexts';\n\ntype MemoizedPluginPositionFn =\n (index: number, positionContext: PluginPositionFn) => PluginPositionFn;\n\ntype PluginIndexerProps = {\n children: React.ReactNode;\n};\n\n/** @internal */\nexport class PluginIndexer extends React.PureComponent {\n indexes: { [index: number]: PluginPositionFn } = {};\n memoize: MemoizedPluginPositionFn = (index, positionContext) => {\n if (this.indexes[index]) return this.indexes[index];\n\n const fn: PluginPositionFn = () => {\n const calculatedPosition = positionContext();\n return [...calculatedPosition, index];\n };\n this.indexes[index] = fn;\n\n return fn;\n }\n render() {\n const { children } = this.props;\n return (\n \n {positionContext => (\n React.Children.map(children, (child: any, index: number) => {\n if (!child || !child.type) return child;\n const childPosition = this.memoize(index, positionContext);\n\n return (\n \n {child}\n \n );\n })\n )}\n \n );\n }\n}\n","/** @internal */\nexport const PLUGIN_HOST_CONTEXT = 'dxcore_pluginHost_context';\n/** @internal */\nexport const POSITION_CONTEXT = 'dxcore_position_context';\n/** @internal */\nexport const TEMPLATE_HOST_CONTEXT = 'dxcore_templateHost_context';\n\n/** @internal */\nexport const RERENDER_TEMPLATE_EVENT = Symbol('rerenderTemplate');\n/** @internal */\nexport const RERENDER_TEMPLATE_SCOPE_EVENT = Symbol('rerenderTemplateScope');\n/** @internal */\nexport const UPDATE_CONNECTION_EVENT = Symbol('updateConnection');\n","import * as React from 'react';\nimport { PluginHostContext, PositionContext } from '../plugin-based/contexts';\nimport { PLUGIN_HOST_CONTEXT, POSITION_CONTEXT } from '../plugin-based/constants';\n\n/** @internal */\nexport const withContext = (Context, name) => Component => props => (\n \n {context => (\n \n )}\n \n);\n\n/** @internal */\nexport const withHostAndPosition = Component => withContext(\n PluginHostContext,\n PLUGIN_HOST_CONTEXT,\n)(withContext(PositionContext, POSITION_CONTEXT)(Component));\n","import * as React from 'react';\nimport { InnerPlugin, IDependency } from '@devexpress/dx-core';\nimport { PluginIndexer } from './plugin-indexer';\nimport { PLUGIN_HOST_CONTEXT, POSITION_CONTEXT } from './constants';\nimport { withHostAndPosition } from '../utils/with-props-from-context';\nimport { PluginContextProps } from './plugin-context-prop-types';\n\nexport interface PluginProps {\n /** React elements that expose the plugin's state and actions and render the plugin's UI. */\n children: React.ReactNode;\n name?: string;\n dependencies?: IDependency[];\n}\n\n/** @internal */\nexport class PluginBase extends React.PureComponent {\n plugin!: InnerPlugin;\n\n componentDidMount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost, [POSITION_CONTEXT]: position } = this.props;\n const { name, dependencies } = this.props;\n this.plugin = {\n position,\n name,\n dependencies,\n container: true,\n };\n pluginHost.registerPlugin(this.plugin);\n pluginHost.ensureDependencies();\n }\n\n componentDidUpdate() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n pluginHost.ensureDependencies();\n }\n\n componentWillUnmount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n pluginHost.unregisterPlugin(this.plugin);\n }\n\n render() {\n const { children } = this.props;\n return (\n \n {children}\n \n );\n }\n}\n\nexport const Plugin: React.ComponentType = withHostAndPosition(PluginBase);\n","import * as React from 'react';\nimport { shallowEqual } from '@devexpress/dx-core';\nimport {\n PLUGIN_HOST_CONTEXT, RERENDER_TEMPLATE_EVENT,\n TEMPLATE_HOST_CONTEXT, RERENDER_TEMPLATE_SCOPE_EVENT,\n} from './constants';\nimport { withContext } from '../utils/with-props-from-context';\nimport { PluginHostContext, TemplateHostContext, TemplateHostInterface } from './contexts';\nimport { PluginContextProps } from './plugin-context-prop-types';\nimport { TemplateBase } from './template';\n\nexport interface TemplatePlaceholderProps {\n /** The name of a template to be rendered. */\n name?: string;\n /** An object passed to the related template. */\n params?: object;\n children?: (content) => any;\n}\ninterface TemplateHostContextProps {\n [TEMPLATE_HOST_CONTEXT: string]: TemplateHostInterface;\n}\n\ntype Props = TemplatePlaceholderProps & PluginContextProps & TemplateHostContextProps;\n\nconst getRenderingData = (props: Props): { params?: object, templates: TemplateBase[] } => {\n const { name, params } = props;\n if (name) {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = props;\n return {\n params,\n templates: pluginHost.collect(`${name}Template`)\n .filter(template => template.predicate(params))\n .reverse(),\n };\n }\n const { [TEMPLATE_HOST_CONTEXT]: templateHost } = props;\n return {\n params: params || templateHost.params(),\n templates: templateHost.templates(),\n };\n};\n\nclass TemplatePlaceholderBase extends React.Component {\n subscription = {\n [RERENDER_TEMPLATE_EVENT]: (id: number) => {\n if (this.template && this.template.id === id) {\n this.forceUpdate();\n }\n },\n [RERENDER_TEMPLATE_SCOPE_EVENT]: (name: string) => {\n const { name: propsName } = this.props;\n if (propsName === name) {\n this.forceUpdate();\n }\n },\n };\n template: TemplateBase | null = null;\n params?: object = {};\n\n componentDidMount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n pluginHost.registerSubscription(this.subscription);\n }\n\n shouldComponentUpdate(nextProps: Props) {\n const { params, templates } = getRenderingData(nextProps);\n const [template] = templates;\n const { children } = this.props;\n\n return children !== nextProps.children\n || templates.length !== getRenderingData(this.props).templates.length\n || this.template !== template\n || !shallowEqual(this.params, params);\n }\n\n componentWillUnmount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n pluginHost.unregisterSubscription(this.subscription);\n }\n\n render() {\n const { params, templates } = getRenderingData(this.props);\n\n this.params = params;\n [this.template] = templates;\n const restTemplates = templates.slice(1);\n\n let content: ((...args) => any) | null = null;\n if (this.template) {\n const { children: templateContent } = this.template;\n\n content = templateContent() || null;\n if (content && typeof content === 'function') {\n content = content(params);\n }\n }\n\n const { children: templatePlaceholder } = this.props;\n return (\n restTemplates,\n params: () => this.params,\n }}\n >\n {templatePlaceholder ? templatePlaceholder(content) : content}\n \n );\n }\n}\n\n/** A React component to which a related Template is rendered. */\nexport const TemplatePlaceholder: React.ComponentType = withContext(\n PluginHostContext, PLUGIN_HOST_CONTEXT,\n)(\n withContext(TemplateHostContext, TEMPLATE_HOST_CONTEXT)(TemplatePlaceholderBase),\n);\n\nexport const PlaceholderWithRef: React.ComponentType = ({ params, forwardedRef }) => (\n \n);\n","import * as React from 'react';\nimport { PluginHost as PluginHostCore } from '@devexpress/dx-core';\nimport { PluginIndexer } from './plugin-indexer';\nimport { TemplatePlaceholder } from './template-placeholder';\nimport { PluginHostContext } from './contexts';\n\nexport interface PluginHostProps {\n /** Plugin React elements. */\n children: React.ReactNode;\n}\n\n/** @internal */\nclass PluginHostBase extends React.PureComponent {\n host: PluginHostCore;\n\n constructor(props: PluginHostProps) {\n super(props);\n\n this.host = new PluginHostCore();\n }\n\n render() {\n const { children } = this.props;\n\n return (\n \n \n {children}\n \n \n \n );\n }\n}\n\nexport const PluginHost: React.ComponentType = PluginHostBase;\n","import { shallowEqual } from '@devexpress/dx-core';\n\n/** @internal */\nexport const getAvailableGetters = (\n pluginHost,\n getGetterValue = getterName => pluginHost.get(`${getterName}Getter`),\n) => {\n const trackedDependencies = {};\n\n let getters;\n if (typeof Proxy !== 'undefined') {\n getters = new Proxy({}, {\n get(target, prop) {\n if (typeof prop !== 'string') return undefined;\n const result = getGetterValue(prop);\n trackedDependencies[prop] = result;\n return result;\n },\n getOwnPropertyDescriptor(target, prop) {\n return {\n configurable: true,\n enumerable: true,\n value: this.get!(target as any, prop, undefined),\n };\n },\n ownKeys() {\n return pluginHost.knownKeys('Getter');\n },\n });\n } else {\n getters = pluginHost.knownKeys('Getter')\n .reduce((acc, getterName) => {\n Object.defineProperty(acc, getterName, {\n get: () => {\n const result = getGetterValue(getterName);\n trackedDependencies[getterName] = result;\n return result;\n },\n });\n return acc;\n }, {});\n }\n\n return { getters, trackedDependencies };\n};\n\n/** @internal */\nexport const isTrackedDependenciesChanged = (\n pluginHost,\n prevTrackedDependencies,\n getGetterValue = getterName => pluginHost.get(`${getterName}Getter`),\n) => {\n const trackedDependencies = Object.keys(prevTrackedDependencies)\n // tslint:disable-next-line: prefer-object-spread\n .reduce((acc, getterName) => Object.assign(acc, {\n [getterName]: getGetterValue(getterName),\n }), {});\n\n return !shallowEqual(prevTrackedDependencies, trackedDependencies);\n};\n\n/** @internal */\nexport const getAvailableActions = (\n pluginHost,\n getAction = actionName => pluginHost.collect(`${actionName}Action`).slice().reverse()[0],\n) => {\n let actions;\n if (typeof Proxy !== 'undefined') {\n actions = new Proxy({}, {\n get(target, prop) {\n if (typeof prop !== 'string') return undefined;\n return getAction(prop);\n },\n getOwnPropertyDescriptor(target, prop) {\n return {\n configurable: true,\n enumerable: true,\n value: this.get!(target as any, prop, undefined),\n };\n },\n ownKeys() {\n return pluginHost.knownKeys('Action');\n },\n });\n } else {\n actions = pluginHost.knownKeys('Action')\n .reduce((acc, actionName) => {\n Object.defineProperty(acc, actionName, {\n get: () => getAction(actionName),\n });\n return acc;\n }, {});\n }\n return actions;\n};\n","import * as React from 'react';\nimport { InnerPlugin } from '@devexpress/dx-core';\nimport {\n getAvailableGetters,\n getAvailableActions,\n} from './helpers';\nimport { PLUGIN_HOST_CONTEXT, POSITION_CONTEXT } from './constants';\nimport { withHostAndPosition } from '../utils/with-props-from-context';\nimport { PluginContextProps } from './plugin-context-prop-types';\nimport { Getters, Actions } from '../types';\n\nexport interface ActionProps {\n /** The action name. */\n name: string;\n /** A function that is called when the action is executed. */\n action: (payload: any, getters: Getters, actions: Actions) => void;\n}\n\nclass ActionBase extends React.PureComponent {\n plugin: InnerPlugin;\n\n constructor(props) {\n super(props);\n\n const { [PLUGIN_HOST_CONTEXT]: pluginHost, [POSITION_CONTEXT]: positionContext } = props;\n const { name } = props;\n\n this.plugin = {\n position: () => positionContext(),\n [`${name}Action`]: (params) => {\n const { action } = this.props;\n const { getters } = getAvailableGetters(\n pluginHost,\n getterName => pluginHost.get(`${getterName}Getter`, this.plugin),\n );\n let nextParams = params;\n const actions = getAvailableActions(\n pluginHost,\n actionName => (actionName === name\n ? (newParams) => { nextParams = newParams; }\n : pluginHost.collect(`${actionName}Action`, this.plugin).slice().reverse()[0]),\n );\n action(params, getters, actions);\n const nextAction = pluginHost.collect(`${name}Action`, this.plugin).slice().reverse()[0];\n if (nextAction) {\n nextAction(nextParams);\n }\n },\n };\n\n pluginHost.registerPlugin(this.plugin);\n }\n\n componentWillUnmount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n\n pluginHost.unregisterPlugin(this.plugin);\n }\n\n render() {\n return null;\n }\n}\n\nexport const Action: React.ComponentType = withHostAndPosition(ActionBase);\n","import * as React from 'react';\nimport {\n isTrackedDependenciesChanged,\n getAvailableGetters,\n getAvailableActions,\n} from './helpers';\nimport { UPDATE_CONNECTION_EVENT, PLUGIN_HOST_CONTEXT, POSITION_CONTEXT } from './constants';\nimport { withHostAndPosition } from '../utils/with-props-from-context';\nimport { InnerPlugin } from '@devexpress/dx-core';\nimport { PluginContextProps } from './plugin-context-prop-types';\nimport { ComputedFn } from '../types';\n\nexport interface GetterProps {\n /** The Getter's name. */\n name: string;\n /** The shared value. */\n value?: any;\n /*** A function that calculates a value depending on the values other Getters expose.\n * The value is computed each time a related Getter's value changes.\n * Applies only if `value` is not defined.\n */\n computed?: ComputedFn;\n}\n\nclass GetterBase extends React.PureComponent {\n plugin: InnerPlugin;\n\n constructor(props) {\n super(props);\n\n const { [PLUGIN_HOST_CONTEXT]: pluginHost, [POSITION_CONTEXT]: positionContext } = props;\n const { name } = props;\n\n let lastComputed;\n let lastTrackedDependencies = {};\n let lastResult;\n\n this.plugin = {\n position: () => positionContext(),\n [`${name}Getter`]: (original) => {\n const { value, computed } = this.props;\n if (computed === undefined) return value;\n\n const getGetterValue = getterName => ((getterName === name)\n ? original\n : pluginHost.get(`${getterName}Getter`, this.plugin));\n\n if (computed === lastComputed\n && !isTrackedDependenciesChanged(pluginHost, lastTrackedDependencies, getGetterValue)) {\n return lastResult;\n }\n\n const { getters, trackedDependencies } = getAvailableGetters(pluginHost, getGetterValue);\n const actions = getAvailableActions(pluginHost);\n\n lastComputed = computed;\n lastTrackedDependencies = trackedDependencies;\n lastResult = computed(getters, actions);\n return lastResult;\n },\n };\n\n pluginHost.registerPlugin(this.plugin);\n }\n\n componentDidUpdate() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n\n pluginHost.broadcast(UPDATE_CONNECTION_EVENT);\n }\n\n componentWillUnmount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n\n pluginHost.unregisterPlugin(this.plugin);\n }\n\n render() {\n return null;\n }\n}\n\nexport const Getter: React.ComponentType = withHostAndPosition(GetterBase);\n","import * as React from 'react';\nimport { InnerPlugin } from '@devexpress/dx-core';\nimport {\n PLUGIN_HOST_CONTEXT, POSITION_CONTEXT,\n RERENDER_TEMPLATE_EVENT, RERENDER_TEMPLATE_SCOPE_EVENT,\n} from './constants';\nimport { withHostAndPosition } from '../utils/with-props-from-context';\nimport { PluginContextProps } from './plugin-context-prop-types';\n\nexport interface TemplateProps {\n // tslint:disable-next-line:max-line-length\n /** The template name. The `root` name is reserved. A template called `root` is rendered as the plugin based component's root. */\n name: string;\n // tslint:disable-next-line:max-line-length\n /** A predicate function that returns a Boolean value that specifies whether the template should be rendered. */\n predicate?: (params: object) => boolean;\n /** A markup or function that returns a markup based on the specified parameters. */\n children: React.ReactNode | ((params: object) => React.ReactNode);\n}\n\nlet globalTemplateId = 0;\n/** @internal */\nexport class TemplateBase extends React.PureComponent {\n id: number;\n plugin: InnerPlugin;\n children: () => any;\n\n constructor(props) {\n super(props);\n\n this.children = () => void 0;\n\n globalTemplateId += 1;\n this.id = globalTemplateId;\n\n const { [PLUGIN_HOST_CONTEXT]: pluginHost, [POSITION_CONTEXT]: positionContext } = props;\n const { name, predicate } = props;\n\n this.plugin = {\n position: () => positionContext(),\n [`${name}Template`]: {\n id: this.id,\n predicate: params => (predicate ? predicate(params) : true),\n children: () => {\n const { children } = this.props;\n return children;\n },\n },\n };\n pluginHost.registerPlugin(this.plugin);\n pluginHost.broadcast(RERENDER_TEMPLATE_SCOPE_EVENT, name);\n }\n\n componentDidUpdate() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n pluginHost.broadcast(RERENDER_TEMPLATE_EVENT, this.id);\n }\n\n componentWillUnmount() {\n const { [PLUGIN_HOST_CONTEXT]: pluginHost } = this.props;\n const { name } = this.props;\n pluginHost.unregisterPlugin(this.plugin);\n pluginHost.broadcast(RERENDER_TEMPLATE_SCOPE_EVENT, name);\n }\n\n render() {\n return null;\n }\n}\n\n/*** A React component that defines a markup that is rendered\n * as the corresponding TemplatePlaceholder.\n */\nexport const Template: React.ComponentType = withHostAndPosition(TemplateBase);\n","import * as React from 'react';\nimport { UPDATE_CONNECTION_EVENT } from './constants';\nimport {\n isTrackedDependenciesChanged,\n getAvailableGetters,\n getAvailableActions,\n} from './helpers';\nimport { PluginHostContext } from './contexts';\nimport { Getters, Actions } from '../types';\n\nexport interface TemplateConnectorProps {\n /** A function that renders a markup using Getters and Actions passed as arguments. */\n children: (\n getters: Getters,\n actions: Actions,\n ) => React.ReactNode;\n}\n\n/** @internal */\nclass TemplateConnectorBase extends React.Component