@transferwise/components 46.129.0 → 46.130.1

package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/NoMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [240, 241];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const NoMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/SideMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [332, 333];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const SideMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/Breakpoints/StackedMedia',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+const widths = [308, 309];
+
+const sharedProps: Partial<ListItemProps> = {
+  subtitle: TEXT.subtitle,
+  valueTitle: TEXT.valueTitle,
+  valueSubtitle: TEXT.valueSubtitle,
+  additionalInfo: INFO.nonInteractive,
+  control: CONTROLS.switch,
+  prompt: PROMPT.interactive,
+  media: MEDIA.avatarSingle,
+};
+
+export const StackedMedia: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: widths.map((w) => `${w}px`).join(' '),
+        gap: 16,
+      }}
+    >
+      {widths.map((w) => (
+        <div key={w} style={{ textAlign: 'center', fontWeight: 'bold' }}>
+          {w}px
+        </div>
+      ))}
+      {widths.map((w) => (
+        <div key={w} style={{ width: w }}>
+          <List>
+            <ListItem {...sharedProps} title="Inactive Spotlight" spotlight="inactive" />
+            <ListItem {...sharedProps} title="Active Spotlight" spotlight="active" />
+            <ListItem {...sharedProps} title="No Spotlight" />
+          </List>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/listItem/_stories/ListItem.story.tsx

@@ -428,8 +428,9 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
 
     return (
       <List>
-        <ListItem {...props} {...previewProps} spotlight="inactive" />
-        <ListItem {...props} {...previewProps} spotlight="active" />
+        <ListItem {...props} {...previewProps} title="Inactive Spotlight" spotlight="inactive" />
+        <ListItem {...props} {...previewProps} title="Active Spotlight" spotlight="active" />
+        <ListItem {...props} {...previewProps} title="No Spotlight" />
       </List>
     );
   },

package/src/loader/Loader.tsx

@@ -4,19 +4,23 @@ import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
-// TODO: We gracefully depracated xs, lg and xl -- remove these as part of a future breaking change to this component
+// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component
 type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
 export type LoaderProps = {
   /**
-   * @deprecated use `size` instead
+   * @deprecated Use `size` instead.
+   * @default false
    */
   small?: boolean;
+  /** @default 'md' */
   size?: SizeType | DeprecatedSize;
+  /** @default false */
   displayInstantly?: boolean;
   // TODO: refactor in favor of prop from `CommonProps` type
+  /** @default {} */
   classNames?: Record<string, string>;
   'data-testid'?: string;
 };

package/src/logo/Logo.tsx

@@ -35,7 +35,10 @@ export interface LogoProps {
   className?: string;
   /** If true, will use dark colours for dark on light theme */
   inverse?: boolean;
-  /** What type of logo to display */
+  /**
+   * What type of logo to display
+   * @default 'WISE'
+   */
   type?: `${LogoType}`;
 }
 

package/src/main.css

@@ -226,12 +226,12 @@
 .np-theme-platform.wds-sentiment-surface-success-elevated,
 .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
 .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
-  --color-sentiment-content-primary: #E2F6D5;
-  --color-sentiment-content-primary-hover: #D3F2C0;
-  --color-sentiment-content-primary-active: #C5EDAB;
-  --color-sentiment-interactive-primary: #E2F6D5;
-  --color-sentiment-interactive-primary-hover: #D3F2C0;
-  --color-sentiment-interactive-primary-active: #C5EDAB;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
   --color-sentiment-interactive-secondary: #054D28;
   --color-sentiment-interactive-secondary-hover: #043A1E;
   --color-sentiment-interactive-secondary-active: #022614;
@@ -250,24 +250,24 @@
 .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
 .np-theme-business--forest-green.wds-sentiment-surface-success-base,
 .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
-  --color-sentiment-content-primary: #BAE5A0;
-  --color-sentiment-content-primary-hover: #C8EAB3;
-  --color-sentiment-content-primary-active: #D6F0C7;
-  --color-sentiment-interactive-primary: #BAE5A0;
-  --color-sentiment-interactive-primary-hover: #C8EAB3;
-  --color-sentiment-interactive-primary-active: #D6F0C7;
-  --color-sentiment-interactive-secondary: #252C20;
-  --color-sentiment-interactive-secondary-hover: #323B2B;
-  --color-sentiment-interactive-secondary-active: #3E4A36;
-  --color-sentiment-interactive-secondary-neutral: #37422F;
-  --color-sentiment-interactive-secondary-neutral-hover: #46533B;
-  --color-sentiment-interactive-secondary-neutral-active: #546548;
-  --color-sentiment-interactive-control: #252C20;
-  --color-sentiment-interactive-control-hover: #323B2B;
-  --color-sentiment-interactive-control-active: #3E4A36;
-  --color-sentiment-background-surface: #252C20;
-  --color-sentiment-background-surface-hover: #323B2B;
-  --color-sentiment-background-surface-active: #3E4A36;
+  --color-sentiment-content-primary: #CEF1B8;
+  --color-sentiment-content-primary-hover: #E0FFCC;
+  --color-sentiment-content-primary-active: #E1F4D4;
+  --color-sentiment-interactive-primary: #CEF1B8;
+  --color-sentiment-interactive-primary-hover: #E0FFCC;
+  --color-sentiment-interactive-primary-active: #E1F4D4;
+  --color-sentiment-interactive-secondary: #054D28;
+  --color-sentiment-interactive-secondary-hover: #043A1E;
+  --color-sentiment-interactive-secondary-active: #022614;
+  --color-sentiment-interactive-secondary-neutral: #256A43;
+  --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
+  --color-sentiment-interactive-secondary-neutral-active: #329057;
+  --color-sentiment-interactive-control: #054D28;
+  --color-sentiment-interactive-control-hover: #043A1E;
+  --color-sentiment-interactive-control-active: #022614;
+  --color-sentiment-background-surface: #054D28;
+  --color-sentiment-background-surface-hover: #043A1E;
+  --color-sentiment-background-surface-active: #022614;
 }
 .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
 .np-theme-business--dark.wds-sentiment-surface-success-elevated,
@@ -448,18 +448,18 @@
   --color-sentiment-interactive-primary: #E0F7F7;
   --color-sentiment-interactive-primary-hover: #CAF1F1;
   --color-sentiment-interactive-primary-active: #B6ECEC;
-  --color-sentiment-interactive-secondary: #0B312F;
-  --color-sentiment-interactive-secondary-hover: #124F4C;
-  --color-sentiment-interactive-secondary-active: #176460;
-  --color-sentiment-interactive-secondary-neutral: #174E4D;
-  --color-sentiment-interactive-secondary-neutral-hover: #1D6261;
-  --color-sentiment-interactive-secondary-neutral-active: #237675;
-  --color-sentiment-interactive-control: #0B312F;
-  --color-sentiment-interactive-control-hover: #124F4C;
-  --color-sentiment-interactive-control-active: #176460;
-  --color-sentiment-background-surface: #0B312F;
-  --color-sentiment-background-surface-hover: #124F4C;
-  --color-sentiment-background-surface-active: #176460;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
 }
 .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
 .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
