@transferwise/components 0.0.0-experimental-1a9f157 → 0.0.0-experimental-2975c15

package/build/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 12px;
-    top: var(--size-12);
+    top: 8px;
+    top: var(--size-8);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,10 +1169,6 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
-.np-circle-icons-size .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
-}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4159,6 +4155,12 @@ 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);
 }
@@ -4174,6 +4176,20 @@ 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

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

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';\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 = 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,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,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;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,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ,CAAA;EAChD,oBACEO,cAAA,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,SAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,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';\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,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,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;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,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/statusIcon/StatusIcon.mjs

@@ -23,17 +23,17 @@ const mapLegacySize = {
 };
 const StatusIcon = ({
   sentiment = 'neutral',
-  size: sizeProp = 40
+  size: sizeProp = 'md'
 }) => {
   const Icon = iconTypeMap[sentiment];
   const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
-  const size = mapLegacySize[sizeProp] ?? sizeProp;
+  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return /*#__PURE__*/jsx(Circle, {
     as: "span",
-    size: isTinyViewport && size < 40 ? 32 : size,
+    size: size,
     "data-testid": "status-icon",
-    className: clsx('status-circle', 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, 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 = 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,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ,CAAA;EAChD,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;;;;"}
+{"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/circularButton/CircularButton.css

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

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

@@ -5,7 +5,3 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
-.np-circle-icons-size .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: 12px;
-    top: var(--size-12);
+    top: 8px;
+    top: var(--size-8);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,10 +1169,6 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
-.np-circle-icons-size .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
-}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4159,6 +4155,12 @@ 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);
 }
@@ -4174,6 +4176,20 @@ 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,3 +1,9 @@
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -13,6 +19,20 @@
 .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.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,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,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,4LAA4L;IAC5L,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,GACd,EAAE,UAAU,+BAyGZ"}
+{"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,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,4LAA4L;IAC5L,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,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,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,EACnB,MAAa,GACd,EAAE,UAAU,+BAkHZ"}

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,CA8CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"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"}

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 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 export type Props = {
     /**
      * Modify underlying element, `div` by default
@@ -14,10 +14,6 @@ export type Props = {
      * as those can be dynamic a at certain viewport sizes
      */
     fixedSize?: boolean;
-    /**
-     * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
-     */
-    iconSizing?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Circle: import("react").ForwardRefExoticComponent<{
     /**
@@ -33,10 +29,6 @@ declare const Circle: import("react").ForwardRefExoticComponent<{
      * as those can be dynamic a at certain viewport sizes
      */
     fixedSize?: boolean;
-    /**
-     * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
-     */
-    iconSizing?: boolean;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
 export default Circle;
 //# sourceMappingURL=Circle.d.ts.map

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;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;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAenC,QAAA,MAAM,MAAM;IAhCV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;IACnB;;OAEG;iBACU,OAAO;4EAoDpB,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;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/constants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file holds repository-wide constants that are reusable by more than 1 component.
+ */
+/**
+ * A delay [ms] after which it's OK to update a live region content,
+ * taking under consideration delayed programmatic refocusing
+ * of triggering components (e.g., SelectInput) and Accessibility
+ * Tree updates that prevent the screen reader announcements.
+ */
+export declare const WDS_LIVE_REGION_DELAY_MS = 175;
+//# sourceMappingURL=constants.d.ts.map

package/build/types/common/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/common/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC"}

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

@@ -14,6 +14,7 @@ export * from "./locale";
 export * from "./commonProps";
 export * from "./initials";
 export * from "./colors";
+export * from "./constants";
 export { Breakpoint } from "./propsValues/breakpoint";
 export { Type } from "./propsValues/type";
 export { DateMode } from "./propsValues/dateMode";
@@ -23,5 +24,6 @@ export { Sentiment } from "./propsValues/sentiment";
 export { Variant } from "./propsValues/variant";
 export { MarkdownNodeType } from "./propsValues/markdownNodeType";
 export { FileType } from "./fileType";
+export { CloseButton } from "./closeButton";
 export { addNoScrollClass, removeNoScrollClass } from "./DOMOperations";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,7 @@
 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?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
+    sentiment: `${Sentiment}`;
+    size: SizeSmall | SizeMedium | SizeLarge;
 };
 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;;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,gCAelF,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": "0.0.0-experimental-1a9f157",
+  "version": "0.0.0-experimental-2975c15",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.1",
-    "@transferwise/neptune-css": "14.19.1"
+    "@transferwise/neptune-css": "14.19.1",
+    "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/alert/Alert.spec.story.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { userEvent, within, expect, waitFor } from '@storybook/test';
+import { Button, Field, SelectInput, Sentiment } from '..';
+import Alert from './Alert';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Feedback/Alert/tests',
+  component: Alert,
+  argTypes: {},
+  args: {
+    type: Sentiment.POSITIVE,
+    active: true,
+    message: 'Payments sent to your bank details today might not arrive in time for the holidays.',
+  },
+} satisfies Meta<typeof Alert>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+export const SimpleTrigger: Story = {
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+      <>
+        <Button htmlType="button" onClick={() => setIsActive(true)}>
+          Trigger Alert
+        </Button>
+
+        <Alert {...args} active={isActive} className="m-t-4" />
+      </>
+    );
+  },
+};
+
+export const ComplexTrigger: Story = {
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await wait();
+    await userEvent.tab();
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{ArrowDown}');
+    await wait();
+    await userEvent.keyboard('{Enter}');
+
+    await waitFor(async () => expect(canvas.getByText(args.message || '')).toBeInTheDocument());
+  },
+  render: function Render(args) {
+    const [isActive, setIsActive] = useState(false);
+    const [value, setValue] = useState<string>();
+
+    return (
+      <>
+        <Field label="Select option to triger Alert">
+          <SelectInput
+            items={[
+              { type: 'option', value: 'one' },
+              { type: 'option', value: 'two' },
+            ]}
+            onChange={setValue}
+            onClose={() => setIsActive(Boolean(value))}
+          />
+        </Field>
+
+        <Alert {...args} active={isActive} className="m-t-2" />
+      </>
+    );
+  },
+};

