@transferwise/components 46.88.2 → 46.89.0

package/build/types/button/LegacyButton.d.ts

@@ -4,6 +4,15 @@ import { ButtonReferenceType } from './Button.types';
 type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 /** @deprecated */
 type DeprecatedSizes = SizeExtraSmall;
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
 export type CommonProps = {
     v2?: false;
     as?: 'a' | 'button';
@@ -29,8 +38,26 @@ export type CommonProps = {
     size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
     htmlType?: 'submit' | 'reset' | 'button';
 };
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
 export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'>;
 type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'>;
+/**
+ * @deprecated use new button instead APIs
+ * @example
+ * ```
+ * import { Button, ButtonProps } from '@transferwise/components';
+ *
+ * <Button v2>...</Button>
+ * ```
+ */
 export type LegacyButtonProps = ButtonProps | AnchorProps;
 /**
  * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props

package/build/types/button/LegacyButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IAEpB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5F,KAAK,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,EAAE,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IAEpB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5F,KAAK,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;AAEhF;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/types/carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AACnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAUD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoSrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}

package/build/types/common/action/Action.d.ts

@@ -1,3 +1,4 @@
+import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
 export type ActionOptions = {
     'aria-label'?: string;
     href?: string;
@@ -6,10 +7,12 @@ export type ActionOptions = {
     onClick?: () => void;
 };
 type Props = {
-    variant?: 'button' | 'action-button';
     action: ActionOptions;
     className?: string;
+    variant?: 'button' | 'action-button';
+    sentiment?: ButtonSentiment;
+    priority?: ButtonPriority;
 };
-export declare function Action({ action, className, variant }: Props): import("react").JSX.Element;
+export declare function Action({ action, className, variant, sentiment, priority, }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Action.d.ts.map

package/build/types/common/action/Action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,OAAkB,EAAE,EAAE,KAAK,+BAmCtE"}
+{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,OAAkB,EAClB,SAAqB,EACrB,QAA6B,GAC9B,EAAE,KAAK,+BA4CP"}

package/build/types/common/closeButton/CloseButton.d.ts

@@ -1,6 +1,6 @@
-import { SizeLarge, SizeMedium, SizeSmall } from '../propsValues/size';
+import { SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';
 export type CloseButtonProps = Pick<React.ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className' | 'onClick'> & {
-    size?: SizeSmall | SizeMedium | SizeLarge;
+    size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;
     filled?: boolean;
     isDisabled?: boolean;
     testId?: string;
@@ -9,7 +9,7 @@ export type CloseButtonProps = Pick<React.ComponentPropsWithoutRef<'button'>, 'a
  * @deprecated Use `<IconButton />` component instead
  */
 export declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "className" | "aria-label" | "onClick"> & {
-    size?: SizeSmall | SizeMedium | SizeLarge;
+    size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;
     filled?: boolean;
     isDisabled?: boolean;
     testId?: string;

package/build/types/common/closeButton/CloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../../../src/common/closeButton/CloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI7E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,GAAG,WAAW,GAAG,SAAS,CACvC,GAAG;IACF,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW;WATf,SAAS,GAAG,UAAU,GAAG,SAAS;aAChC,OAAO;iBACH,OAAO;aACX,MAAM;4DA6Cf,CAAC"}
+{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../../../src/common/closeButton/CloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAI7F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,GAAG,WAAW,GAAG,SAAS,CACvC,GAAG;IACF,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW;WATf,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS;aACjD,OAAO;iBACH,OAAO;aACX,MAAM;4DA8Cf,CAAC"}

package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BA+C5F;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}

package/build/types/iconButton/IconButton.d.ts

@@ -4,12 +4,12 @@ export type Props = {
     priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
     type?: 'default' | 'negative';
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'>;
 declare const IconButton: import("react").ForwardRefExoticComponent<{
     size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
     priority?: "primary" | "secondary" | "tertiary" | "minimal";
     type?: "default" | "negative";
     'data-testid'?: string;
-} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "disabled"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
+} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "disabled"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
 export default IconButton;
 //# sourceMappingURL=IconButton.d.ts.map

package/build/types/iconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/iconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAK/F,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAC9E,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GACrE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAEzF,QAAA,MAAM,UAAU;WARP,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;eAC5B,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS;WACpD,SAAS,GAAG,UAAU;oBACb,MAAM;2RAuCtB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/iconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAK/F,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAC9E,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GACrE,IAAI,CACF,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAC9D,CAAC;AAEJ,QAAA,MAAM,UAAU;WAXP,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;eAC5B,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS;WACpD,SAAS,GAAG,UAAU;oBACb,MAAM;wSA0CtB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.d.ts → PrimitiveAnchor.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PrimitiveAnchorProps } from '..';
+import type { PrimitiveAnchorProps } from '.';
 /**
  * The Primitive `PrimitiveAnchor` component is customisable link element that can be
  * used in various parts of the Wise Design System internally. It supports

package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveAnchor.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/PrimitiveAnchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AAE9C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAkGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build/types/primitives/PrimitiveAnchor/{src/PrimitiveAnchor.types.d.ts → PrimitiveAnchor.types.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { BasePrimitiveProps, StyleProp } from '../..';
+import { BasePrimitiveProps, StyleProp } from '..';
 /**
  * Type aliases for an anchor component.
  */

package/build/types/primitives/PrimitiveAnchor/PrimitiveAnchor.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveAnchor.types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/PrimitiveAnchor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AACtF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,IAAI,CAAC,yBAAyB,EAAE,MAAM,GAAG,MAAM,CAAC;IAClD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACtC"}

package/build/types/primitives/PrimitiveAnchor/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './src';
-export * from './src';
+export { default } from './PrimitiveAnchor';
+export type { PrimitiveAnchorProps, PrimitiveAnchorAttributes, PrimitiveAnchorElementRef, } from './PrimitiveAnchor.types';
 //# sourceMappingURL=index.d.ts.map

package/build/types/primitives/PrimitiveAnchor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveAnchor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}

