at the same time.');\n }\n }\n if (process.env.NODE_ENV !== 'production') {\n if (injectFirst && localOptions.jss) {\n console.error('Material-UI: You cannot use the jss and injectFirst props at the same time.');\n }\n }\n if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {\n if (!injectFirstNode) {\n var head = document.head;\n injectFirstNode = document.createComment('mui-inject-first');\n head.insertBefore(injectFirstNode, head.firstChild);\n }\n context.jss = create({\n plugins: jssPreset().plugins,\n insertionPoint: injectFirstNode\n });\n }\n return /*#__PURE__*/React.createElement(StylesContext.Provider, {\n value: context\n }, children);\n}\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? void 0 : void 0;\n}","/* eslint-disable import/prefer-default-export */\n// Global index counter to preserve source order.\n// We create the style sheet during the creation of the component,\n// children are handled after the parents, so the order of style elements would be parent->child.\n// It is a problem though when a parent passes a className\n// which needs to override any child's styles.\n// StyleSheet of the child has a higher 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.\nvar indexCounter = -1e9;\nexport function increment() {\n indexCounter += 1;\n if (process.env.NODE_ENV !== 'production') {\n if (indexCounter >= 0) {\n console.warn(['Material-UI: You might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join('\\n'));\n }\n }\n return indexCounter;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport { deepmerge } from '@material-ui/utils';\nimport noopTheme from './noopTheme';\nexport default function getStylesCreator(stylesOrCreator) {\n var themingEnabled = typeof stylesOrCreator === 'function';\n if (process.env.NODE_ENV !== 'production') {\n if (_typeof(stylesOrCreator) !== 'object' && !themingEnabled) {\n console.error(['Material-UI: The `styles` argument provided is invalid.', 'You need to provide a function generating the styles or a styles object.'].join('\\n'));\n }\n }\n return {\n create: function create(theme, name) {\n var styles;\n try {\n styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n if (themingEnabled === true && theme === noopTheme) {\n // TODO: prepend error message/name instead\n console.error(['Material-UI: The `styles` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\\n'));\n }\n }\n throw err;\n }\n if (!name || !theme.overrides || !theme.overrides[name]) {\n return styles;\n }\n var overrides = theme.overrides[name];\n var stylesWithOverrides = _extends({}, styles);\n Object.keys(overrides).forEach(function (key) {\n if (process.env.NODE_ENV !== 'production') {\n if (!stylesWithOverrides[key]) {\n console.warn(['Material-UI: You are trying to override a style that does not exist.', \"Fix the `\".concat(key, \"` key of `theme.overrides.\").concat(name, \"`.\")].join('\\n'));\n }\n }\n stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);\n });\n return stylesWithOverrides;\n },\n options: {}\n };\n}","// We use the same empty object to ref count the styles that don't need a theme object.\nvar noopTheme = {};\nexport default noopTheme;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport { getDynamicStyles } from 'jss';\nimport mergeClasses from '../mergeClasses';\nimport multiKeyStore from './multiKeyStore';\nimport useTheme from '../useTheme';\nimport { StylesContext } from '../StylesProvider';\nimport { increment } from './indexCounter';\nimport getStylesCreator from '../getStylesCreator';\nimport noopTheme from '../getStylesCreator/noopTheme';\nfunction getClasses(_ref, classes, Component) {\n var state = _ref.state,\n stylesOptions = _ref.stylesOptions;\n if (stylesOptions.disableGeneration) {\n return classes || {};\n }\n if (!state.cacheClasses) {\n state.cacheClasses = {\n // Cache for the finalized classes value.\n value: null,\n // Cache for the last used classes prop pointer.\n lastProp: null,\n // Cache for the last used rendered classes pointer.\n lastJSS: {}\n };\n } // Tracks if either the rendered classes or classes prop has changed,\n // requiring the generation of a new finalized classes object.\n\n var generate = false;\n if (state.classes !== state.cacheClasses.lastJSS) {\n state.cacheClasses.lastJSS = state.classes;\n generate = true;\n }\n if (classes !== state.cacheClasses.lastProp) {\n state.cacheClasses.lastProp = classes;\n generate = true;\n }\n if (generate) {\n state.cacheClasses.value = mergeClasses({\n baseClasses: state.cacheClasses.lastJSS,\n newClasses: classes,\n Component: Component\n });\n }\n return state.cacheClasses.value;\n}\nfunction attach(_ref2, props) {\n var state = _ref2.state,\n theme = _ref2.theme,\n stylesOptions = _ref2.stylesOptions,\n stylesCreator = _ref2.stylesCreator,\n name = _ref2.name;\n if (stylesOptions.disableGeneration) {\n return;\n }\n var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);\n if (!sheetManager) {\n sheetManager = {\n refs: 0,\n staticSheet: null,\n dynamicStyles: null\n };\n multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);\n }\n var options = _extends({}, stylesCreator.options, stylesOptions, {\n theme: theme,\n flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'\n });\n options.generateId = options.serverGenerateClassName || options.generateClassName;\n var sheetsRegistry = stylesOptions.sheetsRegistry;\n if (sheetManager.refs === 0) {\n var staticSheet;\n if (stylesOptions.sheetsCache) {\n staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);\n }\n var styles = stylesCreator.create(theme, name);\n if (!staticSheet) {\n staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({\n link: false\n }, options));\n staticSheet.attach();\n if (stylesOptions.sheetsCache) {\n multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);\n }\n }\n if (sheetsRegistry) {\n sheetsRegistry.add(staticSheet);\n }\n sheetManager.staticSheet = staticSheet;\n sheetManager.dynamicStyles = getDynamicStyles(styles);\n }\n if (sheetManager.dynamicStyles) {\n var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({\n link: true\n }, options));\n dynamicSheet.update(props);\n dynamicSheet.attach();\n state.dynamicSheet = dynamicSheet;\n state.classes = mergeClasses({\n baseClasses: sheetManager.staticSheet.classes,\n newClasses: dynamicSheet.classes\n });\n if (sheetsRegistry) {\n sheetsRegistry.add(dynamicSheet);\n }\n } else {\n state.classes = sheetManager.staticSheet.classes;\n }\n sheetManager.refs += 1;\n}\nfunction update(_ref3, props) {\n var state = _ref3.state;\n if (state.dynamicSheet) {\n state.dynamicSheet.update(props);\n }\n}\nfunction detach(_ref4) {\n var state = _ref4.state,\n theme = _ref4.theme,\n stylesOptions = _ref4.stylesOptions,\n stylesCreator = _ref4.stylesCreator;\n if (stylesOptions.disableGeneration) {\n return;\n }\n var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);\n sheetManager.refs -= 1;\n var sheetsRegistry = stylesOptions.sheetsRegistry;\n if (sheetManager.refs === 0) {\n multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);\n stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);\n if (sheetsRegistry) {\n sheetsRegistry.remove(sheetManager.staticSheet);\n }\n }\n if (state.dynamicSheet) {\n stylesOptions.jss.removeStyleSheet(state.dynamicSheet);\n if (sheetsRegistry) {\n sheetsRegistry.remove(state.dynamicSheet);\n }\n }\n}\nfunction useSynchronousEffect(func, values) {\n var key = React.useRef([]);\n var output; // Store \"generation\" key. Just returns a new object every time\n\n var currentKey = React.useMemo(function () {\n return {};\n }, values); // eslint-disable-line react-hooks/exhaustive-deps\n // \"the first render\", or \"memo dropped the value\"\n\n if (key.current !== currentKey) {\n key.current = currentKey;\n output = func();\n }\n React.useEffect(function () {\n return function () {\n if (output) {\n output();\n }\n };\n }, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps\n );\n}\n\nexport default function makeStyles(stylesOrCreator) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var name = options.name,\n classNamePrefixOption = options.classNamePrefix,\n Component = options.Component,\n _options$defaultTheme = options.defaultTheme,\n defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,\n stylesOptions2 = _objectWithoutProperties(options, [\"name\", \"classNamePrefix\", \"Component\", \"defaultTheme\"]);\n var stylesCreator = getStylesCreator(stylesOrCreator);\n var classNamePrefix = name || classNamePrefixOption || 'makeStyles';\n stylesCreator.options = {\n index: increment(),\n name: name,\n meta: classNamePrefix,\n classNamePrefix: classNamePrefix\n };\n var useStyles = function useStyles() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var theme = useTheme() || defaultTheme;\n var stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);\n var instance = React.useRef();\n var shouldUpdate = React.useRef();\n useSynchronousEffect(function () {\n var current = {\n name: name,\n state: {},\n stylesCreator: stylesCreator,\n stylesOptions: stylesOptions,\n theme: theme\n };\n attach(current, props);\n shouldUpdate.current = false;\n instance.current = current;\n return function () {\n detach(current);\n };\n }, [theme, stylesCreator]);\n React.useEffect(function () {\n if (shouldUpdate.current) {\n update(instance.current, props);\n }\n shouldUpdate.current = true;\n });\n var classes = getClasses(instance.current, props.classes, Component);\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(classes);\n }\n return classes;\n };\n return useStyles;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport { chainPropTypes, getDisplayName } from '@material-ui/utils';\nimport makeStyles from '../makeStyles';\nimport getThemeProps from '../getThemeProps';\nimport useTheme from '../useTheme'; // Link a style sheet with a component.\n// It does not modify the component passed to it;\n// instead, it returns a new component, with a `classes` property.\n\nvar withStyles = function withStyles(stylesOrCreator) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n return function (Component) {\n var defaultTheme = options.defaultTheme,\n _options$withTheme = options.withTheme,\n withTheme = _options$withTheme === void 0 ? false : _options$withTheme,\n name = options.name,\n stylesOptions = _objectWithoutProperties(options, [\"defaultTheme\", \"withTheme\", \"name\"]);\n if (process.env.NODE_ENV !== 'production') {\n if (Component === undefined) {\n throw new Error(['You are calling withStyles(styles)(Component) with an undefined component.', 'You may have forgotten to import it.'].join('\\n'));\n }\n }\n var classNamePrefix = name;\n if (process.env.NODE_ENV !== 'production') {\n if (!name) {\n // Provide a better DX outside production.\n var displayName = getDisplayName(Component);\n if (displayName !== undefined) {\n classNamePrefix = displayName;\n }\n }\n }\n var useStyles = makeStyles(stylesOrCreator, _extends({\n defaultTheme: defaultTheme,\n Component: Component,\n name: name || Component.displayName,\n classNamePrefix: classNamePrefix\n }, stylesOptions));\n var WithStyles = /*#__PURE__*/React.forwardRef(function WithStyles(props, ref) {\n var classesProp = props.classes,\n innerRef = props.innerRef,\n other = _objectWithoutProperties(props, [\"classes\", \"innerRef\"]); // The wrapper receives only user supplied props, which could be a subset of\n // the actual props Component might receive due to merging with defaultProps.\n // So copying it here would give us the same result in the wrapper as well.\n\n var classes = useStyles(_extends({}, Component.defaultProps, props));\n var theme;\n var more = other;\n if (typeof name === 'string' || withTheme) {\n // name and withTheme are invariant in the outer scope\n // eslint-disable-next-line react-hooks/rules-of-hooks\n theme = useTheme() || defaultTheme;\n if (name) {\n more = getThemeProps({\n theme: theme,\n name: name,\n props: other\n });\n } // Provide the theme to the wrapped component.\n // So we don't have to use the `withTheme()` Higher-order Component.\n\n if (withTheme && !more.theme) {\n more.theme = theme;\n }\n }\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: innerRef || ref,\n classes: classes\n }, more));\n });\n process.env.NODE_ENV !== \"production\" ? void 0 : void 0;\n if (process.env.NODE_ENV !== 'production') {\n WithStyles.displayName = \"WithStyles(\".concat(getDisplayName(Component), \")\");\n }\n hoistNonReactStatics(WithStyles, Component);\n if (process.env.NODE_ENV !== 'production') {\n // Exposed for test purposes.\n WithStyles.Naked = Component;\n WithStyles.options = options;\n WithStyles.useStyles = useStyles;\n }\n return WithStyles;\n };\n};\nexport default withStyles;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { withStyles as withStylesWithoutDefault } from '@material-ui/styles';\nimport defaultTheme from './defaultTheme';\nfunction withStyles(stylesOrCreator, options) {\n return withStylesWithoutDefault(stylesOrCreator, _extends({\n defaultTheme: defaultTheme\n }, options));\n}\nexport default withStyles;","import Stylis from 'stylis/stylis.min';\nimport _insertRulePlugin from 'stylis-rule-sheet';\nimport React, { cloneElement, createContext, Component, createElement } from 'react';\nimport unitless from '@emotion/unitless';\nimport { isElement, isValidElementType, ForwardRef } from 'react-is';\nimport memoize from 'memoize-one';\nimport validAttr from '@emotion/is-prop-valid';\nimport merge from 'merge-anything';\n\n// \n\nvar interleave = function (strings, interpolations) {\n var result = [strings[0]];\n for (var i = 0, len = interpolations.length; i < len; i += 1) {\n result.push(interpolations[i], strings[i + 1]);\n }\n return result;\n};\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\nvar classCallCheck = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\nvar createClass = function () {\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 return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\nvar _extends = Object.assign || 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};\nvar inherits = function (subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\nvar objectWithoutProperties = function (obj, keys) {\n var target = {};\n for (var i in obj) {\n if (keys.indexOf(i) >= 0) continue;\n if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n target[i] = obj[i];\n }\n return target;\n};\nvar possibleConstructorReturn = function (self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n};\n\n// \nvar isPlainObject = function (x) {\n return (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object' && x.constructor === Object;\n};\n\n// \nvar EMPTY_ARRAY = Object.freeze([]);\nvar EMPTY_OBJECT = Object.freeze({});\n\n// \nfunction isFunction(test) {\n return typeof test === 'function';\n}\n\n// \n\nfunction getComponentName(target) {\n return (process.env.NODE_ENV !== 'production' ? typeof target === 'string' && target : false) || target.displayName || target.name || 'Component';\n}\n\n// \nfunction isStatelessFunction(test) {\n return typeof test === 'function' && !(test.prototype && test.prototype.isReactComponent);\n}\n\n// \nfunction isStyledComponent(target) {\n return target && typeof target.styledComponentId === 'string';\n}\n\n// \n\nvar SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';\nvar SC_VERSION_ATTR = 'data-styled-version';\nvar SC_STREAM_ATTR = 'data-styled-streamed';\nvar IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\nvar DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || typeof process !== 'undefined' && (process.env.REACT_APP_SC_DISABLE_SPEEDY || process.env.SC_DISABLE_SPEEDY) || process.env.NODE_ENV !== 'production';\n\n// Shared empty execution context when generating static styles\nvar STATIC_EXECUTION_CONTEXT = {};\n\n// \n\n/**\n * Parse errors.md and turn it into a simple hash of code: message\n */\nvar ERRORS = process.env.NODE_ENV !== 'production' ? {\n \"1\": \"Cannot create styled-component for component: %s.\\n\\n\",\n \"2\": \"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\\n\\n- Are you trying to reuse it across renders?\\n- Are you accidentally calling collectStyles twice?\\n\\n\",\n \"3\": \"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\\n\\n\",\n \"4\": \"The `StyleSheetManager` expects a valid target or sheet prop!\\n\\n- Does this error occur on the client and is your target falsy?\\n- Does this error occur on the server and is the sheet falsy?\\n\\n\",\n \"5\": \"The clone method cannot be used on the client!\\n\\n- Are you running in a client-like environment on the server?\\n- Are you trying to run SSR on the client?\\n\\n\",\n \"6\": \"Trying to insert a new style tag, but the given Node is unmounted!\\n\\n- Are you using a custom target that isn't mounted?\\n- Does your document not have a valid head element?\\n- Have you accidentally removed a style tag manually?\\n\\n\",\n \"7\": \"ThemeProvider: Please return an object from your \\\"theme\\\" prop function, e.g.\\n\\n```js\\ntheme={() => ({})}\\n```\\n\\n\",\n \"8\": \"ThemeProvider: Please make your \\\"theme\\\" prop an object.\\n\\n\",\n \"9\": \"Missing document ``\\n\\n\",\n \"10\": \"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\\n\\n\",\n \"11\": \"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\\n\\n\",\n \"12\": \"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\\\`\\\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\\n\\n\",\n \"13\": \"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\\n\"\n} : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format() {\n var a = arguments.length <= 0 ? undefined : arguments[0];\n var b = [];\n for (var c = 1, len = arguments.length; c < len; c += 1) {\n b.push(arguments.length <= c ? undefined : arguments[c]);\n }\n b.forEach(function (d) {\n a = a.replace(/%[a-z]/, d);\n });\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\n\nvar StyledComponentsError = function (_Error) {\n inherits(StyledComponentsError, _Error);\n function StyledComponentsError(code) {\n classCallCheck(this, StyledComponentsError);\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n if (process.env.NODE_ENV === 'production') {\n var _this = possibleConstructorReturn(this, _Error.call(this, 'An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#' + code + ' for more information.' + (interpolations.length > 0 ? ' Additional arguments: ' + interpolations.join(', ') : '')));\n } else {\n var _this = possibleConstructorReturn(this, _Error.call(this, format.apply(undefined, [ERRORS[code]].concat(interpolations)).trim()));\n }\n return possibleConstructorReturn(_this);\n }\n return StyledComponentsError;\n}(Error);\n\n// \nvar SC_COMPONENT_ID = /^[^\\S\\n]*?\\/\\* sc-component-id:\\s*(\\S+)\\s+\\*\\//gm;\nvar extractComps = function (maybeCSS) {\n var css = '' + (maybeCSS || ''); // Definitely a string, and a clone\n var existingComponents = [];\n css.replace(SC_COMPONENT_ID, function (match, componentId, matchIndex) {\n existingComponents.push({\n componentId: componentId,\n matchIndex: matchIndex\n });\n return match;\n });\n return existingComponents.map(function (_ref, i) {\n var componentId = _ref.componentId,\n matchIndex = _ref.matchIndex;\n var nextComp = existingComponents[i + 1];\n var cssFromDOM = nextComp ? css.slice(matchIndex, nextComp.matchIndex) : css.slice(matchIndex);\n return {\n componentId: componentId,\n cssFromDOM: cssFromDOM\n };\n });\n};\n\n// \n\nvar COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\n\n// NOTE: This stylis instance is only used to split rules from SSR'd style tags\nvar stylisSplitter = new Stylis({\n global: false,\n cascade: true,\n keyframe: false,\n prefix: false,\n compress: false,\n semicolon: true\n});\nvar stylis = new Stylis({\n global: false,\n cascade: true,\n keyframe: false,\n prefix: true,\n compress: false,\n semicolon: false // NOTE: This means \"autocomplete missing semicolons\"\n});\n\n// Wrap `insertRulePlugin to build a list of rules,\n// and then make our own plugin to return the rules. This\n// makes it easier to hook into the existing SSR architecture\n\nvar parsingRules = [];\n\n// eslint-disable-next-line consistent-return\nvar returnRulesPlugin = function returnRulesPlugin(context) {\n if (context === -2) {\n var parsedRules = parsingRules;\n parsingRules = [];\n return parsedRules;\n }\n};\nvar parseRulesPlugin = _insertRulePlugin(function (rule) {\n parsingRules.push(rule);\n});\nvar _componentId = void 0;\nvar _selector = void 0;\nvar _selectorRegexp = void 0;\nvar selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {\n if (\n // the first self-ref is always untouched\n offset > 0 &&\n // there should be at least two self-refs to do a replacement (.b > .b)\n string.slice(0, offset).indexOf(_selector) !== -1 &&\n // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n string.slice(offset - _selector.length, offset) !== _selector) {\n return '.' + _componentId;\n }\n return match;\n};\n\n/**\n * When writing a style like\n *\n * & + & {\n * color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n */\nvar selfReferenceReplacementPlugin = function selfReferenceReplacementPlugin(context, _, selectors) {\n if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n // eslint-disable-next-line no-param-reassign\n selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n }\n};\nstylis.use([selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\nstylisSplitter.use([parseRulesPlugin, returnRulesPlugin]);\nvar splitByRules = function splitByRules(css) {\n return stylisSplitter('', css);\n};\nfunction stringifyRules(rules, selector, prefix) {\n var componentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '&';\n var flatCSS = rules.join('').replace(COMMENT_REGEX, ''); // replace JS comments\n\n var cssStr = selector && prefix ? prefix + ' ' + selector + ' { ' + flatCSS + ' }' : flatCSS;\n\n // stylis has no concept of state to be passed to plugins\n // but since JS is single=threaded, we can rely on that to ensure\n // these properties stay in sync with the current stylis run\n _componentId = componentId;\n _selector = selector;\n _selectorRegexp = new RegExp('\\\\' + _selector + '\\\\b', 'g');\n return stylis(prefix || !selector ? '' : selector, cssStr);\n}\n\n// \n/* eslint-disable camelcase, no-undef */\n\nvar getNonce = function () {\n return typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;\n};\n\n// \n/* These are helpers for the StyleTags to keep track of the injected\n * rule names for each (component) ID that they're keeping track of.\n * They're crucial for detecting whether a name has already been\n * injected.\n * (This excludes rehydrated names) */\n\n/* adds a new ID:name pairing to a names dictionary */\nvar addNameForId = function addNameForId(names, id, name) {\n if (name) {\n // eslint-disable-next-line no-param-reassign\n var namesForId = names[id] || (names[id] = Object.create(null));\n namesForId[name] = true;\n }\n};\n\n/* resets an ID entirely by overwriting it in the dictionary */\nvar resetIdNames = function resetIdNames(names, id) {\n // eslint-disable-next-line no-param-reassign\n names[id] = Object.create(null);\n};\n\n/* factory for a names dictionary checking the existance of an ID:name pairing */\nvar hasNameForId = function hasNameForId(names) {\n return function (id, name) {\n return names[id] !== undefined && names[id][name];\n };\n};\n\n/* stringifies names for the html/element output */\nvar stringifyNames = function stringifyNames(names) {\n var str = '';\n // eslint-disable-next-line guard-for-in\n for (var id in names) {\n str += Object.keys(names[id]).join(' ') + ' ';\n }\n return str.trim();\n};\n\n/* clones the nested names dictionary */\nvar cloneNames = function cloneNames(names) {\n var clone = Object.create(null);\n // eslint-disable-next-line guard-for-in\n for (var id in names) {\n clone[id] = _extends({}, names[id]);\n }\n return clone;\n};\n\n// \n\n/* These are helpers that deal with the insertRule (aka speedy) API\n * They are used in the StyleTags and specifically the speedy tag\n */\n\n/* retrieve a sheet for a given style tag */\nvar sheetForTag = function sheetForTag(tag) {\n // $FlowFixMe\n if (tag.sheet) return tag.sheet;\n\n /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */\n var size = tag.ownerDocument.styleSheets.length;\n for (var i = 0; i < size; i += 1) {\n var sheet = tag.ownerDocument.styleSheets[i];\n // $FlowFixMe\n if (sheet.ownerNode === tag) return sheet;\n }\n\n /* we should always be able to find a tag */\n throw new StyledComponentsError(10);\n};\n\n/* insert a rule safely and return whether it was actually injected */\nvar safeInsertRule = function safeInsertRule(sheet, cssRule, index) {\n /* abort early if cssRule string is falsy */\n if (!cssRule) return false;\n var maxIndex = sheet.cssRules.length;\n try {\n /* use insertRule and cap passed index with maxIndex (no of cssRules) */\n sheet.insertRule(cssRule, index <= maxIndex ? index : maxIndex);\n } catch (err) {\n /* any error indicates an invalid rule */\n return false;\n }\n return true;\n};\n\n/* deletes `size` rules starting from `removalIndex` */\nvar deleteRules = function deleteRules(sheet, removalIndex, size) {\n var lowerBound = removalIndex - size;\n for (var i = removalIndex; i > lowerBound; i -= 1) {\n sheet.deleteRule(i);\n }\n};\n\n// \n\n/* this marker separates component styles and is important for rehydration */\nvar makeTextMarker = function makeTextMarker(id) {\n return '\\n/* sc-component-id: ' + id + ' */\\n';\n};\n\n/* add up all numbers in array up until and including the index */\nvar addUpUntilIndex = function addUpUntilIndex(sizes, index) {\n var totalUpToIndex = 0;\n for (var i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n return totalUpToIndex;\n};\n\n/* create a new style tag after lastEl */\nvar makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {\n var targetDocument = document;\n if (target) targetDocument = target.ownerDocument;else if (tagEl) targetDocument = tagEl.ownerDocument;\n var el = targetDocument.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, \"4.4.1\");\n var nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n /* Work around insertRule quirk in EdgeHTML */\n el.appendChild(targetDocument.createTextNode(''));\n if (target && !tagEl) {\n /* Append to target when no previous element was passed */\n target.appendChild(el);\n } else {\n if (!tagEl || !target || !tagEl.parentNode) {\n throw new StyledComponentsError(6);\n }\n\n /* Insert new style tag after the previous one */\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n return el;\n};\n\n/* takes a css factory function and outputs an html styled tag factory */\nvar wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {\n return function (additionalAttrs) {\n var nonce = getNonce();\n var attrs = [nonce && 'nonce=\"' + nonce + '\"', SC_ATTR + '=\"' + stringifyNames(names) + '\"', SC_VERSION_ATTR + '=\"' + \"4.4.1\" + '\"', additionalAttrs];\n var htmlAttr = attrs.filter(Boolean).join(' ');\n return '';\n };\n};\n\n/* takes a css factory function and outputs an element factory */\nvar wrapAsElement = function wrapAsElement(css, names) {\n return function () {\n var _props;\n var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = \"4.4.1\", _props);\n var nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return /*#__PURE__*/React.createElement('style', _extends({}, props, {\n dangerouslySetInnerHTML: {\n __html: css()\n }\n }));\n };\n};\nvar getIdsFromMarkersFactory = function getIdsFromMarkersFactory(markers) {\n return function () {\n return Object.keys(markers);\n };\n};\n\n/* speedy tags utilise insertRule */\nvar makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {\n var names = Object.create(null);\n var markers = Object.create(null);\n var sizes = [];\n var extractImport = getImportRuleTag !== undefined;\n /* indicates whether getImportRuleTag was called */\n var usedImportRuleTag = false;\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n return markers[id];\n };\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n var sheet = sheetForTag(el);\n var insertIndex = addUpUntilIndex(sizes, marker);\n var injectedRules = 0;\n var importRules = [];\n var cssRulesSize = cssRules.length;\n for (var i = 0; i < cssRulesSize; i += 1) {\n var cssRule = cssRules[i];\n var mayHaveImport = extractImport; /* @import rules are reordered to appear first */\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(id + '-import', importRules);\n }\n sizes[marker] += injectedRules; /* add up no of injected rules */\n addNameForId(names, id, name);\n };\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n // $FlowFixMe\n if (el.isConnected === false) return;\n var size = sizes[marker];\n var sheet = sheetForTag(el);\n var removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(id + '-import');\n }\n };\n var css = function css() {\n var _sheetForTag = sheetForTag(el),\n cssRules = _sheetForTag.cssRules;\n var str = '';\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n str += makeTextMarker(id);\n var marker = markers[id];\n var end = addUpUntilIndex(sizes, marker);\n var size = sizes[marker];\n for (var i = end - size; i < end; i += 1) {\n var rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n return str;\n };\n return {\n clone: function clone() {\n throw new StyledComponentsError(5);\n },\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n};\nvar makeTextNode = function makeTextNode(targetDocument, id) {\n return targetDocument.createTextNode(makeTextMarker(id));\n};\nvar makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {\n var names = Object.create(null);\n var markers = Object.create(null);\n var extractImport = getImportRuleTag !== undefined;\n\n /* indicates whether getImportRuleTag was called */\n var usedImportRuleTag = false;\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n markers[id] = makeTextNode(el.ownerDocument, id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n return markers[id];\n };\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n var importRules = [];\n var cssRulesSize = cssRules.length;\n for (var i = 0; i < cssRulesSize; i += 1) {\n var rule = cssRules[i];\n var mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n var separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData('' + rule + separator);\n }\n }\n addNameForId(names, id, name);\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(id + '-import', importRules);\n }\n };\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n\n /* create new empty text node and replace the current one */\n var newMarker = makeTextNode(el.ownerDocument, id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(id + '-import');\n }\n };\n var css = function css() {\n var str = '';\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n str += markers[id].data;\n }\n return str;\n };\n return {\n clone: function clone() {\n throw new StyledComponentsError(5);\n },\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n};\nvar makeServerTag = function makeServerTag(namesArg, markersArg) {\n var names = namesArg === undefined ? Object.create(null) : namesArg;\n var markers = markersArg === undefined ? Object.create(null) : markersArg;\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n return markers[id] = [''];\n };\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n var css = function css() {\n var str = '';\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n var cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n var clone = function clone() {\n var namesClone = cloneNames(names);\n var markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n return makeServerTag(namesClone, markersClone);\n };\n var tag = {\n clone: clone,\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n return tag;\n};\nvar makeTag = function makeTag(target, tagEl, forceServer, insertBefore, getImportRuleTag) {\n if (IS_BROWSER && !forceServer) {\n var el = makeStyleTag(target, tagEl, insertBefore);\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n return makeServerTag();\n};\nvar rehydrate = function rehydrate(tag, els, extracted) {\n /* add all extracted components to the new tag */\n for (var i = 0, len = extracted.length; i < len; i += 1) {\n var _extracted$i = extracted[i],\n componentId = _extracted$i.componentId,\n cssFromDOM = _extracted$i.cssFromDOM;\n var cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n /* remove old HTMLStyleElements, since they have been rehydrated */\n for (var _i = 0, _len = els.length; _i < _len; _i += 1) {\n var el = els[_i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n\n// \n\nvar SPLIT_REGEX = /\\s+/;\n\n/* determine the maximum number of components before tags are sharded */\nvar MAX_SIZE = void 0;\nif (IS_BROWSER) {\n /* in speedy mode we can keep a lot more rules in a sheet before a slowdown can be expected */\n MAX_SIZE = DISABLE_SPEEDY ? 40 : 1000;\n} else {\n /* for servers we do not need to shard at all */\n MAX_SIZE = -1;\n}\nvar sheetRunningId = 0;\nvar master = void 0;\nvar StyleSheet = function () {\n /* a map from ids to tags */\n\n /* deferred rules for a given id */\n\n /* this is used for not reinjecting rules via hasNameForId() */\n\n /* when rules for an id are removed using remove() we have to ignore rehydratedNames for it */\n\n /* a list of tags belonging to this StyleSheet */\n\n /* a tag for import rules */\n\n /* current capacity until a new tag must be created */\n\n /* children (aka clones) of this StyleSheet inheriting all and future injections */\n\n function StyleSheet() {\n var _this = this;\n var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : IS_BROWSER ? document.head : null;\n var forceServer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n classCallCheck(this, StyleSheet);\n this.getImportRuleTag = function () {\n var importRuleTag = _this.importRuleTag;\n if (importRuleTag !== undefined) {\n return importRuleTag;\n }\n var firstTag = _this.tags[0];\n var insertBefore = true;\n return _this.importRuleTag = makeTag(_this.target, firstTag ? firstTag.styleTag : null, _this.forceServer, insertBefore);\n };\n sheetRunningId += 1;\n this.id = sheetRunningId;\n this.forceServer = forceServer;\n this.target = forceServer ? null : target;\n this.tagMap = {};\n this.deferred = {};\n this.rehydratedNames = {};\n this.ignoreRehydratedNames = {};\n this.tags = [];\n this.capacity = 1;\n this.clones = [];\n }\n\n /* rehydrate all SSR'd style tags */\n\n StyleSheet.prototype.rehydrate = function rehydrate$$1() {\n if (!IS_BROWSER || this.forceServer) return this;\n var els = [];\n var extracted = [];\n var isStreamed = false;\n\n /* retrieve all of our SSR style elements from the DOM */\n var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '=\"' + \"4.4.1\" + '\"]');\n var nodesSize = nodes.length;\n\n /* abort rehydration if no previous style tags were found */\n if (!nodesSize) return this;\n for (var i = 0; i < nodesSize; i += 1) {\n var el = nodes[i];\n\n /* check if style tag is a streamed tag */\n if (!isStreamed) isStreamed = !!el.getAttribute(SC_STREAM_ATTR);\n\n /* retrieve all component names */\n var elNames = (el.getAttribute(SC_ATTR) || '').trim().split(SPLIT_REGEX);\n var elNamesSize = elNames.length;\n for (var j = 0, name; j < elNamesSize; j += 1) {\n name = elNames[j];\n /* add rehydrated name to sheet to avoid re-adding styles */\n this.rehydratedNames[name] = true;\n }\n\n /* extract all components and their CSS */\n extracted.push.apply(extracted, extractComps(el.textContent));\n\n /* store original HTMLStyleElement */\n els.push(el);\n }\n\n /* abort rehydration if nothing was extracted */\n var extractedSize = extracted.length;\n if (!extractedSize) return this;\n\n /* create a tag to be used for rehydration */\n var tag = this.makeTag(null);\n rehydrate(tag, els, extracted);\n\n /* reset capacity and adjust MAX_SIZE by the initial size of the rehydration */\n this.capacity = Math.max(1, MAX_SIZE - extractedSize);\n this.tags.push(tag);\n\n /* retrieve all component ids */\n for (var _j = 0; _j < extractedSize; _j += 1) {\n this.tagMap[extracted[_j].componentId] = tag;\n }\n return this;\n };\n\n /* retrieve a \"master\" instance of StyleSheet which is typically used when no other is available\n * The master StyleSheet is targeted by createGlobalStyle, keyframes, and components outside of any\n * StyleSheetManager's context */\n\n /* reset the internal \"master\" instance */\n StyleSheet.reset = function reset() {\n var forceServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n master = new StyleSheet(undefined, forceServer).rehydrate();\n };\n\n /* adds \"children\" to the StyleSheet that inherit all of the parents' rules\n * while their own rules do not affect the parent */\n\n StyleSheet.prototype.clone = function clone() {\n var sheet = new StyleSheet(this.target, this.forceServer);\n\n /* add to clone array */\n this.clones.push(sheet);\n\n /* clone all tags */\n sheet.tags = this.tags.map(function (tag) {\n var ids = tag.getIds();\n var newTag = tag.clone();\n\n /* reconstruct tagMap */\n for (var i = 0; i < ids.length; i += 1) {\n sheet.tagMap[ids[i]] = newTag;\n }\n return newTag;\n });\n\n /* clone other maps */\n sheet.rehydratedNames = _extends({}, this.rehydratedNames);\n sheet.deferred = _extends({}, this.deferred);\n return sheet;\n };\n\n /* force StyleSheet to create a new tag on the next injection */\n\n StyleSheet.prototype.sealAllTags = function sealAllTags() {\n this.capacity = 1;\n this.tags.forEach(function (tag) {\n // eslint-disable-next-line no-param-reassign\n tag.sealed = true;\n });\n };\n StyleSheet.prototype.makeTag = function makeTag$$1(tag) {\n var lastEl = tag ? tag.styleTag : null;\n var insertBefore = false;\n return makeTag(this.target, lastEl, this.forceServer, insertBefore, this.getImportRuleTag);\n };\n\n /* get a tag for a given componentId, assign the componentId to one, or shard */\n StyleSheet.prototype.getTagForId = function getTagForId(id) {\n /* simply return a tag, when the componentId was already assigned one */\n var prev = this.tagMap[id];\n if (prev !== undefined && !prev.sealed) {\n return prev;\n }\n var tag = this.tags[this.tags.length - 1];\n\n /* shard (create a new tag) if the tag is exhausted (See MAX_SIZE) */\n this.capacity -= 1;\n if (this.capacity === 0) {\n this.capacity = MAX_SIZE;\n tag = this.makeTag(tag);\n this.tags.push(tag);\n }\n return this.tagMap[id] = tag;\n };\n\n /* mainly for createGlobalStyle to check for its id */\n\n StyleSheet.prototype.hasId = function hasId(id) {\n return this.tagMap[id] !== undefined;\n };\n\n /* caching layer checking id+name to already have a corresponding tag and injected rules */\n\n StyleSheet.prototype.hasNameForId = function hasNameForId(id, name) {\n /* exception for rehydrated names which are checked separately */\n if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {\n return true;\n }\n var tag = this.tagMap[id];\n return tag !== undefined && tag.hasNameForId(id, name);\n };\n\n /* registers a componentId and registers it on its tag */\n\n StyleSheet.prototype.deferredInject = function deferredInject(id, cssRules) {\n /* don't inject when the id is already registered */\n if (this.tagMap[id] !== undefined) return;\n var clones = this.clones;\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].deferredInject(id, cssRules);\n }\n this.getTagForId(id).insertMarker(id);\n this.deferred[id] = cssRules;\n };\n\n /* injects rules for a given id with a name that will need to be cached */\n\n StyleSheet.prototype.inject = function inject(id, cssRules, name) {\n var clones = this.clones;\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].inject(id, cssRules, name);\n }\n var tag = this.getTagForId(id);\n\n /* add deferred rules for component */\n if (this.deferred[id] !== undefined) {\n // Combine passed cssRules with previously deferred CSS rules\n // NOTE: We cannot mutate the deferred array itself as all clones\n // do the same (see clones[i].inject)\n var rules = this.deferred[id].concat(cssRules);\n tag.insertRules(id, rules, name);\n this.deferred[id] = undefined;\n } else {\n tag.insertRules(id, cssRules, name);\n }\n };\n\n /* removes all rules for a given id, which doesn't remove its marker but resets it */\n\n StyleSheet.prototype.remove = function remove(id) {\n var tag = this.tagMap[id];\n if (tag === undefined) return;\n var clones = this.clones;\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].remove(id);\n }\n\n /* remove all rules from the tag */\n tag.removeRules(id);\n\n /* ignore possible rehydrated names */\n this.ignoreRehydratedNames[id] = true;\n\n /* delete possible deferred rules */\n this.deferred[id] = undefined;\n };\n StyleSheet.prototype.toHTML = function toHTML() {\n return this.tags.map(function (tag) {\n return tag.toHTML();\n }).join('');\n };\n StyleSheet.prototype.toReactElements = function toReactElements() {\n var id = this.id;\n return this.tags.map(function (tag, i) {\n var key = 'sc-' + id + '-' + i;\n return /*#__PURE__*/cloneElement(tag.toElement(), {\n key: key\n });\n });\n };\n createClass(StyleSheet, null, [{\n key: 'master',\n get: function get$$1() {\n return master || (master = new StyleSheet().rehydrate());\n }\n\n /* NOTE: This is just for backwards-compatibility with jest-styled-components */\n }, {\n key: 'instance',\n get: function get$$1() {\n return StyleSheet.master;\n }\n }]);\n return StyleSheet;\n}();\n\n// \n\nvar Keyframes = function () {\n function Keyframes(name, rules) {\n var _this = this;\n classCallCheck(this, Keyframes);\n this.inject = function (styleSheet) {\n if (!styleSheet.hasNameForId(_this.id, _this.name)) {\n styleSheet.inject(_this.id, _this.rules, _this.name);\n }\n };\n this.toString = function () {\n throw new StyledComponentsError(12, String(_this.name));\n };\n this.name = name;\n this.rules = rules;\n this.id = 'sc-keyframes-' + name;\n }\n Keyframes.prototype.getName = function getName() {\n return this.name;\n };\n return Keyframes;\n}();\n\n// \n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nvar uppercasePattern = /([A-Z])/g;\nvar msPattern = /^ms-/;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n * > hyphenateStyleName('backgroundColor')\n * < \"background-color\"\n * > hyphenateStyleName('MozTransition')\n * < \"-moz-transition\"\n * > hyphenateStyleName('msTransition')\n * < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nfunction hyphenateStyleName(string) {\n return string.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');\n}\n\n// \n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nfunction addUnitIfNeeded(name, value) {\n // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n // $FlowFixMe\n if (value == null || typeof value === 'boolean' || value === '') {\n return '';\n }\n if (typeof value === 'number' && value !== 0 && !(name in unitless)) {\n return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers\n }\n\n return String(value).trim();\n}\n\n// \n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nvar isFalsish = function isFalsish(chunk) {\n return chunk === undefined || chunk === null || chunk === false || chunk === '';\n};\nvar objToCssArray = function objToCssArray(obj, prevKey) {\n var rules = [];\n var keys = Object.keys(obj);\n keys.forEach(function (key) {\n if (!isFalsish(obj[key])) {\n if (isPlainObject(obj[key])) {\n rules.push.apply(rules, objToCssArray(obj[key], key));\n return rules;\n } else if (isFunction(obj[key])) {\n rules.push(hyphenateStyleName(key) + ':', obj[key], ';');\n return rules;\n }\n rules.push(hyphenateStyleName(key) + ': ' + addUnitIfNeeded(key, obj[key]) + ';');\n }\n return rules;\n });\n return prevKey ? [prevKey + ' {'].concat(rules, ['}']) : rules;\n};\nfunction flatten(chunk, executionContext, styleSheet) {\n if (Array.isArray(chunk)) {\n var ruleSet = [];\n for (var i = 0, len = chunk.length, result; i < len; i += 1) {\n result = flatten(chunk[i], executionContext, styleSheet);\n if (result === null) continue;else if (Array.isArray(result)) ruleSet.push.apply(ruleSet, result);else ruleSet.push(result);\n }\n return ruleSet;\n }\n if (isFalsish(chunk)) {\n return null;\n }\n\n /* Handle other components */\n if (isStyledComponent(chunk)) {\n return '.' + chunk.styledComponentId;\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (isStatelessFunction(chunk) && executionContext) {\n var _result = chunk(executionContext);\n if (process.env.NODE_ENV !== 'production' && isElement(_result)) {\n // eslint-disable-next-line no-console\n console.warn(getComponentName(chunk) + ' is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.');\n }\n return flatten(_result, executionContext, styleSheet);\n } else return chunk;\n }\n if (chunk instanceof Keyframes) {\n if (styleSheet) {\n chunk.inject(styleSheet);\n return chunk.getName();\n } else return chunk;\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCssArray(chunk) : chunk.toString();\n}\n\n// \n\nfunction css(styles) {\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n if (isFunction(styles) || isPlainObject(styles)) {\n // $FlowFixMe\n return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));\n }\n\n // $FlowFixMe\n return flatten(interleave(styles, interpolations));\n}\n\n// \n\nfunction constructWithOptions(componentConstructor, tag) {\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT;\n if (!isValidElementType(tag)) {\n throw new StyledComponentsError(1, String(tag));\n }\n\n /* This is callable directly as a template function */\n // $FlowFixMe: Not typed to avoid destructuring arguments\n var templateFunction = function templateFunction() {\n return componentConstructor(tag, options, css.apply(undefined, arguments));\n };\n\n /* If config methods are called, wrap up a new template function and merge options */\n templateFunction.withConfig = function (config) {\n return constructWithOptions(componentConstructor, tag, _extends({}, options, config));\n };\n\n /* Modify/inject new props at runtime */\n templateFunction.attrs = function (attrs) {\n return constructWithOptions(componentConstructor, tag, _extends({}, options, {\n attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean)\n }));\n };\n return templateFunction;\n}\n\n// \n// Source: https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js\nfunction murmurhash(c) {\n for (var e = c.length | 0, a = e | 0, d = 0, b; e >= 4;) {\n b = c.charCodeAt(d) & 255 | (c.charCodeAt(++d) & 255) << 8 | (c.charCodeAt(++d) & 255) << 16 | (c.charCodeAt(++d) & 255) << 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), b ^= b >>> 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16) ^ b, e -= 4, ++d;\n }\n switch (e) {\n case 3:\n a ^= (c.charCodeAt(d + 2) & 255) << 16;\n case 2:\n a ^= (c.charCodeAt(d + 1) & 255) << 8;\n case 1:\n a ^= c.charCodeAt(d) & 255, a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n }\n a ^= a >>> 13;\n a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n return (a ^ a >>> 15) >>> 0;\n}\n\n// \n/* eslint-disable no-bitwise */\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\nvar charsLength = 52;\n\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\nvar getAlphabeticChar = function getAlphabeticChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n};\n\n/* input a number, usually a hash and convert it to base-52 */\nfunction generateAlphabeticName(code) {\n var name = '';\n var x = void 0;\n\n /* get a char and divide by alphabet-length */\n for (x = code; x > charsLength; x = Math.floor(x / charsLength)) {\n name = getAlphabeticChar(x % charsLength) + name;\n }\n return getAlphabeticChar(x % charsLength) + name;\n}\n\n// \n\nfunction hasFunctionObjectKey(obj) {\n // eslint-disable-next-line guard-for-in, no-restricted-syntax\n for (var key in obj) {\n if (isFunction(obj[key])) {\n return true;\n }\n }\n return false;\n}\nfunction isStaticRules(rules, attrs) {\n for (var i = 0; i < rules.length; i += 1) {\n var rule = rules[i];\n\n // recursive case\n if (Array.isArray(rule) && !isStaticRules(rule, attrs)) {\n return false;\n } else 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 if (attrs.some(function (x) {\n return isFunction(x) || hasFunctionObjectKey(x);\n })) return false;\n return true;\n}\n\n// \n\n/* combines hashStr (murmurhash) and nameGenerator for convenience */\nvar hasher = function hasher(str) {\n return generateAlphabeticName(murmurhash(str));\n};\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\n\nvar ComponentStyle = function () {\n function ComponentStyle(rules, attrs, componentId) {\n classCallCheck(this, ComponentStyle);\n this.rules = rules;\n this.isStatic = process.env.NODE_ENV === 'production' && isStaticRules(rules, attrs);\n this.componentId = componentId;\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n\n /*\n * Flattens a rule set into valid CSS\n * Hashes it, wraps the whole chunk in a .hash1234 {}\n * Returns the hash to be injected on render()\n * */\n\n ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {\n var isStatic = this.isStatic,\n componentId = this.componentId,\n lastClassName = this.lastClassName;\n if (IS_BROWSER && isStatic && typeof lastClassName === 'string' && styleSheet.hasNameForId(componentId, lastClassName)) {\n return lastClassName;\n }\n var flatCSS = flatten(this.rules, executionContext, styleSheet);\n var name = hasher(this.componentId + flatCSS.join(''));\n if (!styleSheet.hasNameForId(componentId, name)) {\n styleSheet.inject(this.componentId, stringifyRules(flatCSS, '.' + name, undefined, componentId), name);\n }\n this.lastClassName = name;\n return name;\n };\n ComponentStyle.generateName = function generateName(str) {\n return hasher(str);\n };\n return ComponentStyle;\n}();\n\n// \n\nvar LIMIT = 200;\nvar createWarnTooManyClasses = function (displayName) {\n var generatedClasses = {};\n var warningSeen = false;\n return function (className) {\n if (!warningSeen) {\n generatedClasses[className] = true;\n if (Object.keys(generatedClasses).length >= LIMIT) {\n // Unable to find latestRule in test environment.\n /* eslint-disable no-console, prefer-template */\n console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \\n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\\n' + 'Example:\\n' + ' const Component = styled.div.attrs(props => ({\\n' + ' style: {\\n' + ' background: props.background,\\n' + ' },\\n' + ' }))`width: 100%;`\\n\\n' + ' ');\n warningSeen = true;\n generatedClasses = {};\n }\n }\n };\n};\n\n// \n\nvar determineTheme = function (props, fallbackTheme) {\n var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT;\n\n // Props should take precedence over ThemeProvider, which should take precedence over\n // defaultProps, but React automatically puts defaultProps on props.\n\n /* eslint-disable react/prop-types, flowtype-errors/show-errors */\n var isDefaultTheme = defaultProps ? props.theme === defaultProps.theme : false;\n var theme = props.theme && !isDefaultTheme ? props.theme : fallbackTheme || defaultProps.theme;\n /* eslint-enable */\n\n return theme;\n};\n\n// \nvar escapeRegex = /[[\\].#*$><+~=|^:(),\"'`-]+/g;\nvar dashesAtEnds = /(^-|-$)/g;\n\n/**\n * TODO: Explore using CSS.escape when it becomes more available\n * in evergreen browsers.\n */\nfunction escape(str) {\n return str\n // Replace all possible CSS selectors\n .replace(escapeRegex, '-')\n\n // Remove extraneous hyphens at the start and end\n .replace(dashesAtEnds, '');\n}\n\n// \n\nfunction isTag(target) {\n return typeof target === 'string' && (process.env.NODE_ENV !== 'production' ? target.charAt(0) === target.charAt(0).toLowerCase() : true);\n}\n\n// \n\nfunction generateDisplayName(target) {\n // $FlowFixMe\n return isTag(target) ? 'styled.' + target : 'Styled(' + getComponentName(target) + ')';\n}\nvar _TYPE_STATICS;\nvar REACT_STATICS = {\n childContextTypes: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDerivedStateFromProps: true,\n propTypes: true,\n type: true\n};\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\nvar TYPE_STATICS = (_TYPE_STATICS = {}, _TYPE_STATICS[ForwardRef] = {\n $$typeof: true,\n render: true\n}, _TYPE_STATICS);\nvar defineProperty$1 = Object.defineProperty,\n getOwnPropertyNames = Object.getOwnPropertyNames,\n _Object$getOwnPropert = Object.getOwnPropertySymbols,\n getOwnPropertySymbols = _Object$getOwnPropert === undefined ? function () {\n return [];\n } : _Object$getOwnPropert,\n getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,\n getPrototypeOf = Object.getPrototypeOf,\n objectPrototype = Object.prototype;\nvar arrayPrototype = Array.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n var inheritedComponent = getPrototypeOf(sourceComponent);\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n var keys = arrayPrototype.concat(getOwnPropertyNames(sourceComponent),\n // $FlowFixMe\n getOwnPropertySymbols(sourceComponent));\n var targetStatics = TYPE_STATICS[targetComponent.$$typeof] || REACT_STATICS;\n var sourceStatics = TYPE_STATICS[sourceComponent.$$typeof] || REACT_STATICS;\n var i = keys.length;\n var descriptor = void 0;\n var key = void 0;\n\n // eslint-disable-next-line no-plusplus\n while (i--) {\n key = keys[i];\n if (\n // $FlowFixMe\n !KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) &&\n // $FlowFixMe\n !(targetStatics && targetStatics[key])) {\n descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n if (descriptor) {\n try {\n // Avoid failures from read-only properties\n defineProperty$1(targetComponent, key, descriptor);\n } catch (e) {\n /* fail silently */\n }\n }\n }\n }\n return targetComponent;\n }\n return targetComponent;\n}\n\n// \nfunction isDerivedReactComponent(fn) {\n return !!(fn && fn.prototype && fn.prototype.isReactComponent);\n}\n\n// \n// Helper to call a given function, only once\nvar once = function (cb) {\n var called = false;\n return function () {\n if (!called) {\n called = true;\n cb.apply(undefined, arguments);\n }\n };\n};\n\n// \n\nvar ThemeContext = /*#__PURE__*/createContext();\nvar ThemeConsumer = ThemeContext.Consumer;\n\n/**\n * Provide a theme to an entire react component tree via context\n */\n\nvar ThemeProvider = function (_Component) {\n inherits(ThemeProvider, _Component);\n function ThemeProvider(props) {\n classCallCheck(this, ThemeProvider);\n var _this = possibleConstructorReturn(this, _Component.call(this, props));\n _this.getContext = memoize(_this.getContext.bind(_this));\n _this.renderInner = _this.renderInner.bind(_this);\n return _this;\n }\n ThemeProvider.prototype.render = function render() {\n if (!this.props.children) return null;\n return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, this.renderInner);\n };\n ThemeProvider.prototype.renderInner = function renderInner(outerTheme) {\n var context = this.getContext(this.props.theme, outerTheme);\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: context\n }, this.props.children);\n };\n\n /**\n * Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n */\n\n ThemeProvider.prototype.getTheme = function getTheme(theme, outerTheme) {\n if (isFunction(theme)) {\n var mergedTheme = theme(outerTheme);\n if (process.env.NODE_ENV !== 'production' && (mergedTheme === null || Array.isArray(mergedTheme) || (typeof mergedTheme === 'undefined' ? 'undefined' : _typeof(mergedTheme)) !== 'object')) {\n throw new StyledComponentsError(7);\n }\n return mergedTheme;\n }\n if (theme === null || Array.isArray(theme) || (typeof theme === 'undefined' ? 'undefined' : _typeof(theme)) !== 'object') {\n throw new StyledComponentsError(8);\n }\n return _extends({}, outerTheme, theme);\n };\n ThemeProvider.prototype.getContext = function getContext(theme, outerTheme) {\n return this.getTheme(theme, outerTheme);\n };\n return ThemeProvider;\n}(Component);\n\n// \n\nvar CLOSING_TAG_R = /^\\s*<\\/[a-z]/i;\nvar ServerStyleSheet = function () {\n function ServerStyleSheet() {\n classCallCheck(this, ServerStyleSheet);\n\n /* The master sheet might be reset, so keep a reference here */\n this.masterSheet = StyleSheet.master;\n this.instance = this.masterSheet.clone();\n this.sealed = false;\n }\n\n /**\n * Mark the ServerStyleSheet as being fully emitted and manually GC it from the\n * StyleSheet singleton.\n */\n\n ServerStyleSheet.prototype.seal = function seal() {\n if (!this.sealed) {\n /* Remove sealed StyleSheets from the master sheet */\n var index = this.masterSheet.clones.indexOf(this.instance);\n this.masterSheet.clones.splice(index, 1);\n this.sealed = true;\n }\n };\n ServerStyleSheet.prototype.collectStyles = function collectStyles(children) {\n if (this.sealed) {\n throw new StyledComponentsError(2);\n }\n return /*#__PURE__*/React.createElement(StyleSheetManager, {\n sheet: this.instance\n }, children);\n };\n ServerStyleSheet.prototype.getStyleTags = function getStyleTags() {\n this.seal();\n return this.instance.toHTML();\n };\n ServerStyleSheet.prototype.getStyleElement = function getStyleElement() {\n this.seal();\n return this.instance.toReactElements();\n };\n ServerStyleSheet.prototype.interleaveWithNodeStream = function interleaveWithNodeStream(readableStream) {\n var _this = this;\n {\n throw new StyledComponentsError(3);\n }\n\n /* the tag index keeps track of which tags have already been emitted */\n var instance = this.instance;\n var instanceTagIndex = 0;\n var streamAttr = SC_STREAM_ATTR + '=\"true\"';\n var transformer = new stream.Transform({\n transform: function appendStyleChunks(chunk, /* encoding */_, callback) {\n var tags = instance.tags;\n var html = '';\n\n /* retrieve html for each new style tag */\n for (; instanceTagIndex < tags.length; instanceTagIndex += 1) {\n var tag = tags[instanceTagIndex];\n html += tag.toHTML(streamAttr);\n }\n\n /* force our StyleSheets to emit entirely new tags */\n instance.sealAllTags();\n var renderedHtml = chunk.toString();\n\n /* prepend style html to chunk, unless the start of the chunk is a closing tag in which case append right after that */\n if (CLOSING_TAG_R.test(renderedHtml)) {\n var endOfClosingTag = renderedHtml.indexOf('>');\n this.push(renderedHtml.slice(0, endOfClosingTag + 1) + html + renderedHtml.slice(endOfClosingTag + 1));\n } else this.push(html + renderedHtml);\n callback();\n }\n });\n readableStream.on('end', function () {\n return _this.seal();\n });\n readableStream.on('error', function (err) {\n _this.seal();\n\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n return readableStream.pipe(transformer);\n };\n return ServerStyleSheet;\n}();\n\n// \n\nvar StyleSheetContext = /*#__PURE__*/createContext();\nvar StyleSheetConsumer = StyleSheetContext.Consumer;\nvar StyleSheetManager = function (_Component) {\n inherits(StyleSheetManager, _Component);\n function StyleSheetManager(props) {\n classCallCheck(this, StyleSheetManager);\n var _this = possibleConstructorReturn(this, _Component.call(this, props));\n _this.getContext = memoize(_this.getContext);\n return _this;\n }\n StyleSheetManager.prototype.getContext = function getContext(sheet, target) {\n if (sheet) {\n return sheet;\n } else if (target) {\n return new StyleSheet(target);\n } else {\n throw new StyledComponentsError(4);\n }\n };\n StyleSheetManager.prototype.render = function render() {\n var _props = this.props,\n children = _props.children,\n sheet = _props.sheet,\n target = _props.target;\n return /*#__PURE__*/React.createElement(StyleSheetContext.Provider, {\n value: this.getContext(sheet, target)\n }, process.env.NODE_ENV !== 'production' ? React.Children.only(children) : children);\n };\n return StyleSheetManager;\n}(Component);\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\n\n// \n\nvar identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(_ComponentStyle, _displayName, parentComponentId) {\n var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n /**\n * This ensures uniqueness if two components happen to share\n * the same displayName.\n */\n var nr = (identifiers[displayName] || 0) + 1;\n identifiers[displayName] = nr;\n var componentId = displayName + '-' + _ComponentStyle.generateName(displayName + nr);\n return parentComponentId ? parentComponentId + '-' + componentId : componentId;\n}\n\n// $FlowFixMe\n\nvar StyledComponent = function (_Component) {\n inherits(StyledComponent, _Component);\n function StyledComponent() {\n classCallCheck(this, StyledComponent);\n var _this = possibleConstructorReturn(this, _Component.call(this));\n _this.attrs = {};\n _this.renderOuter = _this.renderOuter.bind(_this);\n _this.renderInner = _this.renderInner.bind(_this);\n if (process.env.NODE_ENV !== 'production') {\n _this.warnInnerRef = once(function (displayName) {\n return (\n // eslint-disable-next-line no-console\n console.warn('The \"innerRef\" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use \"ref\" instead like a typical component. \"innerRef\" was detected on component \"' + displayName + '\".')\n );\n });\n _this.warnAttrsFnObjectKeyDeprecated = once(function (key, displayName) {\n return (\n // eslint-disable-next-line no-console\n console.warn('Functions as object-form attrs({}) keys are now deprecated and will be removed in a future version of styled-components. Switch to the new attrs(props => ({})) syntax instead for easier and more powerful composition. The attrs key in question is \"' + key + '\" on component \"' + displayName + '\".', '\\n ' + new Error().stack)\n );\n });\n _this.warnNonStyledComponentAttrsObjectKey = once(function (key, displayName) {\n return (\n // eslint-disable-next-line no-console\n console.warn('It looks like you\\'ve used a non styled-component as the value for the \"' + key + '\" prop in an object-form attrs constructor of \"' + displayName + '\".\\n' + 'You should use the new function-form attrs constructor which avoids this issue: attrs(props => ({ yourStuff }))\\n' + \"To continue using the deprecated object syntax, you'll need to wrap your component prop in a function to make it available inside the styled component (you'll still get the deprecation warning though.)\\n\" + ('For example, { ' + key + ': () => InnerComponent } instead of { ' + key + ': InnerComponent }'))\n );\n });\n }\n return _this;\n }\n StyledComponent.prototype.render = function render() {\n return /*#__PURE__*/React.createElement(StyleSheetConsumer, null, this.renderOuter);\n };\n StyledComponent.prototype.renderOuter = function renderOuter() {\n var styleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : StyleSheet.master;\n this.styleSheet = styleSheet;\n\n // No need to subscribe a static component to theme changes, it won't change anything\n if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n return /*#__PURE__*/React.createElement(ThemeConsumer, null, this.renderInner);\n };\n StyledComponent.prototype.renderInner = function renderInner(theme) {\n var _props$forwardedCompo = this.props.forwardedComponent,\n componentStyle = _props$forwardedCompo.componentStyle,\n defaultProps = _props$forwardedCompo.defaultProps,\n displayName = _props$forwardedCompo.displayName,\n foldedComponentIds = _props$forwardedCompo.foldedComponentIds,\n styledComponentId = _props$forwardedCompo.styledComponentId,\n target = _props$forwardedCompo.target;\n var generatedClassName = void 0;\n if (componentStyle.isStatic) {\n generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n } else {\n generatedClassName = this.generateAndInjectStyles(determineTheme(this.props, theme, defaultProps) || EMPTY_OBJECT, this.props);\n }\n var elementToBeCreated = this.props.as || this.attrs.as || target;\n var isTargetTag = isTag(elementToBeCreated);\n var propsForElement = {};\n var computedProps = _extends({}, this.props, this.attrs);\n var key = void 0;\n // eslint-disable-next-line guard-for-in\n for (key in computedProps) {\n if (process.env.NODE_ENV !== 'production' && key === 'innerRef' && isTargetTag) {\n this.warnInnerRef(displayName);\n }\n if (key === 'forwardedComponent' || key === 'as') {\n continue;\n } else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];else if (key === 'forwardedAs') propsForElement.as = computedProps[key];else if (!isTargetTag || validAttr(key)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n if (this.props.style && this.attrs.style) {\n propsForElement.style = _extends({}, this.attrs.style, this.props.style);\n }\n propsForElement.className = Array.prototype.concat(foldedComponentIds, styledComponentId, generatedClassName !== styledComponentId ? generatedClassName : null, this.props.className, this.attrs.className).filter(Boolean).join(' ');\n return /*#__PURE__*/createElement(elementToBeCreated, propsForElement);\n };\n StyledComponent.prototype.buildExecutionContext = function buildExecutionContext(theme, props, attrs) {\n var _this2 = this;\n var context = _extends({}, props, {\n theme: theme\n });\n if (!attrs.length) return context;\n this.attrs = {};\n attrs.forEach(function (attrDef) {\n var resolvedAttrDef = attrDef;\n var attrDefWasFn = false;\n var attr = void 0;\n var key = void 0;\n if (isFunction(resolvedAttrDef)) {\n // $FlowFixMe\n resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n /* eslint-disable guard-for-in */\n // $FlowFixMe\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (process.env.NODE_ENV !== 'production') {\n _this2.warnAttrsFnObjectKeyDeprecated(key, props.forwardedComponent.displayName);\n }\n attr = attr(context);\n if (process.env.NODE_ENV !== 'production' && /*#__PURE__*/React.isValidElement(attr)) {\n _this2.warnNonStyledComponentAttrsObjectKey(key, props.forwardedComponent.displayName);\n }\n }\n }\n _this2.attrs[key] = attr;\n context[key] = attr;\n }\n /* eslint-enable */\n });\n\n return context;\n };\n StyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {\n var _props$forwardedCompo2 = props.forwardedComponent,\n attrs = _props$forwardedCompo2.attrs,\n componentStyle = _props$forwardedCompo2.componentStyle,\n warnTooManyClasses = _props$forwardedCompo2.warnTooManyClasses;\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\n if (componentStyle.isStatic && !attrs.length) {\n return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n }\n var className = componentStyle.generateAndInjectStyles(this.buildExecutionContext(theme, props, attrs), this.styleSheet);\n if (process.env.NODE_ENV !== 'production' && warnTooManyClasses) warnTooManyClasses(className);\n return className;\n };\n return StyledComponent;\n}(Component);\nfunction createStyledComponent(target, options, rules) {\n var isTargetStyledComp = isStyledComponent(target);\n var isClass = !isTag(target);\n var _options$displayName = options.displayName,\n displayName = _options$displayName === undefined ? generateDisplayName(target) : _options$displayName,\n _options$componentId = options.componentId,\n componentId = _options$componentId === undefined ? generateId(ComponentStyle, options.displayName, options.parentComponentId) : _options$componentId,\n _options$ParentCompon = options.ParentComponent,\n ParentComponent = _options$ParentCompon === undefined ? StyledComponent : _options$ParentCompon,\n _options$attrs = options.attrs,\n attrs = _options$attrs === undefined ? EMPTY_ARRAY : _options$attrs;\n var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n var finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;\n var componentStyle = new ComponentStyle(isTargetStyledComp ?\n // fold the underlying StyledComponent rules up (implicit extend)\n // $FlowFixMe\n target.componentStyle.rules.concat(rules) : rules, finalAttrs, styledComponentId);\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 var WrappedStyledComponent = void 0;\n var forwardRef = function forwardRef(props, ref) {\n return /*#__PURE__*/React.createElement(ParentComponent, _extends({}, props, {\n forwardedComponent: WrappedStyledComponent,\n forwardedRef: ref\n }));\n };\n forwardRef.displayName = displayName;\n WrappedStyledComponent = /*#__PURE__*/React.forwardRef(forwardRef);\n WrappedStyledComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledComponent.attrs = finalAttrs;\n // $FlowFixMe\n WrappedStyledComponent.componentStyle = componentStyle;\n\n // $FlowFixMe\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ?\n // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId) : EMPTY_ARRAY;\n\n // $FlowFixMe\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n // $FlowFixMe\n WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag) {\n var previousComponentId = options.componentId,\n optionsToCopy = objectWithoutProperties(options, ['componentId']);\n var newComponentId = previousComponentId && previousComponentId + '-' + (isTag(tag) ? tag : escape(getComponentName(tag)));\n var newOptions = _extends({}, optionsToCopy, {\n attrs: finalAttrs,\n componentId: newComponentId,\n ParentComponent: ParentComponent\n });\n return createStyledComponent(tag, newOptions, rules);\n };\n\n // $FlowFixMe\n Object.defineProperty(WrappedStyledComponent, 'defaultProps', {\n get: function get$$1() {\n return this._foldedDefaultProps;\n },\n set: function set$$1(obj) {\n // $FlowFixMe\n this._foldedDefaultProps = isTargetStyledComp ? merge(target.defaultProps, obj) : obj;\n }\n });\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n WrappedStyledComponent.warnTooManyClasses = createWarnTooManyClasses(displayName);\n }\n\n // $FlowFixMe\n WrappedStyledComponent.toString = function () {\n return '.' + WrappedStyledComponent.styledComponentId;\n };\n if (isClass) {\n hoistNonReactStatics(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n styledComponentId: true,\n target: true,\n withComponent: true\n });\n }\n return WrappedStyledComponent;\n}\n\n// \n// Thanks to ReactDOMFactories for this handy list!\n\nvar domElements = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',\n// SVG\n'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];\n\n// \n\nvar styled = function styled(tag) {\n return constructWithOptions(createStyledComponent, tag);\n};\n\n// Shorthands for all valid HTML Elements\ndomElements.forEach(function (domElement) {\n styled[domElement] = styled(domElement);\n});\n\n// \n\nvar GlobalStyle = function () {\n function GlobalStyle(rules, componentId) {\n classCallCheck(this, GlobalStyle);\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n GlobalStyle.prototype.createStyles = function createStyles(executionContext, styleSheet) {\n var flatCSS = flatten(this.rules, executionContext, styleSheet);\n var css = stringifyRules(flatCSS, '');\n styleSheet.inject(this.componentId, css);\n };\n GlobalStyle.prototype.removeStyles = function removeStyles(styleSheet) {\n var componentId = this.componentId;\n if (styleSheet.hasId(componentId)) {\n styleSheet.remove(componentId);\n }\n };\n\n // TODO: overwrite in-place instead of remove+create?\n\n GlobalStyle.prototype.renderStyles = function renderStyles(executionContext, styleSheet) {\n this.removeStyles(styleSheet);\n this.createStyles(executionContext, styleSheet);\n };\n return GlobalStyle;\n}();\n\n// \n\n// place our cache into shared context so it'll persist between HMRs\nif (IS_BROWSER) {\n window.scCGSHMRCache = {};\n}\nfunction createGlobalStyle(strings) {\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n var rules = css.apply(undefined, [strings].concat(interpolations));\n var id = 'sc-global-' + murmurhash(JSON.stringify(rules));\n var style = new GlobalStyle(rules, id);\n var GlobalStyleComponent = function (_React$Component) {\n inherits(GlobalStyleComponent, _React$Component);\n function GlobalStyleComponent(props) {\n classCallCheck(this, GlobalStyleComponent);\n var _this = possibleConstructorReturn(this, _React$Component.call(this, props));\n var _this$constructor = _this.constructor,\n globalStyle = _this$constructor.globalStyle,\n styledComponentId = _this$constructor.styledComponentId;\n if (IS_BROWSER) {\n window.scCGSHMRCache[styledComponentId] = (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n }\n\n /**\n * This fixes HMR compatibility. Don't ask me why, but this combination of\n * caching the closure variables via statics and then persisting the statics in\n * state works across HMR where no other combination did. ¯\\_(ツ)_/¯\n */\n _this.state = {\n globalStyle: globalStyle,\n styledComponentId: styledComponentId\n };\n return _this;\n }\n GlobalStyleComponent.prototype.componentWillUnmount = function componentWillUnmount() {\n if (window.scCGSHMRCache[this.state.styledComponentId]) {\n window.scCGSHMRCache[this.state.styledComponentId] -= 1;\n }\n /**\n * Depending on the order \"render\" is called this can cause the styles to be lost\n * until the next render pass of the remaining instance, which may\n * not be immediate.\n */\n if (window.scCGSHMRCache[this.state.styledComponentId] === 0) {\n this.state.globalStyle.removeStyles(this.styleSheet);\n }\n };\n GlobalStyleComponent.prototype.render = function render() {\n var _this2 = this;\n if (process.env.NODE_ENV !== 'production' && React.Children.count(this.props.children)) {\n // eslint-disable-next-line no-console\n console.warn('The global style component ' + this.state.styledComponentId + ' was given child JSX. createGlobalStyle does not render children.');\n }\n return /*#__PURE__*/React.createElement(StyleSheetConsumer, null, function (styleSheet) {\n _this2.styleSheet = styleSheet || StyleSheet.master;\n var globalStyle = _this2.state.globalStyle;\n if (globalStyle.isStatic) {\n globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, _this2.styleSheet);\n return null;\n } else {\n return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {\n // $FlowFixMe\n var defaultProps = _this2.constructor.defaultProps;\n var context = _extends({}, _this2.props);\n if (typeof theme !== 'undefined') {\n context.theme = determineTheme(_this2.props, theme, defaultProps);\n }\n globalStyle.renderStyles(context, _this2.styleSheet);\n return null;\n });\n }\n });\n };\n return GlobalStyleComponent;\n }(React.Component);\n GlobalStyleComponent.globalStyle = style;\n GlobalStyleComponent.styledComponentId = id;\n return GlobalStyleComponent;\n}\n\n// \n\nvar replaceWhitespace = function replaceWhitespace(str) {\n return str.replace(/\\s|\\\\n/g, '');\n};\nfunction keyframes(strings) {\n /* Warning if you've used keyframes on React Native */\n if (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n // eslint-disable-next-line no-console\n console.warn('`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.');\n }\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n var rules = css.apply(undefined, [strings].concat(interpolations));\n var name = generateAlphabeticName(murmurhash(replaceWhitespace(JSON.stringify(rules))));\n return new Keyframes(name, stringifyRules(rules, name, '@keyframes'));\n}\n\n// \n\nvar withTheme = function (Component$$1) {\n var WithTheme = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {\n // $FlowFixMe\n var defaultProps = Component$$1.defaultProps;\n var themeProp = determineTheme(props, theme, defaultProps);\n if (process.env.NODE_ENV !== 'production' && themeProp === undefined) {\n // eslint-disable-next-line no-console\n console.warn('[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps in component class \"' + getComponentName(Component$$1) + '\"');\n }\n return /*#__PURE__*/React.createElement(Component$$1, _extends({}, props, {\n theme: themeProp,\n ref: ref\n }));\n });\n });\n hoistNonReactStatics(WithTheme, Component$$1);\n WithTheme.displayName = 'WithTheme(' + getComponentName(Component$$1) + ')';\n return WithTheme;\n};\n\n// \n\n/* eslint-disable */\nvar __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS = {\n StyleSheet: StyleSheet\n};\n\n// \n\n/* Warning if you've imported this file on React Native */\nif (process.env.NODE_ENV !== 'production' && typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n // eslint-disable-next-line no-console\n console.warn(\"It looks like you've imported 'styled-components' on React Native.\\n\" + \"Perhaps you're looking to import 'styled-components/native'?\\n\" + 'Read more about this at https://www.styled-components.com/docs/basics#react-native');\n}\n\n/* Warning if there are several instances of styled-components */\nif (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Node.js') === -1 && navigator.userAgent.indexOf('jsdom') === -1) {\n window['__styled-components-init__'] = window['__styled-components-init__'] || 0;\n if (window['__styled-components-init__'] === 1) {\n // eslint-disable-next-line no-console\n console.warn(\"It looks like there are several instances of 'styled-components' initialized in this application. \" + 'This may cause dynamic styles not rendering properly, errors happening during rehydration process ' + 'and makes your application bigger without a good reason.\\n\\n' + 'See https://s-c.sh/2BAXzed for more info.');\n }\n window['__styled-components-init__'] += 1;\n}\n\n//\n\nexport default styled;\nexport { createGlobalStyle, css, isStyledComponent, keyframes, ServerStyleSheet, StyleSheetConsumer, StyleSheetContext, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, withTheme, __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS };","import { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@material-ui/utils\";\n// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.\n//\n// A strict capitalization should uppercase the first letter of each word a the sentence.\n// We only handle the first word.\nexport default function capitalize(string) {\n if (typeof string !== 'string') {\n throw new Error(process.env.NODE_ENV !== \"production\" ? \"Material-UI: capitalize(string) expects a string argument.\" : _formatMuiErrorMessage(7));\n }\n return string.charAt(0).toUpperCase() + string.slice(1);\n}","const styles = {\n CheckboxWrapper: `\n margin-right: 30px;\n\n @media (max-width: 600px) {\n & { margin-right: 15px; }\n }\n `,\n ClientRow: `\n display: grid;\n grid-template-columns: auto 1fr auto auto 140px auto;\n align-items: center;\n border-top: 1px solid lightgrey;\n padding: 5px 5px 5px 20px;\n font-size: 16px;\n margin-top: -1px;\n\n & > span:first-child {\n padding-right: 8px;\n }\n\n &:last-child {\n border-bottom: 1px solid lightgrey;\n }\n\n @media (max-width: 600px) {\n && {\n padding-right: 0px;\n grid-template-columns: auto 1fr auto auto 100px auto;\n }\n }\n `,\n ClientTaskRow: `\n display: grid;\n grid-template-columns: auto 1fr auto auto 140px auto;\n align-items: center;\n margin-left: 50px;\n border-top: 1px solid lightgrey;\n border-left: 1px solid lightgrey;\n padding: 5px 46px 5px 20px;\n font-size: 16px;\n background-color: #f9f9f9;\n\n & > span:first-child {\n padding-right: 8px;\n }\n\n &:first-child {\n border-top: none;\n }\n\n @media (max-width: 600px) {\n && {\n margin-left: 15px;\n padding-right: 26px;\n grid-template-columns: auto 1fr auto auto 100px auto;\n }\n }\n `,\n ErrorIcon: `\n && {\n fill: #ff7979;\n font-size: 24px;\n position: relative;\n left: -6px;\n }\n `,\n InputAdornment: `\n &&&&& {\n margin-top: 0px;\n margin: 0px;\n }\n\n & > p {\n font-size: 16px;\n font-family: 'Open Sans';\n color: black;\n }\n `,\n KeyboardArrowDown: `\n && {\n fill: #757575;\n font-size: 26px;\n margin: 0px 8px;\n cursor: pointer;\n }\n\n @media (max-width: 600px) {\n && { margin: 0px; }\n }\n\n &.rotated {\n transition: transform 500ms ease;\n transform: rotate( 0deg );\n }\n\n &.unrotated {\n transition: transform 500ms ease;\n transform: rotate( -90deg );\n }\n `,\n MonetizationOn: `\n && {\n fill: #57AD68;\n font-size: 24px;\n }\n `,\n RatesTableHeader: `\n display: grid;\n grid-gap: 15px;\n margin-top: 20px;\n margin-bottom: 15px;\n margin-right: 15px;\n font-size: 18px;\n align-items: center;\n\n @media (max-width: 600px) {\n & {\n grid-gap: 5px;\n }\n }\n `,\n RatesHeaderItem: `\n display: grid;\n grid-template-columns: auto;\n grid-gap: 4px;\n align-items: center;\n margin-right: -2px;\n\n @media (max-width: 600px) {\n & {\n margin-right: 0px;\n }\n }\n `,\n RateTextField: `\n &.MuiTextField-root {\n margin: 5px 0px;\n }\n\n .MuiFilledInput-root, .MuiFilledInput-root:focus {\n background-color: #f1f1f1;\n }\n\n .MuiFilledInput-root:hover {\n background-color: #ececec;\n }\n\n input {\n font-family: 'Open Sans';\n font-size: 16px;\n padding: 5px 15px 5px 5px;\n max-width: 120px;\n height: 30px;\n }\n\n @media (max-width: 600px) {\n input {\n max-width: 90px;\n padding: 5px 8px;\n }\n }\n `,\n Refresh: `\n && {\n margin-right: 15px;\n font-size: 44px;\n padding: 10px;\n cursor: pointer;\n\n @media (max-width: 600px) {\n && {\n margin-right: 5px;\n }\n }\n }\n `,\n RefreshHeader: `\n && {\n font-size: 44px;\n padding: 10px;\n cursor: pointer;\n }\n `,\n ShowAll: `\n display: grid;\n justify-items: end;\n font-size: 18px;\n cursor: pointer;\n color: #1e88e5;\n `,\n TaskRow: `\n display: grid;\n grid-template-columns: auto 1fr auto auto auto 140px auto;\n align-items: center;\n border-top: 1px solid lightgrey;\n padding: 5px 5px 5px 20px;\n font-size: 16px;\n margin-top: -1px;\n\n &:last-child {\n border-bottom: 1px solid lightgrey;\n }\n\n @media (max-width: 600px) {\n && {\n padding-right: 0px;\n grid-template-columns: auto 1fr auto auto auto 100px auto;\n }\n }\n `,\n}\n\nexport default styles;\n","var defineProperty = require(\"./defineProperty.js\");\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n enumerableOnly && (symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n })), keys.push.apply(keys, symbols);\n }\n return keys;\n}\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = null != arguments[i] ? arguments[i] : {};\n i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {\n defineProperty(target, key, source[key]);\n }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n return target;\n}\nmodule.exports = _objectSpread2, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","'use strict';\n\nfunction checkDCE() {\n /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\n if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function') {\n return;\n }\n if (process.env.NODE_ENV !== 'production') {\n // This branch is unreachable because this function is only called\n // in production, but the condition is true only in development.\n // Therefore if the branch is still here, dead code elimination wasn't\n // properly applied.\n // Don't change the message. React DevTools relies on it. Also make sure\n // this message doesn't occur elsewhere in this function, or it will cause\n // a false positive.\n throw new Error('^_^');\n }\n try {\n // Verify that the code above has been dead code eliminated (DCE'd).\n __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);\n } catch (err) {\n // DevTools shouldn't crash React, no matter what.\n // We should still report in case we break this code.\n console.error(err);\n }\n}\nif (process.env.NODE_ENV === 'production') {\n // DCE check should happen before ReactDOM bundle executes so that\n // DevTools can report bad minification during injection.\n checkDCE();\n module.exports = require('./cjs/react-dom.production.min.js');\n} else {\n module.exports = require('./cjs/react-dom.development.js');\n}","import * as React from 'react';\nimport setRef from './setRef';\nexport default function useForkRef(refA, refB) {\n /**\n * This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior\n */\n return React.useMemo(function () {\n if (refA == null && refB == null) {\n return null;\n }\n return function (refValue) {\n setRef(refA, refValue);\n setRef(refB, refValue);\n };\n }, [refA, refB]);\n}","'use strict';\n\nfunction markdownLineEnding(code) {\n return code < -2;\n}\nmodule.exports = markdownLineEnding;","'use strict';\n\nvar markdownSpace = require('../character/markdown-space.js');\nfunction spaceFactory(effects, ok, type, max) {\n var limit = max ? max - 1 : Infinity;\n var size = 0;\n return start;\n function start(code) {\n if (markdownSpace(code)) {\n effects.enter(type);\n return prefix(code);\n }\n return ok(code);\n }\n function prefix(code) {\n if (markdownSpace(code) && size++ < limit) {\n effects.consume(code);\n return prefix;\n }\n effects.exit(type);\n return ok(code);\n }\n}\nmodule.exports = spaceFactory;","import { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@material-ui/utils\";\n\n/* eslint-disable no-use-before-define */\n\n/**\n * Returns a number whose value is limited to the given range.\n *\n * @param {number} value The value to be clamped\n * @param {number} min The lower boundary of the output range\n * @param {number} max The upper boundary of the output range\n * @returns {number} A number in the range [min, max]\n */\nfunction clamp(value) {\n var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;\n if (process.env.NODE_ENV !== 'production') {\n if (value < min || value > max) {\n console.error(\"Material-UI: The value provided \".concat(value, \" is out of range [\").concat(min, \", \").concat(max, \"].\"));\n }\n }\n return Math.min(Math.max(min, value), max);\n}\n/**\n * Converts a color from CSS hex format to CSS rgb format.\n *\n * @param {string} color - Hex color, i.e. #nnn or #nnnnnn\n * @returns {string} A CSS rgb color string\n */\n\nexport function hexToRgb(color) {\n color = color.substr(1);\n var re = new RegExp(\".{1,\".concat(color.length >= 6 ? 2 : 1, \"}\"), 'g');\n var colors = color.match(re);\n if (colors && colors[0].length === 1) {\n colors = colors.map(function (n) {\n return n + n;\n });\n }\n return colors ? \"rgb\".concat(colors.length === 4 ? 'a' : '', \"(\").concat(colors.map(function (n, index) {\n return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;\n }).join(', '), \")\") : '';\n}\nfunction intToHex(int) {\n var hex = int.toString(16);\n return hex.length === 1 ? \"0\".concat(hex) : hex;\n}\n/**\n * Converts a color from CSS rgb format to CSS hex format.\n *\n * @param {string} color - RGB color, i.e. rgb(n, n, n)\n * @returns {string} A CSS rgb color string, i.e. #nnnnnn\n */\n\nexport function rgbToHex(color) {\n // Idempotent\n if (color.indexOf('#') === 0) {\n return color;\n }\n var _decomposeColor = decomposeColor(color),\n values = _decomposeColor.values;\n return \"#\".concat(values.map(function (n) {\n return intToHex(n);\n }).join(''));\n}\n/**\n * Converts a color from hsl format to rgb format.\n *\n * @param {string} color - HSL color values\n * @returns {string} rgb color values\n */\n\nexport function hslToRgb(color) {\n color = decomposeColor(color);\n var _color = color,\n values = _color.values;\n var h = values[0];\n var s = values[1] / 100;\n var l = values[2] / 100;\n var a = s * Math.min(l, 1 - l);\n var f = function f(n) {\n var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;\n return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n };\n var type = 'rgb';\n var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];\n if (color.type === 'hsla') {\n type += 'a';\n rgb.push(values[3]);\n }\n return recomposeColor({\n type: type,\n values: rgb\n });\n}\n/**\n * Returns an object with the type and values of a color.\n *\n * Note: Does not support rgb % values.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @returns {object} - A MUI color object: {type: string, values: number[]}\n */\n\nexport function decomposeColor(color) {\n // Idempotent\n if (color.type) {\n return color;\n }\n if (color.charAt(0) === '#') {\n return decomposeColor(hexToRgb(color));\n }\n var marker = color.indexOf('(');\n var type = color.substring(0, marker);\n if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? \"Material-UI: Unsupported `\".concat(color, \"` color.\\nWe support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().\") : _formatMuiErrorMessage(3, color));\n }\n var values = color.substring(marker + 1, color.length - 1).split(',');\n values = values.map(function (value) {\n return parseFloat(value);\n });\n return {\n type: type,\n values: values\n };\n}\n/**\n * Converts a color object with type and values to a string.\n *\n * @param {object} color - Decomposed color\n * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'\n * @param {array} color.values - [n,n,n] or [n,n,n,n]\n * @returns {string} A CSS color string\n */\n\nexport function recomposeColor(color) {\n var type = color.type;\n var values = color.values;\n if (type.indexOf('rgb') !== -1) {\n // Only convert the first 3 values to int (i.e. not alpha)\n values = values.map(function (n, i) {\n return i < 3 ? parseInt(n, 10) : n;\n });\n } else if (type.indexOf('hsl') !== -1) {\n values[1] = \"\".concat(values[1], \"%\");\n values[2] = \"\".concat(values[2], \"%\");\n }\n return \"\".concat(type, \"(\").concat(values.join(', '), \")\");\n}\n/**\n * Calculates the contrast ratio between two colors.\n *\n * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @returns {number} A contrast ratio value in the range 0 - 21.\n */\n\nexport function getContrastRatio(foreground, background) {\n var lumA = getLuminance(foreground);\n var lumB = getLuminance(background);\n return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);\n}\n/**\n * The relative brightness of any point in a color space,\n * normalized to 0 for darkest black and 1 for lightest white.\n *\n * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @returns {number} The relative brightness of the color in the range 0 - 1\n */\n\nexport function getLuminance(color) {\n color = decomposeColor(color);\n var rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;\n rgb = rgb.map(function (val) {\n val /= 255; // normalized\n\n return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n }); // Truncate at 3 digits\n\n return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));\n}\n/**\n * Darken or lighten a color, depending on its luminance.\n * Light colors are darkened, dark colors are lightened.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {number} coefficient=0.15 - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\n\nexport function emphasize(color) {\n var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;\n return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);\n}\nvar warnedOnce = false;\n/**\n * Set the absolute transparency of a color.\n * Any existing alpha values are overwritten.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {number} value - value to set the alpha channel to in the range 0 -1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n *\n * @deprecated\n * Use `import { alpha } from '@material-ui/core/styles'` instead.\n */\n\nexport function fade(color, value) {\n if (process.env.NODE_ENV !== 'production') {\n if (!warnedOnce) {\n warnedOnce = true;\n console.error(['Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.', '', \"You should use `import { alpha } from '@material-ui/core/styles'`\"].join('\\n'));\n }\n }\n return alpha(color, value);\n}\n/**\n * Set the absolute transparency of a color.\n * Any existing alpha value is overwritten.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {number} value - value to set the alpha channel to in the range 0-1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\n\nexport function alpha(color, value) {\n color = decomposeColor(color);\n value = clamp(value);\n if (color.type === 'rgb' || color.type === 'hsl') {\n color.type += 'a';\n }\n color.values[3] = value;\n return recomposeColor(color);\n}\n/**\n * Darkens a color.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {number} coefficient - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\n\nexport function darken(color, coefficient) {\n color = decomposeColor(color);\n coefficient = clamp(coefficient);\n if (color.type.indexOf('hsl') !== -1) {\n color.values[2] *= 1 - coefficient;\n } else if (color.type.indexOf('rgb') !== -1) {\n for (var i = 0; i < 3; i += 1) {\n color.values[i] *= 1 - coefficient;\n }\n }\n return recomposeColor(color);\n}\n/**\n * Lightens a color.\n *\n * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()\n * @param {number} coefficient - multiplier in the range 0 - 1\n * @returns {string} A CSS color string. Hex input values are returned as rgb\n */\n\nexport function lighten(color, coefficient) {\n color = decomposeColor(color);\n coefficient = clamp(coefficient);\n if (color.type.indexOf('hsl') !== -1) {\n color.values[2] += (100 - color.values[2]) * coefficient;\n } else if (color.type.indexOf('rgb') !== -1) {\n for (var i = 0; i < 3; i += 1) {\n color.values[i] += (255 - color.values[i]) * coefficient;\n }\n }\n return recomposeColor(color);\n}","function _extends() {\n module.exports = _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 }, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;\n return _extends.apply(this, arguments);\n}\nmodule.exports = _extends, module.exports.__esModule = true, module.exports[\"default\"] = module.exports;","import React from 'react';\nimport {Bar} from 'react-chartjs-2';\nimport ChartTable from '../ChartTable';\nimport accounting from 'javascripts/vendor/accounting';\n\nconst BarChart = (props) => {\n const {\n labels,\n datasets,\n colors,\n swapRowsColumns,\n horizontalColors,\n horizontalTotal,\n verticalColors,\n verticalTotal,\n useCurrency,\n units\n } = props;\n\n const data = {\n labels: labels,\n datasets: datasets.map((dataset, index) => {\n return (\n {\n label: dataset.label,\n backgroundColor: colors[index],\n hoverBackgroundColor: colors[index],\n borderColor: 'black',\n borderWidth: 1,\n data: dataset.values\n }\n )\n })\n }\n\n return(\n \n
\n {\n const label = data.datasets[tooltipItem.datasetIndex].label || '';\n const value = useCurrency ?\n accounting.formatMoney(tooltipItem.value, '$', 2) : tooltipItem.value;\n return `${label} - ${value} ${units || ''}`;\n }\n }\n },\n legend: {\n display: false\n },\n scales: {\n xAxes: [{\n stacked: true,\n maxBarThickness: 50,\n }],\n yAxes: [{\n stacked: true,\n ticks: {\n beginAtZero: true,\n min: 0\n }\n }]\n }}\n }\n />\n
\n
\n \n
\n
\n {}}\n />\n \n
\n \n handleClientTaskRate(client.id, task.id, event.target.value, billable, true)}\n margin=\"normal\"\n variant=\"filled\"\n disabled={!billable}\n InputProps={{\n startAdornment: ratePresent ? adornment : null,\n disableUnderline: true\n }}\n ratePresent={ratePresent}\n />\n \n );\n }\n}\n\n\nClientTaskRate.propTypes = {\n clientTaskUser: PropTypes.object,\n client: PropTypes.object,\n task: PropTypes.object,\n handleClientTaskRate: PropTypes.func,\n clientTaskType: PropTypes.string\n};\nexport default ClientTaskRate\n","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar TableContext = /*#__PURE__*/React.createContext();\nif (process.env.NODE_ENV !== 'production') {\n TableContext.displayName = 'TableContext';\n}\nexport default TableContext;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport TableContext from './TableContext';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'table',\n width: '100%',\n borderCollapse: 'collapse',\n borderSpacing: 0,\n '& caption': _extends({}, theme.typography.body2, {\n padding: theme.spacing(2),\n color: theme.palette.text.secondary,\n textAlign: 'left',\n captionSide: 'bottom'\n })\n },\n /* Styles applied to the root element if `stickyHeader={true}`. */\n stickyHeader: {\n borderCollapse: 'separate'\n }\n };\n};\nvar defaultComponent = 'table';\nvar Table = /*#__PURE__*/React.forwardRef(function Table(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? defaultComponent : _props$component,\n _props$padding = props.padding,\n padding = _props$padding === void 0 ? 'normal' : _props$padding,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n _props$stickyHeader = props.stickyHeader,\n stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"padding\", \"size\", \"stickyHeader\"]);\n var table = React.useMemo(function () {\n return {\n padding: padding,\n size: size,\n stickyHeader: stickyHeader\n };\n }, [padding, size, stickyHeader]);\n return /*#__PURE__*/React.createElement(TableContext.Provider, {\n value: table\n }, /*#__PURE__*/React.createElement(Component, _extends({\n role: Component === defaultComponent ? null : 'table',\n ref: ref,\n className: clsx(classes.root, className, stickyHeader && classes.stickyHeader)\n }, other)));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiTable'\n})(Table);","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar Tablelvl2Context = /*#__PURE__*/React.createContext();\nif (process.env.NODE_ENV !== 'production') {\n Tablelvl2Context.displayName = 'Tablelvl2Context';\n}\nexport default Tablelvl2Context;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'table-row-group'\n }\n};\nvar tablelvl2 = {\n variant: 'body'\n};\nvar defaultComponent = 'tbody';\nvar TableBody = /*#__PURE__*/React.forwardRef(function TableBody(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? defaultComponent : _props$component,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\"]);\n return /*#__PURE__*/React.createElement(Tablelvl2Context.Provider, {\n value: tablelvl2\n }, /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n role: Component === defaultComponent ? null : 'rowgroup'\n }, other)));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableBody'\n})(TableBody);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nimport { darken, alpha, lighten } from '../styles/colorManipulator';\nimport TableContext from '../Table/TableContext';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body2, {\n display: 'table-cell',\n verticalAlign: 'inherit',\n // Workaround for a rendering bug with spanned columns in Chrome 62.0.\n // Removes the alpha (sets it to 1), and lightens or darkens the theme color.\n borderBottom: \"1px solid\\n \".concat(theme.palette.type === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)),\n textAlign: 'left',\n padding: 16\n }),\n /* Styles applied to the root element if `variant=\"head\"` or `context.table.head`. */\n head: {\n color: theme.palette.text.primary,\n lineHeight: theme.typography.pxToRem(24),\n fontWeight: theme.typography.fontWeightMedium\n },\n /* Styles applied to the root element if `variant=\"body\"` or `context.table.body`. */\n body: {\n color: theme.palette.text.primary\n },\n /* Styles applied to the root element if `variant=\"footer\"` or `context.table.footer`. */\n footer: {\n color: theme.palette.text.secondary,\n lineHeight: theme.typography.pxToRem(21),\n fontSize: theme.typography.pxToRem(12)\n },\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n padding: '6px 24px 6px 16px',\n '&:last-child': {\n paddingRight: 16\n },\n '&$paddingCheckbox': {\n width: 24,\n // prevent the checkbox column from growing\n padding: '0 12px 0 16px',\n '&:last-child': {\n paddingLeft: 12,\n paddingRight: 16\n },\n '& > *': {\n padding: 0\n }\n }\n },\n /* Styles applied to the root element if `padding=\"checkbox\"`. */\n paddingCheckbox: {\n width: 48,\n // prevent the checkbox column from growing\n padding: '0 0 0 4px',\n '&:last-child': {\n paddingLeft: 0,\n paddingRight: 4\n }\n },\n /* Styles applied to the root element if `padding=\"none\"`. */\n paddingNone: {\n padding: 0,\n '&:last-child': {\n padding: 0\n }\n },\n /* Styles applied to the root element if `align=\"left\"`. */\n alignLeft: {\n textAlign: 'left'\n },\n /* Styles applied to the root element if `align=\"center\"`. */\n alignCenter: {\n textAlign: 'center'\n },\n /* Styles applied to the root element if `align=\"right\"`. */\n alignRight: {\n textAlign: 'right',\n flexDirection: 'row-reverse'\n },\n /* Styles applied to the root element if `align=\"justify\"`. */\n alignJustify: {\n textAlign: 'justify'\n },\n /* Styles applied to the root element if `context.table.stickyHeader={true}`. */\n stickyHeader: {\n position: 'sticky',\n top: 0,\n left: 0,\n zIndex: 2,\n backgroundColor: theme.palette.background.default\n }\n };\n};\n/**\n * The component renders a `` element when the parent context is a header\n * or otherwise a ` | ` element.\n */\n\nvar TableCell = /*#__PURE__*/React.forwardRef(function TableCell(props, ref) {\n var _props$align = props.align,\n align = _props$align === void 0 ? 'inherit' : _props$align,\n classes = props.classes,\n className = props.className,\n component = props.component,\n paddingProp = props.padding,\n scopeProp = props.scope,\n sizeProp = props.size,\n sortDirection = props.sortDirection,\n variantProp = props.variant,\n other = _objectWithoutProperties(props, [\"align\", \"classes\", \"className\", \"component\", \"padding\", \"scope\", \"size\", \"sortDirection\", \"variant\"]);\n var table = React.useContext(TableContext);\n var tablelvl2 = React.useContext(Tablelvl2Context);\n var isHeadCell = tablelvl2 && tablelvl2.variant === 'head';\n var role;\n var Component;\n if (component) {\n Component = component;\n role = isHeadCell ? 'columnheader' : 'cell';\n } else {\n Component = isHeadCell ? 'th' : 'td';\n }\n var scope = scopeProp;\n if (!scope && isHeadCell) {\n scope = 'col';\n }\n var padding = paddingProp || (table && table.padding ? table.padding : 'normal');\n var size = sizeProp || (table && table.size ? table.size : 'medium');\n var variant = variantProp || tablelvl2 && tablelvl2.variant;\n var ariaSort = null;\n if (sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes[\"align\".concat(capitalize(align))], padding !== 'normal' && classes[\"padding\".concat(capitalize(padding))], size !== 'medium' && classes[\"size\".concat(capitalize(size))], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),\n \"aria-sort\": ariaSort,\n role: role,\n scope: scope\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableCell'\n})(TableCell);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'table-header-group'\n }\n};\nvar tablelvl2 = {\n variant: 'head'\n};\nvar defaultComponent = 'thead';\nvar TableHead = /*#__PURE__*/React.forwardRef(function TableHead(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? defaultComponent : _props$component,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\"]);\n return /*#__PURE__*/React.createElement(Tablelvl2Context.Provider, {\n value: tablelvl2\n }, /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n role: Component === defaultComponent ? null : 'rowgroup'\n }, other)));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableHead'\n})(TableHead);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nimport { alpha } from '../styles/colorManipulator';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: 'inherit',\n display: 'table-row',\n verticalAlign: 'middle',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n '&$hover:hover': {\n backgroundColor: theme.palette.action.hover\n },\n '&$selected, &$selected:hover': {\n backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.selectedOpacity)\n }\n },\n /* Pseudo-class applied to the root element if `selected={true}`. */\n selected: {},\n /* Pseudo-class applied to the root element if `hover={true}`. */\n hover: {},\n /* Styles applied to the root element if table variant=\"head\". */\n head: {},\n /* Styles applied to the root element if table variant=\"footer\". */\n footer: {}\n };\n};\nvar defaultComponent = 'tr';\n/**\n * Will automatically set dynamic row height\n * based on the material table element parent (head, body, etc).\n */\n\nvar TableRow = /*#__PURE__*/React.forwardRef(function TableRow(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? defaultComponent : _props$component,\n _props$hover = props.hover,\n hover = _props$hover === void 0 ? false : _props$hover,\n _props$selected = props.selected,\n selected = _props$selected === void 0 ? false : _props$selected,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"hover\", \"selected\"]);\n var tablelvl2 = React.useContext(Tablelvl2Context);\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, className, tablelvl2 && {\n 'head': classes.head,\n 'footer': classes.footer\n }[tablelvl2.variant], hover && classes.hover, selected && classes.selected),\n role: Component === defaultComponent ? null : 'row'\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableRow'\n})(TableRow);","import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableHead from '@material-ui/core/TableHead';\nimport TableRow from '@material-ui/core/TableRow';\nimport Paper from '@material-ui/core/Paper';\nimport {sum} from 'lodash';\nimport accounting from 'javascripts/vendor/accounting';\nimport styled from \"styled-components\";\n\nconst ColorIcon = styled.div`\n height: 10px;\n width: 10px;\n background-color: ${p => p.color};\n border-radius: 50%;\n`;\n\nconst ChartTable = (props) => {\n const {\n labels,\n datasets,\n colors,\n swapRowsColumns,\n horizontalColors,\n horizontalTotal,\n verticalColors,\n verticalTotal,\n useCurrency,\n } = props;\n\n let swapDataSets = [];\n if (swapRowsColumns) {\n labels.forEach((label, index) => {\n let newDataSet = {label: label, values: []}\n datasets.forEach((dataset, index2) => {\n newDataSet.values.push(dataset.values[index])\n })\n swapDataSets.push(newDataSet)\n })\n }\n\n const rows = swapRowsColumns ? swapDataSets : datasets;\n const columns = swapRowsColumns ? datasets.map(dataset => dataset.label) : labels;\n\n let verticalTotals = [];\n if (verticalTotal) {\n verticalTotals = Array(columns.length).fill(0)\n\n columns.forEach((label, index) => {\n rows.forEach(row => {\n verticalTotals[index] += row.values[index]\n })\n })\n\n if (horizontalTotal) {\n let total = 0;\n rows.forEach(row => {\n total += sum(row.values)\n })\n verticalTotals.push(total);\n }\n }\n\n const prefix = useCurrency ? '$' : '';\n\n return (\n \n \n \n \n \n {\n columns.map((column, index) =>\n \n \n {\n horizontalColors ?\n : \n }\n {column}\n \n \n )\n }\n {\n horizontalTotal &&\n Total\n }\n \n \n \n {\n rows.map((row, index) => (\n \n \n \n {\n verticalColors &&\n \n }\n {row.label}\n \n \n {\n row.values.map((value, index) =>\n \n { accounting.formatMoney(value, prefix, 2) }\n \n )\n }\n {\n horizontalTotal &&\n \n { accounting.formatMoney(sum(row.values), prefix, 2) }\n \n }\n \n ))\n }\n {\n verticalTotal &&\n \n Total\n {verticalTotals.map((total, index) =>\n \n { accounting.formatMoney(total, prefix, 2) }\n \n )}\n \n }\n \n \n |