@transferwise/components 46.36.1 → 46.37.0

package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAmHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAKxC,MAAM,MAAM,eAAe,GAAG,GAAG,CAAC,mBAAmB,GAAG;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;CACxB;AAED,QAAA,MAAM,UAAU,iEAMb,eAAe,gCAmHjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import * as React from 'react';
 import { HistoryNavigator } from '../common';
 import { InputProps } from '../inputs/Input';
 import { TextAreaProps } from '../inputs/TextArea';
@@ -27,9 +27,9 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
     onChange?: (value: string) => void;
     onBlur?: (value: string) => void;
     onFocus?: (value: string) => void;
-    render: (renderProps: T) => JSX.Element;
+    render: (renderProps: T) => React.JSX.Element;
 }
-declare class WithDisplayFormat<T extends TextElementProps> extends Component<WithDisplayFormatProps<T>, WithDisplayFormatState> {
+declare class WithDisplayFormat<T extends TextElementProps> extends React.Component<WithDisplayFormatProps<T>, WithDisplayFormatState> {
     props: WithDisplayFormatProps<T> & Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;
     static defaultProps: {
         autoComplete: string;
@@ -56,7 +56,7 @@ declare class WithDisplayFormat<T extends TextElementProps> extends Component<Wi
     handleOnFocus: React.FocusEventHandler<HTMLTextElement>;
     handleDelete: (unformattedValue: string, action: EventType) => string;
     handleCursorPositioning: (action: string) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default WithDisplayFormat;
 //# sourceMappingURL=WithDisplayFormat.d.ts.map

package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"WithDisplayFormat.d.ts","sourceRoot":"","sources":["../../../src/withDisplayFormat/WithDisplayFormat.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.36.1",
+  "version": "46.37.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,9 +94,9 @@
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
     "storybook": "^7.6.19",
-    "@transferwise/neptune-css": "14.10.0",
+    "@transferwise/less-config": "3.1.0",
     "@wise/components-theming": "1.3.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/neptune-css": "14.10.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/accordion/AccordionItem/AccordionItem.tsx

@@ -1,5 +1,6 @@
+import { IdIconProps } from '@transferwise/icons';
 import classNames from 'classnames';
-import { cloneElement, FC, useId, ReactNode } from 'react';
+import { FC, ReactNode, cloneElement, useId } from 'react';
 
 import Body from '../../body';
 import Chevron from '../../chevron';
@@ -73,7 +74,9 @@ const AccordionItem: FC<AccordionItemProps> = ({
   icon,
   theme = 'light',
 }) => {
-  const iconElement = icon ? cloneElement(icon as React.ReactElement, { size: 24 }) : null;
+  const iconElement = icon
+    ? cloneElement(icon as React.ReactElement<IdIconProps>, { size: 24 })
+    : null;
   const fallbackId = useId();
   const accordionId = id ?? fallbackId;
 

package/src/actionOption/ActionOption.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { ReactChild } from 'react';
 
 import ActionButton from '../actionButton';
 import { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';
@@ -7,13 +6,13 @@ import Option from '../common/Option';
 
 export type ActionOptionProps = {
   complex?: boolean;
-  content?: ReactChild;
+  content?: React.ReactNode;
   disabled?: boolean;
-  media?: ReactChild;
+  media?: React.ReactNode;
   showMediaAtAllSizes?: boolean;
   onClick: () => void;
-  title: ReactChild;
-  action: ReactChild;
+  title: React.ReactNode;
+  action: React.ReactNode;
   priority?: PriorityPrimary | PrioritySecondary;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;

package/src/alert/Alert.tsx

@@ -42,7 +42,7 @@ export interface AlertProps {
   action?: AlertAction;
   className?: string;
   /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon?: React.ReactElement;
+  icon?: React.ReactNode;
   /** Title for the alert component */
   title?: string;
   /** The main body of the alert. Accepts plain text and bold words specified with **double stars */

package/src/body/Body.tsx

@@ -26,9 +26,10 @@ type Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
 const Body = forwardRef(function Body(
   { as: Element = 'div', type = DEFAULT_TYPE, className, ...props }: Props,
   reference: React.ForwardedRef<
-    {
-      [key in typeof Element]: React.ElementRef<key>;
-    }[typeof Element]
+    | {
+        [key in typeof Element]: React.ElementRef<key>;
+      }[typeof Element]
+    | null
   >,
 ) {
   const isTypeSupported = bodyTypes.has(type);

package/src/chips/Chip.tsx

@@ -1,10 +1,9 @@
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import Body from '../body/Body';
-import { AriaLabelProperty, CommonProps } from '../common';
-import { Typography } from '../common';
+import { AriaLabelProperty, CommonProps, Typography } from '../common';
 import { CloseButton } from '../common/closeButton/CloseButton';
 
 export type ChipValue = string | number;
@@ -32,7 +31,7 @@ const Chip = ({
   'aria-checked': ariaChecked,
   role,
   closeButton,
-}: Props): ReactElement => {
+}: Props) => {
   const isActionable = onClick || onKeyPress;
   const defaultRole = isActionable ? 'button' : undefined;
   const tabIndex = isActionable ? 0 : -1;
@@ -40,7 +39,7 @@ const Chip = ({
   const { isModern } = useTheme();
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
-  const previousCloseButtonShown = useRef<boolean>();
+  const previousCloseButtonShown = useRef<boolean | undefined>(undefined);
   useEffect(() => {
     if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {
       closeButtonReference.current?.focus();
@@ -78,7 +77,7 @@ const Chip = ({
         <CloseButton
           ref={closeButtonReference}
           className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}
-          aria-label={closeButton && closeButton['aria-label']}
+          aria-label={closeButton?.['aria-label']}
           size="sm"
           filled={isModern}
           onClick={onRemove}

package/src/chips/Chips.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 
 import { CommonProps, AriaLabelProperty } from '../common';
@@ -39,7 +38,7 @@ const Chips = ({
   'aria-label': ariaLabel,
   className,
   multiple,
-}: ChipsProps): ReactElement => {
+}: ChipsProps) => {
   const intl = useIntl();
 
   const isSelected = (value: ChipValue) =>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -1,12 +1,5 @@
 import classNames from 'classnames';
-import {
-  useRef,
-  useState,
-  ReactElement,
-  PropsWithChildren,
-  CSSProperties,
-  SyntheticEvent,
-} from 'react';
+import { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';
 
 import Dimmer from '../../dimmer';
 import Drawer from '../../drawer';
@@ -38,7 +31,7 @@ export type BottomSheetProps = PropsWithChildren<
  * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet
  *
  */
-const BottomSheet = (props: BottomSheetProps): ReactElement => {
+const BottomSheet = (props: BottomSheetProps) => {
   const bottomSheetReference = useRef<HTMLDivElement>(null);
   const topBarReference = useRef<HTMLDivElement>(null);
   const contentReference = useRef<HTMLDivElement>(null);

package/src/common/closeButton/CloseButton.tsx

@@ -27,7 +27,7 @@ export const CloseButton = forwardRef(function CloseButton(
     isDisabled,
     testId,
   }: CloseButtonProps,
-  reference: React.ForwardedRef<HTMLButtonElement>,
+  reference: React.ForwardedRef<HTMLButtonElement | null>,
 ) {
   const intl = useIntl();
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);

package/src/common/flowHeader/FlowHeader.tsx

@@ -20,7 +20,7 @@ const FlowHeader = React.forwardRef(
       leftContent,
       rightContent,
     }: FlowHeaderProps,
-    reference: React.ForwardedRef<HTMLDivElement>,
+    reference: React.ForwardedRef<HTMLDivElement | null>,
   ) => {
     const isVertical = layout === Layout.VERTICAL;
 

package/src/common/hooks/useResizeObserver.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useEffectEvent } from './useEffectEvent';
 
 export function useResizeObserver(
-  ref: React.RefObject<Element>,
+  ref: React.MutableRefObject<Element | null>,
   callback: (entry: ResizeObserverEntry) => void,
 ) {
   const handleCallback = useEffectEvent(callback);

package/src/common/panel/Panel.spec.tsx

@@ -6,7 +6,7 @@ import { render } from '../../test-utils';
 import Panel from './Panel';
 import type { PanelProps } from './Panel';
 
-const mockAnchorRef: React.RefObject<HTMLAnchorElement> = {
+const mockAnchorRef: React.MutableRefObject<HTMLAnchorElement | null> = {
   current: document.createElement('a'),
 };
 

package/src/common/panel/Panel.tsx

@@ -1,13 +1,13 @@
 import classnames from 'classnames';
 import {
-  useState,
-  forwardRef,
-  useEffect,
+  CSSProperties,
+  HTMLAttributes,
+  MutableRefObject,
   PropsWithChildren,
-  RefObject,
   SyntheticEvent,
-  HTMLAttributes,
-  CSSProperties,
+  forwardRef,
+  useEffect,
+  useState,
 } from 'react';
 import { usePopper } from 'react-popper';
 
@@ -33,7 +33,7 @@ export type PanelProps = PropsWithChildren<{
   open?: boolean;
   onClose?: (event: Event | SyntheticEvent) => void;
   position?: PositionBottom | PositionLeft | PositionRight | PositionTop;
-  anchorRef: RefObject<Element>;
+  anchorRef: MutableRefObject<Element | null>;
   anchorWidth?: boolean;
 }> &
   HTMLAttributes<HTMLDivElement>;

package/src/common/polymorphicWithOverrides/PolymorphicWithOverrides.tsx

@@ -13,7 +13,7 @@ export interface PolymorphicWithOverridesProps {
  */
 export const PolymorphicWithOverrides = forwardRef(function PolymorphicWithOverrides(
   { __overrides: { as: Element, ...restOverrides }, ...restProps }: PolymorphicWithOverridesProps,
-  ref: React.ForwardedRef<Element>,
+  ref: React.ForwardedRef<Element | null>,
 ) {
   return <Element ref={ref} {...restProps} {...restOverrides} />;
 });

package/src/dimmer/Dimmer.tsx

@@ -1,14 +1,6 @@
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import {
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -203,7 +195,7 @@ export const DimmerContentWrapper = ({
   children,
   scrollBody,
 }: {
-  children: ReactElement;
+  children: React.ReactElement;
   scrollBody: boolean;
 }) => {
   useEffect(() => {

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/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/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"

package/src/promoCard/PromoCardContext.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { PromoCardContext, usePromoCardContext } from './PromoCardContext';
 
 // A simple component that consumes the context
-const TestComponent: React.FC = () => {
+const TestComponent: React.FC<Record<string, never>> = () => {
   const context = usePromoCardContext();
 
   return (

package/src/provider/direction/DirectionProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactElement, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren } from 'react';
 
 import { LayoutDirection, Direction } from '../../common/direction';
 
@@ -6,9 +6,6 @@ export const DirectionContext = createContext<LayoutDirection>(Direction.LTR);
 
 export type DirectionProviderProps = PropsWithChildren<{ direction: LayoutDirection }>;
 
-export const DirectionProvider = ({
-  direction,
-  children,
-}: DirectionProviderProps): ReactElement => {
+export const DirectionProvider = ({ direction, children }: DirectionProviderProps) => {
   return <DirectionContext.Provider value={direction}>{children}</DirectionContext.Provider>;
 };

package/src/provider/language/LanguageProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactElement, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren } from 'react';
 
 import { DEFAULT_LOCALE } from '../../common/locale';
 
@@ -6,6 +6,6 @@ export const LanguageContext = createContext<string>(DEFAULT_LOCALE);
 
 export type LanguageProviderProps = PropsWithChildren<{ locale: string }>;
 
-export const LanguageProvider = ({ locale, children }: LanguageProviderProps): ReactElement => {
+export const LanguageProvider = ({ locale, children }: LanguageProviderProps) => {
   return <LanguageContext.Provider value={locale}>{children}</LanguageContext.Provider>;
 };

package/src/segmentedControl/SegmentedControl.tsx

@@ -104,7 +104,7 @@ const SegmentedControl = ({
           };
           return mode === 'input' ? (
             <label
-              ref={segment.ref as React.RefObject<HTMLLabelElement>}
+              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}
               key={segment.id}
               htmlFor={segment.id}
               className={classNames('segmented-control__segment', {
@@ -132,7 +132,7 @@ const SegmentedControl = ({
             </label>
           ) : (
             <button
-              ref={segment.ref as React.RefObject<HTMLButtonElement>}
+              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}
               key={segment.id}
               type="button"
               role="tab"

package/src/select/option/Option.tsx

@@ -1,5 +1,6 @@
+import { IdIconProps } from '@transferwise/icons';
 import { Flag } from '@wise/art';
-import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
 import { cloneElement, ReactElement, ReactNode } from 'react';
 
 import Body from '../../body';
@@ -12,6 +13,7 @@ export type Props<T> = {
   note?: ReactNode;
   secondary?: ReactNode;
   icon?: ReactNode;
+  /** @deprecated */
   classNames?: Record<string, string>;
   selected?: boolean;
 };
@@ -22,13 +24,10 @@ function Option<T>({
   note = '',
   secondary = '',
   icon,
-  classNames = {},
   selected = false,
 }: Props<T>) {
-  const { isModern } = useTheme();
-
   const iconElement = icon
-    ? cloneElement(icon as ReactElement, {
+    ? cloneElement(icon as ReactElement<IdIconProps>, {
         size: 24,
         className: 'tw-icon',
       })
@@ -38,26 +37,15 @@ function Option<T>({
     <Body as="span" type={Typography.BODY_LARGE} className={selected ? 'text-ellipsis' : undefined}>
       {label}
       {note && (
-        <Body as="span" className={isModern ? 'm-l-1' : 'm-l-1 body-2'}>
+        <Body as="span" className="m-l-1">
           {note}
         </Body>
       )}
     </Body>
   );
 
-  const secondaryElementClassNames = (): string | undefined => {
-    let classes: string | undefined = undefined;
-    if (selected) {
-      classes = 'text-ellipsis';
-    }
-    if (isModern) {
-      return classes;
-    }
-    return `${classes ? classes + ' ' : ''}body-2`;
-  };
-
   const secondaryElement = secondary && (
-    <Body className={secondaryElementClassNames()}>{secondary}</Body>
+    <Body className={classNames(selected && 'text-ellipsis')}>{secondary}</Body>
   );
 
   return iconElement ? (

package/src/slidingPanel/SlidingPanel.tsx

@@ -25,7 +25,7 @@ const SlidingPanel = forwardRef(
       children,
       ...rest
     }: Omit<SlidingPanelProps, 'ref'>,
-    reference: React.ForwardedRef<HTMLDivElement>,
+    reference: React.ForwardedRef<HTMLDivElement | null>,
   ) => {
     const localReference = useRef<HTMLDivElement>(null as never);
     useImperativeHandle(reference, () => localReference.current, []);

package/src/ssr.spec.js

@@ -194,6 +194,12 @@ describe('Server side rendering', () => {
       Popover: {
         children: <div />,
       },
+      Progress: {
+        progress: { value: 50, max: 100 },
+      },
+      ProgressBar: {
+        progress: { value: 50, max: 100 },
+      },
       Field: {
         model: 'a model',
         type: 'text',