@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-526a2be

package/src/Tabs/_stories/Tabs.test.story.tsx

@@ -39,8 +39,8 @@ export const RTLDiff: Story = {
     ];
 
     return (
-      <>
-        <div style={{ marginBottom: 32 }}>
+      <div>
+        <div>
           <h4>{i18n.blockFirstSelected}</h4>
           <Tabs
             name="rtl-block-first"
@@ -50,7 +50,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.blockSecondSelected}</h4>
           <Tabs
             name="rtl-block-second"
@@ -60,7 +60,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoFirstSelected}</h4>
           <Tabs
             name="rtl-auto-first"
@@ -70,7 +70,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoSecondSelected}</h4>
           <Tabs
             name="rtl-auto-second"
@@ -80,10 +80,11 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-      </>
+      </div>
     );
   },
   ...withRTLDiff({
+    fixedRows: { heights: [8, 8, 8, 8] },
     i18n: {
       firstTab: { en: 'First tab', ar: 'التبويب الأول' },
       secondTab: { en: 'Second tab', ar: 'التبويب الثاني' },

package/src/Tag/Tag.css

@@ -11,8 +11,10 @@
 }
 .wds-tag--small {
   border-radius: 6px;
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
   padding-block: 1px;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
 }
 .wds-tag--large {

package/src/Tile/Tile.css

@@ -1,9 +1,11 @@
 .np-tile {
   min-inline-size: 120px;
+  border-radius: 10px;
   border-radius: var(--radius-small);
   inline-size: 100%;
 }
 .np-theme-personal .np-tile {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
@@ -11,6 +13,7 @@
 }
 .np-tile.decision {
   margin-block-start: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
@@ -23,6 +26,7 @@
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -32,7 +36,9 @@
   inline-size: 100%;
 }
 .np-tile__description {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  margin-block-start: 12px;
   margin-block-start: var(--size-12);
   display: inline-block;
 }
@@ -40,17 +46,23 @@
   inline-size: 260px;
 }
 .np-tile--small .np-tile__description {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-tile:hover .tw-avatar {
   pointer-events: none;
 }
 .np-tile:hover .tw-avatar .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
+  line-height: 1.5;
   line-height: var(--line-height-body);
+  margin-block-start: 12px;
   margin-block-start: var(--size-12);
 }

package/src/Typeahead/Typeahead.css

@@ -7,8 +7,11 @@
 .typeahead .dropdown-menu {
   max-inline-size: 100%;
   inline-size: 100%;
+  margin-block-start: 8px;
   margin-block-start: var(--size-8);
+  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -22,6 +25,7 @@
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,
 .np-theme-personal--dark .typeahead .dropdown-menu {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .typeahead--multiple .np-chip {
@@ -71,17 +75,21 @@
   inline-size: auto;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-container {
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .typeahead--multiple.typeahead--has-value .input-group-addon + .typeahead__input-container {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
+  margin-block-end: calc(-1 * 8px + 1px);
   margin-block-end: calc(-1 * var(--size-8) + 1px);
+  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
+  block-size: calc(8px - 1);
   block-size: calc(var(--size-8) - 1);
   inline-size: 100%;
 }
@@ -101,6 +109,7 @@
   margin: 0;
 }
 .typeahead--prompt {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
@@ -116,9 +125,11 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
+  padding-block-start: calc(8px - 1);
   padding-block-start: calc(var(--size-8) - 1);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
+  padding-block-end: 8px;
   padding-block-end: var(--size-8);
   margin: 0;
 }
@@ -163,16 +174,19 @@
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
+  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
 .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
   .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
+    padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }
 }

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -2,7 +2,9 @@
   color: #ffffff;
 }
 .typeahead__option.tw-dropdown-item--focused {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,

package/src/Upload/Upload.css

@@ -20,7 +20,10 @@
   outline-offset: var(--ring-outline-offset);
 }
 .upload-error-message {
+  margin-block-start: 24px;
   margin-block-start: var(--padding-medium);
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/src/Upload/_stories/Upload.rtl.test.story.tsx

@@ -21,9 +21,15 @@ export const Sizes: Story = {
     const i18n = useRtlDiffI18n();
     return (
       <>
-        <Upload usLabel={i18n.smallUpload} size="sm" />
-        <Upload usLabel={i18n.mediumUpload} size="md" />
-        <Upload usLabel={i18n.largeUpload} size="lg" />
+        <div>
+          <Upload usLabel={i18n.smallUpload} size="sm" />
+        </div>
+        <div>
+          <Upload usLabel={i18n.mediumUpload} size="md" />
+        </div>
+        <div>
+          <Upload usLabel={i18n.largeUpload} size="lg" />
+        </div>
       </>
     );
   },

package/src/UploadInput/UploadButton/UploadButton.css

@@ -1,10 +1,13 @@
 .np-upload-input__upload-button {
   position: relative;
+  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: center;
   margin: 0;
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
+  border-end-end-radius: 10px;
   border-end-end-radius: var(--radius-small);
   border: var(--outerBorder);
   cursor: pointer;
@@ -16,9 +19,11 @@
   text-underline-offset: 0.3em;
 }
 .np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__upload-button .np-upload-input__icon {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
   color: var(--color-interactive-primary);
 }
@@ -55,19 +60,24 @@
   display: block;
   position: absolute;
   block-size: 1px;
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
+  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
+  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
 }
 .np-upload-input__upload-button--without-entries {
   border-block-start: var(--outerBorder);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/src/UploadInput/UploadInput.css

@@ -1,11 +1,13 @@
 .np-upload-input {
   --outerBorder: 1px solid var(--color-interactive-secondary);
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-upload-input .np-upload-input__section {
   margin: 0;
 }
 .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
+  border-radius: 10px;
   border-radius: var(--radius-small);
   border-block-end: var(--outerBorder);
 }

package/src/UploadInput/UploadItem/UploadItem.css

@@ -1,5 +1,6 @@
 .np-upload-input__item {
   position: relative;
+  padding: 16px;
   padding: var(--size-16);
   display: flex;
   align-items: flex-start;
@@ -8,7 +9,9 @@
 }
 .np-upload-input__item:first-child {
   border-block-start: var(--outerBorder);
+  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
+  border-start-end-radius: 10px;
   border-start-end-radius: var(--radius-small);
 }
 .np-upload-input__item + .np-upload-input__item:before {
@@ -16,17 +19,22 @@
   display: block;
   position: absolute;
   block-size: 1px;
+  inset-inline-start: 16px;
   inset-inline-start: var(--size-16);
+  inline-size: calc(100% - 2 * 16px);
   inline-size: calc(100% - 2 * var(--size-16));
   inset-block-start: 0;
+  background: rgba(0,0,0,0.10196);
   background: var(--color-border-neutral);
 }
 .np-upload-input__item .np-upload-input__item-content {
+  padding-inline-end: 32px;
   padding-inline-end: var(--size-32);
   flex: 1;
 }
 @media (max-width: 320px) {
   .np-upload-input__item .np-upload-input__item-content {
+    padding-inline-end: 64px;
     padding-inline-end: var(--size-64);
   }
 }
@@ -34,12 +42,15 @@
 .np-upload-input__item .np-upload-input__text {
   margin: 0;
   text-align: start;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
+  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-upload-input__item .np-upload-input__icon {
+  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-upload-input__item .np-upload-input__item-link,
@@ -54,7 +65,9 @@
   --buttonTopRightOffset: var(--size-16);
   --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
   position: absolute;
+  inset-inline-end: 16px;
   inset-inline-end: var(--buttonTopRightOffset);
+  inset-block-start: 16px;
   inset-block-start: var(--buttonTopRightOffset);
 }
 @media (max-width: 320px) {
@@ -70,9 +83,11 @@
   block-size: var(--iconSize);
   inline-size: var(--iconSize);
   padding-block: 0;
+  padding-inline: 4px;
   padding-inline: var(--size-4);
   border-radius: 50%;
   border: 0;
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
   transition: color, background-color 0.15s ease-in-out;
@@ -107,6 +122,7 @@
   inset-inline-start: 0;
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link {
+  padding: 16px;
   padding: var(--size-16);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -120,6 +136,7 @@
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
 .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {
@@ -131,6 +148,7 @@
 }
 .np-upload-input__item .np-upload-input-errors > li {
   position: relative;
+  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
@@ -142,6 +160,7 @@
 }
 @media (max-width: 320px) {
   .np-upload-input__item .np-upload-input-errors > li {
+    padding-inline-start: 32px;
     padding-inline-start: var(--size-32);
   }
 }

package/src/_deprecated/ActionButton/ActionButton.css

@@ -1,25 +1,36 @@
 .np-action-btn {
   display: inline-flex;
+  block-size: 32px;
   block-size: var(--size-32);
+  padding-block: 8px;
   padding-block: var(--size-8);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
   transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
+  line-height: 1.2;
   line-height: var(--line-height-control);
+  border-radius: 10px;
   border-radius: var(--radius-small);
   align-items: center;
   color: var(--color-interactive-control);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-radius: 24px;
   border-radius: var(--radius-large);
   border: none;
 }
 @media (max-width: 320px) {
   .np-action-btn {
+    block-size: 40px;
     block-size: var(--size-40);
   }
 }
 .np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -28,6 +39,7 @@
   color: var(--color-interactive-primary);
 }
 .np-action-btn:not(:disabled):hover {
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
@@ -39,6 +51,7 @@
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
 }
 .np-action-btn:not(:disabled):active.btn-priority-2 {

package/src/_deprecated/Alert/Alert.css

@@ -2,5 +2,6 @@
   display: contents;
 }
 .alert__close {
+  min-inline-size: 48px;
   min-inline-size: var(--size-48);
 }

package/src/_deprecated/Avatar/Avatar.css

@@ -9,8 +9,10 @@
 .tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
+  background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
   border-radius: 50%;
+  color: #37517e;
   color: var(--color-content-primary);
   display: flex;
   block-size: 100%;
@@ -21,10 +23,12 @@
   inline-size: 100%;
 }
 .tw-avatar--outlined {
+  border: 1px solid #00a2dd;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
 }
 .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .tw-avatar--thumbnail * {
@@ -40,10 +44,12 @@
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--emoji {
   font-family: Arial, sans-serif;
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .tw-avatar.tw-avatar--initials,
@@ -51,6 +57,7 @@
   font-family: Arial, sans-serif;
 }
 .tw-avatar.tw-avatar--branded .tw-avatar__content {
+  font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
   color: var(--color-dark-charcoal);
@@ -86,6 +93,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -120,6 +128,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -154,6 +163,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -188,6 +198,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;
@@ -222,6 +233,7 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   inset-block-end: 0;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-overlay);
   content: "";
   border-radius: 50%;

package/src/_deprecated/Badge/Badge.css

@@ -16,6 +16,8 @@
 }
 .tw-badge > .tw-badge__children {
   --badge-h-side: left;
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
           mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) var(--badge-h-side) calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }

package/src/_deprecated/Card/Card.css

@@ -8,7 +8,9 @@
   border: 0;
 }
 .np-card--expanded {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -24,13 +26,16 @@
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__content {
+    padding-block: 24px;
     padding-block: var(--size-24);
+    padding-inline: 72px;
     padding-inline: var(--size-72);
   }
 }
 @media (min-width: 320.02px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin-block: 0;
+    margin-inline: 72px;
     margin-inline: var(--size-72);
   }
 }
@@ -47,25 +52,32 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-card__content {
+  padding-block: 24px;
   padding-block: var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-theme-personal .np-card__content {
+  padding-block: 16px 24px;
   padding-block: var(--size-16) var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-card__divider {
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   block-size: 1px;
   margin-block: 0;
+  margin-inline: 16px;
   margin-inline: var(--size-16);
 }
 .np-theme-personal .np-card {
   overflow: visible;
   overflow: initial;
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -75,6 +87,7 @@
   margin: 0;
 }
 .np-theme-personal .np-card__button {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   --ring-outline-width: 3px;
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
@@ -87,7 +100,9 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-theme-personal .np-card--expanded .np-card__button {
+  border-start-start-radius: 16px;
   border-start-start-radius: var(--radius-medium);
+  border-start-end-radius: 16px;
   border-start-end-radius: var(--radius-medium);
   border-end-end-radius: 0;
   border-end-start-radius: 0;

package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -1,4 +1,5 @@
 .critical-comms {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   overflow: hidden;
 }
@@ -11,12 +12,15 @@
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .critical-comms .status-circle.negative .status-icon {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .critical-comms .alert__message .alert__action {
+  margin-block-start: 16px;
   margin-block-start: var(--size-16);
 }
 .critical-comms .wds-Button {
@@ -53,6 +57,7 @@
   .critical-comms .alert-negative .alert__message .alert__action,
   .critical-comms .alert-neutral .alert__message .alert__action {
     margin-block-start: 0;
+    margin-inline-start: 16px;
     margin-inline-start: var(--padding-small);
   }
 }