@@ -485,37 +485,55 @@
   --color-sentiment-background-surface-hover: #CAF1F1;
   --color-sentiment-background-surface-active: #B6ECEC;
 }
-.np-theme-personal .critical-comms .alert-warning {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative);
+.critical-comms {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
-.np-theme-personal .critical-comms .alert-warning .np-text-title-body {
-  color: var(--color-contrast-overlay);
+.critical-comms .alert {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  margin-bottom: 0;
+}
+.critical-comms .alert .np-text-title-body {
+  color: var(--color-sentiment-content-primary);
 }
-.np-theme-personal .critical-comms .status-circle.warning {
+.critical-comms .status-circle.negative {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
-.np-theme-personal .critical-comms .status-circle.warning .status-icon {
-  color: var(--color-contrast-theme);
+.critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
+  color: var(--color-content-primary);
 }
-.np-theme-personal .critical-comms .alert__message .alert__action {
+.critical-comms .alert__message .alert__action {
   margin-top: 16px;
   margin-top: var(--size-16);
 }
-.np-theme-personal .critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+.critical-comms .wds-Button {
+  --Button-color: var(--color-content-primary);
+  --Button-color-hover: var(--color-content-primary);
+  --Button-color-active: var(--color-content-primary);
+  --Button-background: var(--color-background-screen);
+  --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
+  --Button-background-active: var(--color-sentiment-interactive-primary-active);
+}
+.critical-comms .alert-warning .wds-Button {
+  --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
+  --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
 @media (min-width: 768px) {
-  .np-theme-personal .critical-comms .alert-warning .alert__message {
+  .critical-comms .alert-warning .alert__message,
+  .critical-comms .alert-negative .alert__message,
+  .critical-comms .alert-neutral .alert__message {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;
   }
-  .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
+  .critical-comms .alert-warning .alert__message .alert__action,
+  .critical-comms .alert-negative .alert__message .alert__action,
+  .critical-comms .alert-neutral .alert__message .alert__action {
     margin-top: 0;
     margin-left: 16px;
     margin-left: var(--padding-small);
@@ -1969,6 +1987,55 @@
   border-radius: var(--radius-full);
   box-shadow: inset 0 0 0 var(--circle-border-width) var(--circle-border-color);
 }
+/* @define Card */
+.np-Card {
+  --Card-background-color: var(--color-background-neutral);
+  --Card-border-radius: var(--size-32);
+  --Card-flex-gap: var(--size-16);
+  --Card-padding: var(--size-24);
+  --Card-closeButton-position: var(--size-16);
+  --Card-max-width: initial;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--Card-background-color);
+  border-radius: 32px;
+  border-radius: var(--Card-border-radius);
+  gap: 16px;
+  gap: var(--Card-flex-gap);
+  padding: 24px;
+  padding: var(--Card-padding);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .np-Card {
+    max-width: var(--Card-max-width);
+  }
+}
+.np-Card.is-disabled .np-Card-closeButton {
+  cursor: not-allowed;
+}
+.np-theme-personal--dark .np-Card {
+  --Card-background-color: var(--color-background-elevated);
+}
+.np-Card-closeButton {
+  position: absolute;
+  z-index: 100;
+  top: var(--Card-closeButton-position);
+  right: var(--Card-closeButton-position);
+}
+[dir="rtl"] .np-Card-closeButton {
+  left: var(--Card-closeButton-position);
+  right: auto;
+}
+.np-Card--small {
+  --Card-border-radius: var(--size-16);
+  --Card-closeButton-position: var(--size-8);
+  --Card-padding: var(--size-16);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -2022,55 +2089,6 @@
   padding: 0 16px 16px;
   padding: 0 var(--size-16) var(--size-16);
 }
-/* @define Card */
-.np-Card {
-  --Card-background-color: var(--color-background-neutral);
-  --Card-border-radius: var(--size-32);
-  --Card-flex-gap: var(--size-16);
-  --Card-padding: var(--size-24);
-  --Card-closeButton-position: var(--size-16);
-  --Card-max-width: initial;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--Card-background-color);
-  border-radius: 32px;
-  border-radius: var(--Card-border-radius);
-  gap: 16px;
-  gap: var(--Card-flex-gap);
-  padding: 24px;
-  padding: var(--Card-padding);
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-@media (min-width: 576px) {
-  .np-Card {
-    max-width: var(--Card-max-width);
-  }
-}
-.np-Card.is-disabled .np-Card-closeButton {
-  cursor: not-allowed;
-}
-.np-theme-personal--dark .np-Card {
-  --Card-background-color: var(--color-background-elevated);
-}
-.np-Card-closeButton {
-  position: absolute;
-  z-index: 100;
-  top: var(--Card-closeButton-position);
-  right: var(--Card-closeButton-position);
-}
-[dir="rtl"] .np-Card-closeButton {
-  left: var(--Card-closeButton-position);
-  right: auto;
-}
-.np-Card--small {
-  --Card-border-radius: var(--size-16);
-  --Card-closeButton-position: var(--size-8);
-  --Card-padding: var(--size-16);
-}
 .np-close-button {
   transition: color 0.15s ease-in-out;
   color: #00a2dd;
@@ -3692,7 +3710,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item.disabled--has-prompt-reason .wds-list-item-prompt {
   opacity: 0.93;
 }
-.wds-list-item-spotlight {
+.wds-list-item-spotlight .wds-list-item-gridWrapper {
   padding-left: 12px;
   padding-left: var(--size-12);
   padding-right: 12px;

package/src/main.less

@@ -19,8 +19,8 @@
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";
 @import "./common/circle/Circle.less";
+@import "./common/baseCard/BaseCard.less";
 @import "./common/bottomSheet/BottomSheet.less";
-@import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
 @import "./common/panel/Panel.less";
@@ -90,4 +90,4 @@
 @import "./prompt/ActionPrompt/ActionPrompt.less";
 
 // List all less files in src in alphabetical order: find -s src -type f -name '*.less' ! -name 'main.less'
-// Make sure you are not referencing main.less itself in this file!
+// Make sure you are not referencing main.less itself in this file!

package/src/modal/Modal.tsx

@@ -30,15 +30,21 @@ import closeBtnMessages from '../common/closeButton/CloseButton.messages';
 const TRANSITION_DURATION_IN_MILLISECONDS = 150;
 
 export type ModalProps = CommonProps & {
+  /** @default null */
   title?: ReactNode;
   body: ReactNode;
+  /** @default null */
   footer?: ReactNode;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;
   onClose: () => void;
   onUnmount?: () => void;
   open: boolean;
+  /** @default 'viewport' */
   scroll?: ScrollContent | ScrollViewport;
+  /** @default 'center' */
   position?: PositionTop | PositionCenter;
+  /** @default false */
   disableDimmerClickToClose?: boolean;
 };
 

package/src/navigationOption/NavigationOption.tsx

@@ -9,7 +9,7 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 export type NavigationOptionProps = OptionProps;
 
 /**
- * @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/navigationOptionsList/NavigationOptionsList.tsx

@@ -6,7 +6,7 @@ export interface NavigationOptionListProps {
 }
 
 /**
- * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecated Use `<List />` and `<ListItem />` instead.
  * @deprecatedSince 46.104.0
  * @see [List source](../list/List.tsx)
  * @see [ListItem source](../listItem/ListItem.tsx)

package/src/nudge/Nudge.tsx

@@ -46,7 +46,7 @@ type MediaNameType =
   | `${Assets.BACKPACK}`;
 
 type BaseProps = {
-  /** @deprecated use `mediaName` property instead */
+  /** @deprecated Use `mediaName` property instead. */
   media?: ReactNode;
   /** Media name  */
   mediaName?: MediaNameType;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -31,11 +31,17 @@ export interface PhoneNumberInputProps {
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: () => void;
   countryCode?: string;
+  /** @default 'Prefix' */
   searchPlaceholder?: string;
+  /** @default 'md' */
   size?: SizeSmall | SizeMedium | SizeLarge;
   placeholder?: string;
+  /** @default {} */
   selectProps?: Partial<SelectInputProps<string | null>>;
-  /** List of iso3 codes of countries to remove from the list */
+  /**
+   * List of iso3 codes of countries to remove from the list
+   * @default []
+   */
   disabledCountries?: readonly string[];
 }
 

package/src/popover/Popover.tsx

@@ -26,6 +26,7 @@ export interface PopoverProps {
   title?: React.ReactNode;
   /** Screen-reader-friendly title. Must be provided if `title` prop is not set. */
   'aria-label'?: string;
+  /** @default 'right' */
   preferredPlacement?: PopoverPreferredPlacement;
   content: React.ReactNode;
   onClose?: () => void;

package/src/processIndicator/ProcessIndicator.tsx

@@ -11,7 +11,9 @@ export type ProcessIndicatorStatus =
   `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;
 
 export interface ProcessIndicatorProps {
+  /** @default 'processing' */
   status?: ProcessIndicatorStatus;
+  /** @default 'sm' */
   size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;
   className?: string;
   'data-testid'?: string;