@transferwise/components 46.130.0 → 46.130.2

package/src/sentimentSurface/SentimentSurface.less

@@ -133,8 +133,8 @@
       }
       &-elevated {
         .sentiment-surface-tokens(
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // content-primary
-                    #E2F6D5, #D3F2C0, #C5EDAB,  // interactive-primary
+                    #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
+                    #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
                     #054D28, #043A1E, #022614,  // interactive-secondary
                     #256A43, #2A794C, #329057,  // interactive-secondary-neutral
                     #054D28, #043A1E, #022614,  // interactive-control
@@ -150,12 +150,12 @@
     .np-theme-platform--forest-green& {
       &-base {
         .sentiment-surface-tokens(
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // content-primary
-                    #BAE5A0, #C8EAB3, #D6F0C7,  // interactive-primary
-                    #252C20, #323B2B, #3E4A36,  // interactive-secondary
-                    #37422F, #46533B, #546548,  // interactive-secondary-neutral
-                    #252C20, #323B2B, #3E4A36,  // interactive-control
-                    #252C20, #323B2B, #3E4A36   // background-surface
+                   #CEF1B8, #E0FFCC, #E1F4D4,  // content-primary
+                   #CEF1B8, #E0FFCC, #E1F4D4,  // interactive-primary
+                   #054D28, #043A1E, #022614,  // interactive-secondary
+                   #256A43, #2A794C, #329057,  // interactive-secondary-neutral
+                   #054D28, #043A1E, #022614,  // interactive-control
+                   #054D28, #043A1E, #022614   // background-surface
                 );
       }
       &-elevated {
@@ -262,10 +262,10 @@
         .sentiment-surface-tokens(
                     #FFFFFF, #EAF9F9, #D5F4F4,  // content-primary
                     #E0F7F7, #CAF1F1, #B6ECEC,  // interactive-primary
-                    #0B312F, #124F4C, #176460,  // interactive-secondary
-                    #174E4D, #1D6261, #237675,  // interactive-secondary-neutral
-                    #0B312F, #124F4C, #176460,  // interactive-control
-                    #0B312F, #124F4C, #176460   // background-surface
+                    #054D4D, #043A3A, #022626,  // interactive-secondary
+                    #1F6161, #247070, #298080,  // interactive-secondary-neutral
+                    #054D4D, #043A3A, #022626,  // interactive-control
+                    #054D4D, #043A3A, #022626   // background-surface
                 );
       }
       &-elevated {

package/src/statusIcon/StatusIcon.tsx

@@ -11,7 +11,7 @@ import { useMedia } from '../common/hooks/useMedia';
 import messages from './StatusIcon.messages';
 
 /**
- * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
@@ -19,7 +19,9 @@ export type StatusIconSentiment = Sentiment | Status.PENDING;
 
 export type StatusIconProps = {
   id?: string;
+  /** @default 'neutral' */
   sentiment?: `${StatusIconSentiment}`;
+  /** @default 40 */
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible

package/src/summary/Summary.tsx

@@ -47,6 +47,7 @@ export interface Props {
   action?: AlertAction;
   /**
    * Decides which html element should wrap the Summary
+   * @default 'div'
    */
   as?: ElementType;
   /**
@@ -54,7 +55,8 @@ export interface Props {
    */
   className?: string;
   /**
-   * @deprecated please use description instead
+   * @deprecated Use `description` instead.
+   * @default null
    */
   content?: ReactNode;
   /**
@@ -62,7 +64,7 @@ export interface Props {
    */
   description?: ReactNode;
   /**
-   * @deprecated please use info instead
+   * @deprecated Use `info` instead.
    */
   help?: {
     content: ReactNode;
@@ -73,7 +75,8 @@ export interface Props {
    */
   info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;
   /**
-   * @deprecated please use icon instead
+   * @deprecated Use `icon` instead.
+   * @default null
    */
   illustration?: ReactNode;
   /**
@@ -91,7 +94,7 @@ export interface Props {
 }
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/switchOption/SwitchOption.tsx

@@ -27,7 +27,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
 };
 
 /**
- * @deprecated Please use `<ListItem />` instead.
+ * @deprecated Use `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [Source](../listItem/ListItem.tsx)
  * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)

package/src/tabs/Tabs.tsx

@@ -28,8 +28,10 @@ export interface TabsProps {
   tabs: TabItem[];
   selected: number;
   name: string;
+  /** @default true */
   changeTabOnSwipe?: boolean;
   className?: string;
+  /** @default 'block' */
   headerWidth?: `${Width}`;
   onTabSelect: (index: number) => void;
 }

package/src/typeahead/Typeahead.tsx

@@ -40,7 +40,7 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
   name: string;
   addon?: ReactNode;
   /**
-   * @deprecated Please use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
+   * @deprecated Use [`Field`](?path=/docs/forms-field--docs) component and its `message` and `sentiment` props instead.
    * @deprecated `error`, `info` and `success` are deprecated as alert types and will be soon removed.
    */
   alert?: {
@@ -51,24 +51,36 @@ export interface TypeaheadProps<T> extends Partial<WrappedComponentProps> {
       | `${Sentiment.INFO}`
       | `${Sentiment.SUCCESS}`;
   };
+  /** @default false */
   allowNew?: boolean;
+  /** @default true */
   autoFillOnBlur?: boolean;
+  /** @default false */
   autoFocus?: boolean;
+  /** @default [] */
   chipSeparators?: readonly string[];
+  /** @default true */
   clearable?: boolean;
   footer?: ReactNode;
+  /** @default [] */
   initialValue?: readonly TypeaheadOption<T>[];
+  /** @default 'new-password' */
   inputAutoComplete?: string;
   maxHeight?: number;
+  /** @default 3 */
   minQueryLength?: number;
   placeholder?: string;
+  /** @default false */
   multiple?: boolean;
   options: readonly TypeaheadOption<T>[];
+  /** @default 200 */
   searchDelay?: number;
+  /** @default true */
   showSuggestions?: boolean;
+  /** @default true */
   showNewEntry?: boolean;
+  /** @default 'md' */
   size?: SizeMedium | SizeLarge;
-
   onBlur?: () => void;
   onChange: (options: TypeaheadOption<T>[]) => void;
   onFocus?: () => void;

package/src/upload/Upload.tsx

@@ -18,6 +18,7 @@ export enum UploadStep {
 }
 
 export interface UploadProps extends WrappedComponentProps {
+  /** @default 300 */
   animationDelay?: number;
   csButtonText?: string;
   csFailureText?: string;
@@ -39,19 +40,24 @@ export interface UploadProps extends WrappedComponentProps {
    */
   maxSize?: number | null;
   psButtonText?: string;
+  /** @default false */
   psButtonDisabled?: boolean;
   psProcessingText?: string;
+  /** @default 'md' */
   size?: `${Size.SMALL | Size.MEDIUM | Size.LARGE}`;
   /**
    * You can provide multiple rules separated by comma, e.g.: "application/pdf,image/*".
    * Using "*" will allow every file type to be uploaded.
+   * @default 'image/*'
    */
   usAccept?: string;
   usButtonText?: string;
   usButtonRetryText?: string;
+  /** @default false */
   usDisabled?: boolean;
   usDropMessage?: string;
   usHelpImage?: React.ReactNode;
+  /** @default '' */
   usLabel?: string;
   usPlaceholder?: string;
   /**

package/src/uploadInput/UploadInput.tsx

@@ -18,11 +18,13 @@ import UploadItem, { UploadItemProps } from './uploadItem/UploadItem';
 export type UploadInputProps = {
   /**
    * List of already existing, failed or in progress files
+   * @default []
    */
   files?: readonly UploadedFile[];
 
   /**
    * The key of the file in the returned FormData object (default: file)
+   * @default 'file'
    */
   fileInputName?: string;
 
@@ -94,10 +96,16 @@ export type UploadInputProps = {
    * Error message to show when files over allowed size limit are uploaded
    */
   sizeLimitErrorMessage?: string;
-} & Pick<
-  UploadButtonProps,
-  'disabled' | 'multiple' | 'fileTypes' | 'sizeLimit' | 'description' | 'id' | 'uploadButtonTitle'
-> & { onDownload?: UploadItemProps['onDownload'] } & CommonProps;
+} & {
+  /** @default false */
+  multiple?: UploadButtonProps['multiple'];
+  /** @default ['.pdf,application/pdf', '.jpg,.jpeg,image/jpeg', '.png,image/png'] */
+  fileTypes?: UploadButtonProps['fileTypes'];
+  /** @default 5000 */
+  sizeLimit?: UploadButtonProps['sizeLimit'];
+} & Pick<UploadButtonProps, 'disabled' | 'description' | 'id' | 'uploadButtonTitle'> & {
+    onDownload?: UploadItemProps['onDownload'];
+  } & CommonProps;
 
 /**
  * Interface representing a reference to an UploadItem component.

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -49,12 +49,15 @@ export interface WithDisplayFormatProps<T extends TextElementProps = TextElement
   | 'required'
   | 'inputMode'
 > {
+  /** @default '' */
   value?: string;
+  /** @default '' */
   displayPattern: string;
   /**
    * autocomplete hides our form help so we need to disable it when help text
    * is present. Chrome ignores autocomplete=off, the only way to disable it is
    * to provide an 'invalid' value, for which 'disabled' serves.
+   * @default 'off'
    */
   autoComplete?: TextElementProps['autoComplete'] | 'disabled';
   onChange?: (value: string) => void;