package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.d.ts → PrimitiveButton.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PrimitiveButtonProps } from '..';
+import type { PrimitiveButtonProps } from '.';
 /**
  * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design
  * System internally. It supports different states such as disabled and loading,

package/build/types/primitives/PrimitiveButton/PrimitiveButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveButton.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/PrimitiveButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAIvD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,GAAG,CAAC;AAE9C;;;;;;;;GAQG;AACH,QAAA,MAAM,eAAe,6GAsGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/build/types/primitives/PrimitiveButton/{src/PrimitiveButton.types.d.ts → PrimitiveButton.types.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { BasePrimitiveProps, StyleProp } from '../..';
+import { BasePrimitiveProps, StyleProp } from '..';
 /**
  * Type aliases for a button component.
  */

package/build/types/primitives/PrimitiveButton/PrimitiveButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveButton.types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/PrimitiveButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AACpG,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,yBAAyB;IAC3B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;CACjC"}

package/build/types/primitives/PrimitiveButton/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './src';
-export * from './src';
+export { default } from './PrimitiveButton';
+export type { PrimitiveButtonProps, PrimitiveButtonAttributes, PrimitiveButtonElementRef, } from './PrimitiveButton.types';
 //# sourceMappingURL=index.d.ts.map

package/build/types/primitives/PrimitiveButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/PrimitiveButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC"}

