@transferwise/components 0.0.0-experimental-37d8e2c → 0.0.0-experimental-dabe7c7

package/build/circularButton/CircularButton.mjs

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx';
+import { cloneElement } from 'react';
 import Body from '../body/Body.mjs';
 import { typeClassMap, priorityClassMap } from '../button/classMap.mjs';
 import Circle from '../common/circle/Circle.mjs';
@@ -18,11 +19,14 @@ const CircularButton = ({
   ...rest
 }) => {
   const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
+  const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
+    size: 24
+  }) : icon;
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return /*#__PURE__*/jsxs("label", {
     className: clsx('np-circular-btn', priority, type, disabled && 'disabled', className),
     children: [/*#__PURE__*/jsx(Circle, {
-      as: "button"
+      as: "input"
       // @ts-expect-error it's input[type=button] element
       ,
       type: "button",
@@ -30,9 +34,8 @@ const CircularButton = ({
       "aria-label": children,
       className: classes,
       disabled: disabled,
-      ...rest,
-      children: icon
-    }), /*#__PURE__*/jsx(Body, {
+      ...rest
+    }), iconElement, /*#__PURE__*/jsx(Body, {
       as: "span",
       className: "np-circular-btn__label",
       type: Typography.BODY_DEFAULT_BOLD,

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 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=\"button\"\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        {icon}\n      </Circle>\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","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","_jsx","Circle","as","size","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;EAE3F,MAAMW,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AAExE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;AAAOnB,IAAAA,SAAS,EAAEY,IAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;IAAAC,QAAA,EAAA,cAC3FmB,GAAA,CAACC,MAAM,EAAA;AACLC,MAAAA,EAAE,EAAC,QAAA;AACH;AAAA;AACAf,MAAAA,IAAI,EAAC,QAAQ;AACbgB,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/B,MAAA,YAAA,EAAYd,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;AAAA,MAAA,GACfQ,IAAI;AAAAT,MAAAA,QAAA,EAEPE,IAAAA;AAAI,KACC,CACR,eAAAiB,GAAA,CAACI,IAAI,EAAA;AAACF,MAAAA,EAAE,EAAC,MAAM;AAACtB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEkB,UAAU,CAACC,iBAAkB;AAAAzB,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 ? 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;;;;"}

package/build/common/circle/Circle.js

@@ -4,27 +4,6 @@ var React = require('react');
 var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 
-const mapIconSize = {
-  16: 12,
-  24: 16,
-  32: 18,
-  40: 20,
-  48: 24,
-  56: 28,
-  72: 36
-};
-/**
- * circle like components have custom font styles
- */
-const mapFontSize = {
-  16: 8,
-  24: 12,
-  32: 14,
-  40: 18,
-  48: 22,
-  56: 26,
-  72: 30
-};
 const Circle = /*#__PURE__*/React.forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -39,9 +18,7 @@ const Circle = /*#__PURE__*/React.forwardRef(function Circle({
     ref: ref,
     style: {
       ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
-      '--circle-icon-size': `${mapIconSize[size]}px`,
-      '--circle-font-size': `${mapFontSize[size]}px`
+      '--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\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 mapIconSize = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom font styles\n */\nconst mapFontSize = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\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  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        ...style,\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size': `${mapIconSize[size]}px`,\n        '--circle-font-size': `${mapFontSize[size]}px`,\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":["mapIconSize","mapFontSize","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;;;AAwBA,MAAMA,WAAW,GAAG;AAClB,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;;AAEG;AACH,MAAMC,WAAW,GAAG;AAClB,EAAA,EAAE,EAAE,CAAC;AACL,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,oBACEC,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGA,KAAK;MACR,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;AAChE,MAAA,oBAAoB,EAAE,CAAGP,EAAAA,WAAW,CAACO,IAAI,CAAC,CAAI,EAAA,CAAA;AAC9C,MAAA,oBAAoB,EAAE,CAAA,EAAGN,WAAW,CAACM,IAAI,CAAC,CAAA,EAAA,CAAA;KAC1C;IACFE,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';\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;;;;"}

package/build/common/circle/Circle.mjs

@@ -2,27 +2,6 @@ import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
-const mapIconSize = {
-  16: 12,
-  24: 16,
-  32: 18,
-  40: 20,
-  48: 24,
-  56: 28,
-  72: 36
-};
-/**
- * circle like components have custom font styles
- */
-const mapFontSize = {
-  16: 8,
-  24: 12,
-  32: 14,
-  40: 18,
-  48: 22,
-  56: 26,
-  72: 30
-};
 const Circle = /*#__PURE__*/forwardRef(function Circle({
   as: Element = 'div',
   children,
@@ -37,9 +16,7 @@ const Circle = /*#__PURE__*/forwardRef(function Circle({
     ref: ref,
     style: {
       ...style,
-      '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
-      '--circle-icon-size': `${mapIconSize[size]}px`,
-      '--circle-font-size': `${mapFontSize[size]}px`
+      '--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\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 mapIconSize = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom font styles\n */\nconst mapFontSize = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\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  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        ...style,\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size': `${mapIconSize[size]}px`,\n        '--circle-font-size': `${mapFontSize[size]}px`,\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":["mapIconSize","mapFontSize","Circle","forwardRef","as","Element","children","size","fixedSize","className","style","props","ref","_jsx","clsx"],"mappings":";;;;AAwBA,MAAMA,WAAW,GAAG;AAClB,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;;AAEG;AACH,MAAMC,WAAW,GAAG;AAClB,EAAA,EAAE,EAAE,CAAC;AACL,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,oBACEC,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFM,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;AACL,MAAA,GAAGA,KAAK;MACR,eAAe,EAAEF,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAI,EAAA,CAAA,GAAG,CAAcA,WAAAA,EAAAA,IAAI,CAAG,CAAA,CAAA;AAChE,MAAA,oBAAoB,EAAE,CAAGP,EAAAA,WAAW,CAACO,IAAI,CAAC,CAAI,EAAA,CAAA;AAC9C,MAAA,oBAAoB,EAAE,CAAA,EAAGN,WAAW,CAACM,IAAI,CAAC,CAAA,EAAA,CAAA;KAC1C;IACFE,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';\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;;;;"}

package/build/display/Display.js

@@ -13,7 +13,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Heading, {
     id: id,
-    className: clsx.clsx('np-display', `np-text-${type}`, 'text-primary', className),
+    className: clsx.clsx(`np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,SAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,SAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/display/Display.mjs

@@ -11,7 +11,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsx(Heading, {
     id: id,
-    className: clsx('np-display', `np-text-${type}`, 'text-primary', className),
+    className: clsx(`np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEG,IAAI,CAAC,YAAY,EAAE,CAAA,QAAA,EAAWP,IAAI,CAAA,CAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC1FA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,IAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/index.js

@@ -8,7 +8,6 @@ var SelectOption = require('./selectOption/SelectOption.js');
 var Alert = require('./alert/Alert.js');
 var avatarTypes = require('./avatar/avatarTypes.js');
 var Avatar = require('./avatar/Avatar.js');
-var AvatarView = require('./avatarView/AvatarView.js');
 var AvatarWrapper = require('./avatarWrapper/AvatarWrapper.js');
 var Badge = require('./badge/Badge.js');
 var Body = require('./body/Body.js');
@@ -98,7 +97,6 @@ var Upload = require('./upload/Upload.js');
 var UploadInput = require('./uploadInput/UploadInput.js');
 var useScreenSize = require('./common/hooks/useScreenSize.js');
 var useSnackbar = require('./snackbar/useSnackbar.js');
-var colors = require('./avatar/colors/colors.js');
 var index$1 = require('./i18n/index.js');
 var withId = require('./withId/withId.js');
 var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
@@ -126,7 +124,6 @@ var variant = require('./common/propsValues/variant.js');
 var width = require('./common/propsValues/width.js');
 var index = require('./common/locale/index.js');
 var documentIosClick = require('./common/domHelpers/documentIosClick.js');
-var initials = require('./common/initials.js');
 
 
 
@@ -144,7 +141,6 @@ Object.defineProperty(exports, "AvatarType", {
 	get: function () { return avatarTypes.AvatarType; }
 });
 exports.Avatar = Avatar;
-exports.AvatarView = AvatarView;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
 exports.Body = Body;
@@ -256,7 +252,6 @@ Object.defineProperty(exports, "UploadStep", {
 exports.UploadInput = UploadInput;
 exports.useScreenSize = useScreenSize.useScreenSize;
 exports.useSnackbar = useSnackbar;
-exports.getAvatarColorFromSeed = colors.getAvatarColorFromSeed;
 exports.translations = index$1;
 exports.withId = withId;
 exports.CheckboxButton = CheckboxButton;
@@ -353,5 +348,4 @@ exports.getDirectionFromLocale = index.getDirectionFromLocale;
 exports.getLangFromLocale = index.getLangFromLocale;
 exports.isBrowser = documentIosClick.isBrowser;
 exports.isServerSide = documentIosClick.isServerSide;
-exports.getInitials = initials.getInitials;
 //# sourceMappingURL=index.js.map

package/build/index.js.map

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

package/build/index.mjs

@@ -6,7 +6,6 @@ export { default as SelectOption } from './selectOption/SelectOption.mjs';
 export { default as Alert, AlertArrowPosition } from './alert/Alert.mjs';
 export { AvatarType } from './avatar/avatarTypes.mjs';
 export { default as Avatar } from './avatar/Avatar.mjs';
-export { default as AvatarView } from './avatarView/AvatarView.mjs';
 export { default as AvatarWrapper } from './avatarWrapper/AvatarWrapper.mjs';
 export { default as Badge } from './badge/Badge.mjs';
 export { default as Body } from './body/Body.mjs';
@@ -96,7 +95,6 @@ export { default as Upload, UploadStep } from './upload/Upload.mjs';
 export { default as UploadInput } from './uploadInput/UploadInput.mjs';
 export { useScreenSize } from './common/hooks/useScreenSize.mjs';
 export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
-export { getAvatarColorFromSeed } from './avatar/colors/colors.mjs';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.mjs';
 export { default as CheckboxButton } from './checkboxButton/CheckboxButton.mjs';
@@ -124,5 +122,4 @@ export { Variant } from './common/propsValues/variant.mjs';
 export { Width } from './common/propsValues/width.mjs';
 export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
 export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
-export { getInitials } from './common/initials.mjs';
 //# sourceMappingURL=index.mjs.map

package/build/index.mjs.map

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

package/build/main.css

@@ -186,6 +186,10 @@ div.critical-comms .critical-comms-body {
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -193,6 +197,9 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -202,6 +209,10 @@ div.critical-comms .critical-comms-body {
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }
@@ -421,56 +432,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
   border-color: var(--color-interactive-primary-hover);
 }
-.np-avatar-view {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  color: var(--color-interactive-primary);
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-.np-avatar-view .np-circle {
-  background-color: transparent;
-  border: var(--avatar-view-non-interactive-border-width) solid rgba(0,0,0,0.10196);
-  border: var(--avatar-view-non-interactive-border-width) solid var(--color-border-neutral);
-}
-.np-avatar-view-selected .np-circle {
-  border: var(--avatar-view-selected-border-width) solid var(--color-interactive-primary) !important;
-}
-.np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border: none;
-}
-.np-avatar-group {
-  display: inline-flex;
-  --np-avatar-group-size: 48px;
-  --np-avatar-size: 32px;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
-          mask-image: radial-gradient(circle at right 100%, transparent, transparent calc(var(--np-avatar-size) / 1.8), black 0);
-}
-.np-avatar-group-diagonal-child {
-  margin-left: calc((var(--np-avatar-size) / 2) * -1);
-  margin-top: calc((var(--np-avatar-size) * var(--np-avatar-group-index)) / 2);
-}
-.np-avatar-group-horizontal {
-  width: calc((var(--np-avatar-size) * 2) - 2px);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
-          mask-image: radial-gradient(circle at right 50%, transparent, transparent calc(var(--np-avatar-size) / 2), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc((var(--np-avatar-size) / 4) * -1);
-}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -487,16 +448,16 @@ div.critical-comms .critical-comms-body {
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: var(--badge-bottom-position);
+  bottom: 0;
   right: 0;
   box-sizing: border-box;
   text-align: center;
@@ -1035,6 +996,30 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 8px;
+    top: var(--size-8);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }
@@ -1183,23 +1168,6 @@ div.critical-comms .critical-comms-body {
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.np-circle img {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-}
-.np-circle .np-display {
-  font-size: var(--circle-font-size);
-}
-.np-circle .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
 }
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
@@ -1482,16 +1450,6 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
-.np-notification-dot {
-  --badge-notification-dot-size: 14px;
-  width: 14px;
-  width: var(--badge-notification-dot-size);
-  height: 14px;
-  height: var(--badge-notification-dot-size);
-  background-color: var(--color-sentiment-negative);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-}
 .np-select-option {
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -4197,6 +4155,12 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
+.status-icon > svg {
+  height: 32px;
+  height: var(--size-32);
+  width: 32px;
+  width: var(--size-32);
+}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4212,6 +4176,12 @@ 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;
@@ -5732,3 +5702,7 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-list-item__action {
   flex-shrink: 0;
 }
+.np-action-btn-chevron {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}

package/build/statusIcon/StatusIcon.js

@@ -30,14 +30,12 @@ const StatusIcon = ({
   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 : typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
+  const size$1 = sizeProp === size.Size.SMALL && isTinyViewport ? 32 : mapLegacySize[sizeProp];
   return /*#__PURE__*/jsxRuntime.jsx(Circle, {
     as: "span",
     size: size$1,
     "data-testid": "status-icon",
-    className: clsx.clsx('status-circle',
-    // `status-circle-${sizeProp}`,
-    sentiment),
+    className: clsx.clsx('status-circle', `status-circle-${sizeProp}`, sentiment),
     children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
       className: clsx.clsx('status-icon', iconColor)
     })

package/build/statusIcon/StatusIcon.js.map

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

package/build/statusIcon/StatusIcon.mjs

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

package/build/statusIcon/StatusIcon.mjs.map

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

package/build/styles/actionButton/ActionButton.css

@@ -32,6 +32,10 @@
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
+.np-action-btn.btn-priority-3 {
+  background-color: transparent !important;
+  color: var(--color-interactive-primary);
+}
 .np-action-btn:not(:disabled):hover {
   background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
@@ -39,6 +43,9 @@
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
   background-color: var(--color-background-neutral-hover);
 }
+.np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: var(--color-interactive-primary-hover);
+}
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
@@ -48,6 +55,10 @@
 .np-action-btn:not(:disabled):active.btn-priority-2 {
   background-color: var(--color-background-neutral-active);
 }
+.np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: var(--color-interactive-primary-active);
+  background-color: var(--color-background-screen-active) !important;
+}
 .np-action-btn:not(:disabled):focus {
   box-shadow: none;
 }

package/build/styles/actionOption/ActionOption.css

@@ -0,0 +1,4 @@
+.np-action-btn-chevron {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}