@transferwise/components 0.0.0-experimental-daa78e3 → 0.0.0-experimental-c76c3bc

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);

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.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;AAUjE,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"}
+{"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"}

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-daa78e3",
+  "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/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, Field, SelectInput } from '..';
+import { Button } from '..';
 import Alert, { AlertArrowPosition } from './Alert';
 
 export default {
@@ -109,41 +109,23 @@ 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 (AT), its dynamic contents
+ * Once present in the accessibility tree, 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((current) => !current)}>
+        <Button htmlType="button" onClick={() => setIsActive((value) => !value)}>
           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" />
       </>
     );
@@ -152,30 +134,18 @@ 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((current) => !current)}>
+      <Button htmlType="button" onClick={() => setIsActive(value => !value)}>
         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

@@ -7,7 +7,6 @@ import { CloseButton } from '../common/closeButton';
 import StatusIcon from '../statusIcon';
 import Title from '../title/Title';
 import { logActionRequired } from '../utilities';
-import { WDS_LIVE_REGION_DELAY_MS } from '../constants';
 
 import InlineMarkdown from './inlineMarkdown';
 import { Action } from '../common/action/Action';
@@ -132,22 +131,13 @@ export default function Alert({
     }
   }, [resolvedType, type]);
 
-  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 [shouldFire, setShouldFire] = useState(false);
 
   const closeButtonReference = useRef<HTMLButtonElement>(null);
 
   return (
     <div role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}>
-      {shouldShow && (
+      {active && (
         <div
           className={clsx(
             'alert d-flex',

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}

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

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

package/src/common/circle/Circle.css

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

package/src/common/circle/Circle.less

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

package/src/common/circle/Circle.tsx

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