@transferwise/components 46.94.0 → 46.94.1

package/build/info/Info.js

@@ -29,6 +29,7 @@ var Modal = require('../modal/Modal.js');
 var Popover = require('../popover/Popover.js');
 var Info_messages = require('./Info.messages.js');
 var infoPresentations = require('./infoPresentations.js');
+var IconButton = require('../iconButton/IconButton.js');
 
 const Info = ({
   className = undefined,
@@ -44,22 +45,16 @@ const Info = ({
   const [open, setOpen] = React.useState(false);
   ariaLabel ??= intl.formatMessage(Info_messages.ariaLabel);
   const isModal = presentation === infoPresentations.InfoPresentation.MODAL;
-  const isSmall = size$1 === size.Size.SMALL;
   const buttonProps = {
     'aria-label': ariaLabel,
-    className: 'btn-unstyled',
-    children: /*#__PURE__*/jsxRuntime.jsx(icons.QuestionMarkCircle, {
-      size: isSmall ? 16 : 24
-    })
+    priority: 'minimal',
+    size: 24,
+    children: /*#__PURE__*/jsxRuntime.jsx(icons.QuestionMarkCircle, {})
   };
   return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: clsx.clsx(className, 'np-info', {
-      'np-info__small': isSmall,
-      'np-info__large': !isSmall
-    }),
+    className: clsx.clsx(className, 'np-info'),
     children: isModal ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-        type: "button",
+      children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
         onClick: () => {
           setOpen(!open);
           if (onClick) {
@@ -77,8 +72,7 @@ const Info = ({
       content: content,
       preferredPlacement: preferredPlacement,
       title: title,
-      children: /*#__PURE__*/jsxRuntime.jsx("button", {
-        type: "button",
+      children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
         ...buttonProps,
         onClick: () => {
           if (onClick) {

package/build/info/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n  const isSmall = size === Size.SMALL;\n\n  const buttonProps = {\n    'aria-label': ariaLabel,\n    className: 'btn-unstyled',\n    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,\n  };\n\n  return (\n    <span\n      className={clsx(className, 'np-info', {\n        'np-info__small': isSmall,\n        'np-info__large': !isSmall,\n      })}\n    >\n      {isModal ? (\n        <>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <button\n            type=\"button\"\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","isSmall","buttonProps","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","type","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,aAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AACvD,EAAA,MAAMC,OAAO,GAAGjB,MAAI,KAAKC,SAAI,CAACC,KAAK,CAAA;AAEnC,EAAA,MAAMgB,WAAW,GAAG;AAClB,IAAA,YAAY,EAAEd,SAAS;AACvBX,IAAAA,SAAS,EAAE,cAAc;IACzB0B,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAA;AAACrB,MAAAA,IAAI,EAAEiB,OAAO,GAAG,EAAE,GAAG,EAAA;KAAM,CAAA;GACtD,CAAA;AAED,EAAA,oBACEG,cAAA,CAAA,MAAA,EAAA;AACE3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,EAAE;AACpC,MAAA,gBAAgB,EAAEwB,OAAO;AACzB,MAAA,gBAAgB,EAAE,CAACA,OAAAA;AACpB,KAAA,CAAE;AAAAE,IAAAA,QAAA,EAEFJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;AAAAL,MAAAA,QAAA,gBACEC,cAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;QACb7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEsB,WAAAA;AAAW,OAEjB,CAAA,eAAAE,cAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;AAAAgB,MAAAA,QAAA,eAC9EC,cAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;AAAA,QAAA,GACTP,WAAW;QACftB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,aAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,cAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}

package/build/info/Info.mjs

@@ -27,6 +27,7 @@ import Modal from '../modal/Modal.mjs';
 import Popover from '../popover/Popover.mjs';
 import messages from './Info.messages.mjs';
 import { InfoPresentation } from './infoPresentations.mjs';
+import IconButton from '../iconButton/IconButton.mjs';
 
 const Info = ({
   className = undefined,
@@ -42,22 +43,16 @@ const Info = ({
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
-  const isSmall = size === Size.SMALL;
   const buttonProps = {
     'aria-label': ariaLabel,
-    className: 'btn-unstyled',
-    children: /*#__PURE__*/jsx(QuestionMarkCircle, {
-      size: isSmall ? 16 : 24
-    })
+    priority: 'minimal',
+    size: 24,
+    children: /*#__PURE__*/jsx(QuestionMarkCircle, {})
   };
   return /*#__PURE__*/jsx("span", {
-    className: clsx(className, 'np-info', {
-      'np-info__small': isSmall,
-      'np-info__large': !isSmall
-    }),
+    className: clsx(className, 'np-info'),
     children: isModal ? /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx("button", {
-        type: "button",
+      children: [/*#__PURE__*/jsx(IconButton, {
         onClick: () => {
           setOpen(!open);
           if (onClick) {
@@ -75,8 +70,7 @@ const Info = ({
       content: content,
       preferredPlacement: preferredPlacement,
       title: title,
-      children: /*#__PURE__*/jsx("button", {
-        type: "button",
+      children: /*#__PURE__*/jsx(IconButton, {
         ...buttonProps,
         onClick: () => {
           if (onClick) {

package/build/info/Info.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n  const isSmall = size === Size.SMALL;\n\n  const buttonProps = {\n    'aria-label': ariaLabel,\n    className: 'btn-unstyled',\n    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,\n  };\n\n  return (\n    <span\n      className={clsx(className, 'np-info', {\n        'np-info__small': isSmall,\n        'np-info__large': !isSmall,\n      })}\n    >\n      {isModal ? (\n        <>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <button\n            type=\"button\"\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","isSmall","buttonProps","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","type","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK,CAAA;AACvD,EAAA,MAAMC,OAAO,GAAGjB,IAAI,KAAKC,IAAI,CAACC,KAAK,CAAA;AAEnC,EAAA,MAAMgB,WAAW,GAAG;AAClB,IAAA,YAAY,EAAEd,SAAS;AACvBX,IAAAA,SAAS,EAAE,cAAc;IACzB0B,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAA;AAACrB,MAAAA,IAAI,EAAEiB,OAAO,GAAG,EAAE,GAAG,EAAA;KAAM,CAAA;GACtD,CAAA;AAED,EAAA,oBACEG,GAAA,CAAA,MAAA,EAAA;AACE3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,EAAE;AACpC,MAAA,gBAAgB,EAAEwB,OAAO;AACzB,MAAA,gBAAgB,EAAE,CAACA,OAAAA;AACpB,KAAA,CAAE;AAAAE,IAAAA,QAAA,EAEFJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;AAAAL,MAAAA,QAAA,gBACEC,GAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;QACb7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEsB,WAAAA;AAAW,OAEjB,CAAA,eAAAE,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;AAAAgB,MAAAA,QAAA,eAC9EC,GAAA,CAAA,QAAA,EAAA;AACEK,QAAAA,IAAI,EAAC,QAAQ;AAAA,QAAA,GACTP,WAAW;QACftB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
+{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n  'aria-label'?: string;\n  /**\n   * Extra classes applied to Info\n   */\n  className?: string;\n  /**\n   * Content displayed inside a Popover a Modal\n   */\n  content?: React.ReactNode;\n  onClick?: () => void;\n  /**\n   * Decides whether to display content in a Popover or a Modal\n   */\n  presentation?: 'MODAL' | 'POPOVER';\n  /**\n   * Decides the size of help Icon\n   */\n  size?: SizeSmall | SizeLarge;\n  /**\n   * Title displayed inside a Popover a Modal\n   */\n  title?: React.ReactNode;\n  /**\n   * Prferred placement of the Popover, does not apply to Modal\n   */\n  preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n  className = undefined,\n  content = undefined,\n  onClick = undefined,\n  presentation = InfoPresentation.POPOVER,\n  size = Size.SMALL,\n  title = undefined,\n  'aria-label': ariaLabel,\n  preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n  const intl = useIntl();\n  const [open, setOpen] = useState(false);\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const isModal = presentation === InfoPresentation.MODAL;\n\n  const buttonProps: IconButtonProps = {\n    'aria-label': ariaLabel,\n    priority: 'minimal',\n    size: 24,\n    children: <HelpCircleIcon />,\n  };\n\n  return (\n    <span className={clsx(className, 'np-info')}>\n      {isModal ? (\n        <>\n          <IconButton\n            onClick={() => {\n              setOpen(!open);\n              if (onClick) {\n                onClick();\n              }\n            }}\n            {...buttonProps}\n          />\n          <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n        </>\n      ) : (\n        <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n          <IconButton\n            {...buttonProps}\n            onClick={() => {\n              if (onClick) {\n                onClick();\n              }\n            }}\n          />\n        </Popover>\n      )}\n    </span>\n  );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}

package/build/main.css

@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
 }
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;

package/build/styles/info/Info.css

@@ -1,28 +1,5 @@
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;

package/build/styles/main.css

@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
 }
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;

package/build/types/info/Info.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAgB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAKhE,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,6GASP,SAAS,gCAiDX,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Info.d.ts","sourceRoot":"","sources":["../../../src/info/Info.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAgB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAMhE,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;CAChD;AAED,QAAA,MAAM,IAAI,6GASP,SAAS,gCA0CX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.94.0",
+  "version": "46.94.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/info/Info.css

@@ -1,28 +1,5 @@
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;

package/src/info/Info.less

@@ -1,35 +1,7 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-
-  button,
-  [data-toggle="popover"]:not(.btn) {
-    .ring-offset-0();
-
-    height: 16px;
-    overflow: hidden;
-    display: inline-block;
-  }
-
-  &__large {
-    height: 24px;
-
-    button,
-    [data-toggle="popover"]:not(.btn) {
-      height: 24px;
-      display: inline-block;
-    }
-  }
-
-  .tw-icon {
-    cursor: pointer;
-    color: var(--color-interactive-primary);
-    display: inline-block;
-  }
 
   [data-toggle="popover"]:not(.btn) {
     // Bootstrap popover has !important dotted border bottom

package/src/info/Info.tsx

@@ -9,6 +9,7 @@ import Popover, { PopoverPreferredPlacement } from '../popover';
 
 import messages from './Info.messages';
 import { InfoPresentation } from './infoPresentations';
+import IconButton, { IconButtonProps } from '../iconButton';
 
 export interface InfoProps {
   'aria-label'?: string;
@@ -53,25 +54,19 @@ const Info = ({
   const [open, setOpen] = useState(false);
   ariaLabel ??= intl.formatMessage(messages.ariaLabel);
   const isModal = presentation === InfoPresentation.MODAL;
-  const isSmall = size === Size.SMALL;
 
-  const buttonProps = {
+  const buttonProps: IconButtonProps = {
     'aria-label': ariaLabel,
-    className: 'btn-unstyled',
-    children: <HelpCircleIcon size={isSmall ? 16 : 24} />,
+    priority: 'minimal',
+    size: 24,
+    children: <HelpCircleIcon />,
   };
 
   return (
-    <span
-      className={clsx(className, 'np-info', {
-        'np-info__small': isSmall,
-        'np-info__large': !isSmall,
-      })}
-    >
+    <span className={clsx(className, 'np-info')}>
       {isModal ? (
         <>
-          <button
-            type="button"
+          <IconButton
             onClick={() => {
               setOpen(!open);
               if (onClick) {
@@ -84,8 +79,7 @@ const Info = ({
         </>
       ) : (
         <Popover content={content} preferredPlacement={preferredPlacement} title={title}>
-          <button
-            type="button"
+          <IconButton
             {...buttonProps}
             onClick={() => {
               if (onClick) {

package/src/listItem/ListItem.story.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';
 
-import { Button } from '..';
+import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
@@ -92,14 +92,9 @@ export const Variants = () => {
             title="Account number"
             value="123456789"
             action={
-              <button
-                type="button"
-                aria-label="Copy"
-                style={{ background: 'none', border: 0 }}
-                onClick={() => action('clicked')}
-              >
-                <Documents size="24" />
-              </button>
+              <IconButton size={24} aria-label="Copy" priority="minimal">
+                <Documents />
+              </IconButton>
             }
           />
         </List>

package/src/main.css

@@ -2482,30 +2482,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   width: 100%;
 }
 .np-info {
-  height: 16px;
-  line-height: 1;
   vertical-align: middle;
-  color: var(--color-interactive-primary);
-}
-.np-info button,
-.np-info [data-toggle="popover"]:not(.btn) {
-  --ring-outline-offset: 0;
-  height: 16px;
-  overflow: hidden;
-  display: inline-block;
-}
-.np-info__large {
-  height: 24px;
-}
-.np-info__large button,
-.np-info__large [data-toggle="popover"]:not(.btn) {
-  height: 24px;
-  display: inline-block;
-}
-.np-info .tw-icon {
-  cursor: pointer;
-  color: var(--color-interactive-primary);
-  display: inline-block;
 }
 .np-info [data-toggle="popover"]:not(.btn) {
   border-bottom: none !important;