@transferwise/components 46.149.2 → 46.151.0

package/src/checkboxOption/index.ts

@@ -1 +1,3 @@
 export { default } from './CheckboxOption';
+
+export type { CheckboxOptionProps } from './CheckboxOption';

package/src/chevron/index.ts

@@ -1 +1,3 @@
 export { default } from './Chevron';
+
+export type { ChevronProps, ExtraSmallChevronProps } from './Chevron';

package/src/chips/index.ts

@@ -1,2 +1,5 @@
 export { default } from './Chips';
 export { default as Chip } from './Chip';
+
+export type { ChipValue, Chip as ChipType, ChipsProps } from './Chips';
+export type { Props as ChipProps } from './Chip';

package/src/common/Option/index.ts

@@ -1 +1,2 @@
 export { default } from './Option';
+export type { OptionProps } from './Option';

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -7,11 +7,17 @@ import { Sentiment } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import SentimentSurface from '../sentimentSurface';
 
+/**
+ * @deprecated Use CriticalBanner and associated typings
+ */
 export type CriticalCommsBannerSentiment =
   | `${Sentiment.WARNING}`
   | `${Sentiment.NEGATIVE}`
   | `${Sentiment.NEUTRAL}`;
 
+/**
+ * @deprecated Use CriticalBanner and associated typings
+ */
 export type CriticalCommsBannerProps = {
   title: string;
   subtitle?: string;

package/src/criticalBanner/index.ts

@@ -1,2 +1,2 @@
 export { default } from './CriticalCommsBanner';
-export type { CriticalCommsBannerProps } from './CriticalCommsBanner';
+export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './CriticalCommsBanner';

package/src/decision/index.ts

@@ -1 +1,3 @@
 export { default, DecisionPresentation, DecisionType } from './Decision';
+
+export type { DecisionProps } from './Decision';

package/src/definitionList/index.ts

@@ -1,2 +1,2 @@
 export { default } from './DefinitionList';
-export type { DefinitionListProps, DefinitionListDefinition } from './DefinitionList';
+export type { DefinitionListProps, DefinitionListDefinition, DefinitionListLayout } from './DefinitionList';

package/src/expressiveMoneyInput/index.ts

@@ -1,2 +1,2 @@
-export type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
+export type { Props as ExpressiveMoneyInputProps, CurrencyType } from './ExpressiveMoneyInput';
 export { default } from './ExpressiveMoneyInput';

package/src/index.ts

@@ -4,19 +4,39 @@
  * Types
  */
 export type { ContainerProps } from './container';
-export type { LogoProps } from './logo';
+export type { LogoProps, LogoSize, LogoAssetName } from './logo';
 export type { FlowNavigationProps } from './flowNavigation';
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
-export type { AvatarProps } from './avatar';
+export type { AvatarProps, AvatarSize, AvatarTheme } from './avatar';
 export type { AvatarViewProps } from './avatarView';
 export type { AvatarLayoutProps } from './avatarLayout';
-export type { BadgeProps } from './badge';
-export type { NewButtonProps as ButtonProps } from './button';
+export type { AvatarWrapperProps } from './avatarWrapper';
+export type { BadgeProps, BadgeAssetsProps } from './badge';
+export type {
+  NewButtonProps as ButtonProps,
+  ButtonPriority,
+  ButtonSize,
+  ButtonSentiment,
+  ButtonReferenceType,
+  ButtonAddonIcon,
+  ButtonAddonAvatar,
+  ButtonProps as LegacyButtonProps,
+  AnchorElementProps,
+} from './button';
 export type { CardProps } from './card';
-export type { CarouselProps } from './carousel';
+export type {
+  CarouselProps,
+  CarouselCard,
+  CarouselDefaultCard,
+  CarouselPromoCard,
+} from './carousel';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxButtonProps } from './checkboxButton';
+export type { CheckboxOptionProps } from './checkboxOption';
+export type { ChipValue, ChipType, ChipsProps, ChipProps } from './chips';
+export type { ChevronProps, ExtraSmallChevronProps } from './chevron';
 export type { CircularButtonProps } from './circularButton';
 export type {
   BodyTypes,
@@ -30,8 +50,12 @@ export type { BottomSheetProps } from './common/bottomSheet';
 export type { DateInputProps } from './dateInput';
 export type { DateLookupProps } from './dateLookup';
 export type { CalendarProps } from './calendar';
-export type { DecisionProps } from './decision/Decision';
-export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
+export type { DecisionProps } from './decision';
+export type {
+  DefinitionListProps,
+  DefinitionListDefinition,
+  DefinitionListLayout,
+} from './definitionList';
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
 export type { DividerProps } from './divider';
@@ -41,6 +65,7 @@ export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
 export type { InlinePromptProps, ActionPromptProps, CriticalBannerProps } from './prompt';
 export type { InfoPromptProps, InfoPromptAction, InfoPromptMedia } from './prompt';
+export type { InlineAlertProps } from './inlineAlert';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
 export type { InputGroupProps } from './inputs/InputGroup';
@@ -68,21 +93,30 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
-export type { ExpressiveMoneyInputProps } from './expressiveMoneyInput';
+export type { ExpressiveMoneyInputProps, CurrencyType } from './expressiveMoneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
-export type { NavigationOptionProps } from './navigationOption/NavigationOption';
+export type { NavigationOptionProps } from './navigationOption';
+export type { NudgeProps, NudgeOptionalId, NudgeRequiredPersistProps } from './nudge';
 export type { OverlayHeaderProps } from './overlayHeader';
+export type { OptionProps } from './common/Option';
 export type { PanelProps } from './common/panel';
-export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';
-export type { PopoverProps } from './popover';
+export type { PhoneNumberInputProps } from './phoneNumberInput';
+export type { PopoverProps, PopoverPreferredPlacement } from './popover';
 export type { ProcessIndicatorProps, ProcessIndicatorStatus } from './processIndicator';
 export type { ProgressProps } from './progress';
 export type { ProgressBarProps } from './progressBar';
+export type {
+  PromoCardCommonProps,
+  PromoCardLinkProps,
+  PromoCardCheckedProps,
+  PromoCardProps,
+} from './promoCard';
+export type { PromoCardGroupProps } from './promoCard';
 export type { DirectionProviderProps, LanguageProviderProps, ProviderProps } from './provider';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
-export type { SegmentedControlProps } from './segmentedControl';
+export type { SegmentedControlProps, Segments } from './segmentedControl';
 export type {
   SelectItem,
   SelectItemWithPlaceholder,
@@ -90,32 +124,45 @@ export type {
   SelectProps,
 } from './select';
 export type { SlidingPanelProps } from './slidingPanel';
-export type { SnackbarProps } from './snackbar/Snackbar';
+export type { SnackbarProps, SnackbarProviderProps } from './snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
-export type { StatusIconProps } from './statusIcon';
+export type { StatusIconProps, StatusIconSentiment } from './statusIcon';
 export type { StickyProps } from './sticky';
 export type { SummaryProps } from './summary';
-export type { SentimentSurfaceProps } from './sentimentSurface';
+export type {
+  SentimentSurfaceProps,
+  SentimentSurfaceComponent,
+  Sentiment as SurfaceSentiment,
+} from './sentimentSurface';
 export type { SwitchProps } from './switch';
 export type { SwitchOptionProps } from './switchOption';
-export type { TabItem, TabsProps } from './tabs';
+export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './tabs';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
+export type { TileProps } from './tile';
 export type { TooltipProps } from './tooltip';
 export type { TypeaheadOption, TypeaheadProps } from './typeahead';
 export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
+export type { UploadInputProps } from './uploadInput';
 export type { WithIdProps } from './withId';
 export type { IconButtonProps } from './iconButton';
+export type { ImageProps } from './image';
+export type { ActionButtonProps } from './actionButton';
 export type {
   TableProps,
   TableRowType,
   TableRowClickableType,
+  TableRowProps,
   TableHeaderType,
+  TableHeaderProps,
   TableCellLeading,
   TableCellText,
   TableCellCurrency,
   TableCellStatus,
   TableCellType,
+  TableCellMedia,
+  TableCellProps,
+  TableStatusTextProps,
 } from './table';
 export type {
   ListItemProps,
@@ -144,7 +191,7 @@ export { default as Avatar } from './avatar';
 export { default as AvatarView } from './avatarView';
 export { default as AvatarLayout } from './avatarLayout';
 export { default as AvatarWrapper } from './avatarWrapper';
-export { default as Badge } from './badge';
+export { default as Badge, BadgeAssets } from './badge';
 export { default as Body } from './body';
 export { default as Button } from './button';
 export { default as IconButton } from './iconButton';
@@ -161,7 +208,7 @@ export { default as Option } from './common/Option';
 export { default as BottomSheet } from './common/bottomSheet';
 export { default as BaseCard } from './common/baseCard';
 export { default as CriticalCommsBanner } from './criticalBanner';
-export type { CriticalCommsBannerProps } from './criticalBanner';
+export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './criticalBanner';
 export { default as DateInput } from './dateInput';
 export { default as DateLookup } from './dateLookup';
 export { default as Calendar } from './calendar';
@@ -234,6 +281,7 @@ export { default as SwitchOption } from './switchOption';
 export { default as Tabs } from './tabs';
 export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
 export { default as Title } from './title';
+export { default as Tile } from './tile';
 export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';

package/src/inlineAlert/InlineAlert.tsx

@@ -5,6 +5,9 @@ import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';
 import Body from '../body';
 
+/**
+ * @deprecated Use InlinePrompt or Field and associated typings
+ */
 export interface InlineAlertProps {
   id?: string;
   type?: `${Sentiment}`;

package/src/inlineAlert/index.ts

@@ -1 +1,3 @@
 export { default } from './InlineAlert';
+
+export type { InlineAlertProps } from './InlineAlert';

package/src/instructionsList/index.ts

@@ -1,3 +1,3 @@
 export { default } from './InstructionsList';
 
-export * from './InstructionsList';
+export type { InstructionsListProps } from './InstructionsList';

package/src/logo/index.ts

@@ -1,2 +1,3 @@
 export { default, LogoType } from './Logo';
-export type { LogoProps } from './Logo';
+export type { LogoProps, LogoSize } from './Logo';
+export type { LogoAssetName } from './logo-assets';

package/src/main.css

@@ -1,6 +1,5 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:03 GMT
  */
 
 :root {
@@ -144,7 +143,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +326,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +509,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +692,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +875,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1058,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1241,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1425,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1609,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1793,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .np-theme-business--bright-green {
@@ -1990,7 +1979,6 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 09 Jun 2026 08:11:04 GMT
  */
 
 .wds-sentiment-negative-light-base {
@@ -2433,6 +2421,154 @@
   --color-sentiment-border-overlay: rgba(58,53,35,0.30196);
 }
 
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.wds-pocket-bright-blue {
+  --color-content-primary: #21231d;
+  --color-content-secondary: #0d0e0c;
+  --color-content-link: #21231d;
+  --color-content-link-hover: #354040;
+  --color-content-link-active: #4c5c5c;
+  --color-interactive-primary: #21231d;
+  --color-interactive-primary-hover: #354040;
+  --color-interactive-primary-active: #4c5c5c;
+  --color-interactive-accent: #21231d;
+  --color-interactive-accent-hover: #354040;
+  --color-interactive-accent-active: #4c5c5c;
+  --color-interactive-control: #a0e1e1;
+  --color-interactive-control-hover: #c5eded;
+  --color-interactive-control-active: #c5eded;
+  --color-background-screen: #a0e1e1;
+}
+
+.wds-pocket-bright-orange {
+  --color-content-primary: #260a2f;
+  --color-content-secondary: #110415;
+  --color-content-link: #260a2f;
+  --color-content-link-hover: #360e43;
+  --color-content-link-active: #471358;
+  --color-interactive-primary: #260a2f;
+  --color-interactive-primary-hover: #360e43;
+  --color-interactive-primary-active: #471358;
+  --color-interactive-accent: #260a2f;
+  --color-interactive-accent-hover: #360e43;
+  --color-interactive-accent-active: #471358;
+  --color-interactive-control: #ffc091;
+  --color-interactive-control-hover: #ffcda8;
+  --color-interactive-control-active: #ffdcc2;
+  --color-background-screen: #ffc091;
+}
+
+.wds-pocket-bright-pink {
+  --color-content-primary: #320707;
+  --color-content-secondary: #160303;
+  --color-content-link: #320707;
+  --color-content-link-hover: #1f0404;
+  --color-content-link-active: #0d0202;
+  --color-interactive-primary: #320707;
+  --color-interactive-primary-hover: #1f0404;
+  --color-interactive-primary-active: #0d0202;
+  --color-interactive-accent: #320707;
+  --color-interactive-accent-hover: #1f0404;
+  --color-interactive-accent-active: #0d0202;
+  --color-interactive-control: #ffd7ef;
+  --color-interactive-control-hover: #ffbde4;
+  --color-interactive-control-active: #ffbde4;
+  --color-background-screen: #ffd7ef;
+}
+
+.wds-pocket-bright-yellow {
+  --color-content-primary: #3a341c;
+  --color-content-secondary: #110f08;
+  --color-content-link: #3a341c;
+  --color-content-link-hover: #1b190d;
+  --color-content-link-active: #0a0a05;
+  --color-interactive-primary: #3a341c;
+  --color-interactive-primary-hover: #1b190d;
+  --color-interactive-primary-active: #0a0a05;
+  --color-interactive-accent: #3a341c;
+  --color-interactive-accent-hover: #1b190d;
+  --color-interactive-accent-active: #0a0a05;
+  --color-interactive-control: #ffeb69;
+  --color-interactive-control-hover: #ffef85;
+  --color-interactive-control-active: #fff29e;
+  --color-background-screen: #ffeb69;
+}
+
+.wds-pocket-dark-charcoal {
+  --color-content-primary: #a0e1e1;
+  --color-content-secondary: #ecf9f9;
+  --color-content-link: #a0e1e1;
+  --color-content-link-hover: #77d4d4;
+  --color-content-link-active: #51c8c8;
+  --color-interactive-primary: #a0e1e1;
+  --color-interactive-primary-hover: #77d4d4;
+  --color-interactive-primary-active: #51c8c8;
+  --color-interactive-accent: #a0e1e1;
+  --color-interactive-accent-hover: #77d4d4;
+  --color-interactive-accent-active: #51c8c8;
+  --color-interactive-control: #21231d;
+  --color-interactive-control-hover: #181915;
+  --color-interactive-control-active: #0d0e0c;
+  --color-background-screen: #21231d;
+}
+
+.wds-pocket-dark-gold {
+  --color-content-primary: #ffeb69;
+  --color-content-secondary: #fffce5;
+  --color-content-link: #ffeb69;
+  --color-content-link-hover: #ffe538;
+  --color-content-link-active: #ffde05;
+  --color-interactive-primary: #ffeb69;
+  --color-interactive-primary-hover: #ffe538;
+  --color-interactive-primary-active: #ffde05;
+  --color-interactive-accent: #ffeb69;
+  --color-interactive-accent-hover: #ffe538;
+  --color-interactive-accent-active: #ffde05;
+  --color-interactive-control: #3a341c;
+  --color-interactive-control-hover: #292514;
+  --color-interactive-control-active: #18160c;
+  --color-background-screen: #3a341c;
+}
+
+.wds-pocket-dark-maroon {
+  --color-content-primary: #ffd7ef;
+  --color-content-secondary: #ffe5f5;
+  --color-content-link: #ffd7ef;
+  --color-content-link-hover: #ffe5f5;
+  --color-content-link-active: #fff5fb;
+  --color-interactive-primary: #ffd7ef;
+  --color-interactive-primary-hover: #ffe5f5;
+  --color-interactive-primary-active: #fff5fb;
+  --color-interactive-accent: #ffd7ef;
+  --color-interactive-accent-hover: #ffe5f5;
+  --color-interactive-accent-active: #fff5fb;
+  --color-interactive-control: #320707;
+  --color-interactive-control-hover: #480a0a;
+  --color-interactive-control-active: #5e0d0d;
+  --color-background-screen: #320707;
+}
+
+.wds-pocket-dark-purple {
+  --color-content-primary: #ffc091;
+  --color-content-secondary: #fff0e5;
+  --color-content-link: #ffc091;
+  --color-content-link-hover: #ffdcc2;
+  --color-content-link-active: #fff9f5;
+  --color-interactive-primary: #ffc091;
+  --color-interactive-primary-hover: #ffdcc2;
+  --color-interactive-primary-active: #fff9f5;
+  --color-interactive-accent: #ffc091;
+  --color-interactive-accent-hover: #ffdcc2;
+  --color-interactive-accent-active: #fff9f5;
+  --color-interactive-control: #260a2f;
+  --color-interactive-control-hover: #360e43;
+  --color-interactive-control-active: #471358;
+  --color-background-screen: #260a2f;
+}
+
 @font-face {
   font-family: Inter;
   font-style: normal;
@@ -25921,6 +26057,13 @@ a[data-toggle="tooltip"] {
   color: var(--color-sentiment-content-primary);
 }
 
+.wds-pocket-surface {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+
 .wds-container {
   --wds-container-padding-inline: 16px;
   --wds-container-width-fluid: 100%;

package/src/main.less

@@ -1,6 +1,7 @@
 @import "./styles/less/neptune.bundle.less";
 
 @import "./sentimentSurface/SentimentSurface.less";
+@import "./pocketSurface/PocketSurface.less";
 
 @import "./container/Container.less";
 @import "./criticalBanner/CriticalCommsBanner.less";

package/src/navigationOption/NavigationOption.tsx

@@ -6,6 +6,9 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
+/**
+ * @deprecated Use ListItem and associated typings
+ */
 export type NavigationOptionProps = OptionProps;
 
 /**

package/src/navigationOption/index.ts

@@ -1 +1,3 @@
 export { default } from './NavigationOption';
+
+export type { NavigationOptionProps } from './NavigationOption';

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { Children } from 'react';
 
+/**
+ * @deprecated Use List and ListItem and associated typings
+ */
 export interface NavigationOptionListProps {
   children: React.ReactNode;
 }

package/src/nudge/index.ts

@@ -1 +1,3 @@
 export { default } from './Nudge';
+
+export type { Props as NudgeProps, OptionalId as NudgeOptionalId, RequiredPersistProps as NudgeRequiredPersistProps } from './Nudge';

package/src/phoneNumberInput/index.ts

@@ -1 +1,3 @@
 export { default } from './PhoneNumberInput';
+
+export type { PhoneNumberInputProps } from './PhoneNumberInput';