@transferwise/components 46.50.1 → 46.52.0

package/src/inputs/SelectInput.tsx

@@ -1,11 +1,12 @@
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { Check, ChevronDown, Cross, CrossCircle } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import mergeProps from 'merge-props';
 import {
   createContext,
   forwardRef,
   useContext,
+  useDeferredValue,
   useEffect,
   useId,
   useMemo,
@@ -13,6 +14,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from 'react-intl';
+import { Virtualizer } from 'virtua';
 
 import { useEffectEvent } from '../common/hooks/useEffectEvent';
 import { useScreenSize } from '../common/hooks/useScreenSize';
@@ -29,6 +31,8 @@ import { InputGroup } from './InputGroup';
 import { SearchInput } from './SearchInput';
 import messages from './SelectInput.messages';
 
+const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+
 function searchableString(value: string) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
 }
@@ -40,22 +44,13 @@ function inferSearchableStrings(value: unknown) {
 
   if (typeof value === 'object' && value != null) {
     return Object.values(value)
-      .filter((innerValue): innerValue is string => typeof innerValue === 'string')
+      .filter((innerValue) => typeof innerValue === 'string')
       .map((innerValue) => searchableString(innerValue));
   }
 
   return [];
 }
 
-const SelectInputTriggerButtonPropsContext = createContext<{
-  ref?: React.ForwardedRef<HTMLButtonElement | null>;
-  id?: string;
-  onClick?: (event: React.MouseEvent) => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
-  [key: string]: unknown;
-}>({});
-const SelectInputOptionContentWithinTriggerContext = createContext(false);
-
 export interface SelectInputOptionItem<T = string> {
   type: 'option';
   value: T;
@@ -89,6 +84,11 @@ function dedupeSelectInputOptionItem<T>(
   return { ...item, value: undefined };
 }
 
+/**
+ * Sets the `value` of duplicate option items to `undefined`, hiding them when
+ * rendered. Indexes are kept intact within groups to preserve the active item
+ * between filter changes when possible.
+ */
 function dedupeSelectInputItems<T>(
   items: readonly SelectInputItem<T>[],
 ): SelectInputItem<T | undefined>[] {
@@ -112,20 +112,23 @@ function dedupeSelectInputItems<T>(
   });
 }
 
