@transferwise/components 46.76.0 → 46.78.0

package/build/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/build/i18n/tr.json.js

@@ -29,6 +29,11 @@ var tr = {
 	"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/build/i18n/tr.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/tr.json.mjs

@@ -27,6 +27,11 @@ var tr = {
 	"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/build/i18n/tr.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/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/build/statusIcon/StatusIcon.js

@@ -18,7 +18,7 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment: sentiment$1 = 'neutral',
-  size: sizeProp = 'md',
+  size: sizeProp = 40,
   iconLabel
 }) => {
   const intl = reactIntl.useIntl();
@@ -63,12 +63,12 @@ const StatusIcon = ({
   } = iconMetaBySentiment[sentiment$1];
   const iconColor = sentiment$1 === 'warning' || sentiment$1 === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
-  const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
+  const size = mapLegacySize[sizeProp] ?? sizeProp;
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     as: "span",
-    size: size$1,
+    size: isTinyViewport && size < 40 ? 32 : size,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment$1),
+    className: clsx.clsx('status-circle', sentiment$1),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\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 = ({\n  sentiment = 'neutral',\n  size: sizeProp = 'md',\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}`,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Sentiment.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\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\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;;;AAqBA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAClBC,aAAAA,WAAS,GAAG,SAAS;EACrBC,IAAI,EAAEC,QAAQ,GAAG,IAAI;AACrBC,EAAAA,SAAAA;AAAS,CACO,KAAI;AACpB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,mBAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,WAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACC,UAAU,CAAA;KACzD;IACD,CAACP,mBAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,WAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACI,YAAY,CAAA;KAC3D;IACD,CAACV,mBAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,WAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACO,YAAY,CAAA;KAC3D;IACD,CAACb,mBAAS,CAACc,OAAO,GAAG;AACnBZ,MAAAA,IAAI,EAAEa,qBAAe;AACrBX,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACU,YAAY,CAAA;KAC3D;IACD,CAAChB,mBAAS,CAACiB,OAAO,GAAG;AACnBf,MAAAA,IAAI,EAAEgB,UAAI;AACVd,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACa,gBAAgB,CAAA;KAC/D;AACD;IACA,CAACnB,mBAAS,CAACoB,KAAK,GAAG;AACjBlB,MAAAA,IAAI,EAAEC,WAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACC,UAAU,CAAA;KACzD;IACD,CAACP,mBAAS,CAACqB,IAAI,GAAG;AAChBnB,MAAAA,IAAI,EAAEgB,UAAI;AACVd,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACa,gBAAgB,CAAA;KAC/D;IACD,CAACnB,mBAAS,CAACsB,OAAO,GAAG;AACnBpB,MAAAA,IAAI,EAAEO,WAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,mBAAQ,CAACI,YAAY,CAAA;AAC3D,KAAA;GACF,CAAA;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA,gBAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,WAAS,CAAC,CAAA;AAEjE,EAAA,MAAM8B,SAAS,GAAG9B,WAAS,KAAK,SAAS,IAAIA,WAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAM+B,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMjC,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAImC,cAAc,GAAG,EAAE,GAAGtC,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEiC,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTpC,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBqC,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBrC,QAAQ,CAAA,CAAE,EAAEF,WAAS,CAAE;IAAAwC,QAAA,eAEzEL,cAAA,CAAC1B,IAAI,EAAA;AACH6B,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAE;MAC1CW,KAAK,EAAEtC,SAAS,KAAK,IAAI,GAAGuC,SAAS,GAAGvC,SAAS,IAAIQ,gBAAAA;KAEzD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\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   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\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, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}`,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Sentiment.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = 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\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -16,7 +16,7 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment = 'neutral',
-  size: sizeProp = 'md',
+  size: sizeProp = 40,
   iconLabel
 }) => {
   const intl = useIntl();
@@ -61,12 +61,12 @@ const StatusIcon = ({
   } = iconMetaBySentiment[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 = 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),
       title: iconLabel === null ? undefined : iconLabel || defaultIconLabel

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';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\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 = ({\n  sentiment = 'neutral',\n  size: sizeProp = 'md',\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}`,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Sentiment.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\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\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":";;;;;;;;;;;AAqBA,MAAMA,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;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,IAAI,EAAEC,QAAQ,GAAG,IAAI;AACrBC,EAAAA,SAAAA;AAAS,CACO,KAAI;AACpB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;AAEtB,EAAA,MAAMC,mBAAmB,GAMrB;IACF,CAACC,SAAS,CAACC,QAAQ,GAAG;AACpBC,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU,CAAA;KACzD;IACD,CAACP,SAAS,CAACQ,QAAQ,GAAG;AACpBN,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY,CAAA;KAC3D;IACD,CAACV,SAAS,CAACW,OAAO,GAAG;AACnBT,MAAAA,IAAI,EAAEU,KAAK;AACXR,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACO,YAAY,CAAA;KAC3D;IACD,CAACb,SAAS,CAACc,OAAO,GAAG;AACnBZ,MAAAA,IAAI,EAAEa,eAAe;AACrBX,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACU,YAAY,CAAA;KAC3D;IACD,CAAChB,SAAS,CAACiB,OAAO,GAAG;AACnBf,MAAAA,IAAI,EAAEgB,IAAI;AACVd,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACa,gBAAgB,CAAA;KAC/D;AACD;IACA,CAACnB,SAAS,CAACoB,KAAK,GAAG;AACjBlB,MAAAA,IAAI,EAAEC,KAAK;AACXC,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACC,UAAU,CAAA;KACzD;IACD,CAACP,SAAS,CAACqB,IAAI,GAAG;AAChBnB,MAAAA,IAAI,EAAEgB,IAAI;AACVd,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACa,gBAAgB,CAAA;KAC/D;IACD,CAACnB,SAAS,CAACsB,OAAO,GAAG;AACnBpB,MAAAA,IAAI,EAAEO,KAAK;AACXL,MAAAA,gBAAgB,EAAEP,IAAI,CAACQ,aAAa,CAACC,QAAQ,CAACI,YAAY,CAAA;AAC3D,KAAA;GACF,CAAA;EACD,MAAM;IAAER,IAAI;AAAEE,IAAAA,gBAAAA;AAAgB,GAAE,GAAGL,mBAAmB,CAACN,SAAS,CAAC,CAAA;AAEjE,EAAA,MAAM8B,SAAS,GAAG9B,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAM+B,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMjC,IAAI,GAAGC,QAAQ,KAAKP,IAAI,CAACC,KAAK,IAAImC,cAAc,GAAG,EAAE,GAAGtC,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEiC,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTpC,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBqC,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAE,iBAAiBrC,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAwC,QAAA,eAEzEL,GAAA,CAAC1B,IAAI,EAAA;AACH6B,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAE;MAC1CW,KAAK,EAAEtC,SAAS,KAAK,IAAI,GAAGuC,SAAS,GAAGvC,SAAS,IAAIQ,gBAAAA;KAEzD,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';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\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   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\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, iconLabel }: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}`,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Sentiment.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = 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\n        className={clsx('status-icon', iconColor)}\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/styles/avatar/Avatar.css

@@ -2,17 +2,26 @@
 }@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);
@@ -46,6 +55,10 @@
   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;
@@ -70,6 +83,10 @@
   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;
@@ -94,6 +111,10 @@
   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;
@@ -118,6 +139,10 @@
   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;
@@ -142,6 +167,10 @@
   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

@@ -23,10 +23,16 @@
 }
 .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

@@ -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

@@ -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/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/alert/Alert.d.ts

@@ -38,17 +38,9 @@ export interface AlertProps {
     /** The type dictates which icon and colour will be used */
     type?: AlertType;
     variant?: `${Variant}`;
-    /**
-     * Controls rendering of the Alert component. <br />
-     * Toggle this prop instead using conditional rendering and logical AND (&&)
-     * operator, to make the component work with screen readers.
-     * @deprecated use `dynamicRender`
-     * */
+    /** @deprecated Safe to remove */
     active?: boolean;
-    /**
-     * Toggle this prop when dealing with multiple, dynamic Alerts, to make them
-     * work with screen readers. This is especially helpful for the BFF use cases.
-     * */
+    /** @deprecated Safe to remove */
     dynamicRender?: boolean;
     /** @deprecated Use `InlineAlert` instead. */
     arrow?: `${AlertArrowPosition}`;
@@ -59,6 +51,6 @@ export interface AlertProps {
     /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */
     size?: `${Size}`;
 }
-export default function Alert({ arrow, action, children, className, dismissible, icon, statusIconLabel, onDismiss, message, size, title, type, variant, active, dynamicRender, }: AlertProps): import("react").JSX.Element;
+export default function Alert({ action, className, icon, statusIconLabel, onDismiss, message, title, type, variant, arrow, children, size, dismissible, active, dynamicRender, }: AlertProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/build/types/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB;;;;;SAKK;IACL,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;SAGK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,EACb,aAAqB,GACtB,EAAE,UAAU,+BAqHZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,SAAS,EACT,IAAI,EAEJ,OAAO,EAER,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,MAAa,EACb,aAAa,GACd,EAAE,UAAU,+BA4HZ"}