@transferwise/components 0.0.0-experimental-b18fbc4 → 0.0.0-experimental-10ec906

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/build/avatar/Avatar.js +1 -5
  2. package/build/avatar/Avatar.js.map +1 -1
  3. package/build/avatar/Avatar.mjs +1 -5
  4. package/build/avatar/Avatar.mjs.map +1 -1
  5. package/build/badge/Badge.js +1 -0
  6. package/build/badge/Badge.js.map +1 -1
  7. package/build/badge/Badge.mjs +1 -0
  8. package/build/badge/Badge.mjs.map +1 -1
  9. package/build/common/circle/Circle.js +4 -1
  10. package/build/common/circle/Circle.js.map +1 -1
  11. package/build/common/circle/Circle.mjs +4 -1
  12. package/build/common/circle/Circle.mjs.map +1 -1
  13. package/build/main.css +1 -1
  14. package/build/styles/common/circle/Circle.css +1 -1
  15. package/build/styles/main.css +1 -1
  16. package/build/types/avatar/Avatar.d.ts.map +1 -1
  17. package/build/types/common/circle/Circle.d.ts +8 -0
  18. package/build/types/common/circle/Circle.d.ts.map +1 -1
  19. package/package.json +3 -3
  20. package/src/avatar/Avatar.tsx +3 -5
  21. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +10 -10
  22. package/src/badge/Badge.tsx +1 -1
  23. package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap +10 -10
  24. package/src/common/circle/Circle.css +1 -1
  25. package/src/common/circle/Circle.less +6 -4
  26. package/src/common/circle/Circle.tsx +11 -1
  27. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +4 -4
  28. package/src/main.css +1 -1
  29. package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +2 -2
  30. package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +2 -2
package/build/avatar/Avatar.js CHANGED
@@ -3,10 +3,8 @@
3
3
  var clsx = require('clsx');
4
4
  var React = require('react');
5
5
  var Circle = require('../common/circle/Circle.js');
6
- var useMedia = require('../common/hooks/useMedia.js');
7
6
  var jsxRuntime = require('react/jsx-runtime');
8
7
  var colors = require('../common/colors.js');
9
- var breakpoint = require('../common/propsValues/breakpoint.js');
10
8
  var theme = require('../common/theme.js');
11
9
 