package/src/alert/Alert.story.tsx

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import { ClockBorderless } from '@transferwise/icons';
 
 import { Sentiment } from '../common';
-import { Button } from '..';
+import { Button, Field, SelectInput } from '..';
 import Alert, { AlertArrowPosition } from './Alert';
 
 export default {
@@ -109,23 +109,41 @@ export const WithTitle: Story = {
  * For ARIA live region to function correctly with screen readers,
  * the container with an appropriate ARIA role (in the case of this
  * component, it's `status` or `alert`) must be rendered first.
- * Once present in the accessibility tree, its dynamic contents
+ * Once present in the accessibility tree (AT), its dynamic contents
  * will be announced correctly.
  *
  * Because of that, using logical AND (&&) operator is discouraged
  * and, instead, engineers should toggle the `active` prop which
  * provides that logic internally.
+ *
+ * We're additionally adding a small delay (175ms) between toggling
+ * the `active` prop and actual DOM injection to compensate for some
+ * common triggers like e.g. `SelectInput`. Those components affect
+ * the AT and have programmatic focus control, which prevents the
+ * screen readers from announcing simultaneous changes on the page.
  */
 export const ConditionallyRendered: Story = {
   render: function Render(args) {
     const [isActive, setIsActive] = useState(false);
+    const [value, setValue] = useState<string>();
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive((value) => !value)}>
+        <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
           Trigger Alert
         </Button>
 
+        <Field label="Select `two` to triger Alert" className="m-t-3">
+          <SelectInput
+            items={[
+              { type: 'option', value: 'one' },
+              { type: 'option', value: 'two' },
+            ]}
+            onChange={setValue}
+            onClose={() => setIsActive(value === 'two')}
+          />
+        </Field>
+
         <Alert {...args} active={isActive} className="m-t-5" />
       </>
     );
@@ -134,18 +152,30 @@ export const ConditionallyRendered: Story = {
     docs: {
       source: {
         code: `
-function Render (args) {
+function Render(args) {
   const [isActive, setIsActive] = useState(false);
+  const [value, setValue] = useState<string>();
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsActive(value => !value)}>
+      <Button htmlType="button" onClick={() => setIsActive((current) => !current)}>
         Trigger Alert
       </Button>
 
+      <Field label="Select 'two' to triger Alert" className="m-t-3">
+        <SelectInput
+          items={[
+            { type: 'option', value: 'one' },
+            { type: 'option', value: 'two' },
+          ]}
+          onChange={setValue}
+          onClose={() => setIsActive(value === 'two')}
+        />
+      </Field>
+
       <Alert {...args} active={isActive} className="m-t-5" />
     </>
-  )
+  );
 }`,
       },
     },

package/src/alert/Alert.tsx

@@ -2,8 +2,15 @@ import { clsx } from 'clsx';
 import { useState, useRef, useEffect } from 'react';
 
 import Body from '../body/Body';
-import { Sentiment, Size, Typography, Variant } from '../common';
-import { CloseButton } from '../common/closeButton';
+import {
+  CloseButton,
+  Sentiment,
+  Size,
+  Typography,
+  Variant,
+  WDS_LIVE_REGION_DELAY_MS,
+} from '../common';
+
 import StatusIcon from '../statusIcon';
 import Title from '../title/Title';
 import { logActionRequired } from '../utilities';
@@ -131,13 +138,22 @@ export default function Alert({
     }
   }, [resolvedType, type]);
 
-  const [shouldFire, setShouldFire] = useState(false);
+  const [shouldFire, setShouldFire] = useState<boolean>();
+
+  const [shouldShow, setShouldShow] = useState<boolean>();
+  useEffect(() => {
+    if (shouldShow === undefined || !active) {
+      setShouldShow(active);
+    } else {
+      setTimeout(() => setShouldShow(active), WDS_LIVE_REGION_DELAY_MS);
+    }
+  }, [active, shouldShow]);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
     <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
-      {active && (
+      {shouldShow && (
         <div
           className={clsx(
             'alert d-flex',

package/src/avatar/Avatar.spec.tsx

@@ -1,12 +1,10 @@
 import { Size } from '../common';
-import { render, screen, mockMatchMedia } from '../test-utils';
+import { render, screen } 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

@@ -68,7 +68,6 @@ const Avatar: React.FC<AvatarProps> = ({
     <Circle
       size={size}
       fixedSize
-      iconSizing={false}
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -79,7 +78,6 @@ const Avatar: React.FC<AvatarProps> = ({
       <Circle
         size={size}
         fixedSize
-        iconSizing={false}
         className="tw-avatar__content"
         style={{
           backgroundColor: backgroundColor || backgroundColorFromSeed,