@transferwise/components 0.0.0-experimental-7b7608c → 0.0.0-experimental-c76c3bc

package/build/avatar/Avatar.js

@@ -3,8 +3,10 @@
 var clsx = require('clsx');
 var React = require('react');
 var Circle = require('../common/circle/Circle.js');
+var useMedia = require('../common/hooks/useMedia.js');
 var jsxRuntime = require('react/jsx-runtime');
 var colors = require('../common/colors.js');
+var breakpoint = require('../common/propsValues/breakpoint.js');
 var theme = require('../common/theme.js');
 
 const backwardsCompatibleSize = size => {
@@ -32,6 +34,7 @@ const Avatar = ({
 }) => {
   const backgroundColorFromSeed = React.useMemo(() => !backgroundColor && backgroundColorSeed ? colors.getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
+  useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     size: size,
     fixedSize: true,
@@ -46,6 +49,8 @@ const Avatar = ({
       fixedSize: true,
       className: "tw-avatar__content",
       style: {
+        // @ts-expect-error CSS custom props allowed
+        '--circle-icon-size': '16px',
         backgroundColor: backgroundColor || backgroundColorFromSeed
       },
       children: children

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

package/build/avatar/Avatar.mjs

@@ -1,8 +1,10 @@
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import Circle from '../common/circle/Circle.mjs';
+import { useMedia } from '../common/hooks/useMedia.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { getBrandColorFromSeed } from '../common/colors.mjs';
+import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
 import { Theme } from '../common/theme.mjs';
 
 const backwardsCompatibleSize = size => {
@@ -30,6 +32,7 @@ const Avatar = ({
 }) => {
   const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
   const size = backwardsCompatibleSize(sizeFromProps);
+  useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsx(Circle, {
     size: size,
     fixedSize: true,
@@ -44,6 +47,8 @@ const Avatar = ({
       fixedSize: true,
       className: "tw-avatar__content",
       style: {
+        // @ts-expect-error CSS custom props allowed
+        '--circle-icon-size': '16px',
         backgroundColor: backgroundColor || backgroundColorFromSeed
       },
       children: children

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

package/build/circularButton/CircularButton.js

@@ -32,7 +32,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 64 : 56,
+      size: isTinyViewport ? 72 : 56,
       "aria-label": children,
       className: classes,
       disabled: disabled,

package/build/circularButton/CircularButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 64 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,cAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,cAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,qBAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/circularButton/CircularButton.mjs

@@ -30,7 +30,7 @@ const CircularButton = ({
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
-      size: isTinyViewport ? 64 : 56,
+      size: isTinyViewport ? 72 : 56,
       "aria-label": children,
       className: classes,
       disabled: disabled,

package/build/circularButton/CircularButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 64 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport Circle from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport interface CircularButtonProps {\n  className?: string;\n  children: string;\n  disabled?: boolean;\n  icon: React.ReactElement<{ size?: unknown }>;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n  className,\n  children,\n  disabled,\n  icon,\n  priority = Priority.PRIMARY,\n  type = ControlType.ACCENT,\n  ...rest\n}: CircularButtonProps) => {\n  const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);\n\n  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  return (\n    <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n      <Circle\n        as=\"input\"\n        // @ts-expect-error it's input[type=button] element\n        type=\"button\"\n        size={isTinyViewport ? 72 : 56}\n        aria-label={children}\n        className={classes}\n        disabled={disabled}\n        {...rest}\n      />\n      {iconElement}\n      <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n        {children}\n      </Body>\n    </label>\n  );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","Body","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;AAmBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,WAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAEC,YAAY,CAACN,IAAI,CAAC,EAAEO,gBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAE3F,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,YAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;EAE5F,MAAMiB,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOxB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FwB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,OAAA;AACH;AAAA;AACApB,MAAAA,IAAI,EAAC,QAAQ;AACbW,MAAAA,IAAI,EAAEE,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYnB,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZU,GAAA,CAACG,IAAI,EAAA;AAACD,MAAAA,EAAE,EAAC,MAAM;AAAC3B,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEsB,UAAU,CAACC,iBAAkB;AAAA7B,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}

package/build/common/circle/Circle.js

@@ -2,8 +2,19 @@
 
 var React = require('react');
 var clsx = require('clsx');
+var useMedia = require('../hooks/useMedia.js');
+var breakpoint = require('../propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
 const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -13,12 +24,14 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   style,
   ...props
 }, ref) {
+  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxRuntime.jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
+      ...style
     },
     className: clsx.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\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 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\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":";;;;;;AAqBA,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;;;;"}
+{"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;;;;"}

package/build/common/circle/Circle.mjs

@@ -1,7 +1,18 @@
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia.mjs';
+import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36
+};
 const Circle = /*#__PURE__*/forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -11,12 +22,14 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
   style,
   ...props
 }, ref) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsx(Element, {
     ...props,
     ref: ref,
     style: {
-      ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`
+      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+      '--circle-icon-size': isTinyViewport && !fixedSize ? `${MAP_ICON_SIZE[size] / 2}px` : `${MAP_ICON_SIZE[size]}px`,
+      ...style
     },
     className: clsx('np-circle', 'd-flex align-items-center justify-content-center', className),
     children: 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\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 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\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":";;;;AAqBA,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;;;;"}
+{"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;;;;"}

package/build/i18n/en.json

@@ -30,8 +30,6 @@
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",
-  "neptune.Table.emptyData": "No results found",
-  "neptune.Table.refreshPage": "Refresh page",
   "neptune.Upload.csButtonText": "Upload another file?",
   "neptune.Upload.csFailureText": "Upload failed. Please, try again",
   "neptune.Upload.csSuccessText": "Upload complete!",

package/build/i18n/en.json.js

@@ -32,8 +32,6 @@ var en = {
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",
-	"neptune.Table.emptyData": "No results found",
-	"neptune.Table.refreshPage": "Refresh page",
 	"neptune.Upload.csButtonText": "Upload another file?",
 	"neptune.Upload.csFailureText": "Upload failed. Please, try again",
 	"neptune.Upload.csSuccessText": "Upload complete!",

package/build/i18n/en.json.js.map

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

package/build/i18n/en.json.mjs

@@ -30,8 +30,6 @@ var en = {
 	"neptune.Summary.statusDone": "Item done",
 	"neptune.Summary.statusNotDone": "Item to do",
 	"neptune.Summary.statusPending": "Item pending",
-	"neptune.Table.emptyData": "No results found",
-	"neptune.Table.refreshPage": "Refresh page",
 	"neptune.Upload.csButtonText": "Upload another file?",
 	"neptune.Upload.csFailureText": "Upload failed. Please, try again",
 	"neptune.Upload.csSuccessText": "Upload complete!",

package/build/i18n/en.json.mjs.map

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

package/build/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,6 +1169,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4155,12 +4159,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4176,20 +4174,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
@@ -5025,221 +5009,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}
 .np-tile {
   min-width: 120px;
   border-radius: 10px;

package/build/statusIcon/StatusIcon.js

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

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nexport type StatusIconProps = {\n  sentiment: `${Sentiment}`;\n  size: SizeSmall | SizeMedium | SizeLarge;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 'md' }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = sizeProp === Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];\n  return (\n    <Circle\n      as=\"span\"\n      size={size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', `status-circle-${sizeProp}`, sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAYA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,IAAA;AAAI,CAAmB,KAAI;AACvF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,MAAI,GAAGC,QAAQ,KAAKP,SAAI,CAACC,KAAK,IAAIS,cAAc,GAAG,EAAE,GAAGZ,aAAa,CAACS,QAAQ,CAAC,CAAA;EACrF,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;AACTV,IAAAA,IAAI,EAAEA,MAAK;AACX,IAAA,aAAA,EAAY,aAAa;IACzBW,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAE,iBAAiBX,QAAQ,CAAA,CAAE,EAAEF,SAAS,CAAE;IAAAc,QAAA,eAEzEL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n  sentiment?: `${Sentiment}`;\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n  positive: Check,\n  neutral: Info,\n  warning: Alert,\n  negative: Cross,\n  pending: ClockBorderless,\n  info: Info,\n  error: Cross,\n  success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n  const Icon = iconTypeMap[sentiment];\n  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size: CircleProps['size'] =\n    typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;\n  return (\n    <Circle\n      as=\"span\"\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n    >\n      <Icon className={clsx('status-icon', iconColor)} />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAA;AAAE,CAAmB,KAAI;AACrF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GACR,OAAOC,QAAQ,KAAK,QAAQ,GAAGT,aAAa,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAAA;EACnE,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTV,IAAI,EAAEI,cAAc,IAAIJ,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBW,IAAAA,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}