@transferwise/components 0.0.0-experimental-ee20015 → 0.0.0-experimental-8169a99

package/build/avatar/Avatar.js

@@ -34,6 +34,7 @@ const Avatar = ({
   const size = backwardsCompatibleSize(sizeFromProps);
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     size: size,
+    fixedSize: true,
     className: clsx.clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -42,6 +43,7 @@ const Avatar = ({
     "aria-label": ariaLabel,
     children: /*#__PURE__*/jsxRuntime.jsx(Circle, {
       size: size,
+      fixedSize: true,
       className: "tw-avatar__content",
       style: {
         backgroundColor: backgroundColor || backgroundColorFromSeed

package/build/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <Circle\n      size={size}\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        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","getAvatarColorFromSeed","undefined","_jsx","Circle","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,GACnC,CAAOY,IAAAA,EAAAA,6BAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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;AACXK,IAAAA,SAAS,EAAEc,SAAI,CAAC,WAAW,EAAEd,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEc,OAAO,CAACP,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;AACXK,MAAAA,SAAS,EAAC,oBAAoB;AAC9BgB,MAAAA,KAAK,EAAE;QACLnB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(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        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","getAvatarColorFromSeed","undefined","_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,GACnC,CAAOY,IAAAA,EAAAA,6BAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/avatar/Avatar.mjs

@@ -32,6 +32,7 @@ const Avatar = ({
   const size = backwardsCompatibleSize(sizeFromProps);
   return /*#__PURE__*/jsx(Circle, {
     size: size,
+    fixedSize: true,
     className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
       'tw-avatar--outlined': outlined,
       'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -40,6 +41,7 @@ const Avatar = ({
     "aria-label": ariaLabel,
     children: /*#__PURE__*/jsx(Circle, {
       size: size,
+      fixedSize: true,
       className: "tw-avatar__content",
       style: {
         backgroundColor: backgroundColor || backgroundColorFromSeed

package/build/avatar/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`\n        : undefined,\n    [backgroundColor, backgroundColorSeed],\n  );\n\n  const size = backwardsCompatibleSize(sizeFromProps);\n\n  return (\n    <Circle\n      size={size}\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        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","getAvatarColorFromSeed","undefined","_jsx","Circle","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,GACnC,CAAOY,IAAAA,EAAAA,sBAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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;AACXK,IAAAA,SAAS,EAAEc,IAAI,CAAC,WAAW,EAAEd,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEc,OAAO,CAACP,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;AACXK,MAAAA,SAAS,EAAC,oBAAoB;AAC9BgB,MAAAA,KAAK,EAAE;QACLnB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { Theme } from '../common';\n\nimport { getAvatarColorFromSeed } from './colors';\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        ? `var(${getAvatarColorFromSeed(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        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","getAvatarColorFromSeed","undefined","_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,GACnC,CAAOY,IAAAA,EAAAA,sBAAsB,CAACZ,mBAAmB,CAAC,CAAG,CAAA,CAAA,GACrDa,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;AACTd,MAAAA,SAAS,EAAC,oBAAoB;AAC9BiB,MAAAA,KAAK,EAAE;QACLpB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/badge/Badge.js

@@ -34,6 +34,7 @@ const Badge = ({
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Circle, {
       size: mapLegacySize[size$1],
+      fixedSize: true,
       className: "tw-badge__content",
       children: badge
     })]

package/build/badge/Badge.js.map

@@ -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]} 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"],"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;AAACF,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC7DT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"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;;;;"}

package/build/badge/Badge.mjs

@@ -32,6 +32,7 @@ const Badge = ({
       children: children
     }), /*#__PURE__*/jsx(Circle, {
       size: mapLegacySize[size],
+      fixedSize: true,
       className: "tw-badge__content",
       children: badge
     })]

package/build/badge/Badge.mjs.map

@@ -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]} 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"],"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;AAACF,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAC7DT,KAAAA;AAAK,KACA,CACV,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"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;;;;"}

package/build/common/circle/Circle.js

@@ -8,6 +8,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   as: Element = 'div',
   children,
   size = 48,
+  fixedSize = false,
   className,
   style,
   ...props
@@ -17,7 +18,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
     ref: ref,
     style: {
       ...style,
-      '--circle-size': `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
     },
     className: clsx.clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
     children: children

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\n/**\n * Same sizes as `--size-*` tokens\n */\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  { as: Element = 'div', children, size = 48, className, style, ...props }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': `var(--size-${size})` }}\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":["Circle","forwardRef","as","Element","children","size","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAaA,MAAMA,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC/EC,GAAG,EAAA;EAEH,oBACEC,cAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAE,cAAcF,IAAI,CAAA,CAAA,CAAA;KAAM;IAC5DC,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAF,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\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  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\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":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAWA,MAAMA,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,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,SAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs

@@ -6,6 +6,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
   as: Element = 'div',
   children,
   size = 48,
+  fixedSize = false,
   className,
   style,
   ...props
@@ -15,7 +16,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
     ref: ref,
     style: {
       ...style,
-      '--circle-size': `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
     },
     className: clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
     children: children

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\n/**\n * Same sizes as `--size-*` tokens\n */\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Circle = forwardRef(function Circle(\n  { as: Element = 'div', children, size = 48, className, style, ...props }: Props,\n  ref,\n) {\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': `var(--size-${size})` }}\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":["Circle","forwardRef","as","Element","children","size","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAaA,MAAMA,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAEC,KAAK;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAC/EC,GAAG,EAAA;EAEH,oBACEC,GAAA,CAACP,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAE,cAAcF,IAAI,CAAA,CAAA,CAAA;KAAM;IAC5DC,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAF,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;\n\nexport type Props = {\n  as?: React.ElementType;\n  size?: ShapeSize;\n  fixedSize?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\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  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}\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":["Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAWA,MAAMA,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,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AAAE,MAAA,GAAGA,KAAK;MAAE,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,cAAcA,IAAI,CAAA,CAAA,CAAA;KAAM;IACtFE,SAAS,EAAEK,IAAI,CAAC,WAAW,EAAE,kDAAkD,EAAEL,SAAS,CAAE;AAAAH,IAAAA,QAAA,EAE3FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd,CAAC;;;;"}

package/build/types/avatar/Avatar.d.ts.map

@@ -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,CA0CjC,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,CA4CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,15 +1,14 @@
 import { HTMLAttributes } from 'react';
-/**
- * Same sizes as `--size-*` tokens
- */
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 export type Props = {
     as?: React.ElementType;
     size?: ShapeSize;
+    fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Circle: import("react").ForwardRefExoticComponent<{
     as?: React.ElementType;
     size?: ShapeSize;
+    fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
 export default Circle;
 //# sourceMappingURL=Circle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD;;GAEG;AACH,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,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;SAJL,KAAK,CAAC,WAAW;WACf,SAAS;4EAiBhB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM;SALL,KAAK,CAAC,WAAW;WACf,SAAS;gBACJ,OAAO;4EAyBnB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-ee20015",
+  "version": "0.0.0-experimental-8169a99",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-ee20015",
+    "@transferwise/neptune-css": "0.0.0-experimental-8169a99",
     "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-ee20015",
+    "@transferwise/neptune-css": "0.0.0-experimental-8169a99",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatar/Avatar.tsx

@@ -68,6 +68,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <Circle
       size={size}
+      fixedSize
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -77,6 +78,7 @@ const Avatar: React.FC<AvatarProps> = ({
     >
       <Circle
         size={size}
+        fixedSize
         className="tw-avatar__content"
         style={{
           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: var(--size-48);"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: var(--size-48);"
+    style="--circle-size: 48px;"
   >
     <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: var(--size-48);"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: var(--size-48);"
+    style="--circle-size: 48px;"
   >
     <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: var(--size-48);"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: var(--size-48);"
+    style="--circle-size: 48px;"
   >
     <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: var(--size-48);"
+      style="--circle-size: 48px;"
     >
       <div
         class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: var(--size-48);"
+        style="--circle-size: 48px;"
       >
         <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: var(--size-24);"
+    style="--circle-size: 24px;"
   >
     <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: var(--size-48);"
+  style="--circle-size: 48px;"
 >
   <div
     class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: var(--size-48);"
+    style="--circle-size: 48px;"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.tsx

@@ -58,7 +58,7 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <Circle size={mapLegacySize[size]} className="tw-badge__content">
+      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}
       </Circle>
     </div>

package/src/common/circle/Circle.story.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { storyConfig } from '../../test-utils';
+import Circle from './Circle';
+import { Profile } from '@transferwise/icons';
+
+export default {
+  title: 'Internal/Circle',
+} satisfies Meta<typeof Circle>;
+
+type Story = StoryObj<typeof Circle>;
+
+export const Basic: Story = storyConfig(
+  {
+    render: () => {
+      const content = <Profile size={16} />;
+      const style = { border: '1px solid var(--color-border-neutral)' };
+      return (
+        <table border={0} cellPadding="0" cellSpacing="0">
+          <tr>
+            <td>
+              <Circle size={32} style={style}>
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle size={40} style={style}>
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle size={48} style={style}>
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle size={56} style={style}>
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle size={72} style={style}>
+                {content}
+              </Circle>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <Circle
+                as="button"
+                style={style}
+                className="bg-neutral"
+                size={32}
+                onClick={() => alert('button instance')}
+              >
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle
+                as="button"
+                style={style}
+                className="bg-neutral"
+                size={40}
+                onClick={() => alert('button instance')}
+              >
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle
+                as="button"
+                style={style}
+                className="bg-neutral"
+                size={48}
+                onClick={() => alert('button instance')}
+              >
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle
+                as="button"
+                style={style}
+                className="bg-neutral"
+                size={56}
+                onClick={() => alert('button instance')}
+              >
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle
+                as="button"
+                style={style}
+                className="bg-neutral"
+                size={72}
+                onClick={() => alert('button instance')}
+              >
+                {content}
+              </Circle>
+            </td>
+          </tr>
+        </table>
+      );
+    },
+  },
+  { variants: ['light', 'dark'] },
+);
+
+export const FixedSize: Story = storyConfig(
+  {
+    render: () => {
+      const size = 72;
+      const content = <Profile size={16} />;
+      const style = { border: '1px solid var(--color-border-neutral)' };
+      return (
+        <table border={0} cellPadding="0" cellSpacing="0">
+          <tr>
+            <td>
+              Dynamic Size (<code>--size-{size})</code>
+            </td>
+            <td>
+              Fixed Size (<code>{size}px)</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <Circle size={72} fixedSize={false} style={style}>
+                {content}
+              </Circle>
+            </td>
+            <td>
+              <Circle size={72} fixedSize style={style}>
+                {content}
+              </Circle>
+            </td>
+          </tr>
+        </table>
+      );
+    },
+  },
+  { variants: ['400%'] },
+);

package/src/common/circle/Circle.tsx

@@ -1,25 +1,31 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
-/**
- * Same sizes as `--size-*` tokens
- */
 export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 
 export type Props = {
   as?: React.ElementType;
   size?: ShapeSize;
+  fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
 const Circle = forwardRef(function Circle(
-  { as: Element = 'div', children, size = 48, className, style, ...props }: Props,
+  {
+    as: Element = 'div',
+    children,
+    size = 48,
+    fixedSize = false,
+    className,
+    style,
+    ...props
+  }: Props,
   ref,
 ) {
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': `var(--size-${size})` }}
+      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -22,11 +22,11 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: var(--size-48);"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: var(--size-48);"
+            style="--circle-size: 48px;"
           >
             TM
           </div>
@@ -139,11 +139,11 @@ exports[`FlowNavigation renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: var(--size-48);"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: var(--size-48);"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -19,11 +19,11 @@ exports[`OverlayHeader renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: var(--size-48);"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: var(--size-48);"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -35,11 +35,11 @@ exports[`Radio shows the avatar when supplied 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: var(--size-48);"
+          style="--circle-size: 48px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: var(--size-48);"
+            style="--circle-size: 48px;"
           >
             HD
           </div>