@transferwise/components 46.36.1 → 46.38.0

package/src/drawer/{Drawer.js → Drawer.tsx}

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useId } from 'react';
 
 import { Position, Typography } from '../common';
@@ -10,7 +9,31 @@ import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
 
-const Drawer = ({ children, className, footerContent, headerTitle, onClose, open, position }) => {
+export interface DrawerProps {
+  /** The content to appear in the drawer body. */
+  children?: React.ReactNode;
+  className?: string;
+  /** The content to appear in the drawer footer. */
+  footerContent?: React.ReactNode;
+  /** The content to appear in the drawer header. */
+  headerTitle?: React.ReactNode;
+  /** The status of Drawer either open or not. */
+  open?: boolean;
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;
+  /** The action to perform on close click. */
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
+}
+
+export default function Drawer({
+  children,
+  className,
+  footerContent,
+  headerTitle,
+  onClose,
+  open = false,
+  position = 'right',
+}: DrawerProps) {
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
     !onClose,
@@ -46,32 +69,4 @@ const Drawer = ({ children, className, footerContent, headerTitle, onClose, open
       </SlidingPanel>
     </Dimmer>
   );
-};
-
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes.func,
-};
-
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: Position.RIGHT,
-};
-
-export default Drawer;
+}

package/src/drawer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/src/emphasis/Emphasis.tsx

@@ -1,5 +1,3 @@
-import { ReactElement } from 'react';
-
 import EmphasisHtmlTransformer from './EmphasisHtmlTransformer';
 
 const SUPPORTED_TAGS = ['important', 'positive', 'negative', 'warning'];
@@ -9,7 +7,7 @@ export type EmphasisProps = {
   text?: string;
 };
 
