Replace classnames with clsx (#2759)

* Replace classnames with clsx

* Add clsx to package.json

* Remove classnames

* Remove classnames types

* Restrict classnames in eslint rules

.eslintrc.json

@@ -190,7 +190,7 @@
     "no-restricted-imports": [
       "error",
       {
-        "paths": ["lodash", "@material-ui/icons/Delete"]
+        "paths": ["lodash", "@material-ui/icons/Delete", "classnames"]
       }
     ]
   },

package-lock.json

@@ -31,7 +31,7 @@
         "@uiw/react-color-material": "^0.1.0",
         "@uiw/react-color-saturation": "0.0.34",
         "apollo-upload-client": "^17.0.0",
-        "classnames": "^2.2.6",
+        "clsx": "^1.2.1",
         "color-convert": "^2.0.1",
         "crc-32": "^1.2.0",
         "currency-codes": "^2.1.0",
@@ -113,7 +113,6 @@
         "@testing-library/react": "^12.1.5",
         "@testing-library/react-hooks": "^8.0.1",
         "@types/apollo-upload-client": "^17.0.0",
-        "@types/classnames": "^2.2.9",
         "@types/color-convert": "^2.0.0",
         "@types/enzyme": "^3.10.8",
         "@types/fuzzaldrin": "^2.1.2",
@@ -8247,12 +8246,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/classnames": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
-      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
-      "dev": true
-    },
     "node_modules/@types/color-convert": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
@@ -13863,9 +13856,9 @@
       }
     },
     "node_modules/clsx": {
-      "version": "1.1.1",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
       "engines": {
         "node": ">=6"
       }
@@ -45989,12 +45982,6 @@
         "@types/node": "*"
       }
     },
-    "@types/classnames": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz",
-      "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==",
-      "dev": true
-    },
     "@types/color-convert": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
