@transferwise/components 46.77.0 → 46.78.0

package/src/badge/Badge.less

@@ -52,11 +52,17 @@
 
   & > &__content {
     position: absolute;
+    width: var(--badge-size);
+    height: var(--badge-size);
     bottom: 0;
     .right(0);
 
     box-sizing: border-box;
+    border-radius: 50%;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
     user-select: none;
 

package/src/badge/Badge.tsx

@@ -11,7 +11,6 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
-import Circle, { CircleProps } from '../common/circle';
 
 /**
  * @deprecated Use `SizeSmall` or `SizeLarge` instead.
@@ -29,13 +28,6 @@ export type BadgeProps = {
   'aria-label'?: string;
 } & CommonProps;
 
-const mapLegacySize = {
-  [String(Size.SMALL)]: 16,
-  // medium is deprecated, so we map it to small
-  [String(Size.MEDIUM)]: 16,
-  [String(Size.LARGE)]: 24,
-} satisfies Record<string, CircleProps['size']>;
-
 const Badge = ({
   badge,
   className = undefined,
@@ -58,9 +50,7 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
-        {badge}
-      </Circle>
+      <div className="tw-badge__content">{badge}</div>
     </div>
   );
 };

package/src/circularButton/CircularButton.css

@@ -23,8 +23,8 @@
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {

package/src/circularButton/CircularButton.less

@@ -19,7 +19,7 @@
     .left(0);
 
     @media (--screen-400-zoom) {
-      top: var(--size-8);
+      top: var(--size-12);
     }
 
     > svg {

package/src/circularButton/CircularButton.story.tsx

@@ -4,6 +4,7 @@ import { ControlType, Priority } from '../common';
 
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CircularButton,
@@ -64,3 +65,5 @@ export const All: Story = {
     );
   },
 };
+
+export const All400Zoom: Story = storyConfig(All, { variants: ['400%'] });

package/src/circularButton/CircularButton.tsx

@@ -38,7 +38,7 @@ const CircularButton = ({
         as="input"
         // @ts-expect-error it's input[type=button] element
         type="button"
-        size={isTinyViewport ? 64 : 56}
+        size={isTinyViewport ? 72 : 56}
         aria-label={children}
         className={classes}
         disabled={disabled}

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -46,7 +46,7 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -84,7 +84,7 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -122,7 +122,7 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -160,7 +160,7 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -198,7 +198,7 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -236,7 +236,7 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -274,7 +274,7 @@ exports[`CircularButton types renders accent buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -312,7 +312,7 @@ exports[`CircularButton types renders negative buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -350,7 +350,7 @@ exports[`CircularButton types renders positive buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span

package/src/common/circle/Circle.css

@@ -5,3 +5,7 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}

package/src/common/circle/Circle.less

@@ -3,4 +3,10 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  // circle like components has custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.story.tsx

@@ -30,14 +30,14 @@ export const Sizes: Story = storyConfig(
   {
     render: () => {
       const content = <Profile size={16} />;
-      const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
+      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
       return (
         <div
           style={{
             gap: '1em',
             display: 'grid',
             justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(5, min-content)',
+            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
           }}
         >
           {sizes.map((size) => (

package/src/common/circle/Circle.tsx

@@ -1,7 +1,9 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +21,19 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -31,11 +46,19 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size':
+          isTinyViewport && !fixedSize
+            ? `${MAP_ICON_SIZE[size] / 2}px`
+            : `${MAP_ICON_SIZE[size]}px`,
+        ...style,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -21,12 +21,10 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>
@@ -138,12 +136,10 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>

package/src/i18n/de.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.SelectOption.action.label": "Auswählen",
   "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
+  "neptune.StatusIcon.iconLabel.error": "Fehler:",
+  "neptune.StatusIcon.iconLabel.information": "Auskünfte:",
+  "neptune.StatusIcon.iconLabel.pending": "Ausstehend:",
+  "neptune.StatusIcon.iconLabel.success": "Erfolgreich:",
+  "neptune.StatusIcon.iconLabel.warning": "Warnung:",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.SelectOption.action.label": "Elegir",
   "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
+  "neptune.StatusIcon.iconLabel.error": "Error:",
+  "neptune.StatusIcon.iconLabel.information": "Información:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendiente:",
+  "neptune.StatusIcon.iconLabel.success": "Éxito:",
+  "neptune.StatusIcon.iconLabel.warning": "Advertencia:",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -27,6 +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.pending": "En attente :",
+  "neptune.StatusIcon.iconLabel.success": "Terminé:",
+  "neptune.StatusIcon.iconLabel.warning": "Attention:",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.SelectOption.action.label": "Kiválasztás",
   "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
+  "neptune.StatusIcon.iconLabel.error": "Hiba:",
+  "neptune.StatusIcon.iconLabel.information": "Információ:",
+  "neptune.StatusIcon.iconLabel.pending": "Függőben:",
+  "neptune.StatusIcon.iconLabel.success": "Siker:",
+  "neptune.StatusIcon.iconLabel.warning": "Figyelmeztetés:",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.SelectOption.action.label": "Pilih",
   "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
+  "neptune.StatusIcon.iconLabel.error": "Kesalahan:",
+  "neptune.StatusIcon.iconLabel.information": "Informasi:",
+  "neptune.StatusIcon.iconLabel.pending": "Tertunda:",
+  "neptune.StatusIcon.iconLabel.success": "Berhasil:",
+  "neptune.StatusIcon.iconLabel.warning": "Peringatan:",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.SelectOption.action.label": "Scegli",
   "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
+  "neptune.StatusIcon.iconLabel.error": "Errore:",
+  "neptune.StatusIcon.iconLabel.information": "Informazioni:",
+  "neptune.StatusIcon.iconLabel.pending": "In attesa:",
+  "neptune.StatusIcon.iconLabel.success": "Fatto:",
+  "neptune.StatusIcon.iconLabel.warning": "Attenzione:",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.SelectOption.action.label": "選択してください",
   "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
+  "neptune.StatusIcon.iconLabel.error": "エラー：",
+  "neptune.StatusIcon.iconLabel.information": "情報：",
+  "neptune.StatusIcon.iconLabel.pending": "保留中：",
+  "neptune.StatusIcon.iconLabel.success": "完了：",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
   "neptune.SelectOption.action.label": "Wybierz",
   "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
+  "neptune.StatusIcon.iconLabel.error": "Błąd:",
+  "neptune.StatusIcon.iconLabel.information": "Informacje:",
+  "neptune.StatusIcon.iconLabel.pending": "W toku:",
+  "neptune.StatusIcon.iconLabel.success": "Gotowe:",
+  "neptune.StatusIcon.iconLabel.warning": "Ostrzeżenie:",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",

package/src/i18n/pt.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.SelectOption.action.label": "Selecionar",
   "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
+  "neptune.StatusIcon.iconLabel.error": "Erro:",
+  "neptune.StatusIcon.iconLabel.information": "Informação:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendente:",
+  "neptune.StatusIcon.iconLabel.success": "Concluído:",
+  "neptune.StatusIcon.iconLabel.warning": "Aviso:",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",
   "neptune.Summary.statusPending": "Pendente",

package/src/i18n/ro.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
   "neptune.SelectOption.action.label": "Alege",
   "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
+  "neptune.StatusIcon.iconLabel.error": "Eroare:",
+  "neptune.StatusIcon.iconLabel.information": "Informații:",
+  "neptune.StatusIcon.iconLabel.pending": "În așteptare:",
+  "neptune.StatusIcon.iconLabel.success": "Gata:",
+  "neptune.StatusIcon.iconLabel.warning": "Avertisment:",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",

package/src/i18n/ru.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.SelectOption.action.label": "Выбрать",
   "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
+  "neptune.StatusIcon.iconLabel.error": "Ошибка:",
+  "neptune.StatusIcon.iconLabel.information": "Информация:",
+  "neptune.StatusIcon.iconLabel.pending": "В ожидании:",
+  "neptune.StatusIcon.iconLabel.success": "Готово:",
+  "neptune.StatusIcon.iconLabel.warning": "Внимание:",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",

package/src/i18n/tr.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
   "neptune.SelectOption.action.label": "Seç",
   "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
+  "neptune.StatusIcon.iconLabel.error": "Hata:",
+  "neptune.StatusIcon.iconLabel.information": "Bilgi:",
+  "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",
+  "neptune.StatusIcon.iconLabel.success": "Başarılı:",
+  "neptune.StatusIcon.iconLabel.warning": "Uyarı:",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",

package/src/main.css

@@ -221,18 +221,27 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar {
   position: relative;
+  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }
 .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;
+  height: 100%;
+  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
+  width: 100%;
 }
 .tw-avatar--outlined {
   border: 1px solid #00a2dd;
@@ -275,6 +284,11 @@ div.critical-comms .critical-comms-body {
   color: var(--color-dark-charcoal);
   line-height: 1;
 }
+.tw-avatar--24 {
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+}
 .tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -305,6 +319,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--40 {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+}
 .tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -335,6 +354,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--48 {
+  min-width: 48px;
+  width: 48px;
+  height: 48px;
+}
 .tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -365,6 +389,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--56 {
+  min-width: 56px;
+  width: 56px;
+  height: 56px;
+}
 .tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -395,6 +424,11 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
+.tw-avatar--72 {
+  min-width: 72px;
+  width: 72px;
+  height: 72px;
+}
 .tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
@@ -460,10 +494,16 @@ div.critical-comms .critical-comms-body {
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
+  width: var(--badge-size);
+  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
+  border-radius: 50%;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1016,8 +1056,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1172,6 +1212,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4158,12 +4202,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4179,20 +4217,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -18,12 +18,10 @@ exports[`OverlayHeader renders as expected 1`] = `
         class="d-flex align-items-center order-2"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '../test-utils';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -34,12 +34,10 @@ exports[`Radio shows the avatar when supplied 1`] = `
         class="np-radio__avatar m-l-auto"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             HD
           </div>