@transferwise/components 0.0.0-experimental-7b7608c → 0.0.0-experimental-c76c3bc

package/build/statusIcon/StatusIcon.mjs

@@ -23,17 +23,17 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment = 'neutral',
-  size: sizeProp = 'md'
+  size: sizeProp = 40
 }) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size = typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
   return /*#__PURE__*/jsx(Circle, {
     as: "span",
-    size: size,
+    size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
+    className: clsx('status-circle', 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, 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;;;;"}
+{"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\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n  sentiment?: `${Sentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\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 = 40 }: 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: CircleProps['size'] =\n    typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', 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":";;;;;;;;AAiBA,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,EAAA;AAAE,CAAmB,KAAI;AACrF,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,GACR,OAAOC,QAAQ,KAAK,QAAQ,GAAGT,aAAa,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAAA;EACnE,oBACEO,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTV,IAAI,EAAEI,cAAc,IAAIJ,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBW,IAAAA,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,GAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/styles/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/build/styles/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/build/styles/main.css

@@ -1013,8 +1013,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 {
@@ -1169,6 +1169,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;
 }
@@ -4155,12 +4159,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);
 }
@@ -4176,20 +4174,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);
@@ -5025,221 +5009,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}
 .np-tile {
   min-width: 120px;
   border-radius: 10px;

package/build/styles/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,20 +13,6 @@
 .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/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,CA4CjC,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,CA8CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 export type Props = {
     /**
      * Modify underlying element, `div` by default

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

@@ -1 +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"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzD,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;IA5BV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EA8CnB,CAAC;AAEH,eAAe,MAAM,CAAC"}

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

@@ -1,7 +1,11 @@
 import { SizeSmall, SizeMedium, SizeLarge, Sentiment } from '../common';
+/**
+ * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead
+ */
+type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 export type StatusIconProps = {
-    sentiment: `${Sentiment}`;
-    size: SizeSmall | SizeMedium | SizeLarge;
+    sentiment?: `${Sentiment}`;
+    size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
 };
 declare const StatusIcon: ({ sentiment, size: sizeProp }: StatusIconProps) => import("react").JSX.Element;
 export default StatusIcon;

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,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"}
+{"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;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACvD,CAAC;AAmBF,QAAA,MAAM,UAAU,kCAAoD,eAAe,gCAgBlF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7b7608c",
+  "version": "0.0.0-experimental-c76c3bc",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.19.1",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/avatar/Avatar.spec.tsx

@@ -1,10 +1,12 @@
 import { Size } from '../common';
-import { render, screen } from '../test-utils';
+import { render, screen, mockMatchMedia } from '../test-utils';
 
 import avatarColorTestCases from './colors/avatarColorTestCases.json';
 
 import Avatar, { AvatarType } from '.';
 
+mockMatchMedia();
+
 describe('Avatar', () => {
   it('renders a medium sized thumbnail Avatar with NO outline', () => {
     render(

package/src/avatar/Avatar.tsx

@@ -1,9 +1,10 @@
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 
-import { getBrandColorFromSeed, Theme } from '../common';
+import { Breakpoint, getBrandColorFromSeed, Theme } from '../common';
 
 import Circle from '../common/circle';
+import { useMedia } from '../common/hooks/useMedia';
 
 type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
 
@@ -63,7 +64,7 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 
   const size = backwardsCompatibleSize(sizeFromProps);
-
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Circle
       size={size}
@@ -80,6 +81,8 @@ const Avatar: React.FC<AvatarProps> = ({
         fixedSize
         className="tw-avatar__content"
         style={{
+          // @ts-expect-error CSS custom props allowed
+          '--circle-icon-size': '16px',
           backgroundColor: backgroundColor || backgroundColorFromSeed,
         }}
       >

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -3,11 +3,11 @@
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
-  style="--circle-size: 48px;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 16px;"
   >
     <img
       alt=""
@@ -20,11 +20,11 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 16px;"
   >
     <span
       class="tw-icon tw-icon-briefcase "
@@ -51,11 +51,11 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 16px;"
   >
     <span
       class="tw-icon tw-icon-person "
@@ -88,11 +88,11 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
   >
     <div
       class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-      style="--circle-size: 48px;"
+      style="--circle-size: 48px; --circle-icon-size: 24px;"
     >
       <div
         class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: 48px;"
+        style="--circle-size: 48px; --circle-icon-size: 16px;"
       >
         <span
           class="tw-icon tw-icon-person "
@@ -117,7 +117,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
   </div>
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-badge__content"
-    style="--circle-size: 24px;"
+    style="--circle-size: 24px; --circle-icon-size: 16px;"
   >
     <img
       alt="badge alt text"
@@ -130,11 +130,11 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
 exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
 <div
   class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  style="--circle-size: 48px; --circle-icon-size: 24px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    style="--circle-size: 48px; --circle-icon-size: 16px;"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.spec.tsx

@@ -1,7 +1,9 @@
-import { render, cleanup, screen } from '../test-utils';
+import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import Badge from '.';
 
+mockMatchMedia();
+
 describe('Badge', () => {
   const defaultProps = {
     badge: <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.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}