@transferwise/components 46.71.3 → 46.71.4

package/build/statusIcon/StatusIcon.mjs

@@ -1,6 +1,10 @@
 import { Check, Info, Alert, Cross, ClockBorderless } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import Circle from '../common/circle/Circle.mjs';
+import { useMedia } from '../common/hooks/useMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
+import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
+import { Size } from '../common/propsValues/size.mjs';
 
 const iconTypeMap = {
   positive: Check,
@@ -12,15 +16,24 @@ const iconTypeMap = {
   error: Cross,
   success: Check
 };
+const mapLegacySize = {
+  [String(Size.SMALL)]: 16,
+  [String(Size.MEDIUM)]: 40,
+  [String(Size.LARGE)]: 48
+};
 const StatusIcon = ({
   sentiment = 'neutral',
-  size = 'md'
+  size: sizeProp = 'md'
 }) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
-  return /*#__PURE__*/jsx("span", {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  return /*#__PURE__*/jsx(Circle, {
+    as: "span",
+    size: size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', `status-circle-${size}`, sentiment),
+    className: clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
     children: /*#__PURE__*/jsx(Icon, {
       className: clsx('status-icon', iconColor)
     })

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n\n  return (\n    <span\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${size}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </span>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","StatusIcon","sentiment","size","Icon","iconColor","_jsx","className","clsx","children"],"mappings":";;;;AAUA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAE/CY,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;AAAEC,EAAAA,IAAI,GAAG,IAAA;AAAI,CAAmB,KAAI;AAC7E,EAAA,MAAMC,IAAI,GAAGjB,WAAW,CAACe,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMG,SAAS,GAAGH,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAEvF,EAAA,oBACEI,GAAA,CAAA,MAAA,EAAA;AACE,IAAA,aAAA,EAAY,aAAa;IACzBC,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE,iBAAiBL,IAAI,CAAA,CAAE,EAAED,SAAS,CAAE;IAAAO,QAAA,eAErEH,GAAA,CAACF,IAAI,EAAA;AAACG,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAEH,SAAS,CAAA;KAChD,CAAA;AAAA,GAAM,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GAAGC,QAAQ,KAAKP,IAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,GAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/styles/avatar/Avatar.css

@@ -2,26 +2,17 @@
 }@media (min-width: 768px) {
 }.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;
   border: 1px solid var(--color-interactive-accent);
@@ -55,10 +46,6 @@
   font-feature-settings: "ss01";
   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;
@@ -83,10 +70,6 @@
   border: 1px solid var(--color-border-overlay);
   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;
@@ -111,10 +94,6 @@
   border: 1px solid var(--color-border-overlay);
   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;
@@ -139,10 +118,6 @@
   border: 1px solid var(--color-border-overlay);
   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;
@@ -167,10 +142,6 @@
   border: 1px solid var(--color-border-overlay);
   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;

package/build/styles/badge/Badge.css

@@ -6,10 +6,6 @@
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
 }
-.tw-badge.tw-badge-md {
-  --badge-size: 20px;
-  --badge-mask: 2px;
-}
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
   --badge-mask: 3px;
@@ -27,16 +23,10 @@
 }
 .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;

package/build/styles/circularButton/CircularButton.css

@@ -6,36 +6,6 @@
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn input[type="button"] {
-  min-height: 40px;
-  min-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-  padding: 0;
-  border-radius: 50%;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-}
-.np-theme-personal .np-circular-btn input[type="button"] {
-  min-height: 56px;
-  min-height: var(--size-56);
-  width: 56px;
-  width: var(--size-56);
-  height: 56px;
-  height: var(--size-56);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-circular-btn input[type="button"] {
-    min-height: 64px;
-    min-height: var(--size-64);
-    width: 64px;
-    width: var(--size-64);
-    height: 64px;
-    height: var(--size-64);
-  }
-}
 .np-circular-btn .tw-icon {
   position: absolute;
   top: 16px;
@@ -76,13 +46,6 @@
 .np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
   color: var(--color-sentiment-negative) !important;
 }
-.np-circular-btn__label {
-  transition: color 0.15s ease-in-out;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
 .np-circular-btn.accent .np-circular-btn__label {
   color: #00a2dd;
   color: var(--color-interactive-accent);

package/build/styles/common/circle/Circle.css

@@ -0,0 +1,7 @@
+.np-circle {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+}

package/build/styles/main.css

@@ -207,27 +207,18 @@ 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;
@@ -270,11 +261,6 @@ 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,11 +291,6 @@ 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;
@@ -340,11 +321,6 @@ 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;
@@ -375,11 +351,6 @@ 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;
@@ -410,11 +381,6 @@ 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;
@@ -463,10 +429,6 @@ div.critical-comms .critical-comms-body {
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
 }
-.tw-badge.tw-badge-md {
-  --badge-size: 20px;
-  --badge-mask: 2px;
-}
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
   --badge-mask: 3px;
@@ -484,16 +446,10 @@ 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;
@@ -1029,36 +985,6 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn input[type="button"] {
-  min-height: 40px;
-  min-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-  padding: 0;
-  border-radius: 50%;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-}
-.np-theme-personal .np-circular-btn input[type="button"] {
-  min-height: 56px;
-  min-height: var(--size-56);
-  width: 56px;
-  width: var(--size-56);
-  height: 56px;
-  height: var(--size-56);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-circular-btn input[type="button"] {
-    min-height: 64px;
-    min-height: var(--size-64);
-    width: 64px;
-    width: var(--size-64);
-    height: 64px;
-    height: var(--size-64);
-  }
-}
 .np-circular-btn .tw-icon {
   position: absolute;
   top: 16px;
@@ -1099,13 +1025,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
   color: var(--color-sentiment-negative) !important;
 }
-.np-circular-btn__label {
-  transition: color 0.15s ease-in-out;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
 .np-circular-btn.accent .np-circular-btn__label {
   color: #00a2dd;
   color: var(--color-interactive-accent);
@@ -1232,6 +1151,13 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
   color: var(--color-interactive-control);
 }
+.np-circle {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4224,13 +4150,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 32px;
   width: var(--size-32);
 }
-.status-circle {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4246,24 +4165,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-lg {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-}
-.status-circle-md {
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-}
-.status-circle-sm {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
 .status-circle-sm .status-icon > svg {
   height: 14px;
   height: var(--size-14);
@@ -4278,14 +4179,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-24);
   }
 }
-@media (max-width: 320px) {
-  .status-circle-sm {
-    width: 32px;
-    width: var(--size-32);
-    height: 32px;
-    height: var(--size-32);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/build/styles/statusIcon/StatusIcon.css

@@ -4,13 +4,6 @@
   width: 32px;
   width: var(--size-32);
 }
-.status-circle {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -26,24 +19,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-lg {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-}
-.status-circle-md {
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-}
-.status-circle-sm {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
 .status-circle-sm .status-icon > svg {
   height: 14px;
   height: var(--size-14);
@@ -58,14 +33,6 @@
     height: var(--size-24);
   }
 }
-@media (max-width: 320px) {
-  .status-circle-sm {
-    width: 32px;
-    width: var(--size-32);
-    height: 32px;
-    height: var(--size-32);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/build/types/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAQA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/types/badge/Badge.d.ts

@@ -1,12 +1,19 @@
 import { ReactNode } from 'react';
 import { SizeSmall, SizeMedium, SizeLarge, ThemeDark, ThemeLight, CommonProps } from '../common';
+/**
+ * @deprecated Use `SizeSmall` or `SizeLarge` instead.
+ */
+type DeprecatedSizes = SizeMedium;
 export type BadgeProps = {
     badge: ReactNode;
     children: ReactNode;
-    size?: SizeSmall | SizeMedium | SizeLarge;
+    /**
+     * `md` is deprecated, it will fallback to `sm` instead.
+     */
+    size?: SizeSmall | DeprecatedSizes | SizeLarge;
     border?: ThemeDark | ThemeLight;
     'aria-label'?: string;
 } & CommonProps;
-declare const Badge: ({ badge, className, size, border, "aria-label": ariaLabel, children, }: BadgeProps) => import("react").JSX.Element;
+declare const Badge: ({ badge, className, size: sizeProp, border, "aria-label": ariaLabel, children, }: BadgeProps) => import("react").JSX.Element;
 export default Badge;
 //# sourceMappingURL=Badge.d.ts.map

package/build/types/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,KAAK,2EAOR,UAAU,gCAgBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAGnB;;GAEG;AACH,KAAK,eAAe,GAAG,UAAU,CAAC;AAElC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAShB,QAAA,MAAM,KAAK,qFAOR,UAAU,gCAoBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/circularButton/CircularButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAE9D,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAC9E;AAED,QAAA,MAAM,cAAc,qEAQjB,mBAAmB,gCAoBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,WAAW,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAI1E,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAC9E;AAED,QAAA,MAAM,cAAc,qEAQjB,mBAAmB,gCAyBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/common/circle/Circle.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type Props = {
+    /**
+     * Modify underlying element, `div` by default
+     */
+    as?: React.ElementType;
+    /**
+     * Set size of the circle in px, `48` by default
+     */
+    size?: ShapeSize;
+    /**
+     * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+     * as those can be dynamic a at certain viewport sizes
+     */
+    fixedSize?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Circle: import("react").ForwardRefExoticComponent<{
+    /**
+     * Modify underlying element, `div` by default
+     */
+    as?: React.ElementType;
+    /**
+     * Set size of the circle in px, `48` by default
+     */
+    size?: ShapeSize;
+    /**
+     * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)
+     * as those can be dynamic a at certain viewport sizes
+     */
+    fixedSize?: boolean;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
+export default Circle;
+//# sourceMappingURL=Circle.d.ts.map

package/build/types/common/circle/Circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;IAfV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EAyBnB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/build/types/common/circle/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Circle';
+export { type Props as CircleProps } from './Circle';
+//# sourceMappingURL=index.d.ts.map

package/build/types/common/circle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,KAAK,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/build/types/inputs/SelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}

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

@@ -3,6 +3,6 @@ export type StatusIconProps = {
     sentiment: `${Sentiment}`;
     size: SizeSmall | SizeMedium | SizeLarge;
 };
-declare const StatusIcon: ({ sentiment, size }: StatusIconProps) => import("react").JSX.Element;
+declare const StatusIcon: ({ sentiment, size: sizeProp }: StatusIconProps) => import("react").JSX.Element;
 export default StatusIcon;
 //# sourceMappingURL=StatusIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CAC1C,CAAC;AAaF,QAAA,MAAM,UAAU,wBAA4C,eAAe,gCAY1E,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAI1F,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC1B,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;CAC1C,CAAC;AAmBF,QAAA,MAAM,UAAU,kCAAsD,eAAe,gCAepF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.71.3",
+  "version": "46.71.4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,7 +92,7 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.19.0",
+    "@transferwise/neptune-css": "14.19.1",
     "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {

package/src/alert/Alert.spec.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from '@wise/components-theming';
 import React from 'react';
 
 import { Sentiment, Size, Theme, Variant } from '../common';
-import { render, cleanup, screen, userEvent, fireEvent } from '../test-utils';
+import { render, cleanup, screen, userEvent, fireEvent, mockMatchMedia } from '../test-utils';
 
 import Alert, { AlertAction, AlertArrowPosition, AlertType } from './Alert';
 
@@ -17,6 +17,8 @@ jest.mock('react', () => {
   };
 });
 
+mockMatchMedia();
+
 describe('Alert', () => {
   let component: HTMLElement;
   let container: HTMLElement;