@transferwise/components 46.140.1 → 46.141.0

package/src/expressiveMoneyInput/amountInput/AmountInput.tsx

@@ -42,7 +42,7 @@ export const AmountInput = ({
   const intl = useIntl();
   const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();
 
-  const [value, setValue] = useState<string>(
+  const [value, setValue] = useState<string>(() =>
     amount
       ? getFormattedString({
           value: amount,
@@ -51,6 +51,7 @@ export const AmountInput = ({
         })
       : '',
   );
+  const prevAmountRef = useRef<string | number | null | undefined>(amount);
   const numericValue = useMemo(() => {
     return getUnformattedNumber({
       value,
@@ -85,23 +86,28 @@ export const AmountInput = ({
   const decimalMode = decimalSeparator && value.includes(decimalSeparator);
 
   useEffect(() => {
-    if (!focus) {
-      setValue(
-        amount
-          ? getFormattedString({
-              value: amount,
-              currency,
-              locale: intl.locale,
-            })
-          : '',
-      );
+    if (prevAmountRef.current !== amount) {
+      prevAmountRef.current = amount;
+
+      // Only update the displayed value if not focused (preserve user input when focused)
+      if (!focus) {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing external prop to internal state when unfocused
+        setValue(
+          amount
+            ? getFormattedString({
+                value: amount,
+                currency,
+                locale: intl.locale,
+              })
+            : '',
+        );
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [amount]);
+  }, [amount, focus, currency, intl.locale]);
 
   useEffect(() => {
     onFocusChange?.(visualFocus);
-  }, [visualFocus]);
+  }, [onFocusChange, visualFocus]);
 
   const shouldReformatAfterUserInput = (newValue: string) => {
     // don't reformat if formatting would wipe out user's input
@@ -246,6 +252,7 @@ export const AmountInput = ({
   const addonContent = useMemo((): string | null | undefined => {
     // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
     // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
+    // eslint-disable-next-line react-hooks/refs -- Reading layout dimensions for overflow detection
     if (isInputPossiblyOverflowing({ ref, value })) {
       return null;
     }
@@ -284,7 +291,7 @@ export const AmountInput = ({
     // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
     value: addonContent ? valueWithFullDecimals : value,
     focus: visualFocus,
-    inputElement: ref.current,
+    inputElement: ref,
     loading,
   });
 

package/src/expressiveMoneyInput/hooks/useInputStyle.ts

@@ -1,17 +1,27 @@
-import { type CSSProperties, useEffect, useLayoutEffect, useState } from 'react';
+import {
+  type CSSProperties,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useState,
+} from 'react';
 import { Props as ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';
 
 type InputStyleObject = {
   value: string;
   focus: boolean;
-  inputElement: HTMLInputElement | null;
+  inputElement: RefObject<HTMLInputElement> | null;
 } & Pick<ExpressiveMoneyInputProps, 'loading'>;
 
 export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {
   const initialRender = !useTimeout(300);
-  const inputWidth = useFirstDefinedValue(inputElement?.clientWidth, [inputElement, value]);
+  const inputWidth = useFirstDefinedValue(inputElement?.current?.clientWidth, [
+    inputElement?.current,
+    value,
+  ]);
 
-  const getStyle = (): CSSProperties => {
+  const getStyle = useCallback((): CSSProperties => {
     const fontSize = getFontSize(value, focus, inputWidth);
 
     return {
@@ -23,13 +33,14 @@ export const useInputStyle = ({ value, focus, inputElement, loading }: InputStyl
       transition: initialRender ? 'none' : undefined,
       color: loading ? 'var(--color-interactive-secondary)' : undefined,
     };
-  };
+  }, [value, focus, inputWidth, loading, initialRender]);
 
-  const [style, setStyle] = useState(getStyle());
+  const [style, setStyle] = useState<CSSProperties>(() => getStyle());
 
   useLayoutEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements
     setStyle(getStyle());
-  }, [value, focus, loading, inputWidth]);
+  }, [value, focus, loading, inputWidth, getStyle]);
 
   return style;
 };
@@ -60,10 +71,11 @@ const useFirstDefinedValue = (newValue: number | undefined, dependencies: unknow
 
   useLayoutEffect(() => {
     if (typeof newValue !== 'undefined' && typeof value === 'undefined') {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop
       setValue(newValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...dependencies, value]);
+  }, [...dependencies, value, newValue]);
 
   return value;
 };

package/src/expressiveMoneyInput/hooks/useSelectionRange.ts

@@ -15,9 +15,11 @@ export const useSelectionRange = () => {
     selection.current = undefined;
   };
 
+  /* eslint-disable react-hooks/refs */
   return {
     selection: selection.current,
     handleSelect,
     handleSelectionBlur,
   };
+  /* eslint-enable react-hooks/refs */
 };

package/src/header/Header.tsx

@@ -104,7 +104,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     useEffect(() => {
       if (as === 'legend' && internalRef.current) {
         const { parentElement } = internalRef.current;
-        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+        if (parentElement?.tagName.toLowerCase() !== 'fieldset') {
           console.warn(
             'Legends should be the first child in a fieldset, and this is not possible when including an action',
           );
@@ -121,7 +121,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
     }
 
     return (
-      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+      <div {...commonProps} {...props} ref={ref}>
         <Title as={as} type={levelTypography} className="np-header__title">
           {title}
         </Title>

package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx

@@ -65,10 +65,12 @@ export function SelectInputBottomSheet({
   return (
     <>
       {open ? <PreventScroll /> : null}
+      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}
       {renderTrigger?.({
         ref: refs.setReference,
         getInteractionProps: getReferenceProps,
       })}
+      {/* eslint-enable react-hooks/refs */}
 
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
@@ -94,6 +96,7 @@ export function SelectInputBottomSheet({
                   <Fragment
                     key={floatingKey} // Force inner state invalidation on open
                   >
+                    {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}
                     <TransitionChild
                       ref={refs.setFloating}
                       as="div"
@@ -102,6 +105,7 @@ export function SelectInputBottomSheet({
                       leaveTo="np-bottom-sheet-v2-content--closed"
                       {...getFloatingProps()}
                     >
+                      {/* eslint-enable react-hooks/refs */}
                       <div className="np-bottom-sheet-v2-header">
                         <CloseButton
                           size={Size.SMALL}

package/src/inputs/SelectInput/Options/SelectInputOptions.tsx

@@ -77,7 +77,7 @@ export function SelectInputOptions<T = string>({
   const intl = useIntl();
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
-  const [initialRender, setInitialRender] = useState(true);
+  const initialRenderRef = useRef(true);
 
   const needle = useMemo(() => {
     if (filterable) {
@@ -166,28 +166,42 @@ export function SelectInputOptions<T = string>({
   // 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[]>([]);
-  const prevNeedleRef = useRef(needle);
-
+  const [virtualState, setVirtualState] = useState<{
+    needle: typeof needle;
+    length: number;
+    mountedIndexes: number[];
+  }>({
+    needle,
+    length: filteredItems.length,
+    mountedIndexes: [],
+  });
+
+  // Note: virtualState.mountedIndexes is in deps but only read in the guarded branch.
+  // This means external updates to mountedIndexes will trigger this effect but hit the guard
+  // and bail out early. This is intentional and harmless - the guard ensures no unnecessary work.
   useEffect(() => {
-    const needleChanged = prevNeedleRef.current !== needle;
-    prevNeedleRef.current = needle;
-
-    if (needleChanged) {
-      // Reset mounted indexes when search changes to avoid stale scroll positions
-      setMountedIndexes([]);
-      return;
-    }
-
-    // Ensure the 'End' key works as intended by keeping the last item mounted.
-    // Skipped on needle change to prevent auto-scrolling on search.
-    if (filteredItems.length > 0) {
-      setMountedIndexes((prevMountedIndexes) => {
-        // Create a new array with existing indexes plus the last item index
-        return [...new Set([...prevMountedIndexes, filteredItems.length - 1])]; // Sorting is redundant by nature here
+    if (virtualState.needle !== needle || virtualState.length !== filteredItems.length) {
+      const needleChanged = virtualState.needle !== needle;
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing virtual scroll state with filtered items
+      setVirtualState({
+        needle,
+        length: filteredItems.length,
+        mountedIndexes: needleChanged
+          ? [] // Reset on needle change
+          : filteredItems.length > 0
+            ? [...new Set([...virtualState.mountedIndexes, filteredItems.length - 1])] // Add last index
+            : virtualState.mountedIndexes,
       });
     }
-  }, [needle, filteredItems.length]);
+  }, [
+    needle,
+    filteredItems.length,
+    virtualState.needle,
+    virtualState.length,
+    virtualState.mountedIndexes,
+  ]);
+
+  const { mountedIndexes } = virtualState;
 
   const listboxContainerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -200,7 +214,7 @@ export function SelectInputOptions<T = string>({
   }, []);
 
   useEffect(() => {
-    setInitialRender(false);
+    initialRenderRef.current = false;
   }, []);
 
   const showStatus = resultsEmpty;
@@ -251,7 +265,7 @@ export function SelectInputOptions<T = string>({
       className="np-select-input-options-container"
       onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
         if (controllerRef.current != null) {
-          if (!initialRender && value != null) {
+          if (!initialRenderRef.current && value != null) {
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
@@ -288,7 +302,7 @@ export function SelectInputOptions<T = string>({
               const inputValue = event.currentTarget.value;
 
               // Free up resources and ensure not to go out of bounds
-              setMountedIndexes([]);
+              setVirtualState((prev) => ({ ...prev, mountedIndexes: [] }));
               onFilterChange(inputValue);
             }}
             onInput={(event) => {
@@ -358,7 +372,7 @@ export function SelectInputOptions<T = string>({
                     virtualiserHandlerRef.current.viewportSize,
                 );
 
-                setMountedIndexes((prevMountedIndexes) => {
+                setVirtualState((prev) => {
                   // Create an array of all indexes that should be visible
 
                   const visibleIndexes = [];
@@ -368,9 +382,11 @@ export function SelectInputOptions<T = string>({
                   }
 
                   // Combine with previous indexes and sort
-                  return [...new Set([...prevMountedIndexes, ...visibleIndexes])].sort(
-                    (a, b) => a - b,
-                  );
+                  const newMountedIndexes = [
+                    ...new Set([...prev.mountedIndexes, ...visibleIndexes]),
+                  ].sort((a, b) => a - b);
+
+                  return { ...prev, mountedIndexes: newMountedIndexes };
                 });
               }}
             >

package/src/inputs/SelectInput/Popover/SelectInputPopover.tsx

@@ -85,10 +85,12 @@ export function SelectInputPopover({
   return (
     <>
       {open ? <PreventScroll /> : null}
+      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}
       {renderTrigger({
         ref: refs.setReference,
         getInteractionProps: getReferenceProps,
       })}
+      {/* eslint-enable react-hooks/refs */}
 
       <FloatingPortal>
         <ThemeProvider theme="personal" screenMode={theme === 'personal' ? screenMode : 'light'}>
@@ -104,6 +106,7 @@ export function SelectInputPopover({
           >
             <FocusScope>
               <FloatingFocusManager context={context}>
+                {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}
                 <div
                   key={floatingKey} // Force inner state invalidation on open
                   ref={refs.setFloating}
@@ -114,6 +117,7 @@ export function SelectInputPopover({
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >
+                  {/* eslint-enable react-hooks/refs */}
                   <div
                     className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {
                       'np-popover-v2--padding-md': padding === 'md',

package/src/inputs/SelectInput/SelectInput.tsx

@@ -1,5 +1,5 @@
 import mergeProps from 'merge-props';
-import { useEffect, useRef, useState, useDeferredValue } from 'react';
+import { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
 import { Breakpoint } from '../../common/propsValues/breakpoint';
@@ -60,6 +60,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   const initialized = useRef(false);
   const handleClose = useEffectEvent(onClose ?? (() => {}));
   const handleOpen = useEffectEvent(onOpen ?? (() => {}));
+
   useEffect(() => {
     if (initialized.current) {
       if (open) {
@@ -70,29 +71,34 @@ export function SelectInput<T = string, M extends boolean = false>({
     } else {
       initialized.current = true;
     }
-  }, [handleClose, handleOpen, open]);
+  }, [open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
   const deferredFilterQuery = useDeferredValue(filterQuery);
-  const setFilterQuery = useEffectEvent((query: string) => {
-    _setFilterQuery(query);
-    if (query !== filterQuery) {
-      onFilterChange({
-        query,
-        queryNormalized: query ? searchableString(query) : null,
-      });
-    }
-  });
-
-  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const previousFilterQueryRef = useRef(filterQuery);
 
-  const screenSm = useScreenSize(Breakpoint.SMALL);
-  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
+  const setFilterQuery = useCallback(
+    (query: string) => {
+      _setFilterQuery(query);
+      if (query !== previousFilterQueryRef.current) {
+        onFilterChange({
+          query,
+          queryNormalized: query ? searchableString(query) : null,
+        });
+        previousFilterQueryRef.current = query;
+      }
+    },
+    [onFilterChange],
+  );
 
+  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
+  const screenSm = useScreenSize(Breakpoint.SMALL);
+  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;
+
   /**
    * Attempts to resolve the `listbox` label
    * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling

package/src/inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -29,7 +29,7 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
-      __overrides={{ as, size, ...interactionProps } as Record<string, unknown>}
+      __overrides={{ as, size, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />
   );

package/src/nudge/Nudge.tsx

@@ -1,6 +1,6 @@
 import { Illustration, Assets, type IllustrationNames } from '@wise/art';
 import { clsx } from 'clsx';
-import { ReactNode, useEffect, useState, MouseEvent } from 'react';
+import { ReactNode, useEffect, useState, MouseEvent, useCallback } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
@@ -96,8 +96,27 @@ const Nudge = ({
   action,
 }: Props) => {
   const intl = useIntl();
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
+  const getIsDismissed = useCallback(
+    () => (persistDismissal && id ? !!getLocalStorage()?.find((item) => item === id) : false),
+    [persistDismissal, id],
+  );
+
+  const [nudgeState, setNudgeState] = useState(() => ({
+    isDismissed: getIsDismissed(),
+    isMounted: false,
+  }));
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Setting mount state in mount effect
+    setNudgeState((prev) => ({ ...prev, isMounted: true }));
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- Syncing dismissed state from localStorage on prop change
+    setNudgeState((prev) => ({ ...prev, isDismissed: getIsDismissed() }));
+  }, [getIsDismissed, id, persistDismissal]);
+
+  const { isDismissed } = nudgeState;
 
   const handleOnDismiss = () => {
     const dismissedNudgesStorage = getLocalStorage();
@@ -105,9 +124,9 @@ const Nudge = ({
     if (persistDismissal && id) {
       try {
         localStorage.setItem(STORAGE_NAME, JSON.stringify([...dismissedNudgesStorage, id]));
-      } catch (error) {}
+      } catch {}
 
-      setIsDismissed(true);
+      setNudgeState((prev) => ({ ...prev, isDismissed: true }));
     }
 
     if (onDismiss) {
@@ -116,25 +135,15 @@ const Nudge = ({
   };
 
   useEffect(() => {
-    if (persistDismissal && id) {
+    if (persistDismissal && id && isPreviouslyDismissed) {
       const dismissedNudgesStorage = getLocalStorage();
-      let isDismissed = false;
-
-      if (dismissedNudgesStorage?.find((item) => item === id)) {
-        setIsDismissed(true);
-        isDismissed = true;
-      }
-
-      if (isPreviouslyDismissed) {
-        isPreviouslyDismissed(isDismissed);
-      }
+      const wasDismissed = !!dismissedNudgesStorage?.find((item) => item === id);
+      isPreviouslyDismissed(wasDismissed);
     }
-
-    setIsMounted(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, persistDismissal]);
 
-  if (persistDismissal && (isDismissed || !isMounted)) {
+  if (persistDismissal && (isDismissed || !nudgeState.isMounted)) {
     return null;
   }
 
@@ -143,7 +152,7 @@ const Nudge = ({
       {!!mediaName && (
         <div className="wds-nudge-media">
           <Illustration
-            name={mediaName as IllustrationNames}
+            name={mediaName}
             className={clsx(`wds-nudge-media-${mediaName}`)}
             size="small"
             disablePadding

package/src/phoneNumberInput/PhoneNumberInput.test.tsx

@@ -283,6 +283,22 @@ describe('PhoneNumberInput', () => {
         expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
       });
     });
+
+    describe('onChange deduplication', () => {
+      it('should not call onChange when the composed phone number has not changed', () => {
+        const onChangeMock = jest.fn();
+        const { rerender } = render(
+          <PhoneNumberInput initialValue="+441234567890" onChange={onChangeMock} />,
+        );
+
+        onChangeMock.mockClear();
+
+        // Rerender with the same initialValue - internal state should not trigger onChange
+        rerender(<PhoneNumberInput initialValue="+441234567890" onChange={onChangeMock} />);
+
+        expect(onChangeMock).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('when selectProps is supplied', () => {

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -75,12 +75,13 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
+  const [randomId] = useState(() => Math.random().toString(36).slice(2, 8));
+
   const createId = (customID: string | undefined, backup: string): string => {
     if (customID) {
       return customID + (backup ? `-${backup}` : '');
     }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
+    return `${backup}-${randomId}`;
   };
 
   // Link the first non-disabled input to the the Field label, if present
@@ -107,14 +108,16 @@ const PhoneNumberInput = ({
 
     return explodeNumberModel(cleanValue);
   });
-  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+  const broadcastedValueRef = useRef<PhoneNumber>(internalValue);
 
   const [suffixDirty, setSuffixDirty] = useState(false);
+
   useEffect(() => {
-    if (internalValue.suffix) {
+    if (!suffixDirty && internalValue.suffix) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- Tracking when suffix becomes dirty
       setSuffixDirty(true);
     }
-  }, [internalValue.suffix]);
+  }, [internalValue.suffix, suffixDirty]);
 
   const countriesByPrefix = useMemo(
     () =>
@@ -152,13 +155,8 @@ const PhoneNumberInput = ({
   };
 
   useEffect(() => {
-    if (broadcastedValue === null) {
-      setBroadcastedValue(internalValue);
-      return;
-    }
-
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
-    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValueRef.current.prefix ?? ''}${broadcastedValueRef.current.suffix}`;
 
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
@@ -172,8 +170,8 @@ const PhoneNumberInput = ({
       newValue,
       internalValue.prefix ?? '', // TODO: Allow `null` in public API
     );
-    setBroadcastedValue(internalValue);
-  }, [onChange, broadcastedValue, internalValue]);
+    broadcastedValueRef.current = internalValue;
+  }, [onChange, internalValue]);
 
   useEffect(() => {
     const labelRef = fieldLabelRef?.current;

package/src/promoCard/PromoCard.story.tsx

@@ -47,7 +47,7 @@ export const TaskCard: Story = {
     isSmall: true,
     useDisplayFont: false,
     className: 'taskCard',
-  } as PromoCardLinkProps,
+  },
   decorators: [
     (Story) => (
       <div>
@@ -90,7 +90,7 @@ export const TaskCardWithCustomIcon: Story = {
   args: {
     ...TaskCard.args,
     indicatorIcon: <StarFill size={24} aria-hidden="true" />,
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };
 
@@ -101,7 +101,7 @@ export const TaskCardCompleted: Story = {
     href: undefined,
     indicatorIcon: 'check',
     className: 'taskCard taskCard--completed np-theme--personal np-theme-personal--forest-green',
-  } as PromoCardLinkProps,
+  },
   decorators: TaskCard.decorators,
 };