chore: update emotion dependencies

package.json

@@ -47,7 +47,7 @@
     "css-loader": "3.2.0",
     "date-fns": "2.7.0",
     "detect-secrets": "1.0.5",
-    "emotion": "9.2.12",
+    "emotion": "10.0.23",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
     "enzyme-to-json": "3.4.3",
@@ -90,7 +90,6 @@
     "react": "16.12.0",
     "react-autosuggest": "9.4.3",
     "react-dom": "16.12.0",
-    "react-emotion": "9.2.12",
     "react-hot-loader": "4.12.17",
     "react-router-dom": "5.1.2",
     "request": "2.88.0",
@@ -216,6 +215,8 @@
     "logo": "https://opencollective.com/verdaccio/logo.txt"
   },
   "dependencies": {
+    "@emotion/core": "10.0.22",
+    "@emotion/styled": "10.0.23",
     "@material-ui/lab": "4.0.0-alpha.31"
   }
 }

src/components/ActionBar/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import colors from '../../utils/styles/colors';
 import ListItem from '../../muiComponents/ListItem';

src/components/Author/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';

src/components/AutoComplete/AutoComplete.tsx

@@ -1,5 +1,4 @@
 import React, { KeyboardEvent } from 'react';
-import { css } from 'emotion';
 import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
@@ -140,12 +139,7 @@ const AutoComplete = ({
 
   return (
     <Wrapper>
-      <Autosuggest
+      <Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
-        {...autosuggestProps}
-        inputProps={inputProps}
-        onSuggestionSelected={onClick}
-        renderSuggestionsContainer={renderSuggestionsContainer}
-      />
     </Wrapper>
   );
 };

src/components/AutoComplete/styles.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
 import TextField from '../../muiComponents/TextField';
 import Paper from '../../muiComponents/Paper';

src/components/CopyToClipBoard/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import IconButton from '../../muiComponents/IconButton';
 

src/components/Dependencies/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState, useEffect } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';

src/components/DetailSidebar/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import ListItem from '../../muiComponents/ListItem';
 import ListItemText from '../../muiComponents/ListItemText';

src/components/Developers/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';

src/components/Dist/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';

src/components/Engines/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';

src/components/Footer/styles.ts

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 
 import mq from '../../utils/styles/media';
 import Icon from '../Icon/Icon';

src/components/Header/styles.ts

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';
@@ -48,7 +49,7 @@ export const IconSearchButton = styled(IconButton)({
 });
 
 export const SearchWrapper = styled('div')({
-  display: 'none',
+  // display: 'none',
   maxWidth: '393px',
   width: '100%',
 });

src/components/Help/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { default as Typography } from '../../muiComponents/Heading';
 import Card from '../../muiComponents/Card';

src/components/Icon/styles.ts

@@ -1,6 +1,6 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
-import { StyledOtherComponent } from 'create-emotion-styled';
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 const getSize = (size: Breakpoint): string => {
@@ -18,7 +18,7 @@ const getSize = (size: Breakpoint): string => {
   }
 };
 
-const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }): string => css`
+const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }) => css`
   && {
     display: inline-block;
     cursor: ${pointer ? 'pointer' : 'Developers'};
@@ -32,16 +32,7 @@ export const Svg = styled('svg')`
   box-sizing: initial;
 `;
 
-export const ImgWrapper: StyledOtherComponent<
+export const ImgWrapper = styled('span')`
-  {
-    size?: Breakpoint;
-    pointer: boolean;
-    modifiers?: null | undefined;
-    name?: string | unknown;
-  },
-  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
-  {}
-> = styled('span')`
   ${commonStyle};
   box-sizing: initial;
 `;

src/components/Install/Install.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
 import { fontWeight } from '../../utils/styles/sizes';

src/components/Install/InstallListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';

src/components/Label/Label.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 
@@ -15,7 +15,6 @@ interface WrapperProps {
   weight: string;
   modifiers?: null;
 }
-
 const Wrapper = styled('div')`
   font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
   text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};

