@transferwise/components 46.85.0 → 46.86.1

package/src/definitionList/DefinitionList.story.tsx

@@ -1,19 +1,29 @@
 import { action } from '@storybook/addon-actions';
-import { select, text, boolean } from '@storybook/addon-knobs';
 
 import { Layout } from '../common';
 
-import DefinitionList from './DefinitionList';
+import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
+import { lorem10 } from '../test-utils';
+import Section from '../section';
+import Header from '../header';
 
 export default {
   component: DefinitionList,
   title: 'Typography/DefinitionList',
 };
 
+const layouts: DefinitionListLayout[] = [
+  Layout.VERTICAL_TWO_COLUMN,
+  Layout.VERTICAL_ONE_COLUMN,
+  Layout.HORIZONTAL_JUSTIFIED,
+  Layout.HORIZONTAL_LEFT_ALIGNED,
+  Layout.HORIZONTAL_RIGHT_ALIGNED,
+];
+
 const definitions = [
   {
-    title: text('title', 'Editable title'),
-    value: text('value', 'Editable value'),
+    title: 'Definition List title',
+    value: 'Definition List value',
     key: 'first',
   },
   {
@@ -23,67 +33,57 @@ const definitions = [
   },
   {
     title: 'Long strings will wrap',
-    value: 'And values with long words will eventuallybreakontothenextline',
+    value: lorem10,
     key: 'third',
   },
 ];
 
 export const Basic = () => {
-  const muted = boolean('muted', false);
-  const layout = select(
-    'layout',
-    [
-      Layout.VERTICAL_TWO_COLUMN,
-      Layout.VERTICAL_ONE_COLUMN,
-      Layout.HORIZONTAL_JUSTIFIED,
-      Layout.HORIZONTAL_LEFT_ALIGNED,
-      Layout.HORIZONTAL_RIGHT_ALIGNED,
-    ],
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-  );
-
-  return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
+  return layouts.map((layout) => (
+    <Section key={layout}>
+      <Header title={`Instace of: ${layout}`} />
+      <DefinitionList layout={layout} definitions={definitions} />
+    </Section>
+  ));
 };
 
 export const WithActionButtons = () => {
-  const muted = boolean('muted', false);
-  const layout = select(
-    'layout',
-    [
-      Layout.VERTICAL_TWO_COLUMN,
-      Layout.VERTICAL_ONE_COLUMN,
-      Layout.HORIZONTAL_JUSTIFIED,
-      Layout.HORIZONTAL_LEFT_ALIGNED,
-      Layout.HORIZONTAL_RIGHT_ALIGNED,
-    ],
-    Layout.HORIZONTAL_LEFT_ALIGNED,
-  );
-
   return (
-    <DefinitionList
-      layout={layout}
-      muted={muted}
-      definitions={[
-        ...definitions,
-        {
-          title: 'Action buttons are useful',
-          value: 'You can do all kinds of neat things with actions buttons!',
-          key: 'fourth',
-          action: {
-            label: 'Epic button',
-            onClick: action('Probably the best action event you have ever seen, in the world!'),
-          },
-        },
-        {
-          title: 'tiny',
-          value: 'tiny',
-          key: 'fifth',
-          action: {
-            label: 'Epic button',
-            onClick: action('Hello from the Tiny Button :)'),
-          },
-        },
-      ]}
-    />
+    <>
+      {layouts.map((layout) => (
+        <Section key={layout}>
+          <Header title={`Instace of: ${layout}`} />
+          <DefinitionList
+            key={layout}
+            layout={layout}
+            definitions={[
+              ...definitions,
+              {
+                title: 'Action buttons are useful',
+                value: lorem10,
+                key: 'fourth',
+                action: {
+                  label: 'Epic button',
+                  onClick: action(lorem10),
+                },
+              },
+              {
+                title: 'tiny',
+                value: 'tiny',
+                key: 'fifth',
+                action: {
+                  label: 'Epic button',
+                  onClick: action(lorem10),
+                },
+              },
+            ]}
+          />
+        </Section>
+      ))}
+    </>
   );
 };
+
+export const Muted = () => {
+  return <DefinitionList muted definitions={definitions} />;
+};

package/src/definitionList/DefinitionList.tsx

@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
   key: string;
 }
 