package/build/types/table/TableCell.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ImgHTMLAttributes } from 'react';
 import { MoneyProps } from '../money';
 interface TableCellTypeProp {
-    type: 'leading' | 'text' | 'currency' | 'status';
+    type: 'leading' | 'text' | 'currency' | 'status' | 'media';
 }
 interface TableCellTextProps {
     primaryText?: string;
@@ -10,6 +10,9 @@ interface TableCellTextProps {
 interface TableCellStatusProp {
     status?: 'error' | 'success';
 }
+export interface TableCellMedia extends TableCellTypeProp, TableCellTextProps {
+    media?: ImgHTMLAttributes<HTMLImageElement>;
+}
 export interface TableCellLeading extends TableCellTypeProp, TableCellTextProps, TableCellStatusProp {
     avatar?: {
         src?: string;
@@ -27,7 +30,7 @@ export interface TableCellStatus extends TableCellTypeProp, TableCellTextProps {
     sentiment?: 'negative' | 'neutral' | 'positive' | 'warning' | 'pending';
 }
 export interface TableCellType {
-    cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus;
+    cell?: TableCellLeading & TableCellText & TableCellCurrency & TableCellStatus & TableCellMedia;
     alignment?: 'left' | 'right';
 }
 export interface TableCellProps extends TableCellType {

package/build/types/table/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;CAClD;AAGD,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,kBAAkB;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,GAAG,eAAe,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAGD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,sDAAgE,cAAc,sBAuF5F,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/table/TableCell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG7C,UAAU,iBAAiB;IACzB,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5D;AAGD,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,iBAAiB,EAAE,kBAAkB;IAC3E,KAAK,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EACvB,kBAAkB,EAClB,mBAAmB;IACrB,MAAM,CAAC,EAAE;QACP,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,mBAAmB;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB,EAAE,mBAAmB;IAC/E,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC;AAED,MAAM,WAAW,eAAgB,SAAQ,iBAAiB,EAAE,kBAAkB;IAC5E,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;CACzE;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,GAAG,aAAa,GAAG,iBAAiB,GAAG,eAAe,GAAG,cAAc,CAAC;IAC/F,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAGD,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,SAAS,sDAAgE,cAAc,sBA4F5F,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.88.2",
+  "version": "46.89.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,7 +92,7 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.21.0",
+    "@transferwise/neptune-css": "14.21.1",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {

package/src/actionButton/ActionButton.story.tsx

@@ -5,9 +5,14 @@ import { storyConfig } from '../test-utils/story-config';
 
 import ActionButton from './ActionButton';
 
+/**
+ * This component is deprecated please use new [Button](?path=/docs/actions-button--docs).
+ *
+ * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button).
+ */
 export default {
   component: ActionButton,
-  title: 'Actions/ActionButton',
+  title: 'Actions/ActionButton (Deprecated)',
   tags: ['autodocs'],
 } satisfies Meta<typeof ActionButton>;
 

package/src/actionButton/ActionButton.tsx

@@ -3,6 +3,9 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 
+/**
+ * @deprecated use `<Button />` component instead with `ButtonProps`
+ */
 export type ActionButtonProps = {
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   /**
@@ -11,6 +14,9 @@ export type ActionButtonProps = {
   text?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
+/**
+ * @deprecated use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead
+ */
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
   (
     {

package/src/actionOption/ActionOption.story.tsx

@@ -25,12 +25,15 @@ export const Basic: Story = {
   render: (args) => <ActionOption {...args} />,
 };
 
-export const WithSecondaryPriority: Story = {
-  render: (args) => <ActionOption priority="secondary" {...args} />,
-};
-
-export const WithTertiaryPriority: Story = {
-  render: (args) => <ActionOption priority="tertiary" {...args} />,
+export const Variants: Story = {
+  render: (args) => (
+    <>
+      <ActionOption priority="primary" {...args} title="priority = primary" />
+      <ActionOption priority="secondary" {...args} title="priority = secondary" />
+      <ActionOption priority="secondary-send" {...args} title="priority = secondary-send" />
+      <ActionOption priority="tertiary" {...args} title="priority = tertiary" />
+    </>
+  ),
 };
 
 export const WithContainerContent: Story = {

package/src/actionOption/ActionOption.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 
-import ActionButton from '../actionButton';
+import Button from '../button';
 import {
   CommonProps,
   Priority,
@@ -9,6 +9,13 @@ import {
   PriorityTertiary,
 } from '../common';
 import Option from '../common/Option';
+import { ButtonPriority } from '../button/Button.types';
+
+type ActionOptionPriority =
+  | PriorityPrimary
+  | PrioritySecondary
+  | PriorityTertiary
+  | 'secondary-send';
 
 export type ActionOptionProps = {
   complex?: boolean;
@@ -19,7 +26,7 @@ export type ActionOptionProps = {
   onClick: () => void;
   title: React.ReactNode;
   action: React.ReactNode;
-  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
+  priority?: ActionOptionPriority;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;
   as?: React.ElementType;
@@ -67,18 +74,35 @@ const ActionOption = ({
     return labels.join(', ') || undefined;
   };
 
+  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {
+    switch (priority) {
+      case 'primary':
+        return 'primary';
+      case 'secondary':
+        return 'secondary-neutral';
+      case 'tertiary':
+        return 'tertiary';
+      case 'secondary-send':
+        return 'secondary';
+      default:
+        return 'primary';
+    }
+  };
+
   return (
     <Option
       {...sharedProps}
       button={
-        <ActionButton
-          priority={priority}
+        <Button
+          v2
+          size="sm"
+          priority={mapPriority(priority)}
           disabled={disabled}
           aria-label={getAriaLabel()}
           onClick={onClick}
         >
           {action}
-        </ActionButton>
+        </Button>
       }
     />
   );

package/src/alert/Alert.css

@@ -1,3 +1,7 @@
 .wds-alert__liveRegion {
   display: contents;
 }
+.alert__close {
+  min-width: 48px;
+  min-width: var(--size-48);
+}

package/src/alert/Alert.less

@@ -1,3 +1,7 @@
 .wds-alert__liveRegion {
   display: contents;
 }
+
+.alert__close {
+  min-width: var(--size-48);
+}

package/src/alert/Alert.spec.tsx

@@ -445,36 +445,6 @@ describe('Alert', () => {
   });
 
   describe('with personal theme', () => {
-    it('renders mobile variant if passed in', () => {
-      render(
-        <ThemeProvider theme={Theme.PERSONAL}>
-          <Alert message={message} variant={Variant.MOBILE} />
-        </ThemeProvider>,
-      );
-
-      expect(screen.getByTestId('mobile')).toBeInTheDocument();
-    });
-
-    it('renders desktop variant if passed in', () => {
-      render(
-        <ThemeProvider theme={Theme.PERSONAL}>
-          <Alert message={message} variant={Variant.DESKTOP} />
-        </ThemeProvider>,
-      );
-
-      expect(screen.getByTestId('desktop')).toBeInTheDocument();
-    });
-
-    it('renders desktop variant by default', () => {
-      render(
-        <ThemeProvider theme={Theme.PERSONAL}>
-          <Alert message={message} />
-        </ThemeProvider>,
-      );
-
-      expect(screen.getByTestId('desktop')).toBeInTheDocument();
-    });
-
     it('renders StatusIcon for Personal theme', () => {
       render(
         <ThemeProvider theme={Theme.PERSONAL}>

package/src/alert/Alert.story.tsx

@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
+import { lorem40 } from '../test-utils';
 import { Sentiment } from '../common';
 import { Button, Field, SelectInput } from '..';
 import Alert, { AlertArrowPosition, type AlertProps as FullAlertProps } from './Alert';
@@ -43,6 +44,46 @@ type Story = StoryObj<typeof Alert>;
 
 export const Basic: Story = {};
 
+export const Variants: Story = {
+  render: ({ message }) => {
+    const variants = [
+      { type: Sentiment.POSITIVE, title: 'Positive Title' },
+      { type: Sentiment.NEGATIVE, title: 'Negative Title' },
+      { type: Sentiment.NEUTRAL, title: 'Neutral Title' },
+      { type: Sentiment.WARNING, title: 'Warning Title' },
+      { type: Sentiment.PENDING, title: 'Pending Title' },
+    ];
+
+    return (
+      <>
+        {variants.map((variant) => (
+          <Alert
+            key={variant.type}
+            type={variant.type}
+            title={variant.title}
+            message={message}
+            action={
+              variant.type === Sentiment.NEUTRAL
+                ? { href: '#', text: 'Read more' }
+                : { onClick: action('alert action clicked'), text: 'Open' }
+            }
+            onDismiss={variant.type === Sentiment.NEUTRAL ? action('alert dismissed') : undefined}
+          />
+        ))}
+      </>
+    );
+  },
+  args: {
+    message: 'This message can be changed using controls',
+  },
+  parameters: {
+    controls: { exclude: /^(?!message$).*/ },
+  },
+  argTypes: {
+    message: { control: 'text' },
+  },
+};
+
 export const WithLinkAction: Story = {
   args: {
     action: {
@@ -84,7 +125,7 @@ const CustomIcon = () => {
         justifyContent: 'center',
       }}
     >
-      <ClockBorderless size="32" />
+      <ClockBorderless size="24" />
     </div>
   );
 };
@@ -96,11 +137,42 @@ export const WithCustomIcon: Story = {
   },
 };
 
-export const WithTitle: Story = {
+export const WithTitleAndButtonAction: Story = {
   args: {
     type: Sentiment.NEUTRAL,
     title: 'We’re reviewing your information.',
+    message:
+      'Payments sent to your bank details **today** might not arrive in time for the holidays.',
     onDismiss: () => {},
+    action: {
+      onClick: action('alert action clicked'),
+      text: 'Open',
+    },
+  },
+};
+export const WithTitleAndButtonActionAndLongBody: Story = {
+  args: {
+    type: Sentiment.NEUTRAL,
+    title: 'We’re reviewing your information.',
+    message: lorem40,
+    onDismiss: () => {},
+    action: {
+      onClick: action('alert action clicked'),
+      text: 'Open',
+    },
+  },
+};
+
+export const WithTitleAndLinkActionAndLongBody: Story = {
+  args: {
+    type: Sentiment.NEUTRAL,
+    title: 'We’re reviewing your information.',
+    message: lorem40,
+    onDismiss: () => {},
+    action: {
+      href: '/',
+      text: 'Open',
+    },
   },
 };