src/components/Layout/Layout.tsx

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 
 import colors from '../../utils/styles/colors';
 

src/components/Loading/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 export const Wrapper = styled('div')`
   && {

src/components/Logo/Logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import logo from './img/logo.svg';
 

src/components/NotFound/NotFound.tsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 

src/components/NotFound/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { default as Typography } from '../../muiComponents/Heading';
 import List from '../../muiComponents/List';

src/components/Package/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
 import { breakpoints } from '../../utils/styles/media';

src/components/PackageList/styles.ts

@@ -1,4 +1,4 @@
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 
 import { fontWeight, fontSize } from '../../utils/styles/sizes';
 

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css } from 'emotion';
+import { css } from '@emotion/core';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
@@ -47,13 +47,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
 
     return (
       <>
-        <Tabs
+        <Tabs data-testid={'tabs-el'} indicatorColor="primary" onChange={handleChange} textColor="primary" value={tabPosition} variant="fullWidth">
-          data-testid={'tabs-el'}
-          indicatorColor="primary"
-          onChange={handleChange}
-          textColor="primary"
-          value={tabPosition}
-          variant="fullWidth">
           <Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
           <Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} />
           <Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} />

src/components/RegistryInfoContent/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 export const CommandContainer = styled('div')({
   '&&': {

src/components/RegistryInfoDialog/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';

src/components/Repository/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';

src/components/Search/Search.tsx

@@ -1,200 +1,80 @@
-import React, { KeyboardEvent, Component, ReactElement } from 'react';
+import React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
+import debounce from 'lodash/debounce';
-import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
-import { css } from 'emotion';
-import { default as IconSearch } from '@material-ui/icons/Search';
-// import debounce from 'lodash/debounce';
 
-import InputAdornment from '../../muiComponents/InputAdornment';
 import AutoComplete from '../../muiComponents/AutoComplete';
-import colors from '../../utils/styles/colors';
 import { callSearch } from '../../utils/calls';
 
-export interface State {
-  search: string;
-  suggestions: unknown[];
-  loading: boolean;
-  loaded: boolean;
-  error: boolean;
-}
-
-export type cancelAllSearchRequests = () => void;
-export type handlePackagesClearRequested = () => void;
-export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
-export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
-export type handleFetchPackages = ({ value: string }) => Promise<void>;
-export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;
-
 const CONSTANTS = {
   API_DELAY: 300,
   PLACEHOLDER_TEXT: 'Search Packages',
   ABORT_ERROR: 'AbortError',
 };
 
-export class Search extends Component<RouteComponentProps<{}>, State> {
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
-  constructor(props: RouteComponentProps<{}>) {
+const Search: React.FC = () => {
-    super(props);
+  const [suggestions, setSuggestions] = React.useState([]);
-    this.state = {
+  const [isLoading, setIsLoading] = React.useState();
-      search: '',
+  const [hasBeenLoaded, setHasBeenLoaded] = React.useState();
-      suggestions: [],
+  const [error, setError] = React.useState();
-      // loading: A boolean value to indicate that request is in pending state.
-      loading: false,
-      // loaded: A boolean value to indicate that result has been loaded.
-      loaded: false,
-      // error: A boolean value to indicate API error.
-      error: false,
-    };
-    this.requestList = [];
-  }
 
-  public render(): ReactElement<HTMLElement> {
+  const handleFetchPackages = debounce(async (value: string) => {
-    const { suggestions, search, loaded, loading, error } = this.state;
-
-    return (
-      <AutoComplete
-        // color={colors.white}
-        // onBlur={this.handleOnBlur}
-        onChange={this.handleSearch}
-        // onCleanSuggestions={this.handlePackagesClearRequested}
-        // onClick={this.handleClickSearch}
-        // onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
-        options={suggestions}
-        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
-        // startAdornment={this.getAdorment()}
-        // suggestionsError={error}
-        // suggestionsLoaded={loaded}
-        // suggestionsLoading={loading}
-        // value={search}
-      />
-    );
-  }
-
-  /**
-   * Cancel all the requests which are in pending state.
-   */
-  private cancelAllSearchRequests: cancelAllSearchRequests = () => {
-    this.requestList.forEach(request => request.abort());
-    this.requestList = [];
-  };
-
-  /**
-   * Cancel all the request from list and make request list empty.
-   */
-  private handlePackagesClearRequested: handlePackagesClearRequested = () => {
-    this.setState({
-      suggestions: [],
-    });
-  };
-
-  /**
-   * onChange method for the input element.
-   */
-  private handleSearch: handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
-    // stops event bubbling
-    event.stopPropagation();
-    if (method === 'type') {
-      const value = newValue.trim();
-      this.setState(
-        {
-          search: value,
-          loading: true,
-          loaded: false,
-          error: false,
-        },
-        () => {
-          /**
-           * A use case where User keeps adding and removing value in input field,
-           * so we cancel all the existing requests when input is empty.
-           */
-          if (value.length === 0) {
-            this.cancelAllSearchRequests();
-          }
-        }
-      );
-    }
-  };
-
-  /**
-   * When an user select any package by clicking or pressing return key.
-   */
-  private handleClickSearch = (
-    event: React.FormEvent<HTMLInputElement>,
-    { suggestionValue, method }: SuggestionSelectedEventData<unknown>
-  ): void | undefined => {
-    const { history } = this.props;
-    // stops event bubbling
-    event.stopPropagation();
-    switch (method) {
-      case 'click':
-      case 'enter':
-        this.setState({ search: '' });
-        history.push(`/-/web/detail/${suggestionValue}`);
-        break;
-    }
-  };
-
-  /**
-   * Fetch packages from API.
-   * For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
-   */
-  private handleFetchPackages: handleFetchPackages = async ({ value }) => {
     try {
       const controller = new window.AbortController();
       const signal = controller.signal;
       // Keep track of search requests.
-      this.requestList.push(controller);
+      // this.requestList.push(controller);
       const suggestions = await callSearch(value, signal);
-      // @ts-ignore
+      setSuggestions(
-      this.setState({
+        // @ts-ignore
-        suggestions,
+        suggestions.map(suggestion => ({
-        loaded: true,
+          ...suggestion,
-      });
+          id: suggestion._id,
+          label: suggestion.name,
+        }))
+      );
+      setHasBeenLoaded(true);
     } catch (error) {
       /**
        * AbortError is not the API error.
        * It means browser has cancelled the API request.
        */
       if (error.name === CONSTANTS.ABORT_ERROR) {
-        this.setState({ error: false, loaded: false });
+        setError(false);
+        setHasBeenLoaded(false);
       } else {
-        this.setState({ error: true, loaded: false });
+        setError(true);
+        setHasBeenLoaded(false);
       }
     } finally {
-      this.setState({ loading: false });
+      setIsLoading(false);
     }
-  };
+  }, CONSTANTS.API_DELAY);
 
-  private requestList: AbortController[];
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-
-  public getAdorment(): JSX.Element {
-    return (
-      <InputAdornment
-        className={css`
-          color: ${colors.white};
-          }
-        `}
-        position={'start'}>
-        <IconSearch />
-      </InputAdornment>
-    );
-  }
-
-  /**
-   * As user focuses out from input, we cancel all the request from requestList
-   * and set the API state parameters to default boolean values.
-   */
-  private handleOnBlur: onBlur = event => {
     // stops event bubbling
     event.stopPropagation();
-    this.setState(
+    setIsLoading(true);
-      {
+    setHasBeenLoaded(false);
-        loaded: false,
+    setError(undefined);
-        loading: false,
+    handleFetchPackages(event.target.value);
-        error: false,
-      },
-      () => this.cancelAllSearchRequests()
-    );
   };
-}
 
-export default withRouter(Search);
+  return (
+    <AutoComplete
+      // onBlur={this.handleOnBlur}
+      onChange={handleChange}
+      // onCleanSuggestions={this.handlePackagesClearRequested}
+      // onClick={this.handleClickSearch}
+      // onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
+      options={suggestions}
+      placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+      // startAdornment={this.getAdorment()}
+      // suggestionsError={error}
+      // suggestionsLoaded={loaded}
+      // suggestionsLoading={loading}
+      // value={search}
+    />
+  );
+};
+
+export default Search;

src/components/Spinner/styles.ts

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 
 import colors from '../../utils/styles/colors';
 import CircularProgress from '../../muiComponents/CircularProgress';

src/components/Tag/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 export const Wrapper = styled('span')({
   '&&': {

src/components/UpLinks/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Text from '../../muiComponents/Text';
 import { default as MuiListItemText } from '../../muiComponents/ListItemText';

src/components/Versions/styles.ts

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';

src/muiComponents/AutoComplete/AutoComplete.tsx

@@ -1,93 +1,93 @@
-import React, { FC, ChangeEvent, useState } from 'react';
+import React, { forwardRef, ChangeEvent, useState } from 'react';
 import { default as MuiAutoComplete, AutocompleteProps } from '@material-ui/lab/Autocomplete';
-import styled from 'react-emotion';
+import TextField from '@material-ui/core/TextField';
+import styled from '@emotion/styled';
+import Search from '@material-ui/icons/Search';
 
 import CircularProgress from '../CircularProgress';
-import TextField from '../TextField';
+
+import AutoCompleteTextField from './AutoCompleteTextField';
 
 const StyledAutoComplete = styled(MuiAutoComplete)({
   width: '100%',
+  color: 'white',
 });
 
-interface Props extends Pick<AutocompleteProps, 'options'> {
+const StyledSearch = styled(Search)({
+  color: 'white',
+  marginRight: 10,
+});
+
+const StyledTextField = styled(TextField)({
+  '& .MuiInputBase-root': {
+    color: 'white',
+  },
+  '& .MuiInput-underline': {
+    ':before': {
+      content: "''",
+      border: 'none',
+    },
+    ':after': {
+      borderColor: 'white',
+    },
+    ':hover:before': {
+      content: 'none',
+    },
+  },
+});
+
+interface Props {
   placeholder?: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  options: Array<Option>;
 }
 
-// function sleep(delay = 0) {
+interface Option {
-//   return new Promise(resolve => {
+  id: string;
-//     setTimeout(resolve, delay);
+  label: string;
-//   });
+}
-// }
+
+type AutoCompleteRef = HTMLDivElement;
 
 /* eslint-disable react/jsx-no-bind */
-const AutoComplete: FC<Props> = ({ placeholder, options = [], onChange }) => {
+
+const AutoComplete = forwardRef<AutoCompleteRef, Props>(function AutoComplete({ placeholder, options = [], onChange }, ref) {
   const [open, setOpen] = useState(false);
   const isLoading = open && options.length === 0;
 
   console.log('options', options);
 
-  //   useEffect(() => {
-  //     let active = true;
-
-  //     if (!loading) {
-  //       return undefined;
-  //     }
-
-  //     (async () => {
-  //       const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
-  //       await sleep(1e3); // For demo purposes.
-  //       const countries = await response.json();
-
-  //       if (active) {
-  //         setOptions(Object.keys(countries).map(key => countries[key].item[0]));
-  //       }
-  //     })();
-
-  //     return () => {
-  //       active = false;
-  //     };
-  //   }, [loading]);
-
-  // useEffect(() => {
-  //   if (!open) {
-  //     setOptions([]);
-  //   }
-  // }, [open]);
-
   return (
     <StyledAutoComplete
       autoHighlight={true}
-      // open={open}
+      freeSolo={true}
-      // onOpen={() => {
-      //   setOpen(true);
-      // }}
-      // onClose={() => {
-      //   setOpen(false);
-      // }}
-      // getOptionLabel={option => option.name}
       options={options}
       loading={isLoading}
+      innerRef={ref}
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      getOptionLabel={option => option.label}
       renderInput={params => (
-        <TextField
+        <StyledTextField
           {...params}
           onChange={onChange}
-          label={placeholder}
           fullWidth={true}
+          variant="standard"
+          placeholder={placeholder}
           InputProps={{
             ...params.InputProps,
-            endAdornment: (
+            startAdornment: <StyledSearch />,
-              <>
+            endAdornment: isLoading ? <CircularProgress color="inherit" size={20} /> : null,
-                {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-            type: 'search',
           }}
         />
       )}
     />
   );
-};
+});
 
 export default AutoComplete;

src/muiComponents/AutoComplete/AutoCompleteTextField.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Search from '@material-ui/icons/Search';
+
+import TextField, { TextFieldProps } from '../TextField';
+
+const StyledTextField = styled(TextField)({
+  '& .MuiInputBase-root': {
+    color: 'white',
+  },
+  '& .MuiInput-underline': {
+    ':before': {
+      content: "''",
+      border: 'none',
+    },
+    ':after': {
+      borderColor: 'white',
+    },
+    ':hover:before': {
+      content: 'none',
+    },
+  },
+});
+
+const StyledSearch = styled(Search)({
+  color: 'white',
+  marginRight: 10,
+});
+
+const AutoCompleteTextField: React.FC<TextFieldProps> = props => {
+  // @ts-ignore:  Types of property 'ref' are incompatible.
+  return <StyledTextField {...props} InputProps={{ startAdornment: <StyledSearch /> }} />;
+};
+
+export default AutoCompleteTextField;

src/muiComponents/TextField/TextField.tsx

@@ -17,4 +17,5 @@ const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField({
   );
 });
 
+export { TextFieldProps };
 export default TextField;

src/muiComponents/TextField/index.ts

@@ -1 +1 @@
-export { default } from './TextField';
+export { default, TextFieldProps } from './TextField';

yarn.lock

@@ -1086,45 +1086,54 @@
   dependencies:
     find-up "^4.0.0"
 
-"@emotion/babel-utils@^0.6.4":
+"@emotion/cache@^10.0.14", "@emotion/cache@^10.0.17":
-  version "0.6.10"
+  version "10.0.19"
-  resolved "https://registry.verdaccio.org/@emotion%2fbabel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
-  integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
+  integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
   dependencies:
-    "@emotion/hash" "^0.6.6"
+    "@emotion/sheet" "0.9.3"
-    "@emotion/memoize" "^0.6.6"
+    "@emotion/stylis" "0.8.4"
-    "@emotion/serialize" "^0.9.1"
+    "@emotion/utils" "0.11.2"
-    convert-source-map "^1.5.1"
+    "@emotion/weak-memoize" "0.2.4"
-    find-root "^1.1.0"
+
-    source-map "^0.7.2"
+"@emotion/core@10.0.22":
+  version "10.0.22"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
+  integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.17"
+    "@emotion/css" "^10.0.22"
+    "@emotion/serialize" "^0.11.12"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/utils" "0.11.2"
+
+"@emotion/css@^10.0.22":
+  version "10.0.22"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793"
+  integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==
+  dependencies:
+    "@emotion/serialize" "^0.11.12"
+    "@emotion/utils" "0.11.2"
+    babel-plugin-emotion "^10.0.22"
 
 "@emotion/hash@0.7.3", "@emotion/hash@^0.7.1":
   version "0.7.3"
   resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
   integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
 
-"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
+"@emotion/is-prop-valid@0.8.5":
-  version "0.6.6"
+  version "0.8.5"
-  resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
-  integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
+  integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
-
-"@emotion/is-prop-valid@^0.6.1":
-  version "0.6.8"
-  resolved "https://registry.verdaccio.org/@emotion%2fis-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
-  integrity sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==
   dependencies:
-    "@emotion/memoize" "^0.6.6"
+    "@emotion/memoize" "0.7.3"
 
 "@emotion/memoize@0.7.3":
   version "0.7.3"
   resolved "https://registry.verdaccio.org/@emotion%2fmemoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
   integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
 
-"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.verdaccio.org/@emotion%2fmemoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
-  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
-
 "@emotion/serialize@^0.11.11":
   version "0.11.13"
   resolved "https://registry.verdaccio.org/@emotion%2fserialize/-/serialize-0.11.13.tgz#49b93e8e6f7dba70bbf0ecd697bb4e03f45d8cde"
@@ -1136,40 +1145,59 @@
     "@emotion/utils" "0.11.2"
     csstype "^2.5.7"
 
-"@emotion/serialize@^0.9.1":
+"@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14", "@emotion/serialize@^0.11.8":
-  version "0.9.1"
+  version "0.11.14"
-  resolved "https://registry.verdaccio.org/@emotion%2fserialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
-  integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
+  integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==
   dependencies:
-    "@emotion/hash" "^0.6.6"
+    "@emotion/hash" "0.7.3"
-    "@emotion/memoize" "^0.6.6"
+    "@emotion/memoize" "0.7.3"
-    "@emotion/unitless" "^0.6.7"
+    "@emotion/unitless" "0.7.4"
-    "@emotion/utils" "^0.8.2"
+    "@emotion/utils" "0.11.2"
+    csstype "^2.5.7"
 
-"@emotion/stylis@^0.7.0":
+"@emotion/sheet@0.9.3":
-  version "0.7.1"
+  version "0.9.3"
-  resolved "https://registry.verdaccio.org/@emotion%2fstylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
-  integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
+  integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
+
+"@emotion/styled-base@^10.0.23":
+  version "10.0.24"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
+  integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.5"
+    "@emotion/serialize" "^0.11.14"
+    "@emotion/utils" "0.11.2"
+
+"@emotion/styled@10.0.23":
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
+  integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==
+  dependencies:
+    "@emotion/styled-base" "^10.0.23"
+    babel-plugin-emotion "^10.0.23"
+
+"@emotion/stylis@0.8.4":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
+  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
 
 "@emotion/unitless@0.7.4":
   version "0.7.4"
   resolved "https://registry.verdaccio.org/@emotion%2funitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
   integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
-"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
-  version "0.6.7"
-  resolved "https://registry.verdaccio.org/@emotion%2funitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
-  integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
-
 "@emotion/utils@0.11.2":
   version "0.11.2"
   resolved "https://registry.verdaccio.org/@emotion%2futils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
   integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
 
-"@emotion/utils@^0.8.2":
+"@emotion/weak-memoize@0.2.4":
-  version "0.8.2"
+  version "0.2.4"
-  resolved "https://registry.verdaccio.org/@emotion%2futils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
-  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
+  integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
 "@hapi/address@2.x.x":
   version "2.1.2"
@@ -2827,23 +2855,21 @@ babel-plugin-emotion@10.0.21:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
-babel-plugin-emotion@^9.2.11:
+babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23:
-  version "9.2.11"
+  version "10.0.23"
-  resolved "https://registry.verdaccio.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
-  integrity sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==
+  integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/babel-utils" "^0.6.4"
+    "@emotion/hash" "0.7.3"
-    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "0.7.3"
-    "@emotion/memoize" "^0.6.1"
+    "@emotion/serialize" "^0.11.14"
-    "@emotion/stylis" "^0.7.0"
     babel-plugin-macros "^2.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
     find-root "^1.1.0"
-    mkdirp "^0.5.1"
     source-map "^0.5.7"
-    touch "^2.0.1"
 
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
@@ -4099,7 +4125,7 @@ convert-css-length@^2.0.1:
   resolved "https://registry.verdaccio.org/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c"
   integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==
 
-convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.7.0"
   resolved "https://registry.verdaccio.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -4200,25 +4226,15 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-emotion-styled@^9.2.8:
+create-emotion@^10.0.14:
-  version "9.2.8"
+  version "10.0.14"
-  resolved "https://registry.verdaccio.org/create-emotion-styled/-/create-emotion-styled-9.2.8.tgz#c0050e768ba439609bec108600467adf2de67cc3"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.14.tgz#4c140aaef6a9588ed47c926f9c4679e4719be43e"
-  integrity sha512-2LrNM5MREWzI5hZK+LyiBHglwE18WE3AEbBQgpHQ1+zmyLSm/dJsUZBeFAwuIMb+TjNZP0KsMZlV776ufOtFdg==
+  integrity sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg==
   dependencies:
-    "@emotion/is-prop-valid" "^0.6.1"
+    "@emotion/cache" "^10.0.14"
-
+    "@emotion/serialize" "^0.11.8"
-create-emotion@^9.2.12:
+    "@emotion/sheet" "0.9.3"
-  version "9.2.12"
+    "@emotion/utils" "0.11.2"
-  resolved "https://registry.verdaccio.org/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
-  integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
-  dependencies:
-    "@emotion/hash" "^0.6.2"
-    "@emotion/memoize" "^0.6.1"
-    "@emotion/stylis" "^0.7.0"
-    "@emotion/unitless" "^0.6.2"
-    csstype "^2.5.2"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
 
 create-hash@^1.1.0, create-hash@^1.1.2:
   version "1.2.0"
@@ -5125,13 +5141,13 @@ emojis-list@^2.0.0:
   resolved "https://registry.verdaccio.org/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emotion@9.2.12:
+emotion@10.0.23:
-  version "9.2.12"
+  version "10.0.23"
-  resolved "https://registry.verdaccio.org/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.23.tgz#b1722ca65f4d9955f0917cfcb7635bc34b52805c"
-  integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
+  integrity sha512-H/x+5rJUnSvI0rdYsAFyDfuQwE0poZgTMj5TQsKirLzyHVWqs6CiUponsdE86sisXw0vS60j91HAbidJJeDt1g==
   dependencies:
-    babel-plugin-emotion "^9.2.11"
+    babel-plugin-emotion "^10.0.23"
-    create-emotion "^9.2.12"
+    create-emotion "^10.0.14"
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -9737,13 +9753,6 @@ nopt@^4.0.1, nopt@~4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
-nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.verdaccio.org/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.verdaccio.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -11332,14 +11341,6 @@ react-dom@16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-react-emotion@9.2.12:
-  version "9.2.12"
-  resolved "https://registry.verdaccio.org/react-emotion/-/react-emotion-9.2.12.tgz#74d1494f89e22d0b9442e92a33ca052461955c83"
-  integrity sha512-qt7XbxnEKX5sZ73rERJ92JMbEOoyOwG3BuCRFRkXrsJhEe+rFBRTljRw7yOLHZUCQC4GBObZhjXIduQ8S0ZpYw==
-  dependencies:
-    babel-plugin-emotion "^9.2.11"
-    create-emotion-styled "^9.2.8"
-
 react-hot-loader@4.12.17:
   version "4.12.17"
   resolved "https://registry.verdaccio.org/react-hot-loader/-/react-hot-loader-4.12.17.tgz#e48815848865342edd829861634637b8c0d22bed"
@@ -12494,7 +12495,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   resolved "https://registry.verdaccio.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.7.2, source-map@^0.7.3:
+source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.verdaccio.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -12994,16 +12995,6 @@ stylelint@11.1.1:
     table "^5.2.3"
     v8-compile-cache "^2.1.0"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.verdaccio.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.verdaccio.org/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 sugarss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.verdaccio.org/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
@@ -13332,13 +13323,6 @@ toposort@^1.0.0:
   resolved "https://registry.verdaccio.org/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
   integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
-touch@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.verdaccio.org/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
-  integrity sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==
-  dependencies:
-    nopt "~1.0.10"
-
 tough-cookie@^2.3.3, tough-cookie@^2.3.4:
   version "2.5.0"
   resolved "https://registry.verdaccio.org/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"