-type DefinitionListLayout =
+export type DefinitionListLayout =
   `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
 
 export interface DefinitionListProps {

package/src/i18n/de.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
   "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
   "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
+  "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
   "neptune.UploadButton.uploadFile": "Datei hochladen",
   "neptune.UploadButton.uploadFiles": "Dateien hochladen",
   "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",

package/src/i18n/es.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
   "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
   "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
+  "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
   "neptune.UploadButton.uploadFile": "Subir archivo",
   "neptune.UploadButton.uploadFiles": "Subir archivos",
   "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",

package/src/i18n/fr.json

@@ -27,11 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.SelectOption.action.label": "Sélectionner",
   "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
-  "neptune.StatusIcon.iconLabel.error": "Erreur:",
-  "neptune.StatusIcon.iconLabel.information": "Informations:",
+  "neptune.StatusIcon.iconLabel.error": "Erreur :",
+  "neptune.StatusIcon.iconLabel.information": "Informations :",
   "neptune.StatusIcon.iconLabel.pending": "En attente :",
-  "neptune.StatusIcon.iconLabel.success": "Terminé:",
-  "neptune.StatusIcon.iconLabel.warning": "Attention:",
+  "neptune.StatusIcon.iconLabel.success": "Terminé :",
+  "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",
@@ -47,13 +47,14 @@
   "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
   "neptune.Upload.psButtonText": "Annuler",
   "neptune.Upload.psProcessingText": "Téléchargement...",
-  "neptune.Upload.retry": "Réessayez",
+  "neptune.Upload.retry": "Réessayer",
   "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
   "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
   "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
   "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
   "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
+  "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
   "neptune.UploadButton.uploadFile": "Envoyer le fichier",
   "neptune.UploadButton.uploadFiles": "Transférer des documents",
   "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",

package/src/i18n/hu.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Összes fájltípus",
   "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
   "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
+  "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
   "neptune.UploadButton.uploadFile": "Fájl feltöltése",
   "neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
   "neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",

package/src/i18n/id.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Semua jenis file",
   "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
   "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
+  "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
   "neptune.UploadButton.uploadFile": "Unggah file",
   "neptune.UploadButton.uploadFiles": "Unggah file",
   "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",

package/src/i18n/it.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
   "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
   "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
+  "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
   "neptune.UploadButton.uploadFile": "Carica un file",
   "neptune.UploadButton.uploadFiles": "Carica i file",
   "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",

package/src/i18n/pl.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Wszystkie typy plików",
   "neptune.UploadButton.dropFiles": "Upuść plik, żeby rozpocząć przesyłanie",
   "neptune.UploadButton.instructions": "{fileTypes}, mniejsze niż {size}MB",
+  "neptune.UploadButton.maximumFiles": "Maksymalna ilość plików: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Prześlij plik",
   "neptune.UploadButton.uploadFiles": "Prześlij pliki",
   "neptune.UploadInput.deleteModalBody": "Usunięcie tego pliku oznacza usunięcie go z naszego systemu.",

package/src/i18n/ro.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
   "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
   "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
+  "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
   "neptune.UploadButton.uploadFile": "Încarcă fișier",
   "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
   "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",

package/src/i18n/th.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
+  "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
   "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
   "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
   "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",

package/src/i18n/tr.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
   "neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",
+  "neptune.UploadButton.maximumFiles": "En fazla {maxFiles} dosya.",
   "neptune.UploadButton.uploadFile": "Dosya yükleyin",
   "neptune.UploadButton.uploadFiles": "Dosya yükleyin",
   "neptune.UploadInput.deleteModalBody": "Bu belgeyi kaldırmak, sistemimizden tamamen silinmesiyle sonuçlanır.",

package/src/i18n/zh-CN.json

@@ -54,6 +54,7 @@
   "neptune.UploadButton.allFileTypes": "所有文件类型",
   "neptune.UploadButton.dropFiles": "拖放文件开始上传",
   "neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",
+  "neptune.UploadButton.maximumFiles": "最多 {maxFiles} 个文件。",
   "neptune.UploadButton.uploadFile": "上传文件",
   "neptune.UploadButton.uploadFiles": "上传文件",
   "neptune.UploadInput.deleteModalBody": "删除此文件会将其从我们的系统中删除",

package/src/iconButton/IconButton.story.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-key */
 import { Meta, StoryObj } from '@storybook/react';
-import { ArrowLeft } from '@transferwise/icons';
+import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
 import IconButton, { Props } from './IconButton';
 import { action } from '@storybook/addon-actions';
 import Body from '../body';
@@ -24,7 +24,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Plus />
       </IconButton>
       <IconButton
         size={size}
@@ -34,7 +34,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Defrost />
       </IconButton>
       <IconButton
         size={size}
@@ -54,7 +54,7 @@ const Template = ({ size, disabled }: Props) => {
         type="default"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Menu />
       </IconButton>
       <IconButton
         size={size}
@@ -64,7 +64,7 @@ const Template = ({ size, disabled }: Props) => {
         type="negative"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Cross />
       </IconButton>
       <IconButton
         size={size}
@@ -74,7 +74,7 @@ const Template = ({ size, disabled }: Props) => {
         type="negative"
         onClick={action('button click')}
       >
-        <ArrowLeft />
+        <Edit />
       </IconButton>
     </>
   );

package/src/main.css

@@ -523,7 +523,7 @@ div.critical-comms .critical-comms-body {
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset) - 2px);
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -1184,175 +1184,34 @@ div.critical-comms .critical-comms-body {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   cursor: pointer;
-  position: relative;
-}
-.np-circular-btn .tw-icon {
-  position: absolute;
-  top: 16px;
-  top: var(--size-16);
-  pointer-events: none;
-  color: white;
-  transition: color 0.15s ease-in-out;
-  width: 100%;
-  left: 0;
-}
-[dir="rtl"] .np-circular-btn .tw-icon {
-  right: 0;
-  left: auto;
-  left: initial;
-}
-@media (max-width: 320px) {
-  .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
-.np-theme-personal .np-circular-btn {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-}
-.np-theme-personal .np-circular-btn .tw-icon,
-.np-theme-personal .np-circular-btn .tw-icon:hover,
-.np-theme-personal .np-circular-btn .tw-icon:active {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
-  color: var(--color-contrast) !important;
-}
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
-  color: var(--color-sentiment-negative) !important;
-}
-.np-circular-btn.accent .np-circular-btn__label {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-circular-btn.accent:active .np-circular-btn__label,
-.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-circular-btn.accent.secondary .tw-icon {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.positive .np-circular-btn__label {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #069939;
-  color: var(--color-interactive-positive-hover);
-}
-.np-circular-btn.positive:active .np-circular-btn__label,
-.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: #008b2b;
-  color: var(--color-interactive-positive-active);
-}
-.np-circular-btn.positive.secondary .tw-icon {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
 }
-.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.negative .np-circular-btn__label {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.np-circular-btn.negative:active .np-circular-btn__label,
-.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}
-.np-circular-btn.negative.secondary .tw-icon {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
 }
-.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
 }
-.np-theme-personal .np-circular-btn.accent.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-interactive-primary-active);
-}
-.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
-  color: var(--color-sentiment-negative);
-}
-.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-sentiment-negative-hover);
-}
-.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-sentiment-negative-active);
+.np-circular-btn-primary-negative .np-circular-btn-label,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
-  color: var(--color-sentiment-negative);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-sentiment-negative-primary-hover);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-sentiment-negative-primary-active);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }
 .np-circle {
   border-radius: 9999px;