-function filterSelectInputOptionItem<T>(item: SelectInputOptionItem<T>, needle: string) {
+function selectInputOptionItemIncludesNeedle<T>(item: SelectInputOptionItem<T>, needle: string) {
   return inferSearchableStrings(item.filterMatchers ?? item.value).some((haystack) =>
     haystack.includes(needle),
   );
 }
 
-function filterSelectInputItems<T>(items: readonly SelectInputItem<T>[], needle: string) {
+function filterSelectInputItems<T>(
+  items: readonly SelectInputItem<T>[],
+  predicate: (item: SelectInputOptionItem<T>) => boolean,
+) {
   return items.filter((item) => {
     switch (item.type) {
       case 'option': {
-        return filterSelectInputOptionItem(item, needle);
+        return predicate(item);
       }
       case 'group': {
-        return item.options.some((option) => filterSelectInputOptionItem(option, needle));
+        return item.options.some((option) => predicate(option));
       }
       default:
     }
@@ -173,7 +176,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
   <InputGroup
     addonEnd={{
       content: (
-        <span className={classNames('np-select-input-addon-container', disabled && 'disabled')}>
+        <span className={clsx('np-select-input-addon-container', disabled && 'disabled')}>
           {clear != null && !placeholderShown ? (
             <>
               <SelectInputClearButton
@@ -199,7 +202,7 @@ const defaultRenderTrigger = (({ content, placeholderShown, clear, disabled, siz
   >
     <SelectInputTriggerButton as={ButtonInput} size={size}>
       <span
-        className={classNames(
+        className={clsx(
           'np-select-input-content',
           placeholderShown && 'np-select-input-placeholder',
         )}
@@ -220,7 +223,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
     <button
       type="button"
       aria-label={intl.formatMessage(dateTriggerMessages.ariaLabel)}
-      className={classNames(className, 'np-select-input-addon np-select-input-addon--interactive')}
+      className={clsx(className, 'np-select-input-addon np-select-input-addon--interactive')}
       onClick={onClick}
     >
       <Cross size={16} />
@@ -271,12 +274,15 @@ export function SelectInput<T = string, M extends boolean = false>({
   }, [handleClose, open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
+  const deferredFilterQuery = useDeferredValue(filterQuery);
   const setFilterQuery = useEffectEvent((query: string) => {
     _setFilterQuery(query);
-    onFilterChange({
-      query,
-      queryNormalized: query ? searchableString(query) : null,
-    });
+    if (query !== filterQuery) {
+      onFilterChange({
+        query,
+        queryNormalized: query ? searchableString(query) : null,
+      });
+    }
   });
 
   const triggerRef = useRef<HTMLButtonElement | null>(null);
@@ -294,9 +300,7 @@ export function SelectInput<T = string, M extends boolean = false>({
       multiple={multiple}
       defaultValue={defaultValue}
       value={controlledValue}
-      // TODO: Remove assertion when upgrading TypeScript to v5
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      by={compareValues as any}
+      by={compareValues}
       disabled={disabled}
       onChange={
         ((value) => {
@@ -349,8 +353,8 @@ export function SelectInput<T = string, M extends boolean = false>({
                   content: !placeholderShown ? (
                     <SelectInputOptionContentWithinTriggerContext.Provider value>
                       {multiple && Array.isArray(value)
-                        ? value
-                            .map((option: NonNullable<T>) => renderValue(option, true))
+                        ? (value as readonly NonNullable<T>[])
+                            .map((option) => renderValue(option, true))
                             .filter((node) => node != null)
                             .join(', ')
                         : renderValue(value as NonNullable<T>, true)}
@@ -379,9 +383,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
-              if (filterQuery !== '') {
-                setFilterQuery('');
-              }
+              setFilterQuery('');
             }}
           >
             <SelectInputOptions
@@ -392,7 +394,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               filterPlaceholder={filterPlaceholder}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              filterQuery={filterQuery}
+              filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
             />
           </OptionsOverlay>
@@ -402,6 +404,14 @@ export function SelectInput<T = string, M extends boolean = false>({
   );
 }
 
+const SelectInputTriggerButtonPropsContext = createContext<{
+  ref?: React.ForwardedRef<HTMLButtonElement | null>;
+  id?: string;
+  onClick?: (event: React.MouseEvent) => void;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
+  [key: string]: unknown;
+}>({});
+
 type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
 
 export type SelectInputTriggerButtonProps<
@@ -506,7 +516,51 @@ function SelectInputOptions<T = string>({
     }
     return undefined;
   }, [filterQuery, filterable]);
-  const resultsEmpty = needle != null && filterSelectInputItems(items, needle).length === 0;
+  useEffect(() => {
+    if (needle) {
+      // Ensure having an active option while filtering.
+      // Without `requestAnimationFrame` upon which React depends for scheduling
+      // updates, the active status would only show for a split second and then
+      // disappear inadvertently.
+      requestAnimationFrame(() => {
+        if (
+          controllerRef.current != null &&
+          !controllerRef.current.hasAttribute('aria-activedescendant')
+        ) {
+          // Activate first option via synthetic key press
+          controllerRef.current.dispatchEvent(
+            new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
+          );
+        }
+      });
+    }
+  }, [controllerRef, needle]);
+
+  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] =
+    needle != null
+      ? filterSelectInputItems(dedupeSelectInputItems(items), (item) =>
+          selectInputOptionItemIncludesNeedle(item, needle),
+        )
+      : items;
+  const resultsEmpty = needle != null && filteredItems.length === 0;
+
+  const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;
+
+  // Items shown once shall be kept mounted until the needle changes, otherwise
+  // the scroll position may jump around inadvertently. Pattern adopted from:
+  // https://inokawa.github.io/virtua/?path=/story/advanced-keep-offscreen-items--append-only
+  const [mountedIndexes, setMountedIndexes] = useState<number[]>([]);
+  useEffect(() => {
+    // Ensure the 'End' key works as intended by keeping the last item mounted
+    setMountedIndexes((prevMountedIndexes) => {
+      const indexes = new Set(prevMountedIndexes);
+      indexes.add(filteredItems.length - 1);
+      return [...indexes]; // Sorting is redundant by nature here
+    });
+  }, [
+    needle, // Needed as `filteredItems.length` may be equal between two updates
+    filteredItems.length,
+  ]);
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -522,6 +576,19 @@ function SelectInputOptions<T = string>({
   const statusId = useId();
   const listboxId = useId();
 
+  const getItemNode = (index: number) => {
+    const item = filteredItems[index];
+    return (
+      <SelectInputItemView
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        item={item}
+        renderValue={renderValue}
+        needle={needle}
+      />
+    );
+  };
+
   return (
     <ListboxBase.Options
       as={SelectInputOptionsContainer}
@@ -533,12 +600,6 @@ function SelectInputOptions<T = string>({
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
-            if (filterQuery) {
-              // Ensure having an active option while filtering
-              controllerRef.current.dispatchEvent(
-                new KeyboardEvent('keydown', { key: 'Home', bubbles: true }),
-              );
-            }
           }
         }
       }}
@@ -549,7 +610,7 @@ function SelectInputOptions<T = string>({
             ref={searchInputRef}
             shape="rectangle"
             placeholder={filterPlaceholder}
-            value={filterQuery}
+            defaultValue={filterQuery}
             aria-controls={listboxId}
             aria-describedby={showStatus ? statusId : undefined}
             onKeyDown={(event) => {
@@ -560,6 +621,9 @@ function SelectInputOptions<T = string>({
               }
             }}
             onChange={(event) => {
+              // Free up resources and ensure not to go out of bounds when the
+              // resulting item count is less than before
+              setMountedIndexes([]);
               onFilterChange(event.currentTarget.value);
             }}
           />
@@ -569,9 +633,11 @@ function SelectInputOptions<T = string>({
       <section
         ref={listboxContainerRef}
         tabIndex={-1}
-        className={classNames(
+        className={clsx(
           'np-select-input-listbox-container',
-          items.some((item) => item.type === 'group') &&
+          virtualized && 'np-select-input-listbox-container--virtualized',
+          needle == null && // Groups aren't shown when filtering
+            items.some((item) => item.type === 'group') &&
             'np-select-input-listbox-container--has-group',
         )}
       >
@@ -590,15 +656,35 @@ function SelectInputOptions<T = string>({
           tabIndex={0}
           className="np-select-input-listbox"
         >
-          {(needle != null ? dedupeSelectInputItems(items) : items).map((item, index) => (
-            <SelectInputItemView
-              // eslint-disable-next-line react/no-array-index-key
-              key={index}
-              item={item}
-              renderValue={renderValue}
-              needle={needle}
-            />
-          ))}
+          {!virtualized ? (
+            filteredItems.map((_, index) => getItemNode(index))
+          ) : (
+            <Virtualizer
+              key={needle}
+              count={filteredItems.length}
+              keepMounted={mountedIndexes}
+              scrollRef={listboxRef} // `VList` doesn't expose this
+              onRangeChange={(startIndex, endIndex) => {
+                setMountedIndexes((prevMountedIndexes) => {
+                  const indexes = new Set(prevMountedIndexes);
+                  for (let index = startIndex; index <= endIndex; index += 1) {
+                    indexes.add(index);
+                  }
+                  return [...indexes].sort((a, b) => a - b);
+                });
+              }}
+            >
+              {(index) => (
+                // The position of each item can't be inferred by browsers when
+                // virtualizing, as some of the items may not be in the DOM
+                <SelectInputItemsCountContext.Provider value={filteredItems.length}>
+                  <SelectInputItemPositionContext.Provider value={index + 1}>
+                    {getItemNode(index)}
+                  </SelectInputItemPositionContext.Provider>
+                </SelectInputItemsCountContext.Provider>
+              )}
+            </Virtualizer>
+          )}
         </div>
 
         {renderFooter != null ? (
@@ -639,7 +725,10 @@ function SelectInputItemView<T = string>({
 }: SelectInputItemViewProps<T>) {
   switch (item.type) {
     case 'option': {
-      if (item.value != null && (needle == null || filterSelectInputOptionItem(item, needle))) {
+      if (
+        item.value != null &&
+        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
+      ) {
         return (
           <SelectInputOption value={item.value} disabled={item.disabled}>
             {renderValue(item.value, false)}
@@ -677,7 +766,7 @@ function SelectInputGroupItemView<T = string>({
     <section
       role="group"
       aria-labelledby={headerId}
-      className={classNames(needle === null && 'np-select-input-group-item--without-needle')}
+      className={clsx(needle === null && 'np-select-input-group-item--without-needle')}
     >
       {needle == null ? (
         <header
@@ -701,6 +790,9 @@ function SelectInputGroupItemView<T = string>({
   );
 }
 
+const SelectInputItemsCountContext = createContext<number | undefined>(undefined);
+const SelectInputItemPositionContext = createContext<number | undefined>(undefined);
+
 interface SelectInputOptionProps<T = string> {
   value: T;
   disabled?: boolean;
@@ -708,13 +800,17 @@ interface SelectInputOptionProps<T = string> {
 }
 
 function SelectInputOption<T = string>({ value, disabled, children }: SelectInputOptionProps<T>) {
+  const itemsCount = useContext(SelectInputItemsCountContext);
+  const itemPosition = useContext(SelectInputItemPositionContext);
   return (
     <ListboxBase.Option
       as="div"
       value={value}
+      aria-setsize={itemsCount}
+      aria-posinset={itemPosition}
       disabled={disabled}
       className={({ active, disabled: uiDisabled }) =>
-        classNames(
+        clsx(
           'np-select-input-option-container np-text-body-large',
           active && 'np-select-input-option-container--active',
           uiDisabled && 'np-select-input-option-container--disabled',
@@ -726,7 +822,7 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
           <div className="np-select-input-option">{children}</div>
           <Check
             size={16}
-            className={classNames(
+            className={clsx(
               'np-select-input-option-check',
               !selected && 'np-select-input-option-check--not-selected',
             )}
@@ -737,6 +833,8 @@ function SelectInputOption<T = string>({ value, disabled, children }: SelectInpu
   );
 }
 
+const SelectInputOptionContentWithinTriggerContext = createContext(false);
+
 export interface SelectInputOptionContentProps {
   title: string;
   note?: string;
@@ -754,14 +852,14 @@ export function SelectInputOptionContent({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'np-select-input-option-content-container',
         (note || description) && 'np-text-body-large',
       )}
     >
       {icon ? (
         <div
-          className={classNames(
+          className={clsx(
             'np-select-input-option-content-icon',
             !withinTrigger && 'np-select-input-option-content-icon--not-within-trigger',
           )}
@@ -772,7 +870,7 @@ export function SelectInputOptionContent({
 
       <div className="np-select-input-option-content-text">
         <div
-          className={classNames(
+          className={clsx(
             'np-select-input-option-content-text-line-1',
             withinTrigger && 'np-select-input-option-content-text-within-trigger',
           )}
@@ -787,7 +885,7 @@ export function SelectInputOptionContent({
 
         {description ? (
           <div
-            className={classNames(
+            className={clsx(
               'np-select-input-option-content-text-secondary np-text-body-default',
               withinTrigger && 'np-select-input-option-content-text-within-trigger',
             )}

package/src/inputs/TextArea.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
@@ -22,7 +22,7 @@ export const TextArea = forwardRef(function TextArea(
   return (
     <textarea
       ref={reference}
-      className={classNames(className, inputClassNameBase(), 'np-text-area')}
+      className={clsx(className, inputClassNameBase(), 'np-text-area')}
       {...inputAttributes}
       {...restProps}
     />

package/src/inputs/_BottomSheet.tsx

@@ -9,7 +9,7 @@ import {
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
@@ -112,7 +112,7 @@ export function BottomSheet({
                         />
                       </div>
                       <div
-                        className={classNames(
+                        className={clsx(
                           'np-bottom-sheet-v2-content-inner',
                           title && 'np-bottom-sheet-v2-content-inner--has-title',
                           padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',

package/src/inputs/_ButtonInput.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { useInputPaddings } from './InputGroup';
@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}
+      className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
       // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}

package/src/inputs/_Popover.tsx

@@ -15,7 +15,7 @@ import {
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState } from 'react';
 
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
@@ -109,7 +109,7 @@ export function Popover({
                 <div
                   key={floatingKey} // Force inner state invalidation on open
                   ref={refs.setFloating}
-                  className={classNames('np-popover-v2-container', {
+                  className={clsx('np-popover-v2-container', {
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
@@ -118,7 +118,7 @@ export function Popover({
                   {...getFloatingProps()}
                 >
                   <div
-                    className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                       'np-popover-v2--padding-md': padding === 'md',
                     })}
                   >

package/src/inputs/_common.ts

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 
@@ -7,7 +7,7 @@ export type InputPropsBase = {
 };
 
 export function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {
-  return classNames(
+  return clsx(
     'form-control', // TODO: Deprecate
     'np-form-control',
     {

package/src/instructionsList/InstructionsList.tsx

@@ -1,5 +1,5 @@
 import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 
 import Body from '../body/Body';
@@ -50,7 +50,7 @@ const InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: Instruct
       </>
     );
 
-  return <ul className={classNames('tw-instructions', className)}>{orderedInstructions}</ul>;
+  return <ul className={clsx('tw-instructions', className)}>{orderedInstructions}</ul>;
 };
 
 function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
@@ -59,7 +59,7 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
   return (
     <li
       className="instruction"
-      aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
+      aria-label={isInstructionNode ? (item['aria-label']) : undefined}
     >
       {type === 'do' ? (
         <DoIcon size={24} className={type} />

package/src/label/Label.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export type LabelProps = {
   id?: string;
@@ -12,7 +12,7 @@ export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
     <label
       id={id}
       htmlFor={htmlFor}
-      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
+      className={clsx('control-label d-flex flex-column gap-y-1 m-b-0', className)}
     >
       {children}
     </label>

package/src/link/Link.tsx

@@ -1,5 +1,5 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -32,12 +32,7 @@ const Link = ({
     <a
       href={href}
       target={target}
-      className={classNames(
-        'np-link',
-        type ? `np-text-${type}` : undefined,
-        'd-inline-flex',
-        className,
-      )}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}

package/src/listItem/ListItem.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { ElementType, FC, ReactNode } from 'react';
 
 import Body from '../body/Body';
@@ -27,14 +27,14 @@ const ListItem: FC<ListItemProps> = ({
 
   return (
     <Element
-      className={classNames('np-list-item d-flex align-items-center p-y-2', className, {
+      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {
         'p-x-2': !isContainerAligned,
       })}
       {...rest}
     >
       {media}
 
-      <div className={classNames('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
+      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>
         <Body type="body-default" className="text-secondary m-b-0">
           {title}
         </Body>

package/src/loader/Loader.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
@@ -74,7 +74,7 @@ const Loader = ({
 
   return (
     <div
-      className={classnames(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
+      className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
         'tw-loader--visible': hasDebounced,
       })}
       data-testid={restProps['data-testid']}

package/src/logo/Logo.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
 import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
@@ -49,7 +49,7 @@ export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
   return (
-    <span aria-label={labelByType[type]} role="img" className={classNames(className, 'np-logo')}>
+    <span aria-label={labelByType[type]} role="img" className={clsx(className, 'np-logo')}>
       <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
       <LogoMd className="np-logo-svg np-logo-svg--size-md" />
     </span>