@transferwise/components 0.0.0-experimental-6528439 → 0.0.0-experimental-1ffdc56

package/src/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;
@@ -518,10 +453,18 @@ div.critical-comms .critical-comms-body {
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
+[dir="rtl"] .np-avatar-layout-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
+[dir="rtl"] .np-avatar-layout-diagonal-child {
+  margin-left: 0;
+  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+}
 .np-avatar-layout-horizontal {
   width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
   width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
@@ -536,6 +479,9 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-right: calc(var(--np-avatar-offset) * -1);
+}
 .np-icon-button {
   border: none;
 }
@@ -706,6 +652,234 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: var(--size-5) var(--size-12);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-tertiary-background: var(--color-background-neutral);
+  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
+  --Button-tertiary-background-active: var(--color-background-neutral-active);
+  --Button-tertiary-color: var(--color-content-primary);
+  --Button-minimal-background: transparent;
+  --Button-minimal-background-hover: var(--color-background-screen-hover);
+  --Button-minimal-background-active: var(--color-background-screen-active);
+  --Button-minimal-color: var(--color-interactive-primary);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --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 .wds-Button {
+  --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 .wds-Button {
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-secondary-negative-color: var(--color-contrast-overlay);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+}
+.wds-Button,
+.wds-Button:hover,
+.wds-Button:active,
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:hover {
+  background-color: var(--Button-background-hover);
+}
+.wds-Button:active {
+  background-color: var(--Button-background-active);
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled,
+.wds-Button.wds-Button--disabled:hover,
+.wds-Button:disabled:hover,
+.wds-Button.wds-Button--disabled:active,
+.wds-Button:disabled:active {
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-background-hover);
+  --Button-background-active: var(--Button-secondary-background-active);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-background-hover);
+  --Button-background-active: var(--Button-tertiary-background-active);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--end {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-background-hover);
+  --Button-background-active: var(--Button-minimal-background-active);
+  --Button-color: var(--Button-minimal-color);
+}
+.wds-Button--minimal,
+.wds-Button--minimal:hover,
+.wds-Button--minimal:active,
+.wds-Button--minimal:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-background-hover);
+  --Button-background-active: var(--Button-primary-negative-background-active);
+  --Button-color: var(--Button-primary-negative-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-background-hover);
+  --Button-background-active: var(--Button-secondary-negative-background-active);
+  --Button-color: var(--Button-secondary-negative-color);
+}
+.wds-Button--large {
+  padding: var(--Button-large-padding);
+}
+.wds-Button--medium {
+  padding: var(--Button-medium-padding);
+}
+.wds-Button--medium:has(.wds-Button-avatars) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--medium:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--medium .wds-Button-icon--start {
+  margin-inline-end: var(--Button-label-gap);
+}
+.wds-Button--small {
+  padding: var(--Button-small-padding);
+}
+.wds-Button--small:has(.wds-Button-icon--start) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--small:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-content {
+  position: relative;
+}
+.wds-Button-content--loading .wds-Button-label,
+.wds-Button-content--loading .wds-Button-media,
+.wds-Button-content--loading .wds-Button-icon {
+  visibility: hidden;
+  opacity: 0;
+}
+.wds-Button-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Button-label-gap);
+  position: relative;
+}
+.wds-Button-loader {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.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);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.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;
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -4241,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/src/main.less

@@ -7,6 +7,7 @@
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
+@import "./button/LegacyButton.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.less";

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx

@@ -30,13 +30,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
     },
     ref,
   ) => {
-    const anchorClasses = clsx(
-      'wds-Anchor',
-      {
-        'wds-Anchor--disabled': disabled,
-      },
-      className,
-    );
+    const anchorClasses = clsx(className);
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLAnchorElement>) => {
@@ -96,7 +90,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
      * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
      */
     const anchorProps = {
-      'aria-disabled': disabled,
+      'aria-disabled': disabled || undefined,
       className: anchorClasses,
       'data-testid': testId,
       href: disabled ? undefined : href,

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts

@@ -13,16 +13,21 @@ export type PrimitiveAnchorElementRef = React.Ref<HTMLAnchorElement>;
 export interface PrimitiveAnchorProps
   extends BasePrimitiveProps,
     StyleProp,
-    Omit<PrimitiveAnchorAttributes, 'role'> {
+    Omit<PrimitiveAnchorAttributes, 'role' | 'type'> {
   /** Content of the anchor */
   children?: ReactNode;
 
   /** The URL to navigate to when the anchor is clicked */
-  href: string;
+  href?: string | undefined;
 
   /** Disable the anchor */
   disabled?: boolean;
 
   /** Reference to the anchor element */
   ref?: PrimitiveAnchorElementRef;
+
+  /**
+   * HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
+   */
+  target?: HTMLAnchorElement['target'];
 }

package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import PrimitiveAnchor from '..';
+import PrimitiveAnchor from '../src';
 
 describe('PrimitiveAnchor', () => {
   const defaultProps = {
@@ -27,7 +27,6 @@ describe('PrimitiveAnchor', () => {
     renderAnchor(props);
 
     const link = screen.getByRole('link');
-    expect(link).toHaveClass('wds-Anchor');
     expect(link).toHaveClass('custom-class');
   });
 
@@ -41,7 +40,6 @@ describe('PrimitiveAnchor', () => {
 
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).toHaveClass('wds-Anchor--disabled');
     expect(link).not.toHaveAttribute('href', 'https://example.com');
   });
 

package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx

@@ -35,14 +35,7 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
     ref,
   ) => {
     const intl = useIntl();
-    const classNames = clsx(
-      'wds-Button',
-      {
-        'wds-Button--disabled': disabled,
-        'wds-Button--loading': loading,
-      },
-      className,
-    );
+    const classNames = clsx(className);
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -102,10 +95,9 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
      *   by assistive technologies, set to 'polite' during loading.
      */
     const buttonProps = {
-      'aria-disabled': disabled || loading,
-      'aria-label': loading
-        ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)
-        : props['aria-label'],
+      'aria-disabled': loading || undefined,
+      'aria-busy': loading || undefined,
+      'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],
       'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,
       className: classNames,
       'data-testid': testId,

package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx

@@ -1,8 +1,7 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import PrimitiveButton from '..';
-import messages from '../../../i18n/commonMessages/Button.messages';
+import { screen } from '@testing-library/react';
 import { render } from '../../../test-utils';
+import PrimitiveButton from '../src';
+import allMessages from '../../../i18n';
 
 describe('Button', () => {
   const defaultProps = {
@@ -12,7 +11,7 @@ describe('Button', () => {
   const renderButton = (
     props?: Partial<typeof defaultProps>,
     locale = 'en',
-    localeMessages = messages,
+    localeMessages = allMessages.en,
   ) => {
     return render(
       <PrimitiveButton {...defaultProps} {...props} />,
@@ -36,7 +35,6 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button');
     expect(button).toHaveClass('custom-class');
   });
 
@@ -49,10 +47,20 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button--disabled');
     expect(button).toBeDisabled();
   });
 
+  it('disables and announces the button as busy in loading mode', () => {
+    const props = {
+      ...defaultProps,
+      loading: true,
+    };
+
+    renderButton(props);
+
+    expect(screen.getByRole('button', { busy: true })).toHaveAttribute('aria-disabled', 'true');
+  });
+
   it('sets data-testid attribute', () => {
     const props = {
       ...defaultProps,
@@ -101,12 +109,7 @@ describe('Button', () => {
       loading: true,
     };
 
-    const spanishMessages = {
-      ...messages,
-      'neptune.Button.loadingAriaLabel': 'cargando',
-    };
-
-    renderButton(props, 'es', spanishMessages);
+    renderButton(props, 'es', allMessages.es);
 
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('aria-label', 'cargando');

package/src/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/src/statusIcon/StatusIcon.less

@@ -24,6 +24,10 @@
   background-color: var(--color-sentiment-negative);
 }
 
+.status-circle.critical {
+  background-color: var(--color-background-screen);
+}
+
 .status-circle.neutral {
   background-color: var(--color-content-secondary);
 }

package/src/statusIcon/StatusIcon.messages.ts

@@ -19,6 +19,12 @@ export default defineMessages({
     description:
       'Visually hidden label read by screen readers, describing the Warning icon – normally a prefix to remaining visible content, e.g. validation result.',
   },
+  criticalLabel: {
+    id: 'neptune.StatusIcon.iconLabel.critical',
+    defaultMessage: 'Critical:',
+    description:
+      'Visually hidden label read by screen readers, describing the Critical icon – normally a prefix to remaining visible content, e.g. validation result.',
+  },
   pendingLabel: {
     id: 'neptune.StatusIcon.iconLabel.pending',
     defaultMessage: 'Pending:',

package/src/statusIcon/StatusIcon.tsx

@@ -52,6 +52,10 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
+    [Sentiment.CRITICAL]: {
+      Icon: Alert,
+      defaultIconLabel: intl.formatMessage(messages.criticalLabel),
+    },
     [Sentiment.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
@@ -76,7 +80,10 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   };
   const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];
 
-  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
+  const iconColor =
+    sentiment === 'warning' || sentiment === 'pending' || sentiment === 'critical'
+      ? 'dark'
+      : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return (

package/src/test-utils/Parameters.d.ts

@@ -1,7 +1,15 @@
 declare module '@storybook/react' {
   interface Parameters {
     /** Prefer using `storyConfig` for configuring variants */
-    variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
+    variants?: (
+      | 'default'
+      | 'light'
+      | 'dark'
+      | 'bright-green'
+      | 'forest-green'
+      | 'rtl'
+      | (string & Record<string, unknown>)
+    )[];
     /** Used by Chromatic */
     chromatic?: ChromaticParameters;
     viewport?: {

package/src/test-utils/story-config.ts

@@ -30,7 +30,16 @@ interface StoryConfig {
    *
    * @default undefined
    */
-  variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile' | '400%')[];
+  variants?: (
+    | 'default'
+    | 'light'
+    | 'dark'
+    | 'bright-green'
+    | 'forest-green'
+    | 'rtl'
+    | 'mobile'
+    | '400%'
+  )[];
 }
 
 const getViewportWidth = (viewport: (typeof viewports)[keyof typeof viewports]) => {

package/src/withNextPortal/withNextPortal.tsx

@@ -1,4 +1,3 @@
-import { ThemedLayer } from '@wise/components-theming';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -11,14 +10,6 @@ export default function withNextPortalWrapper<T extends Record<string, any>>(
     useEffect(() => {
       setMounted(true);
     }, [setMounted]);
-
-    return mounted
-      ? createPortal(
-          <ThemedLayer>
-            <Component {...props} />
-          </ThemedLayer>,
-          document.body,
-        )
-      : null;
+    return mounted ? createPortal(<Component {...props} />, document.body) : null;
   };
 }