Replace classnames with clsx

2024-12-24 05:59:51 +05:30 · 2019-12-07 21:43:08 +02:00 · 2019-12-07 21:43:08 +02:00 · c638c1566e
commit c638c1566e
parent d226fb2974
29 changed files with 73 additions and 89 deletions
--- a/packages/app/components/accounts/AccountSwitcher.tsx
+++ b/packages/app/components/accounts/AccountSwitcher.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import loader from 'app/services/loader';
@ -62,7 +62,7 @@ export class AccountSwitcher extends React.Component<Props> {

    return (
      <div
-        className={classNames(
+        className={clsx(
          styles.accountSwitcher,
          styles[`${skin}AccountSwitcher`],
        )}
@ -70,7 +70,7 @@ export class AccountSwitcher extends React.Component<Props> {
        {highlightActiveAccount ? (
          <div className={styles.item}>
            <div
-              className={classNames(
+              className={clsx(
                styles.accountIcon,
                styles.activeAccountIcon,
                styles.accountIcon1,
@ -81,10 +81,7 @@ export class AccountSwitcher extends React.Component<Props> {
                {activeAccount.username}
              </div>
              <div
-                className={classNames(
-                  styles.accountEmail,
-                  styles.activeAccountEmail,
-                )}
+                className={clsx(styles.accountEmail, styles.activeAccountEmail)}
              >
                {activeAccount.email}
              </div>
@ -112,12 +109,12 @@ export class AccountSwitcher extends React.Component<Props> {
        ) : null}
        {available.map((account, index) => (
          <div
-            className={classNames(styles.item, styles.accountSwitchItem)}
+            className={clsx(styles.item, styles.accountSwitchItem)}
            key={account.id}
            onClick={this.onSwitch(account)}
          >
            <div
-              className={classNames(
+              className={clsx(
                styles.accountIcon,
                styles[
                  `accountIcon${(index % 7) + (highlightActiveAccount ? 2 : 1)}`
--- a/packages/app/components/contact/ContactForm.tsx
+++ b/packages/app/components/contact/ContactForm.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import {
  Input,
@ -69,7 +69,7 @@ export class ContactForm extends React.Component<
              <Message {...messages.title} />
            </h2>
            <span
-              className={classNames(icons.close, popupStyles.close)}
+              className={clsx(icons.close, popupStyles.close)}
              onClick={onClose}
            />
          </div>
--- a/packages/app/components/dev/apps/ApplicationsIndex.tsx
+++ b/packages/app/components/dev/apps/ApplicationsIndex.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { LinkButton } from 'app/components/ui/form';
@ -109,7 +109,7 @@ function Loader({ noApps }: { noApps: boolean }) {
      />

      <div
-        className={classNames(styles.noAppsContainer, {
+        className={clsx(styles.noAppsContainer, {
          [styles.noAppsAnimating]: noApps,
        })}
      >
--- a/packages/app/components/dev/apps/list/ApplicationItem.tsx
+++ b/packages/app/components/dev/apps/list/ApplicationItem.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 import { Link } from 'react-router-dom';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { SKIN_LIGHT, COLOR_BLACK, COLOR_RED } from 'app/components/ui';
 import { Input, Button } from 'app/components/ui/form';
 import { OauthAppResponse } from 'app/services/api/oauth';
@ -63,7 +63,7 @@ export default class ApplicationItem extends React.Component<

    return (
      <div
-        className={classNames(styles.appItemContainer, {
+        className={clsx(styles.appItemContainer, {
          [styles.appExpanded]: expand,
        })}
        data-e2e="appItem"
--- a/packages/app/components/languageSwitcher/LanguageList.tsx
+++ b/packages/app/components/languageSwitcher/LanguageList.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { TransitionMotion, spring, presets } from 'react-motion';
 import { FormattedMessage as Message } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';

 import LocaleItem from './LocaleItem';
 import messages from './languageSwitcher.intl.json';
@ -38,7 +38,7 @@ export default class LanguageList extends React.Component<{
        {items => (
          <div className={styles.languagesList}>
            <div
-              className={classNames(styles.emptyLanguagesListWrapper, {
+              className={clsx(styles.emptyLanguagesListWrapper, {
                [styles.emptyLanguagesListVisible]: isListEmpty,
              })}
              style={{
@ -69,7 +69,7 @@ export default class LanguageList extends React.Component<{
              <div
                key={locale}
                style={style}
-                className={classNames(styles.languageItem, {
+                className={clsx(styles.languageItem, {
                  [styles.activeLanguageItem]: locale === selectedLocale,
                  [styles.firstLanguageItem]: locale === firstLocale,
                })}
--- a/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as Message, injectIntl, IntlShape } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { connect } from 'react-redux';
 import { changeLang } from 'app/components/user/actions';
 import LANGS from 'app/i18n';
@ -69,7 +69,7 @@ class LanguageSwitcher extends React.Component<
              <Message {...messages.siteLanguage} />
            </h2>
            <span
-              className={classNames(icons.close, popupStyles.close)}
+              className={clsx(icons.close, popupStyles.close)}
              onClick={onClose}
            />
          </div>
@ -77,7 +77,7 @@ class LanguageSwitcher extends React.Component<
          <div className={styles.languageSwitcherBody}>
            <div className={styles.searchBox}>
              <input
-                className={classNames(
+                className={clsx(
                  formStyles.lightTextField,
                  formStyles.greenTextField,
                )}
--- a/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
+++ b/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { localeFlags } from 'app/components/i18n';
 import LANGS from 'app/i18n';
 import { connect } from 'react-redux';
@ -24,7 +24,7 @@ function LanguageLink({

  return (
    <span
-      className={classNames(styles.languageLink, {
+      className={clsx(styles.languageLink, {
        [styles.mark]: userLang !== interfaceLocale,
      })}
      onClick={showLanguageSwitcherPopup}
--- a/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';

 import profileForm from '../../profileForm.scss';
 import messages from '../MultiFactorAuth.intl.json';
@ -33,12 +33,12 @@ export default class Instructions extends React.Component<{}, State> {

        <div className={profileForm.formRow}>
          <div
-            className={classNames(styles.instructionContainer, {
+            className={clsx(styles.instructionContainer, {
              [styles.instructionActive]: !!activeOs,
            })}
          >
            <div
-              className={classNames(styles.osList, {
+              className={clsx(styles.osList, {
                [styles.androidActive]: activeOs === 'android',
                [styles.appleActive]: activeOs === 'ios',
                [styles.windowsActive]: activeOs === 'windows',
--- a/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';

 import styles from './instructions.scss';

@ -15,7 +15,7 @@ export default function OsInstruction({
  onClick: (event: React.MouseEvent<any>) => void;
 }) {
  return (
-    <div className={classNames(styles.osTile, className)} onClick={onClick}>
+    <div className={clsx(styles.osTile, className)} onClick={onClick}>
      <img className={styles.osLogo} src={logo} alt={label} />
      <div className={styles.osName}>{label}</div>
    </div>
--- a/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
+++ b/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { ImageLoader } from 'app/components/ui/loader';
 import profileForm from 'app/components/profile/profileForm.scss';
@ -31,12 +31,7 @@ export default function KeyForm({
      </div>

      <div className={profileForm.formRow}>
-        <p
-          className={classNames(
-            styles.manualDescription,
-            profileForm.description,
-          )}
-        >
+        <p className={clsx(styles.manualDescription, profileForm.description)}>
          <span className={styles.or}>
            <Message {...messages.or} />
          </span>
--- a/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
+++ b/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
@ -3,7 +3,7 @@ import React, { Component } from 'react';

 import { FormattedMessage as Message } from 'react-intl';

-import classNames from 'classnames';
+import clsx from 'clsx';

 import { Form, Button, Input, FormModel } from 'app/components/ui/form';
 import popupStyles from 'app/components/ui/popup/popup.scss';
@ -32,7 +32,7 @@ export default class PasswordRequestForm extends Component {
              </h2>
            </div>

-            <div className={classNames(popupStyles.body, styles.body)}>
+            <div className={clsx(popupStyles.body, styles.body)}>
              <span className={styles.lockIcon} />

              <div className={styles.description}>
--- a/packages/app/components/ui/Panel.tsx
+++ b/packages/app/components/ui/Panel.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'app/functions';

 import styles from './panel.scss';
@ -89,7 +89,7 @@ export class PanelBodyHeader extends React.Component<
      close = <span className={styles.close} onClick={this.onClose} />;
    }

-    const className = classNames(styles[`${type}BodyHeader`], {
+    const className = clsx(styles[`${type}BodyHeader`], {
      [styles.isClosed]: this.state.isClosed,
    });

--- a/packages/app/components/ui/form/Button.tsx
+++ b/packages/app/components/ui/form/Button.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import buttons from 'app/components/ui/buttons.scss';
 import { COLOR_GREEN } from 'app/components/ui';
 import { MessageDescriptor } from 'react-intl';
@ -35,7 +35,7 @@ export default class Button extends FormComponent<

    return (
      <ComponentProp
-        className={classNames(
+        className={clsx(
          buttons[color],
          {
            [buttons.loading]: loading,
--- a/packages/app/components/ui/form/Captcha.tsx
+++ b/packages/app/components/ui/form/Captcha.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { CaptchaID } from 'app/services/captcha';
 import { Skin } from 'app/components/ui';
 import captcha from 'app/services/captcha';
@ -58,7 +58,7 @@ export default class Captcha extends FormInputComponent<

        <div
          ref={this.elRef}
-          className={classNames(styles.captcha, styles[`${skin}Captcha`])}
+          className={clsx(styles.captcha, styles[`${skin}Captcha`])}
        />

        {this.renderError()}
--- a/packages/app/components/ui/form/Checkbox.tsx
+++ b/packages/app/components/ui/form/Checkbox.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { SKIN_DARK, COLOR_GREEN, Color, Skin } from 'app/components/ui';
 import { omit } from 'app/functions';

@ -29,7 +29,7 @@ export default class Checkbox extends FormInputComponent<{

    return (
      <div
-        className={classNames(
+        className={clsx(
          styles[`${color}MarkableRow`],
          styles[`${skin}MarkableRow`],
        )}
--- a/packages/app/components/ui/form/Dropdown.js
+++ b/packages/app/components/ui/form/Dropdown.js
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';

-import classNames from 'classnames';
+import clsx from 'clsx';

 import { omit } from 'app/functions';
 import { colors, COLOR_GREEN } from 'app/components/ui';
@ -62,7 +62,7 @@ export default class Dropdown extends FormInputComponent {
    return (
      <div>
        <div
-          className={classNames(styles[color], {
+          className={clsx(styles[color], {
            [styles.block]: block,
            [styles.opened]: isActive,
          })}
--- a/packages/app/components/ui/form/Form.tsx
+++ b/packages/app/components/ui/form/Form.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import logger from 'app/services/logger';

 import FormModel from './FormModel';
@ -81,7 +81,7 @@ export default class Form extends React.Component<Props, State> {

    return (
      <form
-        className={classNames(styles.form, {
+        className={clsx(styles.form, {
          [styles.isFormLoading]: isLoading,
          [styles.formTouched]: this.state.isTouched,
        })}
--- a/packages/app/components/ui/form/Input.tsx
+++ b/packages/app/components/ui/form/Input.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { uniqueId, omit } from 'app/functions';
 import copy from 'app/services/copy';
 import icons from 'app/components/ui/icons.scss';
@ -96,15 +96,13 @@ export default class Input extends FormInputComponent<

    if (iconType) {
      baseClass = styles.formIconRow;
-      icon = (
-        <span className={classNames(styles.textFieldIcon, icons[iconType])} />
-      );
+      icon = <span className={clsx(styles.textFieldIcon, icons[iconType])} />;
    }

    if (showCopyIcon) {
      copyIcon = (
        <div
-          className={classNames(styles.copyIcon, {
+          className={clsx(styles.copyIcon, {
            [icons.clipboard]: !wasCopied,
            [icons.checkmark]: wasCopied,
            [styles.copyCheckmark]: wasCopied,
@ -120,7 +118,7 @@ export default class Input extends FormInputComponent<
        <div className={styles.textFieldContainer}>
          <input
            ref={this.elRef}
-            className={classNames(
+            className={clsx(
              styles[`${skin}TextField`],
              styles[`${color}TextField`],
              {
--- a/packages/app/components/ui/form/Radio.tsx
+++ b/packages/app/components/ui/form/Radio.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { SKIN_DARK, COLOR_GREEN } from 'app/components/ui';
 import { omit } from 'app/functions';
 import { Color, Skin } from 'app/components/ui';
@ -32,7 +32,7 @@ export default class Radio extends FormInputComponent<

    return (
      <div
-        className={classNames(
+        className={clsx(
          styles[`${color}MarkableRow`],
          styles[`${skin}MarkableRow`],
        )}
--- a/packages/app/components/ui/form/TextArea.tsx
+++ b/packages/app/components/ui/form/TextArea.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
 import TextareaAutosize from 'react-textarea-autosize';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { uniqueId, omit } from 'app/functions';
 import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';

@ -73,7 +73,7 @@ export default class TextArea extends FormInputComponent<
        <div className={styles.textAreaContainer}>
          <TextareaAutosize
            inputRef={this.elRef}
-            className={classNames(
+            className={clsx(
              styles.textArea,
              styles[`${skin}TextField`],
              styles[`${color}TextField`],
--- a/packages/app/components/ui/loader/ComponentLoader.tsx
+++ b/packages/app/components/ui/loader/ComponentLoader.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Skin } from 'app/components/ui';

 import styles from './componentLoader.scss';
@ -7,15 +7,12 @@ import styles from './componentLoader.scss';
 function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
  return (
    <div
-      className={classNames(
-        styles.componentLoader,
-        styles[`${skin}ComponentLoader`],
-      )}
+      className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
    >
      <div className={styles.spins}>
        {new Array(5).fill(0).map((_, index) => (
          <div
-            className={classNames(styles.spin, styles[`spin${index}`])}
+            className={clsx(styles.spin, styles[`spin${index}`])}
            key={index}
          />
        ))}
--- a/packages/app/components/ui/loader/ImageLoader.tsx
+++ b/packages/app/components/ui/loader/ImageLoader.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { ComponentLoader } from 'app/components/ui/loader';
 import { SKIN_LIGHT } from 'app/components/ui';

@ -59,7 +59,7 @@ export default class ImageLoader extends React.Component<
        )}

        <div
-          className={classNames(styles.image, {
+          className={clsx(styles.image, {
            [styles.imageLoaded]: !isLoading,
          })}
        >
--- a/packages/app/components/ui/popup/PopupStack.tsx
+++ b/packages/app/components/ui/popup/PopupStack.tsx
@ -35,7 +35,7 @@ export class PopupStack extends React.Component<{
          return (
            <CSSTransition
              key={index}
-              classNames={{
+              clsx={{
                enter: styles.trEnter,
                enterActive: styles.trEnterActive,
                exit: styles.trExit,
--- a/packages/app/components/ui/stepper/Stepper.tsx
+++ b/packages/app/components/ui/stepper/Stepper.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Color, COLOR_GREEN } from 'app/components/ui';

 import styles from './stepper.scss';
@ -14,10 +14,10 @@ export default function Stepper({
  color?: Color;
 }) {
  return (
-    <div className={classNames(styles.steps, styles[`${color}Steps`])}>
+    <div className={clsx(styles.steps, styles[`${color}Steps`])}>
      {new Array(totalSteps).fill(0).map((_, step) => (
        <div
-          className={classNames(styles.step, {
+          className={clsx(styles.step, {
            [styles.activeStep]: step <= activeStep,
          })}
          key={step}
--- a/packages/app/components/userbar/LoggedInPanel.tsx
+++ b/packages/app/components/userbar/LoggedInPanel.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { AccountSwitcher } from 'app/components/accounts';

 import styles from './loggedInPanel.scss';
@ -40,12 +40,9 @@ export default class LoggedInPanel extends React.Component<
    const { isAccountSwitcherActive } = this.state;

    return (
-      <div
-        ref={el => (this.el = el)}
-        className={classNames(styles.loggedInPanel)}
-      >
+      <div ref={el => (this.el = el)} className={clsx(styles.loggedInPanel)}>
        <div
-          className={classNames(styles.activeAccount, {
+          className={clsx(styles.activeAccount, {
            [styles.activeAccountExpanded]: isAccountSwitcherActive,
          })}
        >
@ -58,7 +55,7 @@ export default class LoggedInPanel extends React.Component<
            <span className={styles.expandIcon} />
          </button>

-          <div className={classNames(styles.accountSwitcherContainer)}>
+          <div className={clsx(styles.accountSwitcherContainer)}>
            <AccountSwitcher
              skin="light"
              onAfterAction={this.onToggleAccountSwitcher}
--- a/packages/app/package.json
+++ b/packages/app/package.json
@ -7,7 +7,7 @@
    "@hot-loader/react-dom": "^16.11.0",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
-    "classnames": "^2.2.6",
+    "clsx": "^1.0.4",
    "copy-to-clipboard": "^3.0.8",
    "debounce": "^1.0.0",
    "flag-icon-css": "^3.4.5",
--- a/packages/app/pages/root/RootPage.tsx
+++ b/packages/app/pages/root/RootPage.tsx
@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Route, Link, Switch } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AuthPage from 'app/pages/auth/AuthPage';
 import ProfilePage from 'app/pages/profile/ProfilePage';
 import RulesPage from 'app/pages/rules/RulesPage';
@ -65,7 +65,7 @@ class RootPage extends Component<{

        <div
          id="view-port"
-          className={classNames(styles.viewPort, {
+          className={clsx(styles.viewPort, {
            [styles.isPopupActive]: isPopupActive,
          })}
        >
--- a/packages/app/pages/rules/RulesPage.tsx
+++ b/packages/app/pages/rules/RulesPage.tsx
@ -10,7 +10,7 @@ import messages from './RulesPage.intl.json';

 const projectName = <Message {...appInfo.appName} />;

-import classNames from 'classnames';
+import clsx from 'clsx';

 const rules = [
  {
@ -105,7 +105,7 @@ export default class RulesPage extends Component<{
          {rules.map((block, sectionIndex) => (
            <div className={styles.rulesSection} key={sectionIndex}>
              <h2
-                className={classNames(styles.rulesSectionTitle, {
+                className={clsx(styles.rulesSectionTitle, {
                  [styles.target]:
                    RulesPage.getTitleHash(sectionIndex) === hash,
                })}
@ -125,7 +125,7 @@ export default class RulesPage extends Component<{
                <ol className={styles.rulesList}>
                  {block.items.map((item, ruleIndex) => (
                    <li
-                      className={classNames(styles.rulesItem, {
+                      className={clsx(styles.rulesItem, {
                        [styles.target]:
                          RulesPage.getRuleHash(sectionIndex, ruleIndex) ===
                          hash,
--- a/yarn.lock
+++ b/yarn.lock
@ -2963,11 +2963,6 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

-classnames@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
 clean-css@4.1.x:
  version "4.1.11"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
@ -3062,6 +3057,11 @@ clone-deep@^4.0.1:
    kind-of "^6.0.2"
    shallow-clone "^3.0.0"

+clsx@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
+  integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
+
 co@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"