@transferwise/components 46.50.1 → 46.52.0

package/src/main.css

@@ -2655,6 +2655,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     height: auto;
   }
 }
+.np-select-input-listbox-container--virtualized {
+  /* The wrapping element shrinks this as needed */
+  height: 100vh;
+}
 .np-select-input-listbox-container--has-group {
   scroll-padding-top: 32px;
   scroll-padding-top: var(--size-32);
@@ -2673,6 +2677,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-listbox-container--virtualized .np-select-input-listbox {
+  /* Adopted from `VList` in virtua: https://github.com/inokawa/virtua/blob/7f6ed5b37df6b480d4ff350f3960067c5b3519d2/src/react/VList.tsx#L113-L116 */
+  overflow-y: auto;
+  contain: strict;
+  height: 100%;
+}
 .np-select-input-separator-item {
   margin: 8px;
   margin: var(--size-8);

package/src/modal/Modal.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactNode, useContext, useId, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
@@ -92,7 +92,7 @@ const Modal = ({
       >
         <div
           ref={contentReference}
-          className={classNames(
+          className={clsx(
             'tw-modal',
             'd-flex',
             'fade',
@@ -107,12 +107,12 @@ const Modal = ({
             role="dialog"
             aria-modal
             aria-labelledby={titleId}
-            className={classNames('tw-modal-dialog', 'd-flex', {
+            className={clsx('tw-modal-dialog', 'd-flex', {
               [`tw-modal-${size}`]: size,
             })}
           >
             <div
-              className={classNames(
+              className={clsx(
                 'tw-modal-content',
                 'd-flex',
                 'flex-column',
@@ -124,7 +124,7 @@ const Modal = ({
               )}
             >
               <div
-                className={classNames(
+                className={clsx(
                   'tw-modal-header',
                   'd-flex',
                   'align-items-center',
@@ -141,7 +141,7 @@ const Modal = ({
                 <CloseButton onClick={onClose} />
               </div>
               <div
-                className={classNames('tw-modal-body', {
+                className={clsx('tw-modal-body', {
                   'tw-modal-body--scrollable': scroll === Scroll.CONTENT,
                 })}
               >
@@ -149,15 +149,9 @@ const Modal = ({
               </div>
               {footer && (
                 <div
-                  className={classNames(
-                    'tw-modal-footer',
-                    'd-flex',
-                    'align-items-center',
-                    'flex-wrap',
-                    {
-                      'modal--withoutborder': noDivider,
-                    },
-                  )}
+                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {
+                    'modal--withoutborder': noDivider,
+                  })}
                 >
                   {footer}
                 </div>

package/src/moneyInput/MoneyInput.story.tsx

@@ -149,40 +149,6 @@ export const BalanceCurrencies: Story = {
   },
 };
 
-export const MaxLengthOverride: Story = {
-  args: {
-    ...SingleCurrency.args,
-    maxLengthOverride: 5,
-  },
-  play: async ({ canvasElement }) => {
-    await userEvent.tab();
-    await userEvent.keyboard('12.345');
-
-    await expect(within(canvasElement).getByRole('textbox')).toHaveValue('12.34');
-  },
-};
-
-export const MaxLengthOverrideWithCommaDecimalSeparator: Story = {
-  ...MaxLengthOverride,
-  decorators: [
-    (Story) => {
-      const locale = 'de';
-      return (
-        <Provider i18n={{ locale, messages: translations[locale] }}>
-          <Story />
-        </Provider>
-      );
-    },
-  ],
-  play: async ({ canvasElement }) => {
-    await userEvent.tab();
-    await userEvent.keyboard('12,345');
-    await userEvent.tab();
-
-    await expect(within(canvasElement).getByRole('textbox')).toHaveValue('12.34');
-  },
-};
-
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: async ({ canvasElement }) => {

package/src/moneyInput/MoneyInput.tsx

@@ -1,6 +1,6 @@
 import { isEmpty, isNumber, isNull } from '@transferwise/neptune-validation';
 import { Flag } from '@wise/art';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Component } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 
@@ -41,16 +41,11 @@ const formatAmountIfSet = ({
   amount,
   currency,
   locale,
-  maxLengthOverride,
 }: {
   amount: number | null | undefined;
   currency: string;
   locale: string;
-  maxLengthOverride?: number;
 }) => {
-  if (maxLengthOverride) {
-    return amount != null ? String(amount) : '';
-  }
   return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
 };
 
@@ -58,16 +53,11 @@ const parseNumber = ({
   amount,
   currency,
   locale,
-  maxLengthOverride,
 }: {
   amount: string;
   currency: string;
   locale: string;
-  maxLengthOverride?: number;
 }) => {
-  if (maxLengthOverride && amount.length > maxLengthOverride) {
-    return 0;
-  }
   return parseAmount(amount, currency, locale);
 };
 
@@ -105,7 +95,6 @@ export interface MoneyInputProps extends WrappedComponentProps {
   onCustomAction?: () => void;
   classNames?: Record<string, string>;
   selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
-  maxLengthOverride?: number;
 }
 
 type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
@@ -136,7 +125,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: props.amount,
         currency: props.selectedCurrency.currency,
         locale: props.intl.locale,
-        maxLengthOverride: props.maxLengthOverride,
       }),
       locale: props.intl.locale,
     };
@@ -151,7 +139,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: nextProps.amount,
           currency: nextProps.selectedCurrency.currency,
           locale: nextProps.intl.locale,
-          maxLengthOverride: nextProps.maxLengthOverride,
         }),
       });
     }
@@ -179,7 +166,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: paste,
           currency: this.props.selectedCurrency.currency,
           locale,
-          maxLengthOverride: this.props.maxLengthOverride,
         });
 
     if (isNumberOrNull(parsed)) {
@@ -188,7 +174,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale,
-          maxLengthOverride: this.props.maxLengthOverride,
         }),
       });
       this.props.onAmountChange?.(parsed);
@@ -208,7 +193,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: value,
           currency: this.props.selectedCurrency.currency,
           locale: this.state.locale,
-          maxLengthOverride: this.props.maxLengthOverride,
         });
     if (isNumberOrNull(parsed)) {
       this.props.onAmountChange?.(parsed);
@@ -256,7 +240,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         amount: previousState.formattedAmount,
         currency: this.props.selectedCurrency.currency,
         locale: previousState.locale,
-        maxLengthOverride: this.props.maxLengthOverride,
       });
       if (!isNumberOrNull(parsed)) {
         return {
@@ -268,7 +251,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           amount: parsed,
           currency: this.props.selectedCurrency.currency,
           locale: previousState.locale,
-          maxLengthOverride: this.props.maxLengthOverride,
         }),
       };
     });
@@ -304,7 +286,6 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
       size,
       addon,
       selectProps,
-      maxLengthOverride,
     } = this.props;
     const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
 
@@ -340,7 +321,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         role="group"
         {...inputAttributes}
         aria-labelledby={ariaLabelledBy}
-        className={classNames(
+        className={clsx(
           this.style('tw-money-input'),
           this.style('input-group'),
           this.style(`input-group-${size}`),
@@ -351,12 +332,10 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           value={this.state.formattedAmount}
           inputMode="decimal"
           disabled={disabled}
-          maxLength={maxLengthOverride}
           placeholder={formatAmountIfSet({
             amount: this.props.placeholder,
             currency: this.props.selectedCurrency.currency,
             locale: this.state.locale,
-            maxLengthOverride: this.props.maxLengthOverride,
           })}
           autoComplete="off"
           onKeyDown={this.handleKeyDown}
@@ -367,7 +346,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         />
         {addon && (
           <span
-            className={classNames(
+            className={clsx(
               this.style('input-group-addon'),
               this.style(`input-${size}`),
               disabled ? this.style('disabled') : '',
@@ -378,7 +357,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
         )}
         {isFixedCurrency ? (
           <div
-            className={classNames(
+            className={clsx(
               this.style('input-group-addon'),
               this.style(`input-${size}`),
               this.style('tw-money-input__fixed-currency'),
@@ -386,9 +365,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
             )}
           >
             {(size === 'lg' || size === 'md') && (
-              <span
-                className={classNames(this.style('money-input-currency-flag'), this.style('m-r-2'))}
-              >
+              <span className={clsx(this.style('money-input-currency-flag'), this.style('m-r-2'))}>
                 <Flag code={selectedCurrency.currency.toLowerCase()} intrinsicSize={24} />
               </span>
             )}
@@ -402,7 +379,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
           </div>
         ) : (
           <div
-            className={classNames(
+            className={clsx(
               this.style('input-group-btn'),
               this.style('amount-currency-select-btn'),
             )}

package/src/navigationOption/NavigationOption.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import Chevron from '../chevron';
@@ -19,7 +19,7 @@ const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
         {...rest}
         ref={reference}
         as={component}
-        className={classNames('np-navigation-option', className)}
+        className={clsx('np-navigation-option', className)}
         button={<Chevron orientation={Position.RIGHT} disabled={disabled} className="d-block" />}
         disabled={disabled}
         onClick={(event) => {

package/src/nudge/Nudge.tsx

@@ -1,5 +1,5 @@
 import { Illustration, Assets, IllustrationNames } from '@wise/art';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactNode, useEffect, useState, MouseEvent } from 'react';
 
 import Body from '../body';
@@ -135,12 +135,12 @@ const Nudge = ({
   }
 
   return (
-    <div className={classNames('wds-nudge', className)} id={id}>
+    <div className={clsx('wds-nudge', className)} id={id}>
       {!!mediaName && (
         <div className="wds-nudge-media">
           <Illustration
             name={mediaName as IllustrationNames}
-            className={classNames(`wds-nudge-media-${mediaName}`)}
+            className={clsx(`wds-nudge-media-${mediaName}`)}
             size="small"
             disablePadding
             alt=""
@@ -149,7 +149,7 @@ const Nudge = ({
       )}
       <div className="wds-nudge-container">
         <div className="wds-nudge-content">
-          <Body type={Typography.BODY_LARGE} className={classNames('wds-nudge-body')}>
+          <Body type={Typography.BODY_LARGE} className={clsx('wds-nudge-body')}>
             {title}
           </Body>
           {link && (

package/src/overlayHeader/OverlayHeader.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { Size } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -23,9 +23,9 @@ export default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: O
         className="np-overlay-header__content p-a-3"
         leftContent={logo}
         rightContent={
-          <div className={classNames('d-flex', 'align-items-center', 'order-2')}>
+          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>
             {avatar}
-            {avatar && closeButton && <span className={classNames('m-x-1')} />}
+            {avatar && closeButton && <span className={clsx('m-x-1')} />}
             {closeButton}
           </div>
         }

package/src/popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
 
 import { Position, Typography } from '../common';
@@ -69,7 +69,7 @@ export default function Popover({
   };
 
   return (
-    <span className={classnames('np-popover', className)}>
+    <span className={clsx('np-popover', className)}>
       <span ref={anchorReference} className="d-inline-block">
         {isValidElement<{ onClick?: () => void }>(children)
           ? cloneElement(children, {

package/src/processIndicator/ProcessIndicator.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Component } from 'react';
 
 import { Status, Size } from '../common';
@@ -89,7 +89,7 @@ export default class ProcessIndicator extends Component<
   render() {
     const { className, 'data-testid': dataTestId } = this.props;
     const { size, status } = this.state;
-    const classes = classNames(`process process-${size}`, className, {
+    const classes = clsx(`process process-${size}`, className, {
       [`process-danger`]: status === Status.FAILED,
       [`process-stopped`]: status === Status.HIDDEN,
       [`process-success`]: status === Status.SUCCEEDED,

package/src/progress/Progress.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 
 export type ProgressProps = {
   className?: string;
@@ -8,7 +8,7 @@ export type ProgressProps = {
 
 const Progress = ({ className, id, progress }: ProgressProps) => {
   return (
-    <progress id={id} className={classnames('np-progress d-block', className)} {...progress}>
+    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>
       {Math.floor((progress.value / progress.max) * 100)}%
     </progress>
   );

package/src/progressBar/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import Body from '../body';
 import { Typography } from '../common';
@@ -25,7 +25,7 @@ const ProgressBar = ({
 }: ProgressBarProps) => {
   const { isModern } = useTheme();
   return (
-    <div className={classNames('np-progress-bar', className)}>
+    <div className={clsx('np-progress-bar', className)}>
       <label className="np-progress-bar__title m-b-1" htmlFor={id}>
         <Title
           type={Typography.TITLE_BODY}

package/src/promoCard/PromoCard.tsx

@@ -1,5 +1,5 @@
 import { Check } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';
 
 import Body from '../body';
@@ -237,7 +237,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
     // is truthy.
     const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();
     const [checked, setChecked] = useState(
-      type === 'checkbox' ? defaultChecked ?? isChecked ?? false : false,
+      type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,
     );
 
     const handleClick = () => {
@@ -276,7 +276,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
 
     // Define all class names string based on the values of the `href`, `type`,
     // `checked`, and `className` props.
-    const commonClasses = classNames(
+    const commonClasses = clsx(
       {
         'np-Card--promoCard': true,
         'np-Card--checked': !href && type,
@@ -380,7 +380,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
         <Body className="np-Card-description">{description}</Body>
 
         {imageSource && (
-          <div className={classNames('np-Card-image', { imageClass })}>
+          <div className={clsx('np-Card-image', { imageClass })}>
             <Image src={imageSource} alt={imageAlt || ''} loading="lazy" />
           </div>
         )}

package/src/promoCard/PromoCardGroup.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';
 
 import { PromoCardProps } from './PromoCard';
@@ -89,7 +89,7 @@ const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
     return { state, isDisabled, onChange: handleOnChange };
   }, [state, isDisabled, onChange]);
 
-  const commonClasses = classNames(
+  const commonClasses = clsx(
     {
       'np-CardGroup': true,
       'is-disabled': isDisabled,

package/src/promoCard/PromoCardIndicator.tsx

@@ -1,5 +1,5 @@
 import { ArrowRight, Check, Download } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
 import Avatar, { AvatarType } from '../avatar';
@@ -62,7 +62,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
     }[icon];
 
   return (
-    <div className={classNames('np-Card-indicator', className)} data-testid={testid} {...rest}>
+    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>
       {label && (
         <Body as="span" type={Typography.BODY_LARGE_BOLD} className="np-Card-indicatorText">
           {label}

package/src/radio/Radio.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import Body from '../body/Body';
 import { Typography } from '../common';
@@ -25,7 +25,7 @@ export default function Radio<T extends string | number = ''>({
   const { isModern } = useTheme();
   return (
     <div
-      className={classNames(
+      className={clsx(
         'radio np-radio',
         {
           'radio-lg': secondary,
@@ -34,8 +34,8 @@ export default function Radio<T extends string | number = ''>({
         className,
       )}
     >
-      <label className={classNames({ disabled })} htmlFor={id}>
-        <span className={classNames(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
+      <label className={clsx({ disabled })} htmlFor={id}>
+        <span className={clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
           <RadioButton id={id} disabled={disabled} {...otherProps} />
         </span>
         <Body
@@ -45,7 +45,7 @@ export default function Radio<T extends string | number = ''>({
         >
           {label}
           {secondary && (
-            <Body as="span" className={classNames({ secondary: !isModern })}>
+            <Body as="span" className={clsx({ secondary: !isModern })}>
               {secondary}
             </Body>
           )}

package/src/section/Section.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { PropsWithChildren } from 'react';
 
 import { CommonProps } from '../common';
@@ -17,7 +17,7 @@ type SectionProps = PropsWithChildren<
 const Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {
   return (
     <div
-      className={classNames('np-section', className, {
+      className={clsx('np-section', className, {
         'np-section--with-horizontal-padding': withHorizontalPadding,
       })}
     >

package/src/segmentedControl/SegmentedControl.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../body';
@@ -87,12 +87,12 @@ const SegmentedControl = ({
     <div
       ref={segmentsRef}
       data-testid="segmented-control"
-      className={classNames('segmented-control', {
+      className={clsx('segmented-control', {
         'segmented-control--input': mode === 'input',
       })}
     >
       <div
-        className={classNames('segmented-control__segments', {
+        className={clsx('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
         role={mode !== 'input' ? 'tablist' : undefined}
@@ -107,7 +107,7 @@ const SegmentedControl = ({
               ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}
               key={segment.id}
               htmlFor={segment.id}
-              className={classNames('segmented-control__segment', {
+              className={clsx('segmented-control__segment', {
                 'segmented-control__selected-segment': value === segment.value,
               })}
             >
@@ -139,7 +139,7 @@ const SegmentedControl = ({
               id={segment.id}
               aria-controls={segment.controls}
               aria-selected={value === segment.value}
-              className={classNames('segmented-control__segment', 'segmented-control__button', {
+              className={clsx('segmented-control__segment', 'segmented-control__button', {
                 'segmented-control__selected-segment': value === segment.value,
               })}
               onClick={onSelect}

package/src/select/Select.js

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useState, useEffect, useRef, useMemo, useId } from 'react';
 import { useIntl } from 'react-intl';
@@ -321,7 +321,7 @@ export default function Select({
   }
 
   function renderOptionsList({ className } = {}) {
-    const dropdownClass = classNames(
+    const dropdownClass = clsx(
       s('np-dropdown-menu'),
       {
         [s('np-dropdown-menu-desktop')]: !isMobile,
@@ -369,7 +369,7 @@ export default function Select({
     return (
       /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
-        className={classNames(s('clickable'), s('border-bottom'), s('show-more'))}
+        className={clsx(s('clickable'), s('border-bottom'), s('show-more'))}
         onClick={handleOnClick}
         onKeyPress={handleOnClick}
       >
@@ -384,7 +384,7 @@ export default function Select({
     return (
       /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
       <li
-        className={classNames(s('clickable'), s('border-bottom'))}
+        className={clsx(s('clickable'), s('border-bottom'))}
         onClick={createSelectHandlerForOption(placeholderOption)}
         onKeyPress={createSelectHandlerForOption(placeholderOption)}
       >
@@ -403,7 +403,7 @@ export default function Select({
   function HeaderOption({ children }) {
     return (
       <li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
-        className={classNames(s('np-dropdown-header'), s('np-text-title-group'))}
+        className={clsx(s('np-dropdown-header'), s('np-text-title-group'))}
         onClick={stopPropagation}
         onKeyPress={stopPropagation}
       >
@@ -432,7 +432,7 @@ export default function Select({
       !selectOption.disabled &&
       keyboardFocusedOptionIndex === getIndexWithoutHeadersForIndexWithHeaders(index);
 
-    const className = classNames(
+    const className = clsx(
       s('np-dropdown-item'),
       selectOption.disabled ? [s('disabled')] : s('clickable'),
       {
@@ -489,7 +489,7 @@ export default function Select({
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref={selectReference}
-      className={classNames(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
+      className={clsx(s('np-select'), block ? s('btn-block') : null, s('btn-group'))}
       onKeyDown={handleKeyDown}
       onTouchMove={handleTouchStart}
       onFocus={handleOnFocus}
@@ -502,7 +502,7 @@ export default function Select({
         block={block}
         size={size}
         htmlType="button"
-        className={classNames(
+        className={clsx(
           s('np-dropdown-toggle'),
           s('np-text-body-large'),
           inverse ? s('np-dropdown-toggle-navy') : null,
@@ -523,7 +523,7 @@ export default function Select({
         )}
         <Chevron
           // disabled={disabled}
-          className={classNames(
+          className={clsx(
             s('tw-icon'),
             s('tw-chevron-up-icon'),
             s('tw-chevron'),