@@ -50701,9 +50688,9 @@
       }
     },
     "clsx": {
-      "version": "1.1.1",
+      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
     },
     "co": {
       "version": "4.6.0",

package.json

@@ -38,7 +38,7 @@
     "@uiw/react-color-material": "^0.1.0",
     "@uiw/react-color-saturation": "0.0.34",
     "apollo-upload-client": "^17.0.0",
-    "classnames": "^2.2.6",
+    "clsx": "^1.2.1",
     "color-convert": "^2.0.1",
     "crc-32": "^1.2.0",
     "currency-codes": "^2.1.0",
@@ -120,7 +120,6 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/apollo-upload-client": "^17.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/color-convert": "^2.0.0",
     "@types/enzyme": "^3.10.8",
     "@types/fuzzaldrin": "^2.1.2",

src/apps/components/AppInstallPage/AppInstallPage.tsx

@@ -10,7 +10,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import { AppFetchMutation, AppInstallMutation } from "@saleor/graphql";
 import { SubmitPromise } from "@saleor/hooks/useForm";
 import { buttonMessages } from "@saleor/intl";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -60,10 +60,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
           ) : (
             <div className={classes.installAppContainer}>
               <div
-                className={classNames(
+                className={clsx(classes.installIcon, classes.installSaleorIcon)}
-                  classes.installIcon,
-                  classes.installSaleorIcon,
-                )}
               >
                 <img src={saleorDarkLogoSmall} alt="" />
               </div>

src/apps/components/AppPage/AppPage.tsx

@@ -8,7 +8,7 @@ import Grid from "@saleor/components/Grid";
 import Hr from "@saleor/components/Hr";
 import { AppQuery } from "@saleor/graphql";
 import { sectionNames } from "@saleor/intl";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -44,10 +44,7 @@ export const AppPage: React.FC<AppPageProps> = ({
         <div className={classes.breadcrumbContainer}>
           <div className={classes.breadcrumbs}>
             <Typography
-              className={classNames(
+              className={clsx(classes.breadcrumb, classes.breadcrumbDisabled)}
-                classes.breadcrumb,
-                classes.breadcrumbDisabled,
-              )}
               variant="h5"
             >
               {data?.name}

src/apps/components/AppsInProgress/AppsInProgress.tsx

@@ -19,7 +19,7 @@ import {
   TooltipMountWrapper,
 } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -58,10 +58,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
               </TableCell>
               {status === JobStatusEnum.PENDING && (
                 <TableCell
-                  className={classNames(
+                  className={clsx(classes.colAction, classes.colInstallAction)}
-                    classes.colAction,
-                    classes.colInstallAction,
-                  )}
                 >
                   <Typography variant="body2" className={classes.text}>
                     <FormattedMessage
@@ -77,10 +74,7 @@ const AppsInProgress: React.FC<AppsInProgressProps> = ({
               )}
               {status === JobStatusEnum.FAILED && (
                 <TableCell
-                  className={classNames(
+                  className={clsx(classes.colAction, classes.colInstallAction)}
-                    classes.colAction,
-                    classes.colInstallAction,
-                  )}
                 >
                   <Typography variant="body2" className={classes.error}>
                     <FormattedMessage

src/channels/components/AssignmentList/SortableHandle.tsx

@@ -1,5 +1,5 @@
 import { DragIcon, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
@@ -22,7 +22,7 @@ const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
 
   return (
     <DragIcon
-      className={classNames(classes.drag, className)}
+      className={clsx(classes.drag, className)}
       tabIndex={0}
       {...restProps}
     />

src/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import AddIcon from "@material-ui/icons/Add";
 import RemoveIcon from "@material-ui/icons/Remove";
 import { IconButton, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import Hr from "../Hr";
@@ -54,7 +54,7 @@ const Accordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = React.useState(!!initialExpand);
 
   return (
-    <div className={classNames(classes.root, className)} {...props}>
+    <div className={clsx(classes.root, className)} {...props}>
       <div className={classes.title}>
         <Typography className={classes.titleText}>{title}</Typography>
         <div className={classes.expandButton}>

src/components/AppLayout/AppLayout.tsx

@@ -11,7 +11,7 @@ import {
   useTheme,
 } from "@saleor/macaw-ui";
 import { isDarkTheme } from "@saleor/misc";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
 import useRouter from "use-react-router";
@@ -212,7 +212,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({
               </Container>
             </div>
             <main
-              className={classNames(classes.view, {
+              className={clsx(classes.view, {
                 [classes.viewMargins]: !fullSize,
               })}
             >

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -24,7 +24,7 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery";
 import { ConfirmButtonTransitionState, makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { FetchMoreProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -212,7 +212,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
         </DialogContent>
       )}
       <DialogActions
-        className={classNames(classes.actions, {
+        className={clsx(classes.actions, {
           [classes.dropShadow]: !isScrolledToBottom(anchor, position),
         })}
       >

src/components/Attributes/Attributes.tsx

@@ -15,7 +15,7 @@ import { FormsetAtomicData } from "@saleor/hooks/useFormset";
 import { ChevronIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
 import { RichTextGetters } from "@saleor/utils/richText/useMultipleRichText";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
@@ -154,7 +154,7 @@ const Attributes: React.FC<AttributesProps> = ({
             data-test-id="attributes-expand"
           >
             <ChevronIcon
-              className={classNames(classes.expansionBarButtonIcon, {
+              className={clsx(classes.expansionBarButtonIcon, {
                 [classes.rotate]: expanded,
               })}
             />

src/components/Attributes/BasicAttributeRow.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
 import Grid from "@saleor/components/Grid";
 import { Tooltip } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import { useBasicAttributeStyles } from "./styles";
@@ -38,7 +38,7 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
       </div>
       <div
         data-test-id="attribute-value"
-        className={classNames(classes.value, {
+        className={clsx(classes.value, {
           [classes.flex]: flexValueContainer,
         })}
       >

src/components/CardMenu/CardMenu.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import { IconButtonProps, makeStyles, SettingsIcon } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { useEffect, useRef, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -180,7 +180,7 @@ const CardMenu: React.FC<CardMenuProps> = props => {
                       button
                     >
                       <div
-                        className={classNames(className, {
+                        className={clsx(className, {
                           [classes.loadingContent]: isWithLoading,
                         })}
                       >

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx

@@ -6,7 +6,7 @@ import RadioSwitchField from "@saleor/components/RadioSwitchField";
 import useCurrentDate from "@saleor/hooks/useCurrentDate";
 import useDateLocalize from "@saleor/hooks/useDateLocalize";
 import { getFormErrors, getProductErrorMessage } from "@saleor/utils/errors";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
 
@@ -244,7 +244,7 @@ const ChannelContent: React.FC<ChannelContentProps> = ({
             disabled={disabled}
             label={
               <>
-                <p className={classNames(classes.label, classes.listingLabel)}>
+                <p className={clsx(classes.label, classes.listingLabel)}>
                   {intl.formatMessage(availabilityItemMessages.hideInListings)}
                 </p>
                 <span className={classes.secondLabel}>

src/components/Chip/Chip.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 export interface ChipProps {
@@ -38,7 +38,7 @@ const Chip: React.FC<ChipProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <div className={classNames(classes.root, className)}>
+    <div className={clsx(classes.root, className)}>
       <Typography className={classes.label} variant="caption">
         {label}
         {onClose && (

src/components/ColumnPicker/ColumnPickerButton.tsx

@@ -2,7 +2,7 @@ import { alpha } from "@material-ui/core/styles";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import { Button } from "@saleor/components/Button";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -42,7 +42,7 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
 
   return (
     <Button
-      className={classNames(classes.root, className, {
+      className={clsx(classes.root, className, {
         [classes.rootActive]: active,
       })}
       onClick={onClick}
@@ -54,7 +54,7 @@ const ColumnPickerButton: React.FC<ColumnPickerButtonProps> = props => {
         description="select visible columns button"
       />
       <ArrowDropDownIcon
-        className={classNames(classes.icon, {
+        className={clsx(classes.icon, {
           [classes.rotate]: active,
         })}
       />

src/components/CompanyAddressInput/CompanyAddressInput.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import CardTitle from "../CardTitle";
@@ -27,7 +27,7 @@ const CompanyAddressInput: React.FC<CompanyAddressInputProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Card className={classNames(classes.root, className)}>
+    <Card className={clsx(classes.root, className)}>
       <CardTitle title={header} />
       <CardContent>
         <CompanyAddressForm {...formProps} />

src/components/Container.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -31,7 +31,7 @@ export const Container: React.FC<ContainerProps> = props => {
 
   const classes = useStyles(props);
 
-  return <div className={classNames(classes.root, className)} {...rest} />;
+  return <div className={clsx(classes.root, className)} {...rest} />;
 };
 Container.displayName = "Container";
 export default Container;

src/components/CountryList/CountryList.tsx

@@ -7,7 +7,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { CountryFragment } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -110,9 +110,7 @@ const CountryList: React.FC<CountryListProps> = props => {
       <ResponsiveTable>
         <TableBody>
           <TableRowLink className={classes.pointer} onClick={toggleCollapse}>
-            <TableCell
+            <TableCell className={clsx(classes.wideColumn, classes.toLeft)}>
-              className={classNames(classes.wideColumn, classes.toLeft)}
-            >
               <FormattedMessage
                 id="62Ywh2"
                 defaultMessage="{number} Countries"
@@ -122,13 +120,11 @@ const CountryList: React.FC<CountryListProps> = props => {
                 }}
               />
             </TableCell>
-            <TableCell
+            <TableCell className={clsx(classes.textRight, classes.iconCell)}>
-              className={classNames(classes.textRight, classes.iconCell)}
-            >
               <IconButton variant="secondary">
                 <ArrowDropDownIcon
                   data-test-id="countries-drop-down-icon"
-                  className={classNames({
+                  className={clsx({
                     [classes.rotate]: !isCollapsed,
                   })}
                 />
@@ -158,7 +154,7 @@ const CountryList: React.FC<CountryListProps> = props => {
                     )}
                   </TableCell>
                   <TableCell
-                    className={classNames(classes.textRight, classes.iconCell)}
+                    className={clsx(classes.textRight, classes.iconCell)}
                   >
                     <IconButton
                       data-test-id="delete-icon"

src/components/CreatorSteps/CreatorSteps.tsx

@@ -1,6 +1,6 @@
 import { Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 export interface Step<T> {
@@ -60,7 +60,7 @@ function makeCreatorSteps<T extends string | number>() {
 
           return (
             <div
-              className={classNames(classes.tab, {
+              className={clsx(classes.tab, {
                 [classes.tabActive]: step.value === currentStep,
                 [classes.tabVisited]: visitedStep,
               })}

src/components/Datagrid/Datagrid.tsx

@@ -10,7 +10,7 @@ import DataEditor, {
 import { Card, CardContent, Typography } from "@material-ui/core";
 import { usePreventHistoryBack } from "@saleor/hooks/usePreventHistoryBack";
 import { MoreHorizontalIcon, useTheme } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import range from "lodash/range";
 import throttle from "lodash/throttle";
 import React from "react";
@@ -268,12 +268,12 @@ export const Datagrid: React.FC<DatagridProps> = ({
                   }}
                   rightElement={
                     <div
-                      className={classNames(classes.rowActionBar, {
+                      className={clsx(classes.rowActionBar, {
                         [classes.rowActionBarScrolledToRight]: scrolledToRight,
                       })}
                     >
                       <div
-                        className={classNames(classes.rowActionBarShadow, {
+                        className={clsx(classes.rowActionBarShadow, {
                           [classes.rowActionBarShadowActive]: !scrolledToRight,
                         })}
                       />
@@ -297,7 +297,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
                       </div>
                       {hasColumnGroups && (
                         <div
-                          className={classNames(classes.rowAction, {
+                          className={clsx(classes.rowAction, {
                             [classes.rowActionScrolledToRight]: scrolledToRight,
                           })}
                         />
@@ -306,7 +306,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
                         .fill(0)
                         .map((_, index) => (
                           <div
-                            className={classNames(classes.rowAction, {
+                            className={clsx(classes.rowAction, {
                               [classes.rowActionSelected]: selection?.rows.hasIndex(
                                 index,
                               ),

src/components/Datagrid/Header.tsx

@@ -1,6 +1,6 @@
 import FullScreenIcon from "@saleor/icons/FullScreenIcon";
 import { Button, makeStyles, PlusSmallIcon } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { FC, PropsWithChildren } from "react";
 
 import CardTitle from "../CardTitle";
@@ -46,7 +46,7 @@ const ButtonFullScreen: FC<PropsWithChildren<ButtonFullScreenProps>> = ({
       onClick={onToggle}
     >
       <FullScreenIcon
-        className={classNames(classes.fullScreenIcon, {
+        className={clsx(classes.fullScreenIcon, {
           [classes.fullScreenIconClose]: isOpen,
         })}
       />

src/components/EditableTableCell/EditableTableCell.tsx

@@ -8,7 +8,7 @@ import {
 import { TextFieldProps } from "@material-ui/core/TextField";
 import useForm from "@saleor/hooks/useForm";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -77,7 +77,7 @@ export const EditableTableCell: React.FC<EditableTableCellProps> = props => {
   const disable = () => setOpenStatus(false);
 
   return (
-    <TableCell className={classNames(classes.container, className)}>
+    <TableCell className={clsx(classes.container, className)}>
       {opened && <div className={classes.overlay} onClick={disable} />}
       <Typography variant="caption" onClick={enable} className={classes.text}>
         {value || defaultValue}

src/components/ErrorNoticeBar/ErrorNoticeBar.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 interface ErrorNoticeBarProps {
   className?: string;
@@ -23,7 +23,7 @@ const ErrorNoticeBar: React.FC<ErrorNoticeBarProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Card className={classNames(classes.root, className)}>
+    <Card className={clsx(classes.root, className)}>
       <CardContent>
         <Typography variant="body1">{message}</Typography>
       </CardContent>

src/components/ExtendedPageHeader/ExtendedPageHeader.tsx

@@ -1,6 +1,6 @@
 import { Divider } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -80,13 +80,13 @@ const ExtendedPageHeader: React.FC<ExtendedPageHeaderProps> = props => {
     <>
       <div
         data-test-id={testId}
-        className={classNames(classes.root, className, {
+        className={clsx(classes.root, className, {
           [classes.block]: !inline,
           [classes.underline]: underline,
         })}
       >
         <div className={classes.titleRow}>{title}</div>
-        <div className={classNames(classes.action, childrenWrapperClassName)}>
+        <div className={clsx(classes.action, childrenWrapperClassName)}>
           {children}
         </div>
       </div>

src/components/Filter/Filter.tsx

@@ -1,7 +1,7 @@
 import { ClickAwayListener, Grow, Popper, Typography } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";
 import { Button, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -128,7 +128,7 @@ const Filter: React.FC<FilterProps> = props => {
     >
       <div ref={anchor}>
         <Button
-          className={classNames(classes.filterButton, {
+          className={clsx(classes.filterButton, {
             [classes.addFilterButtonActive]:
               isFilterMenuOpened || isFilterActive,
           })}

src/components/Filter/FilterContent/FilterContentBody.tsx

@@ -7,7 +7,7 @@ import { useCommonStyles } from "@saleor/components/Filter/FilterContent/utils";
 import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField";
 import Skeleton from "@saleor/components/Skeleton";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import FilterAutocompleteField, {
@@ -133,7 +133,7 @@ const FilterContentBody = <K extends string = string>({
       {isFilterType(filter, FieldType.boolean) &&
         filter.options.map(option => (
           <div
-            className={classNames(classes.option, classes.optionRadio)}
+            className={clsx(classes.option, classes.optionRadio)}
             key={option.value}
           >
             <FormControlLabel

src/components/Filter/FilterOptionField.tsx

@@ -1,7 +1,7 @@
 import { FormControlLabel, Radio } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import { toggle } from "@saleor/utils/lists";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import Checkbox from "../Checkbox";
@@ -44,7 +44,7 @@ const FilterOptionField: React.FC<FilterFieldBaseProps<
     <div className={classes.root} {...rest}>
       {filter.options.map(option => (
         <div
-          className={classNames(classes.option, {
+          className={clsx(classes.option, {
             [classes.optionRadio]: !filter.multiple,
           })}
           key={option.value}

src/components/Grid/Grid.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 export type GridVariant = "default" | "inverted" | "uniform";
@@ -46,7 +46,7 @@ export const Grid: React.FC<GridProps> = props => {
 
   return (
     <div
-      className={classNames(className, classes.root, {
+      className={clsx(className, classes.root, {
         [classes.default]: variant === "default",
         [classes.inverted]: variant === "inverted",
         [classes.uniform]: variant === "uniform",

src/components/Hr.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 interface HrProps {
@@ -25,7 +25,7 @@ export const Hr: React.FC<HrProps> = props => {
 
   const classes = useStyles(props);
 
-  return <hr className={classNames(classes.root, className)} />;
+  return <hr className={clsx(classes.root, className)} />;
 };
 Hr.displayName = "Hr";
 export default Hr;

src/components/IconButtonTableCell/IconButtonTableCell.tsx

@@ -1,6 +1,6 @@
 import { TableCell } from "@material-ui/core";
 import { IconButton, ICONBUTTON_SIZE, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import { stopPropagation } from "../../misc";
@@ -30,7 +30,7 @@ const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <TableCell className={classNames(classes.root, className)}>
+    <TableCell className={clsx(classes.root, className)}>
       <IconButton
         variant="secondary"
         color="primary"

src/components/ImageUpload/ImageUpload.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";
 import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -78,14 +78,14 @@ export const ImageUpload: React.FC<ImageUploadProps> = props => {
         <>
           <div
             {...getRootProps()}
-            className={classNames(className, classes.photosIconContainer, {
+            className={clsx(className, classes.photosIconContainer, {
               [classes.backdrop]: isDragActive,
               [isActiveClassName]: isDragActive,
             })}
           >
             {!hideUploadIcon && (
               <div
-                className={classNames(iconContainerClassName, {
+                className={clsx(iconContainerClassName, {
                   [iconContainerActiveClassName]: isDragActive,
                 })}
               >

src/components/InternalLink/InternalLink.tsx

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { Link, LinkProps } from "react-router-dom";
 
@@ -7,7 +7,7 @@ import { useStyles } from "./styles";
 export const InternalLink: React.FC<LinkProps> = ({ className, ...props }) => {
   const classes = useStyles();
 
-  return <Link className={classNames(classes.root, className)} {...props} />;
+  return <Link className={clsx(classes.root, className)} {...props} />;
 };
 
 export default InternalLink;

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -11,7 +11,7 @@ import {
 import ArrowDropDown from "@material-ui/icons/ArrowDropDown";
 import { LanguageCodeEnum, LanguageFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
@@ -71,7 +71,7 @@ const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
       >
         <Typography>{currentLanguage}</Typography>
         <ArrowDropDown
-          className={classNames(classes.arrow, {
+          className={clsx(classes.arrow, {
             [classes.rotate]: isExpanded,
           })}
         />

src/components/Link.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import { TypographyProps } from "@material-ui/core/Typography";
 import { makeStyles } from "@saleor/macaw-ui";
 import { isExternalURL } from "@saleor/utils/urls";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { Link as RouterLink } from "react-router-dom";
 
@@ -60,7 +60,7 @@ const Link: React.FC<LinkProps> = props => {
   const opensNewTab = target === "_blank";
 
   const commonLinkProps = {
-    className: classNames(className, {
+    className: clsx(className, {
       [classes.root]: true,
       [classes[color]]: true,
       [classes.underline]: underline,

src/components/LinkChoice/LinkChoice.tsx

@@ -1,7 +1,7 @@
 import { ClickAwayListener, MenuItem, Paper, Popper } from "@material-ui/core";
 import { FormChange } from "@saleor/hooks/useForm";
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
-import classNames from "classnames";
+import clsx from "clsx";
 import { codes } from "keycode";
 import React from "react";
 
@@ -66,7 +66,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
 
   return (
     <span
-      className={classNames(classes.root, className)}
+      className={clsx(classes.root, className)}
       ref={anchor}
       onKeyDown={handleKeyPress}
       tabIndex={0}
@@ -74,7 +74,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
       <Link onClick={() => setOpen(open => !open)}>
         {current.label}
         <ArrowDropdown
-          className={classNames(classes.arrow, {
+          className={clsx(classes.arrow, {
             [classes.rotate]: open,
           })}
           color="primary"
@@ -96,7 +96,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
           <Paper className={classes.paper}>
             {choices.map((choice, choiceIndex) => (
               <MenuItem
-                className={classNames(classes.menuItem, {
+                className={clsx(classes.menuItem, {
                   [classes.highlighted]: highlightedIndex === choiceIndex,
                 })}
                 selected={choice.value === value}

src/components/ListItemLink/ListItemLink.tsx

@@ -1,5 +1,5 @@
 import { BaseListItemProps, ListItem, makeStyles } from "@saleor/macaw-ui";
-import clsx from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import Link from "../Link";

src/components/MediaTile/MediaTile.tsx

@@ -1,7 +1,7 @@
 import { CircularProgress } from "@material-ui/core";
 import { IconButton } from "@saleor/components/IconButton";
 import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -103,7 +103,7 @@ const MediaTile: React.FC<MediaTileProps> = props => {
   return (
     <div className={classes.mediaContainer} data-test-id="product-image">
       <div
-        className={classNames(classes.mediaOverlay, {
+        className={clsx(classes.mediaOverlay, {
           [classes.mediaOverlayShadow]: loading,
         })}
       >

src/components/Metadata/MetadataCard.tsx

@@ -14,7 +14,7 @@ import TableRowLink from "@saleor/components/TableRowLink";
 import { MetadataInput } from "@saleor/graphql";
 import { FormChange } from "@saleor/hooks/useForm";
 import { DeleteIcon, ExpandIcon, IconButton } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -74,7 +74,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
                   description: "header",
                 })}
             <IconButton
-              className={classNames(classes.expandBtn, {
+              className={clsx(classes.expandBtn, {
                 [classes.rotate]: expanded,
               })}
               hoverOutline={false}

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -8,7 +8,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import Debounce, { DebounceProps } from "@saleor/components/Debounce";
 import { ChevronIcon, IconButton } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import Downshift, { ControllerStateAndHelpers } from "downshift";
 import { filter } from "fuzzaldrin";
 import React from "react";
@@ -157,7 +157,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                             handleToggleMenu();
                             handleFocus();
                           }}
-                          className={classNames(classes.adornment, {
+                          className={clsx(classes.adornment, {
                             [classes.adornmentRotate]: isOpen,
                           })}
                         >

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -13,7 +13,7 @@ import useElementScroll, {
 } from "@saleor/hooks/useElementScroll";
 import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import { GetItemPropsOptions } from "downshift";
 import React, { ReactNode } from "react";
 import SVG from "react-inlinesvg";
@@ -337,7 +337,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
       {choices.length > maxMenuItems && (
         <div className={classes.arrowContainer}>
           <div
-            className={classNames(classes.arrowInnerContainer, {
+            className={clsx(classes.arrowInnerContainer, {
               // Needs to be explicitely compared to false because
               // scrolledToBottom can be either true, false or undefined
               [classes.hide]: scrolledToBottom !== false,

src/components/NavigatorButton/NavigatorButton.tsx

@@ -2,7 +2,7 @@ import { Grow, Paper, Popper } from "@material-ui/core";
 import { IconButtonProps } from "@material-ui/core/IconButton";
 import { LayoutButton, makeStyles, NavigatorIcon } from "@saleor/macaw-ui";
 import { triangle } from "@saleor/styles/mixins";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -89,7 +89,7 @@ const NavigatorButton: React.FC<NavigatorButtonProps> = ({
   return (
     <>
       <LayoutButton
-        className={classNames(className, classes.root)}
+        className={clsx(className, classes.root)}
         data-test-id="navigator"
         onMouseEnter={setHelper}
         onMouseLeave={clearHelper}

src/components/RadioGroupField/RadioGroupField.tsx

@@ -6,7 +6,7 @@ import {
   Radio,
   RadioGroup,
 } from "@material-ui/core";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -54,7 +54,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
 
   return (
     <FormControl
-      className={classNames(classes.root, className, {
+      className={clsx(classes.root, className, {
         [classes.rootNoLabel]: !label,
       })}
       error={error}
@@ -66,7 +66,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
         name={name}
         value={value}
         onChange={onChange}
-        className={classNames({
+        className={clsx({
           [classes.radioGroupInline]: variant === "inline",
           [innerContainerClassName]: !!innerContainerClassName,
         })}
@@ -76,7 +76,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
             <FormControlLabel
               disabled={choice.disabled}
               value={choice.value}
-              className={classNames({
+              className={clsx({
                 [classes.radioLabel]: variant !== "inline",
                 [classes.radioLabelInline]: variant === "inline",
               })}
@@ -85,7 +85,7 @@ export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
               }}
               control={
                 <Radio
-                  className={classNames({
+                  className={clsx({
                     [classes.alignTop]: alignTop,
                   })}
                   color="secondary"

src/components/RadioSwitchField/RadioSwitchField.tsx

@@ -5,7 +5,7 @@ import {
   RadioGroup,
 } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -71,7 +71,7 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
 
   return (
     <FormControl
-      className={classNames(classes.formControl, className)}
+      className={clsx(classes.formControl, className)}
       error={error}
       disabled={disabled}
     >
@@ -83,20 +83,14 @@ export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
       >
         <FormControlLabel
           value="true"
-          className={classNames(
+          className={clsx(classes.radioLabel, overrideClasses?.radioLabel)}
-            classes.radioLabel,
-            overrideClasses?.radioLabel,
-          )}
           control={<Radio color="secondary" />}
           label={firstOptionLabel}
           name={name}
         />
         <FormControlLabel
           value="false"
-          className={classNames(
+          className={clsx(classes.radioLabel, overrideClasses?.radioLabel)}
-            classes.radioLabel,
-            overrideClasses?.radioLabel,
-          )}
           control={<Radio color="secondary" />}
           label={secondOptionLabel}
           name={name}

src/components/ResponsiveTable/ResponsiveTable.tsx

@@ -1,6 +1,6 @@
 import { Table } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -34,7 +34,7 @@ const ResponsiveTable: React.FC<ResponsiveTableProps> = props => {
 
   return (
     <div className={classes.root}>
-      <Table className={classNames(classes.table, className)}>{children}</Table>
+      <Table className={clsx(classes.table, className)}>{children}</Table>
     </div>
   );
 };

src/components/RichTextEditor/RichTextEditor.tsx

@@ -2,7 +2,7 @@ import { LogLevels, OutputData } from "@editorjs/editorjs";
 import { FormControl, FormHelperText, InputLabel } from "@material-ui/core";
 import { useId } from "@reach/auto-id";
 import { Props as ReactEditorJSProps } from "@react-editor-js/core";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { createReactEditorJS } from "react-editor-js";
 
@@ -91,7 +91,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
         >
           <div
             id={id}
-            className={classNames(classes.editor, classes.root, {
+            className={clsx(classes.editor, classes.root, {
               [classes.rootActive]: isFocused,
               [classes.rootDisabled]: disabled,
               [classes.rootError]: error,

src/components/RichTextEditor/RichTextEditorContent.tsx

@@ -1,6 +1,6 @@
 import { LogLevels } from "@editorjs/editorjs";
 import { useId } from "@reach/auto-id";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { createReactEditorJS } from "react-editor-js";
 
@@ -44,7 +44,7 @@ const RichTextEditorContent: React.FC<RichTextEditorContentProps> = ({
     >
       <div
         id={id}
-        className={classNames(classes.editor, classes.rootStatic, className)}
+        className={clsx(classes.editor, classes.rootStatic, className)}
       />
     </ReactEditorJS>
   );

src/components/SeoForm/SeoForm.tsx

@@ -8,7 +8,7 @@ import {
 import { makeStyles } from "@saleor/macaw-ui";
 import { getFieldError, getProductErrorMessage } from "@saleor/utils/errors";
 import getPageErrorMessage from "@saleor/utils/errors/page";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 import slugify from "slugify";
@@ -179,9 +179,7 @@ const SeoForm: React.FC<SeoFormProps> = props => {
       />
       <CardContent>
         {shouldDisplayHelperText && (
-          <Typography
+          <Typography className={clsx({ [classes.helperText]: expanded })}>
-            className={classNames({ [classes.helperText]: expanded })}
-          >
             {helperText}
           </Typography>
         )}

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -9,7 +9,7 @@ import { InputProps } from "@material-ui/core/Input";
 import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types";
 import { ChevronIcon } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import Downshift from "downshift";
 import { filter } from "fuzzaldrin";
 import React from "react";
@@ -189,7 +189,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
                     handleToggleMenu();
                     handleFocus();
                   }}
-                  className={classNames(classes.adornment, {
+                  className={clsx(classes.adornment, {
                     [classes.adornmentRotate]: isOpen,
                   })}
                 >
@@ -214,7 +214,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
 
             return (
               <div
-                className={classNames(
+                className={clsx(
                   classes.container,
                   "click-outside-ignore",
                   className,

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -11,7 +11,7 @@ import useElementScroll, {
 } from "@saleor/hooks/useElementScroll";
 import { makeStyles } from "@saleor/macaw-ui";
 import { FetchMoreProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import { GetItemPropsOptions } from "downshift";
 import React, { ReactElement } from "react";
 import SVG from "react-inlinesvg";
@@ -206,7 +206,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
   return (
     <Paper
       // click-outside-ignore is used by glide-datagrid
-      className={classNames("click-outside-ignore", classes.root)}
+      className={clsx("click-outside-ignore", classes.root)}
       elevation={8}
       style={style}
     >
@@ -323,7 +323,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
       {choices.length > maxMenuItems && (
         <div className={classes.arrowContainer}>
           <div
-            className={classNames(classes.arrowInnerContainer, {
+            className={clsx(classes.arrowInnerContainer, {
               // Needs to be explicitly compared to false because
               // scrolledToBottom can be either true, false or undefined
               [classes.hide]: scrolledToBottom !== false,

src/components/SingleSelectField/SingleSelectField.tsx

@@ -9,7 +9,6 @@ import {
 } from "@material-ui/core";
 import { SelectProps } from "@material-ui/core/Select";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
 import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -91,7 +90,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
 
   return (
     <FormControl
-      className={classNames(classes.formControl, className)}
+      className={clsx(classes.formControl, className)}
       error={error}
       disabled={disabled}
     >
@@ -114,7 +113,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
             {...InputProps}
             classes={{
               ...(InputProps?.classes || {}),
-              input: classNames(InputProps?.classes?.input, {
+              input: clsx(InputProps?.classes?.input, {
                 [classes.noLabel]: !label,
               }),
             }}

src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -43,7 +43,7 @@ const Skeleton: React.FC<SkeletonProps> = props => {
   return (
     <span
       data-test-id="skeleton"
-      className={classNames(classes.skeleton, className, {
+      className={clsx(classes.skeleton, className, {
         [classes.primary]: primary,
       })}
       style={style}

src/components/SortableChip/SortableChip.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { SortableElement, SortableElementProps } from "react-sortable-hoc";
 
@@ -56,7 +56,7 @@ const SortableChip = SortableElement((props: SortableChipProps) => {
   };
 
   return (
-    <div className={classNames(classes.root, className)}>
+    <div className={clsx(classes.root, className)}>
       <div className={classes.content}>
         <SortableHandle
           className={classes.sortableHandle}

src/components/SortableChip/SortableHandle.tsx

@@ -1,5 +1,5 @@
 import { DragIcon, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { SortableHandle as SortableHandleHoc } from "react-sortable-hoc";
 
@@ -22,7 +22,7 @@ const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
 
   return (
     <DragIcon
-      className={classNames(classes.drag, className)}
+      className={clsx(classes.drag, className)}
       tabIndex={0}
       {...restProps}
     />

src/components/Tab/Tab.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@material-ui/core";
 import { alpha } from "@material-ui/core/styles";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -51,7 +51,7 @@ export function Tab<T>(value: T) {
       <Typography
         component="span"
         data-test-id={testId}
-        className={classNames({
+        className={clsx({
           [classes.root]: true,
           [classes.active]: isActive,
         })}

src/components/TableCellAvatar/Avatar.tsx

@@ -1,6 +1,6 @@
 import { Avatar as MuiAvatar } from "@material-ui/core";
 import { ImageIcon, makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 export const AVATAR_MARGIN = 40;
@@ -57,18 +57,18 @@ const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <div
-      className={classNames(classes.content, {
+      className={clsx(classes.content, {
         [classes.alignRight]: alignRight,
       })}
     >
       {badge}
       {!thumbnail ? (
-        <MuiAvatar className={classNames(classes.avatar, avatarProps)}>
+        <MuiAvatar className={clsx(classes.avatar, avatarProps)}>
           <ImageIcon color="primary" data-test-id="imageIcon" />
         </MuiAvatar>
       ) : (
         <MuiAvatar
-          className={classNames(classes.avatar, avatarProps)}
+          className={clsx(classes.avatar, avatarProps)}
           src={thumbnail}
         />
       )}

src/components/TableCellAvatar/TableCellAvatar.tsx

@@ -1,7 +1,7 @@
 import { TableCell } from "@material-ui/core";
 import { TableCellProps } from "@material-ui/core/TableCell";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import Avatar, { AvatarProps } from "./Avatar";
@@ -32,7 +32,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
 
   return (
     <TableCell
-      className={classNames(classes.root, className)}
+      className={clsx(classes.root, className)}
       data-test-id="table-cell-avatar"
       {...rest}
     >

src/components/TableCellHeader/TableCellHeader.tsx

@@ -1,7 +1,7 @@
 import { TableCell } from "@material-ui/core";
 import { TableCellProps } from "@material-ui/core/TableCell";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import ArrowSort from "../../icons/ArrowSort";
@@ -88,13 +88,13 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
             onClick(e);
           }
         }}
-        className={classNames(classes.root, className, {
+        className={clsx(classes.root, className, {
           [classes.disabled]: disabled,
           [classes.notSortable]: !onClick,
         })}
       >
         <div
-          className={classNames(classes.labelContainer, {
+          className={clsx(classes.labelContainer, {
             [classes.labelContainerActive]: !!direction && !!arrowPosition,
             [classes.labelContainerCenter]: textAlign === "center",
             [classes.labelContainerRight]: textAlign === "right",
@@ -102,7 +102,7 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
         >
           {!!direction && arrowPosition === "left" && (
             <ArrowSort
-              className={classNames(classes.arrow, classes.arrowLeft, {
+              className={clsx(classes.arrow, classes.arrowLeft, {
                 [classes.arrowUp]: direction === "asc",
               })}
             />
@@ -110,7 +110,7 @@ const TableCellHeader = React.forwardRef<unknown, TableCellHeaderProps>(
           <div className={classes.label}>{children}</div>
           {!!direction && arrowPosition === "right" && (
             <ArrowSort
-              className={classNames(classes.arrow, {
+              className={clsx(classes.arrow, {
                 [classes.arrowUp]: direction === "asc",
               })}
             />

src/components/TableFilter/FilterTab.tsx

@@ -1,6 +1,6 @@
 import { Tab } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -46,7 +46,7 @@ export const FilterTab: React.FC<FilterTabProps> = props => {
       label={label}
       classes={{
         root: classes.tabRoot,
-        wrapper: classNames(classes.tabLabel, {
+        wrapper: clsx(classes.tabLabel, {
           [classes.selectedTabLabel]: selected,
         }),
       }}

src/components/TableHead/TableHead.tsx

@@ -6,7 +6,7 @@ import {
 import { TableHeadProps as MuiTableHeadProps } from "@material-ui/core/TableHead";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -89,7 +89,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
         {(items === undefined || items.length > 0) && (
           <TableCell
             padding="checkbox"
-            className={classNames(classes.cell, {
+            className={clsx(classes.cell, {
               [classes.dragRows]: dragRows,
             })}
           >
@@ -104,7 +104,7 @@ const TableHead: React.FC<TableHeadProps> = props => {
         {selected ? (
           <>
             <TableCell
-              className={classNames(classes.cell, classes.root)}
+              className={clsx(classes.cell, classes.root)}
               colSpan={getColSpan(colSpan, dragRows)}
             >
               <div className={classes.container}>

src/components/TablePagination/TablePaginationActions.tsx

@@ -3,7 +3,7 @@ import ArrowLeft from "@material-ui/icons/ArrowLeft";
 import ArrowRight from "@material-ui/icons/ArrowRight";
 import { IconButton, makeStyles, useTheme } from "@saleor/macaw-ui";
 import { isDarkTheme } from "@saleor/misc";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 const useStyles = makeStyles(
@@ -79,10 +79,10 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
   const isDark = isDarkTheme(themeType);
 
   return (
-    <div className={classNames(classes.root, className)} {...other}>
+    <div className={clsx(classes.root, className)} {...other}>
       <IconButton
         variant="secondary"
-        className={classNames(classes.iconButton, {
+        className={clsx(classes.iconButton, {
           [classes.dark]: isDark,
           [classes.disabled]: !hasPreviousPage,
         })}
@@ -94,7 +94,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
         {direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
       </IconButton>
       <IconButton
-        className={classNames(classes.iconButton, {
+        className={clsx(classes.iconButton, {
           [classes.dark]: isDark,
           [classes.disabled]: !hasNextPage,
         })}

src/components/TableRowLink/TableRowLink.tsx

@@ -1,7 +1,7 @@
 import { TableRow, TableRowTypeMap } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import { isExternalURL } from "@saleor/utils/urls";
-import clsx from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { Link } from "react-router-dom";
 

src/components/TextWithSelectField/TextWithSelectField.tsx

@@ -3,7 +3,7 @@ import SingleSelectField, {
   Choices,
 } from "@saleor/components/SingleSelectField";
 import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 import { useStyles } from "./styles";
@@ -99,7 +99,7 @@ const TextWithSelectField: React.FC<TextWithSelectFieldProps> = ({
           min: textFieldMinValue,
         }}
         InputProps={{
-          className: classNames(classes.textField, {
+          className: clsx(classes.textField, {
             [classes.textFieldCentered]: !textFieldLabel,
           }),
           endAdornment: (

src/components/VisibilityCard/VisibilityCard.tsx

@@ -9,7 +9,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
 import { makeStyles } from "@saleor/macaw-ui";
 import { UserError } from "@saleor/types";
 import { getFieldError } from "@saleor/utils/errors";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -279,9 +279,7 @@ export const VisibilityCard: React.FC<VisibilityCardProps> = props => {
               disabled={disabled}
               label={
                 <>
-                  <p
+                  <p className={clsx(classes.label, classes.listingLabel)}>
-                    className={classNames(classes.label, classes.listingLabel)}
-                  >
                     {intl.formatMessage(visibilityCardMessages.hideInListings)}
                   </p>
 

src/customers/components/CustomerAddressChoiceCard/CustomerAddressChoiceCard.tsx

@@ -3,7 +3,7 @@ import AddressFormatter from "@saleor/components/AddressFormatter";
 import { AddressFragment } from "@saleor/graphql";
 import { commonMessages } from "@saleor/intl";
 import { EditIcon } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -25,7 +25,7 @@ const CustomerAddressChoiceCard: React.FC<CustomerAddressChoiceCardProps> = prop
 
   return (
     <Card
-      className={classNames(classes.card, {
+      className={clsx(classes.card, {
         [classes.cardSelected]: selected,
         [classes.selectableCard]: !editable && !selected,
       })}

src/discounts/components/SaleList/SaleList.tsx

@@ -18,7 +18,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -203,7 +203,7 @@ const SaleList: React.FC<SaleListProps> = props => {
                   />
                 </TableCell>
                 <TableCell
-                  className={classNames(classes.colName, classes.textOverflow)}
+                  className={clsx(classes.colName, classes.textOverflow)}
                 >
                   {maybe<React.ReactNode>(() => sale.name, <Skeleton />)}
                 </TableCell>

src/discounts/components/VoucherList/VoucherList.tsx

@@ -18,7 +18,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ChannelProps, ListActions, ListProps, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -259,7 +259,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
                   />
                 </TableCell>
                 <TableCell
-                  className={classNames(classes.colName, classes.textOverflow)}
+                  className={clsx(classes.colName, classes.textOverflow)}
                 >
                   {voucher?.code ?? <Skeleton />}
                 </TableCell>

src/giftCards/GiftCardCreateDialog/ContentWithProgress.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 
 interface ContentWithProgressProps {
@@ -30,7 +30,7 @@ const ContentWithProgress: React.FC<ContentWithProgressProps> = ({
   return children ? (
     <>{children}</>
   ) : (
-    <div className={classNames(classes.container, containerClassName)}>
+    <div className={clsx(classes.container, containerClassName)}>
       <CircularProgress />
     </div>
   );

src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsBalanceSection.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@material-ui/core";
 import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer";
 import CardSpacer from "@saleor/components/CardSpacer";
 import Money from "@saleor/components/Money";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -24,9 +24,7 @@ const GiftCardUpdateDetailsBalanceSection: React.FC = () => {
 
   return (
     <>
-      <div
+      <div className={clsx(classes.labelsContainer, classes.wideContainer)}>
-        className={classNames(classes.labelsContainer, classes.wideContainer)}
-      >
         <Typography>{intl.formatMessage(messages.cardBalanceLabel)}</Typography>
         <Typography className={classes.labelsContainer}>
           <Money money={currentBalance} />

src/home/components/HomeProductListCard/HomeProductListCard.tsx

@@ -9,7 +9,7 @@ import { HomeQuery } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
 import { productVariantEditUrl } from "@saleor/products/urls";
 import { RelayToFlat } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -77,7 +77,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
               <TableRowLink
                 key={variant ? variant.id : "skeleton"}
                 hover={!!variant}
-                className={classNames({
+                className={clsx({
                   [classes.tableRow]: !!variant,
                 })}
                 href={productVariantEditUrl(variant.product.id, variant.id)}

src/navigation/components/MenuItems/MenuItems.tsx

@@ -11,7 +11,7 @@ import {
   useTheme,
 } from "@saleor/macaw-ui";
 import { RecursiveMenuItem } from "@saleor/navigation/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import SortableTree, { NodeRendererProps } from "react-sortable-tree";
@@ -152,12 +152,12 @@ const Node: React.FC<NodeRendererProps<TreeItemProps>> = props => {
   } = props;
   const classes = useStyles(props);
 
-  const draggedClassName = classNames(
+  const draggedClassName = clsx(
     classes.rowContainer,
     classes.rowContainerDragged,
   );
   const defaultClassName = isDragging ? draggedClassName : classes.rowContainer;
-  const placeholderClassName = classNames(
+  const placeholderClassName = clsx(
     classes.rowContainer,
     classes.rowContainerPlaceholder,
   );
@@ -244,7 +244,7 @@ const MenuItems: React.FC<MenuItemsProps> = props => {
         }
       />
       <div
-        className={classNames(classes.container, {
+        className={clsx(classes.container, {
           [classes.darkContainer]: themeType === "dark",
         })}
         style={{

src/orders/components/OrderDraftDetailsProducts/TableLine.tsx

@@ -11,7 +11,7 @@ import {
 } from "@saleor/graphql";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { OrderLineDiscountContextConsumerProps } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
-import classNames from "classnames";
+import clsx from "clsx";
 import React, { useRef } from "react";
 
 import { maybe } from "../../../misc";
@@ -106,7 +106,7 @@ const TableLine: React.FC<TableLineProps> = ({
   return (
     <TableRowLink key={id}>
       <TableCell
-        className={classNames({
+        className={clsx({
           [classes.colStatusEmpty]: !alerts.length,
         })}
       >

src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx

@@ -16,7 +16,7 @@ import {
   getWarehouseStock,
   OrderFulfillLineFormData,
 } from "@saleor/orders/utils/data";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -121,7 +121,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
           <TextField
             type="number"
             inputProps={{
-              className: classNames(classes.quantityInnerInput, {
+              className: clsx(classes.quantityInnerInput, {
                 [classes.quantityInnerInputNoRemaining]: !line.variant
                   ?.trackInventory,
               }),
@@ -169,7 +169,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
         ) : (
           <IconButton
             onClick={onWarehouseChange}
-            className={classNames(
+            className={clsx(
               classes.warehouseButton,
               "MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
             )}

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -42,7 +42,7 @@ import {
   getToFulfillOrderLines,
   OrderFulfillLineFormData,
 } from "@saleor/orders/utils/data";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -235,7 +235,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                           <FormattedMessage {...messages.sku} />
                         </TableCell>
                         <TableCell
-                          className={classNames(
+                          className={clsx(
                             classes.colQuantity,
                             classes.colQuantityHeader,
                           )}

src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx

@@ -2,7 +2,7 @@ import { TableCell, Typography } from "@material-ui/core";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { FulfillmentStatus, OrderDetailsFragment } from "@saleor/graphql";
 import { getStringOrPlaceholder } from "@saleor/misc";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -37,7 +37,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
                   : extraInfoMessages.fulfilled,
               )}
               <Typography
-                className={classNames(classes.infoLabel, {
+                className={clsx(classes.infoLabel, {
                   [classes.infoLabelWithMargin]: !!trackingNumber,
                 })}
                 color="textPrimary"

src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx

@@ -14,7 +14,7 @@ import TableRowLink from "@saleor/components/TableRowLink";
 import { InvoiceFragment } from "@saleor/graphql";
 import { buttonMessages } from "@saleor/intl";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -90,7 +90,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
         }
       />
       <CardContent
-        className={classNames({
+        className={clsx({
           [classes.cardContentTable]: generatedInvoices?.length,
         })}
       >

src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmountValues.tsx

@@ -1,7 +1,7 @@
 import Money, { IMoney } from "@saleor/components/Money";
 import Skeleton from "@saleor/components/Skeleton";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import reduce from "lodash/reduce";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
@@ -121,7 +121,7 @@ const OrderRefundAmountValues: React.FC<OrderRefundAmountValuesProps> = props =>
     <div className={classes.container}>
       {items.map(({ key, data, highlighted }) => (
         <div
-          className={classNames(classes.row, {
+          className={clsx(classes.row, {
             [classes.highlightedRow]: highlighted,
           })}
           key={key}

src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx

@@ -30,7 +30,7 @@ import {
   RelayToFlat,
   SearchPageProps,
 } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -303,7 +303,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
         </InfiniteScroll>
       </DialogContent>
       <DialogActions
-        className={classNames({
+        className={clsx({
           [classes.dropShadow]: dropShadow,
         })}
       >

src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx

@@ -25,7 +25,7 @@ import { sortMembers } from "@saleor/permissionGroups/sort";
 import { MembersListUrlSortField } from "@saleor/permissionGroups/urls";
 import { ListActions, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -202,7 +202,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
 
                 return (
                   <TableRowLink
-                    className={classNames({
+                    className={clsx({
                       [classes.tableRow]: !!user,
                     })}
                     hover={!!user}

src/products/components/ProductList/ProductList.tsx

@@ -38,7 +38,7 @@ import TDisplayColumn, {
   DisplayColumnProps,
 } from "@saleor/utils/columns/DisplayColumn";
 import { getArrowDirection } from "@saleor/utils/sort";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -187,7 +187,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
           <TableCellHeader
             data-test-id="col-name-header"
             arrowPosition="right"
-            className={classNames(classes.colName, {
+            className={clsx(classes.colName, {
               [classes.colNameFixed]: settings.columns.length > 4,
             })}
             direction={

src/products/components/ProductMedia/ProductMedia.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from "@saleor/macaw-ui";
 import { ProductMediaPopper } from "@saleor/products/components/ProductMediaPopper/ProductMediaPopper";
 import { ReorderAction } from "@saleor/types";
 import createMultiFileUploadHandler from "@saleor/utils/handlers/multiFileUploadHandler";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 import { SortableContainer, SortableElement } from "react-sortable-hoc";
@@ -280,7 +280,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                     media={media}
                     preview={imagesToUpload}
                     onSortEnd={onImageReorder}
-                    className={classNames({
+                    className={clsx({
                       [classes.root]: true,
                       [classes.rootDragActive]: isDragActive,
                     })}

src/products/components/ProductMediaNavigation/ProductMediaNavigation.tsx

@@ -2,7 +2,7 @@ import { Card, CardContent } from "@material-ui/core";
 import CardTitle from "@saleor/components/CardTitle";
 import Skeleton from "@saleor/components/Skeleton";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
@@ -81,7 +81,7 @@ const ProductMediaNavigation: React.FC<ProductMediaNavigationProps> = props => {
 
               return (
                 <div
-                  className={classNames({
+                  className={clsx({
                     [classes.imageContainer]: true,
                     [classes.highlightedImageContainer]:
                       mediaObj.id === highlighted,

src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx

@@ -7,7 +7,7 @@ import {
 import BackButton from "@saleor/components/BackButton";
 import { ProductMediaFragment } from "@saleor/graphql";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -83,7 +83,7 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
                 parsedMediaOembedData?.thumbnail_url || mediaObj.url;
               return (
                 <div
-                  className={classNames([
+                  className={clsx([
                     classes.imageContainer,
                     {
                       [classes.selectedImageContainer]:

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -19,7 +19,7 @@ import {
   productVariantEditUrl,
 } from "@saleor/products/urls";
 import { ReorderAction } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -70,7 +70,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
                 hover={!!variant}
                 key={variant ? variant.id : "skeleton"}
                 index={variantIndex || 0}
-                className={classNames(classes.link, {
+                className={clsx(classes.link, {
                   [classes.rowActive]: isActive,
                 })}
                 href={
@@ -109,7 +109,7 @@ const ProductVariantNavigation: React.FC<ProductVariantNavigationProps> = props
             <TableRowLink>
               <TableCellAvatar
                 alignRight
-                className={classNames(
+                className={clsx(
                   classes.colAvatar,
                   classes.rowActive,
                   classes.noHandle,

src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx

@@ -19,7 +19,7 @@ import {
 import ArrowDropdown from "@saleor/icons/ArrowDropdown";
 import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
 import { renderCollection } from "@saleor/misc";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -125,7 +125,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
           </Button>
         }
       />
-      <CardContent className={classNames(classes.radioContainer)}>
+      <CardContent className={clsx(classes.radioContainer)}>
         <RadioGroupField
           alignTop
           choices={[
@@ -204,7 +204,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
                 onClick={() => setExpanded(!expanded)}
               >
                 <ArrowDropdown
-                  className={classNames(classes.arrow, {
+                  className={clsx(classes.arrow, {
                     [classes.arrowRotate]: expanded,
                   })}
                 />

src/staff/components/StaffList/StaffList.tsx

@@ -24,7 +24,7 @@ import {
 } from "@saleor/staff/urls";
 import { ListProps, RelayToFlat, SortPage } from "@saleor/types";
 import { getArrowDirection } from "@saleor/utils/sort";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -141,7 +141,7 @@ const StaffList: React.FC<StaffListProps> = props => {
           staffMembers,
           staffMember => (
             <TableRowLink
-              className={classNames({
+              className={clsx({
                 [classes.tableRow]: !!staffMember,
               })}
               hover={!!staffMember}

src/taxes/pages/TaxChannelsPage/TaxChannelsMenu/TaxChannelsMenu.tsx

@@ -6,7 +6,7 @@ import { List, ListHeader, ListItem, ListItemCell } from "@saleor/macaw-ui";
 import { taxesMessages } from "@saleor/taxes/messages";
 import { taxConfigurationListUrl } from "@saleor/taxes/urls";
 import { isLastElement } from "@saleor/taxes/utils/utils";
-import clsx from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 

src/translations/components/ProductContextSwitcher/ProductContextSwitcher.tsx

@@ -17,7 +17,7 @@ import {
   productVariantUrl,
   TranslatableEntities,
 } from "@saleor/translations/urls";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -118,7 +118,7 @@ const ProductContextSwitcher: React.FC<ProductContextSwitcherProps> = ({
             {items.find(({ value }) => value === selectedId)?.label || "-"}
           </Typography>
           <ArrowDropDown
-            className={classNames(classes.arrow, {
+            className={clsx(classes.arrow, {
               [classes.rotate]: isExpanded,
             })}
           />

src/translations/components/TranslationFields/TranslationFields.tsx

@@ -19,7 +19,7 @@ import {
   TranslationFieldType,
 } from "@saleor/translations/types";
 import { ListProps } from "@saleor/types";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -145,7 +145,7 @@ const TranslationFields: React.FC<TranslationFieldsProps> = props => {
             onClick={() => setExpandedState(!expanded)}
           >
             <ArrowIcon
-              className={classNames({
+              className={clsx({
                 [classes.rotate]: expanded,
               })}
             />

src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx

@@ -9,7 +9,7 @@ import Skeleton from "@saleor/components/Skeleton";
 import { TablePaginationWithContext } from "@saleor/components/TablePagination";
 import TableRowLink from "@saleor/components/TableRowLink";
 import { makeStyles } from "@saleor/macaw-ui";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -79,7 +79,7 @@ const TranslationsEntitiesList: React.FC<TranslationsEntitiesListProps> = props
           entities,
           entity => (
             <TableRowLink
-              className={classNames({
+              className={clsx({
                 [classes.tableRow]: !!entity,
               })}
               hover={!!entity}

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -16,7 +16,7 @@ import { DeleteIcon, IconButton, Pill } from "@saleor/macaw-ui";
 import { renderCollection, stopPropagation } from "@saleor/misc";
 import { webhookPath } from "@saleor/webhooks/urls";
 import { isUnnamed } from "@saleor/webhooks/utils";
-import classNames from "classnames";
+import clsx from "clsx";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -63,9 +63,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
             <TableCellHeader>
               {intl.formatMessage(commonMessages.status)}
             </TableCellHeader>
-            <TableCell
+            <TableCell className={clsx(classes.colAction, classes.colRight)}>
-              className={classNames(classes.colAction, classes.colRight)}
-            >
               <FormattedMessage {...messages.action} />
             </TableCell>
           </TableRowLink>
@@ -81,7 +79,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
                 key={webhook ? webhook.id : "skeleton"}
               >
                 <TableCell
-                  className={classNames(classes.colName, {
+                  className={clsx(classes.colName, {
                     [classes.colNameUnnamed]: isUnnamed(webhook),
                   })}
                 >
@@ -106,7 +104,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
                   )}
                 </TableCell>
                 <TableCell
-                  className={classNames(classes.colAction, classes.colRight)}
+                  className={clsx(classes.colAction, classes.colRight)}
                 >
                   <TableButtonWrapper>
                     <IconButton