Upgrade to Flow 0.71

app/components/Alert/Alert.js

@@ -1,18 +1,17 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 
 type Props = {
-  children: React.Element<*>,
+  children: React.Node,
   type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
 };
 
 @observer
-class Alert extends React.Component {
-  props: Props;
+class Alert extends React.Component<Props> {
   defaultProps = {
     type: 'info',
   };

app/components/Auth.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Provider } from 'mobx-react';
 import stores from 'stores';
 import ApiKeysStore from 'stores/ApiKeysStore';
@@ -10,7 +10,7 @@ import IntegrationsStore from 'stores/IntegrationsStore';
 import CacheStore from 'stores/CacheStore';
 
 type Props = {
-  children?: React.Element<any>,
+  children?: React.Node,
 };
 
 let authenticatedStores;

app/components/Avatar/Avatar.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -7,7 +7,7 @@ import { color } from 'shared/styles/constants';
 import placeholder from './placeholder.png';
 
 @observer
-class Avatar extends Component {
+class Avatar extends React.Component<*> {
   @observable error: boolean;
 
   handleError = () => {

app/components/Button/Button.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 import { darken, lighten } from 'polished';
@@ -88,9 +88,9 @@ const Inner = styled.span`
 export type Props = {
   type?: string,
   value?: string,
-  icon?: React$Element<any>,
+  icon?: React.Node,
   className?: string,
-  children?: React$Element<any>,
+  children?: React.Node,
 };
 
 export default function Button({

app/components/CenteredContent/CenteredContent.js

@@ -1,10 +1,10 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 
 type Props = {
-  children?: React.Element<any>,
+  children?: React.Node,
 };
 
 const Container = styled.div`

app/components/Collaborators/Collaborators.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';

app/components/ColorPicker/ColorPicker.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { observable, computed, action } from 'mobx';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
@@ -26,9 +26,7 @@ type Props = {
 };
 
 @observer
-class ColorPicker extends React.Component {
-  props: Props;
-
+class ColorPicker extends React.Component<Props> {
   @observable selectedColor: string = colors[0];
   @observable customColorValue: string = '';
   @observable customColorSelected: boolean;
@@ -69,14 +67,14 @@ class ColorPicker extends React.Component {
   };
 
   @action
-  focusOnCustomColor = (event: SyntheticEvent) => {
+  focusOnCustomColor = (event: SyntheticEvent<*>) => {
     this.selectedColor = '';
     this.customColorSelected = true;
     this.fireCallback();
   };
 
   @action
-  setCustomColor = (event: SyntheticEvent) => {
+  setCustomColor = (event: SyntheticEvent<*>) => {
     let target = event.target;
     if (target instanceof HTMLInputElement) {
       const color = target.value;

app/components/CopyToClipboard/CopyToClipboard.js

@@ -1,22 +1,20 @@
 // @flow
-import React, { PureComponent } from 'react';
+import * as React from 'react';
 import copy from 'copy-to-clipboard';
 
 type Props = {
   text: string,
-  children?: React.Element<any>,
+  children?: React.Node,
   onClick?: () => void,
   onCopy: () => void,
 };
 
-class CopyToClipboard extends PureComponent {
-  props: Props;
-
-  onClick = (ev: SyntheticEvent) => {
+class CopyToClipboard extends React.PureComponent<Props> {
+  onClick = (ev: SyntheticEvent<*>) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
     copy(text, {
-      debug: __DEV__,
+      debug: !!__DEV__,
     });
 
     if (onCopy) onCopy();

app/components/Divider/Divider.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 

app/components/DocumentList/DocumentList.js

@@ -1,16 +1,16 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Document from 'models/Document';
 import DocumentPreview from 'components/DocumentPreview';
 import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 
-class DocumentList extends React.Component {
-  props: {
-    documents: Document[],
-    showCollection?: boolean,
-    limit?: number,
-  };
+type Props = {
+  documents: Document[],
+  showCollection?: boolean,
+  limit?: number,
+};
 
+class DocumentList extends React.Component<Props> {
   render() {
     const { limit, showCollection } = this.props;
     const documents = limit

app/components/DocumentPreview/DocumentPreview.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
@@ -89,16 +89,14 @@ const Actions = styled(Flex)`
 `;
 
 @observer
-class DocumentPreview extends Component {
-  props: Props;
-
-  star = (ev: SyntheticEvent) => {
+class DocumentPreview extends React.Component<Props> {
+  star = (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.document.star();
   };
 
-  unstar = (ev: SyntheticEvent) => {
+  unstar = (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.document.unstar();

app/components/DocumentPreview/components/PublishingInfo.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
@@ -17,13 +17,13 @@ const Modified = styled.span`
   font-weight: ${props => (props.highlight ? '600' : '400')};
 `;
 
-class PublishingInfo extends Component {
-  props: {
-    collection?: Collection,
-    document: Document,
-    views?: number,
-  };
+type Props = {
+  collection?: Collection,
+  document: Document,
+  views?: number,
+};
 
+class PublishingInfo extends React.Component<Props> {
   render() {
     const { collection, document } = this.props;
     const {

app/components/DocumentViews/DocumentViews.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import Popover from 'components/Popover';
@@ -27,11 +27,10 @@ type Props = {
 };
 
 @observer
-class DocumentViews extends Component {
+class DocumentViews extends React.Component<Props> {
   @observable opened: boolean = false;
-  anchor: HTMLElement;
+  anchor: ?HTMLElement;
   store: DocumentViewersStore;
-  props: Props;
 
   constructor(props: Props) {
     super(props);
@@ -46,7 +45,7 @@ class DocumentViews extends Component {
     this.opened = false;
   };
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: ?HTMLElement) => {
     this.anchor = ref;
   };
 

app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
 import map from 'lodash/map';
@@ -26,9 +26,7 @@ const UserName = styled.span`
   padding-left: 8px;
 `;
 
-class DocumentViewers extends Component {
-  props: Props;
-
+class DocumentViewers extends React.Component<Props> {
   componentDidMount() {
     this.props.onMount();
   }

app/components/DropToImport/DropToImport.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { injectGlobal } from 'styled-components';
@@ -12,7 +12,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import LoadingIndicator from 'components/LoadingIndicator';
 
 type Props = {
-  children?: React$Element<any>,
+  children?: React.Node,
   collectionId: string,
   documentId?: string,
   activeClassName?: string,
@@ -35,9 +35,8 @@ injectGlobal`
 `;
 
 @observer
-class DropToImport extends Component {
+class DropToImport extends React.Component<Props> {
   @observable isImporting: boolean = false;
-  props: Props;
 
   onDropAccepted = async (files = []) => {
     this.isImporting = true;

app/components/DropdownMenu/DropdownMenu.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import invariant from 'invariant';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -10,22 +10,21 @@ import { color } from 'shared/styles/constants';
 import { fadeAndScaleIn } from 'shared/styles/animations';
 
 type Props = {
-  label: React.Element<*>,
+  label: React.Node,
   onOpen?: () => void,
   onClose?: () => void,
-  children?: React.Element<*>,
+  children?: React.Node,
   className?: string,
   style?: Object,
 };
 
 @observer
-class DropdownMenu extends Component {
-  props: Props;
+class DropdownMenu extends React.Component<Props> {
   @observable top: number;
   @observable right: number;
 
-  handleOpen = (openPortal: SyntheticEvent => *) => {
-    return (ev: SyntheticMouseEvent) => {
+  handleOpen = (openPortal: (SyntheticEvent<*>) => *) => {
+    return (ev: SyntheticMouseEvent<*>) => {
       ev.preventDefault();
       const currentTarget = ev.currentTarget;
       invariant(document.body, 'why you not here');

app/components/DropdownMenu/DropdownMenuItem.js

@@ -1,11 +1,11 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 
 type Props = {
-  onClick?: SyntheticEvent => void,
-  children?: React.Element<any>,
+  onClick?: (SyntheticEvent<*>) => *,
+  children?: React.Node,
 };
 
 const DropdownMenuItem = ({ onClick, children, ...rest }: Props) => {

app/components/Empty/Empty.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 

app/components/ErrorBoundary/ErrorBoundary.js

@@ -1,17 +1,16 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
 type Props = {
-  children?: ?React.Element<any>,
+  children?: ?React.Node,
 };
 
 @observer
-class ErrorBoundary extends Component {
-  props: Props;
+class ErrorBoundary extends React.Component<Props> {
   @observable error: boolean = false;
 
   componentDidCatch(error: Error, info: Object) {

app/components/Highlight/Highlight.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import replace from 'string-replace-to-array';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';

app/components/Input/Input.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import { size, color } from 'shared/styles/constants';

app/components/Labeled/Labeled.js

@@ -1,13 +1,13 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
 import { size } from 'shared/styles/constants';
 
 type Props = {
-  label: React.Element<*> | string,
-  children: React.Element<*>,
+  label: React.Node | string,
+  children: React.Node,
 };
 
 const Labeled = ({ label, children, ...props }: Props) => (

app/components/Layout/Layout.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Switch, Route, withRouter } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
@@ -27,17 +27,16 @@ type Props = {
   history: Object,
   location: Location,
   documents: DocumentsStore,
-  children?: ?React.Element<any>,
-  actions?: ?React.Element<any>,
-  title?: ?React.Element<any>,
+  children?: ?React.Node,
+  actions?: ?React.Node,
+  title?: ?React.Node,
   auth: AuthStore,
   ui: UiStore,
-  notifications?: React.Element<any>,
+  notifications?: React.Node,
 };
 
 @observer
-class Layout extends React.Component {
-  props: Props;
+class Layout extends React.Component<Props> {
   scrollable: ?HTMLDivElement;
 
   @keydown(['/', 't'])

app/components/LoadingIndicator/LoadingIndicator.js

@@ -1,9 +1,9 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 
 @observer
-class LoadingIndicator extends React.Component {
+class LoadingIndicator extends React.Component<*> {
   componentDidMount() {
     this.props.ui.enableProgressBar();
   }

app/components/LoadingIndicator/LoadingIndicatorBar.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 const LoadingIndicatorBar = () => {

app/components/LoadingPlaceholder/ListPlaceholder.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import _ from 'lodash';
 import styled from 'styled-components';
 import Mask from './components/Mask';

app/components/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import Mask from './components/Mask';
 import Fade from 'components/Fade';
 import Flex from 'shared/components/Flex';

app/components/LoadingPlaceholder/components/Mask.js

@@ -1,12 +1,12 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { pulsate } from 'shared/styles/animations';
 import { color } from 'shared/styles/constants';
 import { randomInteger } from 'shared/random';
 import Flex from 'shared/components/Flex';
 
-class Mask extends Component {
+class Mask extends React.Component<*> {
   width: number;
 
   shouldComponentUpdate() {

app/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import styled, { injectGlobal } from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
@@ -10,10 +10,10 @@ import { fadeAndScaleIn } from 'shared/styles/animations';
 import Flex from 'shared/components/Flex';
 
 type Props = {
-  children?: React$Element<any>,
+  children?: React.Node,
   isOpen: boolean,
   title?: string,
-  onRequestClose: () => void,
+  onRequestClose: () => *,
 };
 
 // eslint-disable-next-line

app/components/Modals/Modals.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observer } from 'mobx-react';
 import BaseModal from 'components/Modal';
 import UiStore from 'stores/UiStore';
@@ -9,12 +9,11 @@ import CollectionDelete from 'scenes/CollectionDelete';
 import DocumentDelete from 'scenes/DocumentDelete';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 
+type Props = {
+  ui: UiStore,
+};
 @observer
-class Modals extends Component {
-  props: {
-    ui: UiStore,
-  };
-
+class Modals extends React.Component<Props> {
   handleClose = () => {
     this.props.ui.clearActiveModal();
   };

app/components/PageTitle/PageTitle.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { Helmet } from 'react-helmet';
 
 type Props = {

app/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import BoundlessPopover from 'boundless-popover';
 import styled, { keyframes } from 'styled-components';
 

app/components/RouteSidebarHidden/RouteSidebarHidden.js

@@ -1,15 +1,15 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { inject } from 'mobx-react';
 import { Route } from 'react-router-dom';
 import UiStore from 'stores/UiStore';
 
-class RouteSidebarHidden extends Component {
-  props: {
-    ui: UiStore,
-    component: any,
-  };
+type Props = {
+  ui: UiStore,
+  component: *,
+};
 
+class RouteSidebarHidden extends React.Component<Props> {
   componentDidMount() {
     this.props.ui.enableEditMode();
   }

app/components/ScrollToTop.js

@@ -1,9 +1,9 @@
 // @flow
 // based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
-import { Component } from 'react';
+import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 
-class ScrollToTop extends Component {
+class ScrollToTop extends React.Component<*> {
   componentDidUpdate(prevProps) {
     if (this.props.location !== prevProps.location) {
       window.scrollTo(0, 0);

app/components/Sidebar/Main.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import { observer, inject } from 'mobx-react';
@@ -26,9 +26,7 @@ type Props = {
 };
 
 @observer
-class MainSidebar extends Component {
-  props: Props;
-
+class MainSidebar extends React.Component<Props> {
   handleCreateCollection = () => {
     this.props.ui.setActiveModal('collection-new');
   };

app/components/Sidebar/Settings.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observer, inject } from 'mobx-react';
 import { ProfileIcon, SettingsIcon, CodeIcon, UserIcon } from 'outline-icons';
 
@@ -17,9 +17,7 @@ type Props = {
 };
 
 @observer
-class SettingsSidebar extends Component {
-  props: Props;
-
+class SettingsSidebar extends React.Component<Props> {
   returnToDashboard = () => {
     this.props.history.push('/');
   };

app/components/Sidebar/Sidebar.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import styled from 'styled-components';
@@ -14,7 +14,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import UiStore from 'stores/UiStore';
 
 type Props = {
-  children: React.Element<any>,
+  children: React.Node,
   history: Object,
   location: Location,
   auth: AuthStore,
@@ -23,9 +23,7 @@ type Props = {
 };
 
 @observer
-class Sidebar extends Component {
-  props: Props;
-
+class Sidebar extends React.Component<Props> {
   componentWillReceiveProps = (nextProps: Props) => {
     if (this.props.location !== nextProps.location) {
       this.props.ui.hideMobileSidebar();

app/components/Sidebar/components/Collections.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import type { Location } from 'react-router-dom';
@@ -30,9 +30,7 @@ type Props = {
 };
 
 @observer
-class Collections extends Component {
-  props: Props;
-
+class Collections extends React.Component<Props> {
   render() {
     const { history, location, collections, ui, documents } = this.props;
 
@@ -73,7 +71,7 @@ type CollectionLinkProps = {
 };
 
 @observer
-class CollectionLink extends Component {
+class CollectionLink extends React.Component<*> {
   props: CollectionLinkProps;
 
   @observable menuOpen = false;
@@ -168,7 +166,7 @@ const DocumentLink = observer(
         isActiveDocument)
     );
 
-    const handleMouseEnter = (event: SyntheticEvent) => {
+    const handleMouseEnter = (event: SyntheticEvent<*>) => {
       event.stopPropagation();
       event.preventDefault();
       prefetchDocument(document.id);

app/components/Sidebar/components/HeaderBlock.js

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 import Flex from 'shared/components/Flex';

app/components/Sidebar/components/SidebarLink.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { observable, action } from 'mobx';
 import { observer } from 'mobx-react';
 import { NavLink } from 'react-router-dom';
@@ -47,19 +47,18 @@ const StyledDiv = StyledNavLink.withComponent('div');
 
 type Props = {
   to?: string,
-  onClick?: SyntheticEvent => *,
-  children?: React$Element<*>,
-  icon?: React$Element<*>,
+  onClick?: (SyntheticEvent<*>) => *,
+  children?: React.Node,
+  icon?: React.Node,
   expand?: boolean,
-  expandedContent?: React$Element<*>,
+  expandedContent?: React.Node,
   hideExpandToggle?: boolean,
   iconColor?: string,
   active?: boolean,
 };
 
 @observer
-class SidebarLink extends Component {
-  props: Props;
+class SidebarLink extends React.Component<Props> {
   @observable expanded: boolean = false;
 
   componentDidMount() {
@@ -71,7 +70,7 @@ class SidebarLink extends Component {
   }
 
   @action
-  handleClick = (event: SyntheticEvent) => {
+  handleClick = (event: SyntheticEvent<*>) => {
     event.preventDefault();
     event.stopPropagation();
     this.expanded = !this.expanded;

app/components/Toasts/Toasts.js

@@ -1,12 +1,12 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import styled from 'styled-components';
 import { layout } from 'shared/styles/constants';
 import Toast from './components/Toast';
 
 @observer
-class Toasts extends Component {
+class Toasts extends React.Component<*> {
   handleClose = index => {
     this.props.errors.remove(index);
   };

app/components/Toasts/components/Toast.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
 import { color } from 'shared/styles/constants';
@@ -12,9 +12,8 @@ type Props = {
   type: 'warning' | 'error' | 'info',
 };
 
-class Toast extends Component {
-  timeout: number;
-  props: Props;
+class Toast extends React.Component<Props> {
+  timeout: TimeoutID;
 
   static defaultProps = {
     closeAfterMs: 3000,

app/components/Tooltip/index.js

@@ -2,10 +2,8 @@
 import { TooltipTrigger } from 'pui-react-tooltip';
 import { injectGlobal } from 'styled-components';
 
-injectGlobal([
-  `
+injectGlobal`
   .tooltip:hover .tooltip-container:not(.tooltip-container-hidden){visibility:visible;opacity:1}.tooltip-container{visibility:hidden;-webkit-transition:opacity ease-out 0.2s;transition:opacity ease-out 0.2s;z-index:10;position:absolute;bottom:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:0 0 8px 0;text-align:left}.tooltip-container.tooltip-container-visible{visibility:visible}.tooltip-container.tooltip-hoverable:after{content:"";position:absolute;width:calc(100% + 16px);height:calc(100% + 16px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.tooltip-container .tooltip-content{white-space:nowrap;padding:4px 8px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:0;text-transform:none;background-color:#243641;color:#fff;border-radius:2px;border:1px solid #243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1)}.tooltip-container .tooltip-content:before{content:"";z-index:1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;border-bottom:1px solid #243641;border-right:1px solid #243641;width:8px;height:8px}.tooltip-container .tooltip-content:after{content:"";box-sizing:content-box;z-index:-1;position:absolute;bottom:-4px;left:50%;-webkit-transform:translateX(-50%) rotateZ(45deg);transform:translateX(-50%) rotateZ(45deg);background-color:#243641;box-shadow:0px 2px 2px 0px rgba(36, 54, 65, .1),0px 0px 2px 0px rgba(36, 54, 65, .1);width:8px;height:8px}.tooltip{position:relative;display:inline-block}.tooltip.tooltip-light .tooltip-content{background-color:#fff;color:#243641;border:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:before{background-color:#fff;border-bottom:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip.tooltip-light .tooltip-content:after{background-color:#fff}.tooltip.tooltip-bottom .tooltip-container{top:100%;bottom:auto;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:8px 0 0 0}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{bottom:auto;top:-4px;border-top:1px solid #243641;border-right:none;border-bottom:none;border-left:1px solid #243641}.tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{bottom:auto;top:-4px}.tooltip.tooltip-bottom.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-right .tooltip-container{top:50%;bottom:auto;left:100%;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 0 0 8px}.tooltip.tooltip-right .tooltip-container .tooltip-content:before{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:none;border-right:none;border-bottom:1px solid #243641;border-left:1px solid #243641}.tooltip.tooltip-right .tooltip-container .tooltip-content:after{bottom:auto;left:-4px;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-right.tooltip-light .tooltip-content:before{border-bottom:1px solid #DFE5E8;border-left:1px solid #DFE5E8}.tooltip.tooltip-left .tooltip-container{top:50%;bottom:auto;right:100%;left:auto;-webkit-transform:translatey(-50%);transform:translatey(-50%);margin:0 8px 0 0}.tooltip.tooltip-left .tooltip-container .tooltip-content:before{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg);border-top:1px solid #243641;border-right:1px solid #243641;border-bottom:none;border-left:none}.tooltip.tooltip-left .tooltip-container .tooltip-content:after{bottom:auto;right:-4px;left:auto;top:50%;-webkit-transform:translatey(-50%) rotateZ(45deg);transform:translatey(-50%) rotateZ(45deg)}.tooltip.tooltip-left.tooltip-light .tooltip-content:before{border-top:1px solid #DFE5E8;border-right:1px solid #DFE5E8}.tooltip-sm.tooltip-container{width:120px}.tooltip-sm.tooltip-container .tooltip-content{white-space:normal}.tooltip-md.tooltip-container{width:240px}.tooltip-md.tooltip-container .tooltip-content{white-space:normal}.tooltip-lg.tooltip-container{width:360px}.tooltip-lg.tooltip-container .tooltip-content{white-space:normal}.tether-element{z-index:99}.overlay-trigger{color:#1B78B3;-webkit-transition:all 300ms ease-out;transition:all 300ms ease-out;-webkit-transition-property:background-color, color, opacity;transition-property:background-color, color, opacity}.overlay-trigger:hover,.overlay-trigger:focus{color:#1f8ace;cursor:pointer;outline:none;text-decoration:none}.overlay-trigger:active,.overlay-trigger.active{color:#176698}
-`,
-]);
+`;
 
 export default TooltipTrigger;