@transferwise/components 0.0.0-experimental-8ef2fe2 → 0.0.0-experimental-1ffdc56

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -1,76 +1,11 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-  background-color: rgba(255,135,135,0.10196);
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.np-theme-personal div.critical-comms,
-.np-theme-personal--dark div.critical-comms {
-  --critical-comms-background-color: var(--color-sentiment-negative);
-  --critical-comms-title-color: var(--color-contrast);
-  --critical-comms-subtitle-color: var(--color-contrast);
-  --critical-comms-subtitle-color-padding-left: 0;
-  --critical-comms-vertical-spacing: var(--size-16);
-  padding: 24px;
-  padding: var(--padding-medium);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
-  color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
-  width: 48px;
-  height: 48px;
-}
-.np-theme-personal div.critical-comms .cta-btn,
-.np-theme-personal--dark div.critical-comms .cta-btn {
-  background-color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
-.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
-  outline-color: var(--color-contrast);
+.np-theme-personal .critical-comms .alert-critical {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative) !important;
 }
-@media (max-width: 767px) {
-  div.critical-comms {
-    display: inline;
-    display: initial;
-  }
+.np-theme-personal .critical-comms .alert-critical .np-text-title-body {
+  color: var(--color-contrast-overlay);
 }
-div.critical-comms .critical-comms--title {
-  color: var(--critical-comms-title-color);
-}
-div.critical-comms .critical-comms--subtitle {
-  color: var(--critical-comms-subtitle-color);
-}
-div.critical-comms .critical-comms--cta {
-  padding-left: 0;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms--cta {
-    padding-left: var(--critical-comms-subtitle-color-padding-left);
-    padding-top: var(--critical-comms-vertical-spacing);
-    min-width: 100%;
-  }
-}
-div.critical-comms .critical-comms-body {
+.np-theme-personal .critical-comms .action__desktop {
   display: flex;
-  width: 100%;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-body {
-    flex-direction: column;
-  }
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-content {
-    padding-top: var(--critical-comms-vertical-spacing);
-    flex-wrap: wrap;
-  }
+  align-items: center;
 }

package/build/styles/main.css

@@ -1,78 +1,13 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-  background-color: rgba(255,135,135,0.10196);
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.np-theme-personal div.critical-comms,
-.np-theme-personal--dark div.critical-comms {
-  --critical-comms-background-color: var(--color-sentiment-negative);
-  --critical-comms-title-color: var(--color-contrast);
-  --critical-comms-subtitle-color: var(--color-contrast);
-  --critical-comms-subtitle-color-padding-left: 0;
-  --critical-comms-vertical-spacing: var(--size-16);
-  padding: 24px;
-  padding: var(--padding-medium);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
-  color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
-.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
-  width: 48px;
-  height: 48px;
-}
-.np-theme-personal div.critical-comms .cta-btn,
-.np-theme-personal--dark div.critical-comms .cta-btn {
-  background-color: var(--color-contrast);
-}
-.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
-.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
-  outline-color: var(--color-contrast);
-}
-@media (max-width: 767px) {
-  div.critical-comms {
-    display: inline;
-    display: initial;
-  }
-}
-div.critical-comms .critical-comms--title {
-  color: var(--critical-comms-title-color);
-}
-div.critical-comms .critical-comms--subtitle {
-  color: var(--critical-comms-subtitle-color);
-}
-div.critical-comms .critical-comms--cta {
-  padding-left: 0;
+.np-theme-personal .critical-comms .alert-critical {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative) !important;
 }
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms--cta {
-    padding-left: var(--critical-comms-subtitle-color-padding-left);
-    padding-top: var(--critical-comms-vertical-spacing);
-    min-width: 100%;
-  }
+.np-theme-personal .critical-comms .alert-critical .np-text-title-body {
+  color: var(--color-contrast-overlay);
 }
-div.critical-comms .critical-comms-body {
+.np-theme-personal .critical-comms .action__desktop {
   display: flex;
-  width: 100%;
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-body {
-    flex-direction: column;
-  }
-}
-@media (max-width: 767px) {
-  div.critical-comms .critical-comms-content {
-    padding-top: var(--critical-comms-vertical-spacing);
-    flex-wrap: wrap;
-  }
+  align-items: center;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
   font-size: 0.875rem;
@@ -939,6 +874,9 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
+.critical-comms .wds-Button {
+  --Button-background: var(--color-contrast-overlay);
+}
 [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
   scale: -1 1;
 }
@@ -4477,6 +4415,10 @@ html:not([dir="rtl"]) .np-navigation-option {
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.critical {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);

package/build/styles/statusIcon/StatusIcon.css

@@ -17,6 +17,10 @@
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
+.status-circle.critical {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);

package/build/types/alert/Alert.d.ts

@@ -8,7 +8,7 @@ export type AlertAction = {
 };
 /** @deprecated Use `"top" | "bottom"` instead. */
 type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
-type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE}`;
+type AlertTypeResolved = `${Sentiment.POSITIVE | Sentiment.NEUTRAL | Sentiment.WARNING | Sentiment.NEGATIVE | Sentiment.CRITICAL}`;
 export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
 export declare enum AlertArrowPosition {
     TOP_LEFT = "up-left",
@@ -37,6 +37,7 @@ export interface AlertProps {
     onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
     /** The type dictates which icon and colour will be used */
     type?: AlertType;
+    /** @deprecated They both look and behave the same. */
     variant?: `${Variant}`;
     /** @deprecated Use `InlineAlert` instead. */
     arrow?: `${AlertArrowPosition}`;

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,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,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAkHZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,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,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BA6IZ"}

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;
@@ -7,9 +8,11 @@ export type ActionOptions = {
 };
 type Props = {
     variant?: 'button' | 'action-button';
+    sentiment?: ButtonSentiment;
     action: ActionOptions;
     className?: string;
+    priority?: ButtonPriority;
 };
-export declare function Action({ action, className, variant }: Props): import("react").JSX.Element;
+export declare function Action({ action, className, variant, priority, sentiment, }: 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,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,OAAkB,EAClB,QAA6B,EAC7B,SAAqB,GACtB,EAAE,KAAK,+BA4CP"}

package/build/types/common/propsValues/sentiment.d.ts

@@ -4,6 +4,7 @@ export declare enum Sentiment {
     POSITIVE = "positive",
     WARNING = "warning",
     PENDING = "pending",
+    CRITICAL = "critical",
     /**
      * @deprecated
      */

package/build/types/common/propsValues/sentiment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sentiment.d.ts","sourceRoot":"","sources":["../../../../src/common/propsValues/sentiment.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IAEnB;;OAEG;IACH,IAAI,SAAS;IACb;;OAEG;IACH,KAAK,UAAU;IACf;;OAEG;IACH,OAAO,YAAY;CACpB"}
+{"version":3,"file":"sentiment.d.ts","sourceRoot":"","sources":["../../../../src/common/propsValues/sentiment.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IAErB;;OAEG;IACH,IAAI,SAAS;IACb;;OAEG;IACH,KAAK,UAAU;IACf;;OAEG;IACH,OAAO,YAAY;CACpB"}

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/statusIcon/StatusIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAM1F;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,6CAA+D,eAAe,gCA8D7F,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAM1F;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,6CAA+D,eAAe,gCAqE7F,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/build/types/statusIcon/StatusIcon.messages.d.ts

@@ -14,6 +14,11 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    criticalLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     pendingLabel: {
         id: string;
         defaultMessage: string;

package/build/types/statusIcon/StatusIcon.messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.messages.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBA+BG"}
+{"version":3,"file":"StatusIcon.messages.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAqCG"}

package/build/types/test-utils/index.d.ts

@@ -37,6 +37,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.SelectInput.noResultsFound": string;
         "neptune.SelectOption.action.label": string;
         "neptune.SelectOption.selected.action.label": string;
+        "neptune.StatusIcon.iconLabel.critical": string;
         "neptune.StatusIcon.iconLabel.error": string;
         "neptune.StatusIcon.iconLabel.information": string;
         "neptune.StatusIcon.iconLabel.pending": string;
@@ -117,6 +118,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.SelectInput.noResultsFound": string;
         "neptune.SelectOption.action.label": string;
         "neptune.SelectOption.selected.action.label": string;
+        "neptune.StatusIcon.iconLabel.critical": string;
         "neptune.StatusIcon.iconLabel.error": string;
         "neptune.StatusIcon.iconLabel.information": string;
         "neptune.StatusIcon.iconLabel.pending": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8ef2fe2",
+  "version": "0.0.0-experimental-1ffdc56",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-8ef2fe2",
+    "@transferwise/neptune-css": "0.0.0-experimental-1ffdc56",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-8ef2fe2",
+    "@transferwise/neptune-css": "0.0.0-experimental-1ffdc56",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/alert/Alert.story.tsx

@@ -96,11 +96,47 @@ export const WithCustomIcon: Story = {
   },
 };
 
+export const WithShortTitle: 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'),
+      // href: '/',
+      text: 'Open',
+    },
+  },
+};
 export const WithTitle: 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. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays.',
     onDismiss: () => {},
+    action: {
+      onClick: action('alert action clicked'),
+      // href: '/',
+      text: 'Open',
+    },
+  },
+};
+
+export const WithTitleLink: 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. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays. Payments sent to your bank details **today** might not arrive in time for the holidays.',
+    onDismiss: () => {},
+    action: {
+      // onClick: action('alert action clicked'),
+      href: '/',
+      text: 'Open',
+    },
   },
 };
 

package/src/alert/Alert.tsx

@@ -32,7 +32,8 @@ type AlertTypeResolved = `${
   | Sentiment.POSITIVE
   | Sentiment.NEUTRAL
   | Sentiment.WARNING
-  | Sentiment.NEGATIVE}`;
+  | Sentiment.NEGATIVE
+  | Sentiment.CRITICAL}`;
 export type AlertType = AlertTypeResolved | AlertTypeDeprecated;
 
 export enum AlertArrowPosition {
@@ -63,6 +64,7 @@ export interface AlertProps {
   onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
   /** The type dictates which icon and colour will be used */
   type?: AlertType;
+  /** @deprecated They both look and behave the same. */
   variant?: `${Variant}`;
   /** @deprecated Use `InlineAlert` instead. */
   arrow?: `${AlertArrowPosition}`;
@@ -152,9 +154,20 @@ export default function Alert({
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
+  const showButtonBelow = () => {
+    if (variant === 'desktop' && resolvedType === 'critical') {
+      return false;
+    }
+    return true;
+  };
+
   return (
     <div
-      role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}
+      role={
+        resolvedType === Sentiment.NEGATIVE || resolvedType === Sentiment.CRITICAL
+          ? 'alert'
+          : 'status'
+      }
       className="wds-alert__liveRegion"
     >
       <div
@@ -186,15 +199,13 @@ export default function Alert({
         }}
         onTouchMove={() => setShouldFire(false)}
       >
+        <div className="alert__icon">
+          {icon || <StatusIcon size={48} sentiment={resolvedType} iconLabel={statusIconLabel} />}
+        </div>
         <div
           className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}
           data-testid={variant}
         >
-          {icon ? (
-            <div className="alert__icon">{icon}</div>
-          ) : (
-            <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />
-          )}
           <div className="alert__message">
             <div>
               {title && (
@@ -206,9 +217,27 @@ export default function Alert({
                 {children || <InlineMarkdown>{message}</InlineMarkdown>}
               </Body>
             </div>
-            {action && <Action action={action} variant="action-button" className="m-t-1" />}
+            {action && showButtonBelow() && (
+              <Action
+                action={action}
+                variant="action-button"
+                className="m-t-2"
+                sentiment={type === 'critical' ? 'negative' : 'default'}
+                priority={type === 'critical' ? 'secondary' : 'tertiary'}
+              />
+            )}
           </div>
         </div>
+        {action && !showButtonBelow() && (
+          <div className="action__desktop">
+            <Action
+              action={action}
+              variant="action-button"
+              sentiment={type === 'critical' ? 'negative' : 'default'}
+              priority={type === 'critical' ? 'secondary' : 'tertiary'}
+            />
+          </div>
+        )}
         {onDismiss && (
           <CloseButton ref={closeButtonReference} className="m-l-2" onClick={onDismiss} />
         )}

package/src/button/Button.css

@@ -220,6 +220,9 @@
 .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
+.critical-comms .wds-Button {
+  --Button-background: var(--color-contrast-overlay);
+}
 [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
   scale: -1 1;
 }

package/src/button/Button.less

@@ -137,8 +137,6 @@
     }
   }
 
-
-
   // Width modifiers
   &--block {
     width: 100%;
@@ -219,6 +217,12 @@
   }
 }
 
+.critical-comms {
+  .wds-Button {
+    --Button-background: var(--color-contrast-overlay);
+  }
+}
+
 :dir(rtl) {
   .wds-Button {
     .tw-icon-chevron-right,

package/src/button/Button.vars.less

@@ -39,14 +39,12 @@
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
 
-
   .np-theme-personal--bright-green & {
     --Button-primary-negative-color: var(--color-white);
     --Button-secondary-color: var(--color-interactive-control);
     --Button-secondary-negative-color: var(--color-white);
   }
 
-
   .np-theme-personal--forest-green & {
     --Button-secondary-background: var(--color-interactive-neutral);
     --Button-secondary-negative-background: var(--color-sentiment-negative-primary);

package/src/common/action/Action.tsx

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import Link from '../../link';
 import { Typography } from '../propsValues/typography';
-import ActionButton from '../../actionButton';
 import { Priority } from '../propsValues/control';
+import Button from '../../button';
+import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
 
 export type ActionOptions = {
   'aria-label'?: string;
@@ -14,11 +15,19 @@ export type ActionOptions = {
 
 type Props = {
   variant?: 'button' | 'action-button';
+  sentiment?: ButtonSentiment;
   action: ActionOptions;
   className?: string;
+  priority?: ButtonPriority;
 };
 
-export function Action({ action, className, variant = 'button' }: Props) {
+export function Action({
+  action,
+  className,
+  variant = 'button',
+  priority = Priority.SECONDARY,
+  sentiment = 'default',
+}: Props) {
   if ('href' in action) {
     return (
       <Link
@@ -34,23 +43,32 @@ export function Action({ action, className, variant = 'button' }: Props) {
     );
   }
 
-  return variant === 'button' ? (
-    <button
-      type="button"
-      aria-label={action['aria-label']}
-      className={clsx('btn-unstyled np-text-link-large', className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </button>
-  ) : (
-    <ActionButton
-      aria-label={action['aria-label']}
-      priority={Priority.SECONDARY}
-      className={clsx(className)}
-      onClick={action.onClick}
-    >
-      {action.text}
-    </ActionButton>
-  );
+  switch (variant) {
+    case 'action-button':
+      return (
+        <Button
+          v2
+          size="sm"
+          sentiment={sentiment}
+          aria-label={action['aria-label']}
+          priority={priority}
+          className={clsx(className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </Button>
+      );
+    case 'button':
+    default:
+      return (
+        <button
+          type="button"
+          aria-label={action['aria-label']}
+          className={clsx('btn-unstyled np-text-link-large', className)}
+          onClick={action.onClick}
+        >
+          {action.text}
+        </button>
+      );
+  }
 }

package/src/common/propsValues/sentiment.ts

@@ -4,6 +4,7 @@ export enum Sentiment {
   POSITIVE = 'positive',
   WARNING = 'warning',
   PENDING = 'pending',
+  CRITICAL = 'critical',
 
   /**
    * @deprecated