12
10
  const backwardsCompatibleSize = size => {
@@ -34,7 +32,6 @@ const Avatar = ({
34
32
  }) => {
35
33
  const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? colors.getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
36
34
  const size = backwardsCompatibleSize(sizeFromProps);
37
- useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
38
35
  return /*#__PURE__*/jsxRuntime.jsx(Circle, {
39
36
  size: size,
40
37
  fixedSize: true,
@@ -47,10 +44,9 @@ const Avatar = ({
47
44
  children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
48
45
  size: size,
49
46
  fixedSize: true,
47
+ iconSizing: false,
50
48
  className: "tw-avatar__content",
51
49
  style: {
52
- // @ts-expect-error CSS custom props allowed
53
- '--circle-icon-size': '16px',
54
50
  backgroundColor: backgroundColor || backgroundColorFromSeed
55
51
  },
56
52
  children: children
package/build/avatar/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Breakpoint, getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n className=\"tw-avatar__content\"\n style={{\n // @ts-expect-error CSS custom props allowed\n '--circle-icon-size': '16px',\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;;;AA8BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAC5BU,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,EAAC;EACxE,oBACEC,cAAA,CAACC,MAAM,EAAA;AACLrB,IAAAA,IAAI,EAAEA,IAAK;IACXsB,SAAS,EAAA,IAAA;AACTjB,IAAAA,SAAS,EAAEkB,SAAI,CAAC,WAAW,EAAElB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEkB,OAAO,CAACX,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBgB,cAAA,CAACC,MAAM,EAAA;AACLrB,MAAAA,IAAI,EAAEA,IAAK;MACXsB,SAAS,EAAA,IAAA;AACTjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BoB,MAAAA,KAAK,EAAE;AACL;AACA,QAAA,oBAAoB,EAAE,MAAM;QAC5BvB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
1
+ {"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","iconSizing","style"],"mappings":";;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,cAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,SAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,cAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTG,MAAAA,UAAU,EAAE,KAAM;AAClBjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
package/build/avatar/Avatar.mjs CHANGED
@@ -1,10 +1,8 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { useMemo } from 'react';
3
3
  import Circle from '../common/circle/Circle.mjs';
4
- import { useMedia } from '../common/hooks/useMedia.mjs';
5
4
  import { jsx } from 'react/jsx-runtime';
6
5
  import { getBrandColorFromSeed } from '../common/colors.mjs';
7
- import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
8
6
  import { Theme } from '../common/theme.mjs';
9
7
 
10
8
  const backwardsCompatibleSize = size => {
@@ -32,7 +30,6 @@ const Avatar = ({
32
30
  }) => {
33
31
  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
34
32
  const size = backwardsCompatibleSize(sizeFromProps);
35
- useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
36
33
  return /*#__PURE__*/jsx(Circle, {
37
34
  size: size,
38
35
  fixedSize: true,
@@ -45,10 +42,9 @@ const Avatar = ({
45
42
  children: /*#__PURE__*/jsx(Circle, {
46
43
  size: size,
47
44
  fixedSize: true,
45
+ iconSizing: false,
48
46
  className: "tw-avatar__content",
49
47
  style: {
50
- // @ts-expect-error CSS custom props allowed
51
- '--circle-icon-size': '16px',
52
48
  backgroundColor: backgroundColor || backgroundColorFromSeed
53
49
  },
54
50
  children: children
package/build/avatar/Avatar.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Breakpoint, getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n className=\"tw-avatar__content\"\n style={{\n // @ts-expect-error CSS custom props allowed\n '--circle-icon-size': '16px',\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","fixedSize","clsx","Boolean","style"],"mappings":";;;;;;;;;AA8BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAC5BU,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,EAAC;EACxE,oBACEC,GAAA,CAACC,MAAM,EAAA;AACLrB,IAAAA,IAAI,EAAEA,IAAK;IACXsB,SAAS,EAAA,IAAA;AACTjB,IAAAA,SAAS,EAAEkB,IAAI,CAAC,WAAW,EAAElB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEkB,OAAO,CAACX,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBgB,GAAA,CAACC,MAAM,EAAA;AACLrB,MAAAA,IAAI,EAAEA,IAAK;MACXsB,SAAS,EAAA,IAAA;AACTjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BoB,MAAAA,KAAK,EAAE;AACL;AACA,QAAA,oBAAoB,EAAE,MAAM;QAC5BvB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
1
+ {"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","clsx","Boolean","iconSizing","style"],"mappings":";;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,GAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTd,IAAAA,SAAS,EAAEe,IAAI,CAAC,WAAW,EAAEf,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEe,OAAO,CAACR,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,GAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTG,MAAAA,UAAU,EAAE,KAAM;AAClBjB,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
package/build/badge/Badge.js CHANGED
@@ -35,6 +35,7 @@ const Badge = ({
35
35
  }), /*#__PURE__*/jsxRuntime.jsx(Circle, {
36
36
  size: mapLegacySize[size$1],
37
37
  fixedSize: true,
38
+ iconSizing: false,
38
39
  className: "tw-badge__content",
39
40
  children: badge
40
41
  })]
package/build/badge/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: SizeSmall | DeprecatedSizes | SizeLarge;\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n // medium is deprecated, so we map it to small\n [String(Size.MEDIUM)]: 16,\n [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n}: BadgeProps) => {\n // medium is deprecated, so we map it to small\n const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes}>\n <div className=\"tw-badge__children\">{children}</div>\n <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n {badge}\n </Circle>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,cAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: SizeSmall | DeprecatedSizes | SizeLarge;\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n // medium is deprecated, so we map it to small\n [String(Size.MEDIUM)]: 16,\n [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n}: BadgeProps) => {\n // medium is deprecated, so we map it to small\n const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes}>\n <div className=\"tw-badge__children\">{children}</div>\n <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className=\"tw-badge__content\">\n {badge}\n </Circle>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize","iconSizing"],"mappings":";;;;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,SAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,MAAI,GAAGC,QAAQ,KAAKT,SAAI,CAACE,MAAM,GAAGF,SAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,MAAI,CAAA,CAAE,GAAGA,MAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,cAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,MAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACC,MAAAA,UAAU,EAAE,KAAM;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC1FT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/badge/Badge.mjs CHANGED
@@ -33,6 +33,7 @@ const Badge = ({
33
33
  }), /*#__PURE__*/jsx(Circle, {
34
34
  size: mapLegacySize[size],
35
35
  fixedSize: true,
36
+ iconSizing: false,
36
37
  className: "tw-badge__content",
37
38
  children: badge
38
39
  })]
package/build/badge/Badge.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: SizeSmall | DeprecatedSizes | SizeLarge;\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n // medium is deprecated, so we map it to small\n [String(Size.MEDIUM)]: 16,\n [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n}: BadgeProps) => {\n // medium is deprecated, so we map it to small\n const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes}>\n <div className=\"tw-badge__children\">{children}</div>\n <Circle size={mapLegacySize[size]} fixedSize className=\"tw-badge__content\">\n {badge}\n </Circle>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize"],"mappings":";;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,GAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACd,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EACvET,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport Circle, { CircleProps } from '../common/circle';\n\n/**\n * @deprecated Use `SizeSmall` or `SizeLarge` instead.\n */\ntype DeprecatedSizes = SizeMedium;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: SizeSmall | DeprecatedSizes | SizeLarge;\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n} & CommonProps;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n // medium is deprecated, so we map it to small\n [String(Size.MEDIUM)]: 16,\n [String(Size.LARGE)]: 24,\n} satisfies Record<string, CircleProps['size']>;\n\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n}: BadgeProps) => {\n // medium is deprecated, so we map it to small\n const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes}>\n <div className=\"tw-badge__children\">{children}</div>\n <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className=\"tw-badge__content\">\n {badge}\n </Circle>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","classes","clsx","_jsxs","_jsx","Circle","fixedSize","iconSizing"],"mappings":";;;;;;AA+BA,MAAMA,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB;AACA,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,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGT,IAAI,CAACC,KAAK;EAC3BS,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;AACvBC,EAAAA,QAAAA;AAAQ,CACG,KAAI;AACf;AACA,EAAA,MAAMN,IAAI,GAAGC,QAAQ,KAAKT,IAAI,CAACE,MAAM,GAAGF,IAAI,CAACC,KAAK,GAAGQ,QAAQ,CAAA;AAC7D,EAAA,MAAMM,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBN,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEW,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYJ,SAAU;AAACP,IAAAA,SAAS,EAAES,OAAQ;AAAAD,IAAAA,QAAA,gBAC7CI,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CACnD,eAAAI,GAAA,CAACC,MAAM,EAAA;AAACX,MAAAA,IAAI,EAAEV,aAAa,CAACU,IAAI,CAAE;MAACY,SAAS,EAAA,IAAA;AAACC,MAAAA,UAAU,EAAE,KAAM;AAACf,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC1FT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
package/build/common/circle/Circle.js CHANGED
@@ -20,6 +20,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
20
20
  children,
21
21
  size = 48,
22
22
  fixedSize = false,
23
+ iconSizing = true,
23
24
  className,
24
25
  style,
25
26
  ...props
@@ -33,7 +34,9 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
33
34
  '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
34
35
  ...style
35
36
  },
36
- className: clsx.clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
37
+ className: clsx.clsx('np-circle', {
38
+ 'np-circle-icons-size': iconSizing
39
+ }, 'd-flex align-items-center justify-content-center', className),
37
40
  children: children
38
41
  });
39
42
  });
package/build/common/circle/Circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n ...style,\n }}\n className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;AA0BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,cAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBM,cAAc,IAAI,CAACL,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGG,KAAAA;KACH;IACFD,SAAS,EAAES,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAET,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n /**\n * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point\n */\n iconSizing?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n iconSizing = true,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-icons-size': iconSizing },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","iconSizing","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;AA8BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,UAAU,GAAG,IAAI;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,sBAAsB,EAAEV,UAAAA;KAAY,EACtC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
package/build/common/circle/Circle.mjs CHANGED
@@ -18,6 +18,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
18
18
  children,
19
19
  size = 48,
20
20
  fixedSize = false,
21
+ iconSizing = true,
21
22
  className,
22
23
  style,
23
24
  ...props
@@ -31,7 +32,9 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
31
32
  '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
32
33
  ...style
33
34
  },
34
- className: clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
35
+ className: clsx('np-circle', {
36
+ 'np-circle-icons-size': iconSizing
37
+ }, 'd-flex align-items-center justify-content-center', className),
35
38
  children: children
36
39
  });
37
40
  });