-const Emphasis = ({ text = undefined }: EmphasisProps): ReactElement | null => {
+const Emphasis = ({ text = undefined }: EmphasisProps) => {
   if (!text) {
     return null;
   }

package/src/index.ts

@@ -6,7 +6,9 @@ export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
+export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
+export type { CheckboxProps } from './checkbox';
 export type { CircularButtonProps } from './circularButton';
 export type {
   BodyTypes,
@@ -20,7 +22,9 @@ export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
+export type { DefinitionListProps } from './definitionList';
 export type { DimmerProps } from './dimmer';
+export type { DrawerProps } from './drawer';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';

package/src/inputs/Input.tsx

@@ -19,7 +19,7 @@ export interface InputProps
 
 export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,
-  reference: React.ForwardedRef<HTMLInputElement>,
+  reference: React.ForwardedRef<HTMLInputElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
   const inputPaddings = useInputPaddings();

package/src/inputs/SearchInput.tsx

@@ -19,7 +19,7 @@ export interface SearchInputProps
 
 export const SearchInput = forwardRef(function SearchInput(
   { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>,
+  ref: React.ForwardedRef<HTMLInputElement | null>,
 ) {
   return (
     <InputGroup

package/src/inputs/SelectInput.tsx

@@ -48,7 +48,7 @@ function inferSearchableStrings(value: unknown) {
 }
 
 const SelectInputTriggerButtonPropsContext = createContext<{
-  ref?: React.ForwardedRef<HTMLButtonElement>;
+  ref?: React.ForwardedRef<HTMLButtonElement | null>;
   id?: string;
   onClick?: (event: React.MouseEvent) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
@@ -437,7 +437,7 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
     onKeyDown,
     ...restProps
   }: SelectInputOptionsContainerProps,
-  ref: React.ForwardedRef<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement | null>,
 ) {
   const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
   useEffect(() => {
@@ -476,8 +476,8 @@ interface SelectInputOptionsProps<T = string>
     SelectInputProps<T>,
     'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder'
   > {
-  searchInputRef: React.RefObject<HTMLInputElement>;
-  listboxRef: React.RefObject<HTMLDivElement>;
+  searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
+  listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
   onFilterChange: (query: string) => void;
 }

package/src/inputs/TextArea.tsx

@@ -15,7 +15,7 @@ export interface TextAreaProps
 
 export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,
-  reference: React.ForwardedRef<HTMLTextAreaElement>,
+  reference: React.ForwardedRef<HTMLTextAreaElement | null>,
 ) {
   const inputAttributes = useInputAttributes();
 

package/src/inputs/_BottomSheet.tsx

@@ -25,7 +25,7 @@ export interface BottomSheetProps {
     };
   }) => React.ReactNode;
   title?: string;
-  initialFocusRef?: React.RefObject<HTMLElement>;
+  initialFocusRef?: React.MutableRefObject<HTMLElement | null>;
   padding?: 'none' | 'md';
   children?: React.ReactNode;
   onClose?: () => void;

package/src/inputs/_ButtonInput.tsx

@@ -10,7 +10,7 @@ export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'>
 
 export const ButtonInput = forwardRef(function ButtonInput(
   { size = 'md', className, style, ...restProps }: ButtonInputProps,
-  ref: React.ForwardedRef<HTMLButtonElement>,
+  ref: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const inputPaddings = useInputPaddings();
 

package/src/logo/Logo.story.tsx

@@ -1,14 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Logo, { LogoType } from '.';
+import Logo from '.';
 
 export default {
   component: Logo,
   title: 'Content/Logo',
-  render: (args) => {
-    const type = args.type as LogoType;
-    const inverse = args.inverse as boolean;
-
+  render: ({ inverse, type }) => {
     return (
       <div className={`${inverse ? 'bg--dark' : ''} p-a-3`}>
         <Logo type={type} inverse={inverse} />
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof Logo>;
 
 export const Basic: Story = {
   args: {
-    type: LogoType.WISE,
+    type: 'WISE',
     inverse: false,
   },
 };

package/src/logo/{Logo.js → Logo.tsx}

@@ -1,7 +1,5 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
-import { LogoType } from './logoTypes';
 import { ReactComponent as LogoFlagInverse } from './svg/flag-inverse.svg';
 import { ReactComponent as LogoFlagPlatformInverse } from './svg/flag-platform-white.svg';
 import { ReactComponent as LogoFlagPlatform } from './svg/flag-platform.svg';
@@ -24,44 +22,36 @@ const svgPaths = {
   WISE_FLAG_PLATFORM_INVERSE: LogoFlagPlatformInverse,
 };
 
-const Logo = ({ className, inverse, type }) => {
+export enum LogoType {
+  WISE = 'WISE',
+  WISE_BUSINESS = 'WISE_BUSINESS',
+  WISE_PLATFORM = 'WISE_PLATFORM',
+}
+
+export interface LogoProps {
+  /** Extra classes applied to Logo */
+  className?: string;
+  /** If true, will use dark colours for dark on light theme */
+  inverse?: boolean;
+  /** What type of logo to display */
+  type?: `${LogoType}`;
+}
+
+const labelByType = {
+  WISE: 'Wise',
+  WISE_BUSINESS: 'Wise Business',
+  WISE_PLATFORM: 'Wise Platform',
+} satisfies Record<`${LogoType}`, string>;
+
+export default function Logo({ className, inverse, type = 'WISE' }: LogoProps) {
   const LogoSm =
-    svgPaths[
-      `WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`
-    ];
+    svgPaths[`WISE_FLAG${type === 'WISE_PLATFORM' ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
   return (
-    <span
-      aria-label={
-        type === LogoType.WISE
-          ? 'Wise'
-          : 'Wise Business' | (type === LogoType.WISE_PLATFORM)
-            ? 'Wise Platform'
-            : 'Wise Business'
-      }
-      role="img"
-      className={classNames(className, 'np-logo')}
-    >
+    <span aria-label={labelByType[type]} role="img" className={classNames(className, 'np-logo')}>
       <LogoSm className="np-logo-svg np-logo-svg--size-sm" />
       <LogoMd className="np-logo-svg np-logo-svg--size-md" />
     </span>
   );
-};
-
-Logo.propTypes = {
-  /** Extra classes applied to Logo */
-  className: PropTypes.string,
-  /** If true, will use dark colours for dark on light theme */
-  inverse: PropTypes.bool,
-  /** What type of logo to display */
-  type: PropTypes.oneOf(['WISE', 'WISE_BUSINESS', 'WISE_PLATFORM']),
-};
-
-Logo.defaultProps = {
-  className: undefined,
-  inverse: false,
-  type: LogoType.WISE,
-};
-
-export default Logo;
+}

package/src/logo/index.ts

@@ -0,0 +1 @@
+export { default, LogoType } from './Logo';

package/src/main.css

@@ -5390,98 +5390,78 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
-.np-upload-button {
-  width: 100%;
-  border: 0 !important;
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-}
-.np-upload-button.np-upload-accent {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-label.np-upload-button:not(.disabled):hover,
-label.np-upload-button:not(.disabled):focus-visible,
-label.np-upload-button:not(.disabled):active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal label.np-upload-button:not(.disabled):hover,
-.np-theme-personal label.np-upload-button:not(.disabled):focus-visible,
-.np-theme-personal label.np-upload-button:not(.disabled):active {
-  background-color: var(--color-background-screen-hover);
-}
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):hover,
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):focus-visible,
-.np-theme-personal .disabled label.np-upload-button:not(.disabled):active {
-  background-color: transparent;
-}
-.np-upload-button .np-upload-icon {
-  display: flex;
-  align-items: center;
-}
-.np-upload-button-container.droppable {
-  border: 0;
+.np-upload-button-container {
+  border-style: solid;
 }
 .np-upload-button-container .droppable-card-content {
   display: flex;
 }
-.np-theme-personal .np-upload-button-container .droppable-card-content {
-  border-radius: calc(10px - 1px);
-  border-radius: calc(var(--radius-small) - 1px);
+.np-upload-button-container.droppable-dropping {
+  border-color: #c9cbce !important;
+  border-color: var(--color-interactive-secondary) !important;
 }
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
   position: absolute;
 }
-.np-upload-button-container input[type="file"]:focus-visible + label {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+.np-upload-button-container .np-upload-button {
+  border: none;
 }
-.np-upload-input {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+.np-upload-button {
+  width: 100%;
+  padding: 16px;
+  padding: var(--padding-small);
+  border-radius: 0;
 }
-.np-upload-input:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
+label.np-upload-button:not(.disabled):hover,
+label.np-upload-button:not(.disabled):active {
+  background-color: var(--color-background-screen-hover);
+}
+.disabled label.np-upload-button:not(.disabled):hover,
+.disabled label.np-upload-button:not(.disabled):active {
+  background-color: transparent;
+}
+.np-upload-button .media {
+  align-items: flex-start;
 }
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
   padding: initial;
 }
-.np-theme-personal .np-upload-input {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+.np-upload-input > div:first-child,
+.np-upload-input > div:first-child .np-upload-item--single-file,
+.np-upload-input > div:first-child .np-upload-item--link {
+  border-top-left-radius: 10px;
+  border-top-left-radius: var(--radius-small);
+  border-top-right-radius: 10px;
+  border-top-right-radius: var(--radius-small);
+}
+.np-upload-input > div:last-child {
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
 }
 .np-theme-personal .np-upload-input.disabled .btn {
   cursor: inherit;
 }
-.np-theme-personal .np-upload-input .np-upload-button {
-  border-radius: calc(10px - 1px);
-  border-radius: calc(var(--radius-small) - 1px);
-  padding: 16px;
-  padding: var(--padding-small);
-}
-.np-theme-personal .np-upload-input .np-upload-input--square-top {
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-}
-.np-theme-personal .np-upload-input .np-upload-item__remove-button {
-  border-radius: 0;
-  border-radius: initial;
-}
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-upload-input .media-body {
+  padding-right: 32px;
+  padding-right: var(--size-32);
   color: var(--color-content-link);
   white-space: break-spaces;
 }
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input .media-body {
+    padding-right: 64px;
+    padding-right: var(--size-64);
+  }
+}
 .np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -5496,6 +5476,10 @@ label.np-upload-button:not(.disabled):active {
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);
@@ -5510,79 +5494,114 @@ label.np-upload-button:not(.disabled):active {
     height: var(--size-large);
   }
 }
-.np-upload-item:not(:last-child)::after {
+.np-upload-item {
+  border: 1px solid #c9cbce;
+  border: 1px solid var(--color-interactive-secondary);
+}
+.np-upload-item:first-child ~ div:before {
   display: block;
   position: relative;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
+  height: 1px;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
   content: " ";
   margin: 0 16px;
   margin: 0 var(--size-16);
 }
-.np-theme-personal .np-upload-item:first-child a:hover,
-.np-theme-personal .np-upload-item:first-child a:focus-visible,
-.np-theme-personal .np-upload-item:first-child a:active {
-  border-top-left-radius: calc(10px - 1px);
-  border-top-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item:first-child ~ div {
+  border-top: 0;
+}
+.np-upload-item:not(:last-child) {
+  border-bottom: 0;
+}
+.np-upload-item.np-upload-item__link:hover:before,
+.np-upload-button-container:hover:before {
+  margin: 0 !important;
+}
+.np-upload-item.np-upload-item__link:hover + div:before,
+.np-upload-button-container:hover + div:before {
+  margin: 0 !important;
+}
+.np-upload-button-container:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+  border-color: transparent;
+  outline-offset: -3px;
 }
-.np-theme-personal .np-upload-item:first-child a:hover ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:focus-visible ~ .np-upload-item__remove-button,
-.np-theme-personal .np-upload-item:first-child a:active ~ .np-upload-item__remove-button {
-  border-top-right-radius: calc(10px - 1px);
-  border-top-right-radius: calc(var(--radius-small) - 1px);
+.np-upload-item--single-file:focus-visible,
+.np-upload-item--link:focus-visible,
+.np-upload-button-container:has(:focus-visible) {
+  outline-width: 3px;
 }
 .np-upload-item__link a {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  outline: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.np-theme-personal .np-upload-item__link a {
-  border-radius: 0;
-  border-radius: initial;
+  border-radius: inherit;
 }
-.np-upload-item__link a.np-upload-item--single-file {
-  border-bottom-left-radius: calc(10px - 1px);
-  border-bottom-left-radius: calc(var(--radius-small) - 1px);
+.np-upload-item__link a:focus-visible {
+  outline-offset: -2px;
 }
 .np-upload-item__link a:hover,
-.np-upload-item__link a:focus-visible,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-upload-item__link a:hover ~ .np-upload-item__remove-button,
-.np-upload-item__link a:focus-visible ~ .np-upload-item__remove-button,
-.np-upload-item__link a:active ~ .np-upload-item__remove-button {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-upload-item__link .np-upload-item__remove-button.np-upload-item--single-file {
-  border-bottom-right-radius: calc(10px - 1px);
-  border-bottom-right-radius: calc(var(--radius-small) - 1px);
-}
 .np-upload-item__body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  position: relative;
+  border-radius: inherit;
 }
 .np-upload-item__remove-button {
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: 12px 16px;
-  padding: var(--size-12) var(--size-16);
-  color: #c9cbce;
-  color: var(--color-interactive-secondary);
-  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  position: absolute;
+  height: 24px;
+  height: var(--size-24);
+  min-height: 0;
+  width: 24px;
+  width: var(--size-24);
+  padding: 0;
+  border-radius: 50% !important;
+  outline-offset: 0 !important;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  right: 16px;
+  right: var(--size-16);
+  top: 16px;
+  top: var(--size-16);
+  transition: color, background-color 0.15s ease-in-out;
+}
+@media (max-width: 320px) {
+  .np-upload-item__remove-button {
+    top: 16px;
+    top: var(--size-16);
+    right: 16px;
+    right: var(--size-16);
+    height: 48px;
+    height: var(--size-48);
+    width: 48px;
+    width: var(--size-48);
+  }
+}
+.np-upload-item__remove-button:hover {
+  background-color: var(--color-sentiment-negative);
+  color: var(--color-contrast-overlay) !important;
 }
-.np-upload-item__remove-button:hover,
-.np-upload-item__remove-button:focus {
-  color: #d03238 !important;
-  color: var(--color-interactive-negative-hover) !important;
+.np-upload-item__remove-button:before {
+  display: block;
+  width: 44px;
+  height: 44px;
+  content: '';
+  border-radius: 50%;
+  position: absolute;
 }
 .np-progress {
   border-radius: 10px;

package/src/progress/Progress.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { ReactElement, useEffect, useState } from 'react';
 
 export type ProgressProps = {
   className?: string;
@@ -7,21 +6,10 @@ export type ProgressProps = {
   progress: { value: number; max: number };
 };
 
-const Progress = ({ className, id, progress }: ProgressProps): ReactElement | null => {
-  const [value, setValue] = useState(0);
-
-  useEffect(() => {
-    setValue(progress.value);
-  });
-
+const Progress = ({ className, id, progress }: ProgressProps) => {
   return (
-    <progress
-      id={id}
-      className={classnames('np-progress d-block', className)}
-      {...progress}
-      value={value}
-    >
-      {value}%
+    <progress id={id} className={classnames('np-progress d-block', className)} {...progress}>
+      {Math.floor((progress.value / progress.max) * 100)}%
     </progress>
   );
 };

package/src/progressBar/ProgressBar.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { ReactElement } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
@@ -23,7 +22,7 @@ const ProgressBar = ({
   title,
   progress,
   textEnd,
-}: ProgressBarProps): ReactElement | null => {
+}: ProgressBarProps) => {
   const { isModern } = useTheme();
   return (
     <div className={classNames('np-progress-bar', className)}>

package/src/promoCard/PromoCard.tsx

@@ -154,7 +154,7 @@ export type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;
 
 export type PolymorphicPromoCard = (
   props: PromoCardLinkProps | PromoCardCheckedProps,
-) => JSX.Element;
+) => React.JSX.Element;
 
 /**
  * PromoCard component.
@@ -185,7 +185,7 @@ export type PolymorphicPromoCard = (
  * @param {string} title - Title text of the PromoCard.
  * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).
  * @param {string} value - Value for checkboxes and radios.
- * @returns {JSX.Element} The rendered PromoCard component.
+ * @returns {React.JSX.Element} The rendered PromoCard component.
  * @example
  * <PromoCard
  *   title="Example PromoCard"