package/build/common/circle/Circle.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n ...style,\n }}\n className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA0BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,GAAA,CAACZ,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBM,cAAc,IAAI,CAACL,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGG,KAAAA;KACH;IACFD,SAAS,EAAES,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAET,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n /**\n * Modify underlying element, `div` by default\n */\n as?: React.ElementType;\n /**\n * Set size of the circle in px, `48` by default\n */\n size?: ShapeSize;\n /**\n * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n * as those can be dynamic a at certain viewport sizes\n */\n fixedSize?: boolean;\n /**\n * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point\n */\n iconSizing?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n 16: 12,\n 24: 16,\n 32: 18,\n 40: 20,\n 48: 24,\n 56: 28,\n 72: 36,\n};\n\nconst Circle = forwardRef(function Circle(\n {\n as: Element = 'div',\n children,\n size = 48,\n fixedSize = false,\n iconSizing = true,\n className,\n style,\n ...props\n }: Props,\n ref,\n) {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <Element\n {...props}\n ref={ref}\n style={{\n '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n '--circle-icon-size':\n isTinyViewport && !fixedSize\n ? `${MAP_ICON_SIZE[size] / 2}px`\n : `${MAP_ICON_SIZE[size]}px`,\n ...style,\n }}\n className={clsx(\n 'np-circle',\n { 'np-circle-icons-size': iconSizing },\n 'd-flex align-items-center justify-content-center',\n className,\n )}\n >\n {children}\n </Element>\n );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","iconSizing","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA8BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAA;CACL,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,UAAU,GAAG,IAAI;EACjBC,SAAS;EACTC,KAAK;EACL,GAAGC,KAAAA;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGP,aAAa,CAACM,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAI,EAAA,CAAA;MAChC,GAAGI,KAAAA;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,sBAAsB,EAAEV,UAAAA;KAAY,EACtC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
package/build/main.css CHANGED
@@ -1169,7 +1169,7 @@ div.critical-comms .critical-comms-body {
1169
1169
  height: var(--circle-size);
1170
1170
  flex-shrink: 0;
1171
1171
  }
1172
- .np-circle .tw-icon > svg {
1172
+ .np-circle-icons-size .tw-icon > svg {
1173
1173
  height: var(--circle-icon-size);
1174
1174
  width: var(--circle-icon-size);
1175
1175
  }
package/build/styles/common/circle/Circle.css CHANGED
@@ -5,7 +5,7 @@
5
5
  height: var(--circle-size);
6
6
  flex-shrink: 0;
7
7
  }
8
- .np-circle .tw-icon > svg {
8
+ .np-circle-icons-size .tw-icon > svg {
9
9
  height: var(--circle-icon-size);
10
10
  width: var(--circle-icon-size);
11
11
  }
package/build/styles/main.css CHANGED
@@ -1169,7 +1169,7 @@ div.critical-comms .critical-comms-body {
1169
1169
  height: var(--circle-size);
1170
1170
  flex-shrink: 0;
1171
1171
  }
1172
- .np-circle .tw-icon > svg {
1172
+ .np-circle-icons-size .tw-icon > svg {
1173
1173
  height: var(--circle-icon-size);
1174
1174
  width: var(--circle-icon-size);
1175
1175
  }
package/build/types/avatar/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
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,CA6CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/build/types/common/circle/Circle.d.ts CHANGED
@@ -14,6 +14,10 @@ export type Props = {
14
14
  * as those can be dynamic a at certain viewport sizes
15
15
  */
16
16
  fixedSize?: boolean;
17
+ /**
18
+ * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
19
+ */
20
+ iconSizing?: boolean;
17
21
  } & HTMLAttributes<HTMLDivElement>;
18
22
  declare const Circle: import("react").ForwardRefExoticComponent<{
19
23
  /**
@@ -29,6 +33,10 @@ declare const Circle: import("react").ForwardRefExoticComponent<{
29
33
  * as those can be dynamic a at certain viewport sizes
30
34
  */
31
35
  fixedSize?: boolean;
36
+ /**
37
+ * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
38
+ */
39
+ iconSizing?: boolean;
32
40
  } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
33
41
  export default Circle;
34
42
  //# sourceMappingURL=Circle.d.ts.map
package/build/types/common/circle/Circle.d.ts.map CHANGED
@@ -1 +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;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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-b18fbc4",
3
+ "version": "0.0.0-experimental-10ec906",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -91,9 +91,9 @@
91
91
  "rollup": "^4.18.1",
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
- "@transferwise/neptune-css": "14.19.1",
94
+ "@transferwise/less-config": "3.1.0",
95
95
  "@wise/components-theming": "1.6.1",
96
- "@transferwise/less-config": "3.1.0"
96
+ "@transferwise/neptune-css": "14.19.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
package/src/avatar/Avatar.tsx CHANGED
@@ -1,10 +1,9 @@
1
1
  import { clsx } from 'clsx';
2
2
  import { useMemo } from 'react';
3
3
 
4
- import { Breakpoint, getBrandColorFromSeed, Theme } from '../common';
4
+ import { getBrandColorFromSeed, Theme } from '../common';
5
5
 
6
6
  import Circle from '../common/circle';
7
- import { useMedia } from '../common/hooks/useMedia';
8
7
 
9
8
  type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
10
9
 
@@ -64,7 +63,7 @@ const Avatar: React.FC<AvatarProps> = ({
64
63
  );
65
64
 
66
65
  const size = backwardsCompatibleSize(sizeFromProps);
67
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
66
+
68
67
  return (
69
68
  <Circle
70
69
  size={size}
@@ -79,10 +78,9 @@ const Avatar: React.FC<AvatarProps> = ({
79
78
  <Circle
80
79
  size={size}
81
80
  fixedSize
81
+ iconSizing={false}
82
82
  className="tw-avatar__content"
83
83
  style={{
84
- // @ts-expect-error CSS custom props allowed
85
- '--circle-icon-size': '16px',
86
84
  backgroundColor: backgroundColor || backgroundColorFromSeed,
87
85
  }}
88
86
  >
package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap CHANGED
@@ -2,12 +2,12 @@
2
2
 
3
3
  exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
4
4
  <div
5
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
5
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
6
6
  style="--circle-size: 48px; --circle-icon-size: 24px;"
7
7
  >
8
8
  <div
9
9
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
10
- style="--circle-size: 48px; --circle-icon-size: 16px;"
10
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
11
11
  >
12
12
  <img
13
13
  alt=""
@@ -19,12 +19,12 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
19
19
 
20
20
  exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
21
21
  <div
22
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
22
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
23
23
  style="--circle-size: 48px; --circle-icon-size: 24px;"
24
24
  >
25
25
  <div
26
26
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
27
- style="--circle-size: 48px; --circle-icon-size: 16px;"
27
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
28
28
  >
29
29
  <span
30
30
  class="tw-icon tw-icon-briefcase "
@@ -50,12 +50,12 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
50
50
 
51
51
  exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
52
52
  <div
53
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
53
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
54
54
  style="--circle-size: 48px; --circle-icon-size: 24px;"
55
55
  >
56
56
  <div
57
57
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
58
- style="--circle-size: 48px; --circle-icon-size: 16px;"
58
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
59
59
  >
60
60
  <span
61
61
  class="tw-icon tw-icon-person "
@@ -87,12 +87,12 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
87
87
  class="tw-badge__children"
88
88
  >
89
89
  <div
90
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
90
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
91
91
  style="--circle-size: 48px; --circle-icon-size: 24px;"
92
92
  >
93
93
  <div
94
94
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
95
- style="--circle-size: 48px; --circle-icon-size: 16px;"
95
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
96
96
  >
97
97
  <span
98
98
  class="tw-icon tw-icon-person "
@@ -129,12 +129,12 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
129
129
 
130
130
  exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
131
131
  <div
132
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
132
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
133
133
  style="--circle-size: 48px; --circle-icon-size: 24px;"
134
134
  >
135
135
  <div
136
136
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
137
- style="--circle-size: 48px; --circle-icon-size: 16px;"
137
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
138
138
  >
139
139
  <span
140
140
  class="tw-icon tw-icon-person "
package/src/badge/Badge.tsx CHANGED
@@ -58,7 +58,7 @@ const Badge = ({
58
58
  return (
59
59
  <div aria-label={ariaLabel} className={classes}>
60
60
  <div className="tw-badge__children">{children}</div>
61
- <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
61
+ <Circle size={mapLegacySize[size]} fixedSize iconSizing={false} className="tw-badge__content">
62
62
  {badge}
63
63
  </Circle>
64
64
  </div>
package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap CHANGED
@@ -7,7 +7,7 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
7
7
  >
8
8
  <input
9
9
  aria-label="Add money"
10
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
10
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
11
11
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
12
12
  type="button"
13
13
  />
@@ -45,7 +45,7 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
45
45
  >
46
46
  <input
47
47
  aria-label="Add money"
48
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
48
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
49
49
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
50
50
  type="button"
51
51
  />
@@ -83,7 +83,7 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
83
83
  >
84
84
  <input
85
85
  aria-label="Add money"
86
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
86
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
87
87
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
88
88
  type="button"
89
89
  />
@@ -121,7 +121,7 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
121
121
  >
122
122
  <input
123
123
  aria-label="Add money"
124
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
124
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
125
125
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
126
126
  type="button"
127
127
  />
@@ -159,7 +159,7 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
159
159
  >
160
160
  <input
161
161
  aria-label="Add money"
162
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
162
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
163
163
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
164
164
  type="button"
165
165
  />
@@ -197,7 +197,7 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
197
197
  >
198
198
  <input
199
199
  aria-label="Add money"
200
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
200
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
201
201
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
202
202
  type="button"
203
203
  />
@@ -235,7 +235,7 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
235
235
  >
236
236
  <input
237
237
  aria-label="Add money"
238
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
238
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
239
239
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
240
240
  type="button"
241
241
  />
@@ -273,7 +273,7 @@ exports[`CircularButton types renders accent buttons 1`] = `
273
273
  >
274
274
  <input
275
275
  aria-label="Add money"
276
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
276
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
277
277
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
278
278
  type="button"
279
279
  />
@@ -311,7 +311,7 @@ exports[`CircularButton types renders negative buttons 1`] = `
311
311
  >
312
312
  <input
313
313
  aria-label="Add money"
314
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
314
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
315
315
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
316
316
  type="button"
317
317
  />
@@ -349,7 +349,7 @@ exports[`CircularButton types renders positive buttons 1`] = `
349
349
  >
350
350
  <input
351
351
  aria-label="Add money"
352
- class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
352
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
353
353
  style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
354
354
  type="button"
355
355
  />
package/src/common/circle/Circle.css CHANGED
@@ -5,7 +5,7 @@
5
5
  height: var(--circle-size);
6
6
  flex-shrink: 0;
7
7
  }
8
- .np-circle .tw-icon > svg {
8
+ .np-circle-icons-size .tw-icon > svg {
9
9
  height: var(--circle-icon-size);
10
10
  width: var(--circle-icon-size);
11
11
  }
package/src/common/circle/Circle.less CHANGED
@@ -4,9 +4,11 @@
4
4
  height: var(--circle-size);
5
5
  flex-shrink: 0;
6
6
 
7
- // has custom icon sizes
8
- .tw-icon > svg {
9
- height: var(--circle-icon-size);
10
- width: var(--circle-icon-size);
7
+ &-icons-size {
8
+ // has custom icon sizes
9
+ .tw-icon > svg {
10
+ height: var(--circle-icon-size);
11
+ width: var(--circle-icon-size);
12
+ }
11
13
  }
12
14
  }
package/src/common/circle/Circle.tsx CHANGED
@@ -19,6 +19,10 @@ export type Props = {
19
19
  * as those can be dynamic a at certain viewport sizes
20
20
  */
21
21
  fixedSize?: boolean;
22
+ /**
23
+ * This property is temporary, as some components (e.g legacy Avatar) doesn't need new icon sizing, we delete it at some point
24
+ */
25
+ iconSizing?: boolean;
22
26
  } & HTMLAttributes<HTMLDivElement>;
23
27
 
24
28
  /**
@@ -40,6 +44,7 @@ const Circle = forwardRef(function Circle(
40
44
  children,
41
45
  size = 48,
42
46
  fixedSize = false,
47
+ iconSizing = true,
43
48
  className,
44
49
  style,
45
50
  ...props
@@ -59,7 +64,12 @@ const Circle = forwardRef(function Circle(
59
64
  : `${MAP_ICON_SIZE[size]}px`,
60
65
  ...style,
61
66
  }}
62
- className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
67
+ className={clsx(
68
+ 'np-circle',
69
+ { 'np-circle-icons-size': iconSizing },
70
+ 'd-flex align-items-center justify-content-center',
71
+ className,
72
+ )}
63
73
  >
64
74
  {children}
65
75
  </Element>
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -21,12 +21,12 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
21
21
  class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
22
22
  >
23
23
  <div
24
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
24
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
25
25
  style="--circle-size: 48px; --circle-icon-size: 24px;"
26
26
  >
27
27
  <div
28
28
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
29
- style="--circle-size: 48px; --circle-icon-size: 16px;"
29
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
30
30
  >
31
31
  TM
32
32
  </div>
@@ -138,12 +138,12 @@ exports[`FlowNavigation renders as expected 1`] = `
138
138
  class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
139
139
  >
140
140
  <div
141
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
141
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
142
142
  style="--circle-size: 48px; --circle-icon-size: 24px;"
143
143
  >
144
144
  <div
145
145
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
146
- style="--circle-size: 48px; --circle-icon-size: 16px;"
146
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
147
147
  >
148
148
  TM
149
149
  </div>
package/src/main.css CHANGED
@@ -1169,7 +1169,7 @@ div.critical-comms .critical-comms-body {
1169
1169
  height: var(--circle-size);
1170
1170
  flex-shrink: 0;
1171
1171
  }
1172
- .np-circle .tw-icon > svg {
1172
+ .np-circle-icons-size .tw-icon > svg {
1173
1173
  height: var(--circle-icon-size);
1174
1174
  width: var(--circle-icon-size);
1175
1175
  }
package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap CHANGED
@@ -18,12 +18,12 @@ exports[`OverlayHeader renders as expected 1`] = `
18
18
  class="d-flex align-items-center order-2"
19
19
  >
20
20
  <div
21
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
21
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
22
22
  style="--circle-size: 48px; --circle-icon-size: 24px;"
23
23
  >
24
24
  <div
25
25
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
26
- style="--circle-size: 48px; --circle-icon-size: 16px;"
26
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
27
27
  >
28
28
  TM
29
29
  </div>
package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap CHANGED
@@ -34,12 +34,12 @@ exports[`Radio shows the avatar when supplied 1`] = `
34
34
  class="np-radio__avatar m-l-auto"
35
35
  >
36
36
  <div
37
- class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
37
+ class="np-circle np-circle-icons-size d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
38
38
  style="--circle-size: 48px; --circle-icon-size: 24px;"
39
39
  >
40
40
  <div
41
41
  class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
42
- style="--circle-size: 48px; --circle-icon-size: 16px;"
42
+ style="--circle-size: 48px; --circle-icon-size: 24px;"
43
43
  >
44
44
  HD
45
45
  </div>