@transferwise/components 0.0.0-experimental-c7e5a27 → 0.0.0-experimental-b35e8bc

package/build/actionButton/ActionButton.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var clsx = require('clsx');
 var React = require('react');
 require('../common/theme.js');
 require('../common/direction.js');
@@ -21,22 +22,24 @@ require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
 require('@transferwise/icons');
-require('clsx');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Button_resolver = require('../button/Button.resolver.js');
 
 const ActionButton = /*#__PURE__*/React.forwardRef(({
+  disabled = false,
+  className = undefined,
+  onClick,
   priority = control.Priority.PRIMARY,
   text,
   children,
   ...rest
-}, reference) => /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+}, reference) => /*#__PURE__*/jsxRuntime.jsx("button", {
   ref: reference,
-  v2: true,
-  size: "sm",
-  priority: priority === 'secondary' ? 'secondary-neutral' : priority,
+  type: "button",
+  className: clsx.clsx('np-action-btn', 'np-text-body-default-bold', priority === control.Priority.TERTIARY ? 'btn-priority-3' : priority === control.Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  disabled: disabled,
+  onClick: onClick,
   ...rest,
   children: children || text
 }));

package/build/actionButton/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\nimport Button from '../button';\n\n/**\n * @deprecated use `<Button />` component instead with `ButtonProps`\n */\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  ({ priority = Priority.PRIMARY, text, children, ...rest }: ActionButtonProps, reference) => (\n    <Button\n      ref={reference}\n      v2\n      size=\"sm\"\n      priority={priority === 'secondary' ? 'secondary-neutral' : priority}\n      {...rest}\n    >\n      {children || text}\n    </Button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","Button","ref","v2","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CAAC;EAAEC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAqB,EAAEC,SAAS,kBACrFC,cAAA,CAACC,eAAM,EAAA;AACLC,EAAAA,GAAG,EAAEH,SAAU;EACfI,EAAE,EAAA,IAAA;AACFC,EAAAA,IAAI,EAAC,IAAI;AACTX,EAAAA,QAAQ,EAAEA,QAAQ,KAAK,WAAW,GAAG,mBAAmB,GAAGA,QAAS;AAAA,EAAA,GAChEK,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
+{"version":3,"file":"ActionButton.js","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\n/**\n * @deprecated use `<Button />` component instead with `ButtonProps`\n */\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,YAAY,gBAAGC,gBAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,cAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,SAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,gBAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,gBAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

package/build/actionButton/ActionButton.mjs

@@ -1,3 +1,4 @@
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
@@ -19,22 +20,24 @@ import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
 import '@transferwise/icons';
-import 'clsx';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
-import Button from '../button/Button.resolver.mjs';
 
 const ActionButton = /*#__PURE__*/forwardRef(({
+  disabled = false,
+  className = undefined,
+  onClick,
   priority = Priority.PRIMARY,
   text,
   children,
   ...rest
-}, reference) => /*#__PURE__*/jsx(Button, {
+}, reference) => /*#__PURE__*/jsx("button", {
   ref: reference,
-  v2: true,
-  size: "sm",
-  priority: priority === 'secondary' ? 'secondary-neutral' : priority,
+  type: "button",
+  className: clsx('np-action-btn', 'np-text-body-default-bold', priority === Priority.TERTIARY ? 'btn-priority-3' : priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1', className),
+  disabled: disabled,
+  onClick: onClick,
   ...rest,
   children: children || text
 }));

package/build/actionButton/ActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\nimport Button from '../button';\n\n/**\n * @deprecated use `<Button />` component instead with `ButtonProps`\n */\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  ({ priority = Priority.PRIMARY, text, children, ...rest }: ActionButtonProps, reference) => (\n    <Button\n      ref={reference}\n      v2\n      size=\"sm\"\n      priority={priority === 'secondary' ? 'secondary-neutral' : priority}\n      {...rest}\n    >\n      {children || text}\n    </Button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","Button","ref","v2","size"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CAAC;EAAEC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC,IAAAA;AAAI,CAAqB,EAAEC,SAAS,kBACrFC,GAAA,CAACC,MAAM,EAAA;AACLC,EAAAA,GAAG,EAAEH,SAAU;EACfI,EAAE,EAAA,IAAA;AACFC,EAAAA,IAAI,EAAC,IAAI;AACTX,EAAAA,QAAQ,EAAEA,QAAQ,KAAK,WAAW,GAAG,mBAAmB,GAAGA,QAAS;AAAA,EAAA,GAChEK,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}
+{"version":3,"file":"ActionButton.mjs","sources":["../../src/actionButton/ActionButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';\n\n/**\n * @deprecated use `<Button />` component instead with `ButtonProps`\n */\nexport type ActionButtonProps = {\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;\n  /**\n   * @deprecated use `children` instead\n   */\n  text?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * @deprecated use `<Button v2 size=\"sm\" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead\n */\nconst ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      disabled = false,\n      className = undefined,\n      onClick,\n      priority = Priority.PRIMARY,\n      text,\n      children,\n      ...rest\n    }: ActionButtonProps,\n    reference,\n  ) => (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-action-btn',\n        'np-text-body-default-bold',\n        priority === Priority.TERTIARY\n          ? 'btn-priority-3'\n          : priority === Priority.SECONDARY\n            ? 'btn-priority-2'\n            : 'btn-priority-1',\n        className,\n      )}\n      disabled={disabled}\n      onClick={onClick}\n      {...rest}\n    >\n      {children || text}\n    </button>\n  ),\n);\n\nexport default ActionButton;\n"],"names":["ActionButton","forwardRef","disabled","className","undefined","onClick","priority","Priority","PRIMARY","text","children","rest","reference","_jsx","ref","type","clsx","TERTIARY","SECONDARY"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAMA,YAAY,gBAAGC,UAAU,CAC7B,CACE;AACEC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,SAAS,GAAGC,SAAS;EACrBC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC,IAAAA;AACe,CAAA,EACpBC,SAAS,kBAETC,GAAA,CAAA,QAAA,EAAA;AACEC,EAAAA,GAAG,EAAEF,SAAU;AACfG,EAAAA,IAAI,EAAC,QAAQ;EACbZ,SAAS,EAAEa,IAAI,CACb,eAAe,EACf,2BAA2B,EAC3BV,QAAQ,KAAKC,QAAQ,CAACU,QAAQ,GAC1B,gBAAgB,GAChBX,QAAQ,KAAKC,QAAQ,CAACW,SAAS,GAC7B,gBAAgB,GAChB,gBAAgB,EACtBf,SAAS,CACT;AACFD,EAAAA,QAAQ,EAAEA,QAAS;AACnBG,EAAAA,OAAO,EAAEA,OAAQ;AAAA,EAAA,GACbM,IAAI;EAAAD,QAAA,EAEPA,QAAQ,IAAID,IAAAA;AAAI,CACX,CACT;;;;"}

package/build/main.css

@@ -112,6 +112,70 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-action-btn {
+  display: inline-flex;
+  height: 32px;
+  height: var(--size-32);
+  padding: 8px 12px;
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  border: none;
+}
+@media (max-width: 320px) {
+  .np-action-btn {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
+  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);
+}
+.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;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.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;
+}
 .wds-alert__liveRegion {
   display: contents;
 }

package/build/styles/actionButton/ActionButton.css

@@ -0,0 +1,64 @@
+.np-action-btn {
+  display: inline-flex;
+  height: 32px;
+  height: var(--size-32);
+  padding: 8px 12px;
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  border: none;
+}
+@media (max-width: 320px) {
+  .np-action-btn {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
+  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);
+}
+.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;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.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/main.css

@@ -112,6 +112,70 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-action-btn {
+  display: inline-flex;
+  height: 32px;
+  height: var(--size-32);
+  padding: 8px 12px;
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  border: none;
+}
+@media (max-width: 320px) {
+  .np-action-btn {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
+  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);
+}
+.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;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.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;
+}
 .wds-alert__liveRegion {
   display: contents;
 }

package/build/types/actionButton/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG3F;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,QAAA,MAAM,YAAY;eAVL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAkBd,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/actionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAY,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE3F;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;IAClE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,QAAA,MAAM,YAAY;eAVL,eAAe,GAAG,iBAAiB,GAAG,gBAAgB;IACjE;;OAEG;WACI,MAAM;+FAuCd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c7e5a27",
+  "version": "0.0.0-experimental-b35e8bc",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,13 +91,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-c7e5a27",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/neptune-css": "0.0.0-experimental-b35e8bc",
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-c7e5a27",
+    "@transferwise/neptune-css": "0.0.0-experimental-b35e8bc",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/actionButton/ActionButton.css

@@ -0,0 +1,64 @@
+.np-action-btn {
+  display: inline-flex;
+  height: 32px;
+  height: var(--size-32);
+  padding: 8px 12px;
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  border: none;
+}
+@media (max-width: 320px) {
+  .np-action-btn {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
+  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);
+}
+.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;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.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/src/actionButton/ActionButton.less

@@ -0,0 +1,64 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-action-btn {
+  display: inline-flex;
+  height: var(--size-32);
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: var(--font-size-14);
+  line-height: var(--line-height-control);
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: var(--color-interactive-accent);
+  border-radius: var(--radius-large);
+  border: none;
+
+  @media (--screen-400-zoom) {
+    height: var(--size-40);
+  }
+
+  &.btn-priority-2 {
+    background-color: var(--color-background-neutral);
+    color: var(--color-interactive-primary);
+  }
+
+  &.btn-priority-3 {
+    background-color: transparent !important;
+    color: var(--color-interactive-primary);
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: var(--color-interactive-accent-hover);
+
+      &.btn-priority-2 {
+        background-color: var(--color-background-neutral-hover);
+      }
+
+      &.btn-priority-3 {
+        color: var(--color-interactive-primary-hover);
+      }
+    }
+
+    &:active {
+      box-shadow: none;
+      border-color: transparent;
+      background-color: var(--color-interactive-accent-active);
+      
+      &.btn-priority-2 {
+        background-color: var(--color-background-neutral-active);
+      }
+
+      &.btn-priority-3 {
+        color: var(--color-interactive-primary-active);
+        background-color: var(--color-background-screen-active) !important;
+      }
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}

package/src/actionButton/ActionButton.spec.tsx

@@ -0,0 +1,82 @@
+import { render, screen, userEvent } from '../test-utils';
+
+import ActionButton from '.';
+
+describe('ActionButton', () => {
+  const props = {
+    children: 'Personal profile',
+    onClick: jest.fn(),
+  };
+
+  describe('by default', () => {
+    beforeEach(() => {
+      render(<ActionButton {...props} />);
+    });
+
+    it('renders the text', () => {
+      expect(screen.getByText('Personal profile')).toBeInTheDocument();
+    });
+
+    it('is not disabled', () => {
+      expect(screen.getByRole('button')).toBeEnabled();
+    });
+
+    it('renders the button', () => {
+      expect(render(<ActionButton {...props} />).container).toMatchSnapshot();
+    });
+  });
+
+  describe('button attributes', () => {
+    it('disables the button if disabled', () => {
+      render(<ActionButton {...props} disabled />);
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+
+    it('passes through custom classes if set', () => {
+      render(<ActionButton {...props} className="catsarethebest" />);
+      expect(screen.getByRole('button')).toHaveClass('catsarethebest');
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onClick when clicked', async () => {
+      const onClick = jest.fn();
+      render(<ActionButton {...props} onClick={onClick} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick when clicked if disabled', async () => {
+      const onClick = jest.fn();
+      render(<ActionButton {...props} disabled onClick={onClick} />);
+      await userEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('deprecated', () => {
+    it('text prop', () => {
+      const copy = 'Text prop';
+      const onClick = jest.fn();
+      render(<ActionButton disabled text={copy} onClick={onClick} />);
+      expect(screen.getByText(copy)).toBeInTheDocument();
+    });
+  });
+
+  describe('priority', () => {
+    it('is rendered for primary', () => {
+      render(<ActionButton priority="primary" />);
+      expect(screen.getByRole('button')).toHaveClass('btn-priority-1');
+    });
+
+    it('is rendered for secondary', () => {
+      render(<ActionButton priority="secondary" />);
+      expect(screen.getByRole('button')).toHaveClass('btn-priority-2');
+    });
+
+    it('is backwards compatible if nothing is passed in', () => {
+      render(<ActionButton />);
+      expect(screen.getByRole('button')).toHaveClass('btn-priority-1');
+    });
+  });
+});

package/src/actionButton/ActionButton.tsx

@@ -1,7 +1,7 @@
+import { clsx } from 'clsx';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 
 import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
-import Button from '../button';
 
 /**
  * @deprecated use `<Button />` component instead with `ButtonProps`
@@ -18,16 +18,37 @@ export type ActionButtonProps = {
  * @deprecated use `<Button v2 size="sm" priority={'primary' / 'secondary-neutral' / 'tertiary'} .. />` component instead
  */
 const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ priority = Priority.PRIMARY, text, children, ...rest }: ActionButtonProps, reference) => (
-    <Button
+  (
+    {
+      disabled = false,
+      className = undefined,
+      onClick,
+      priority = Priority.PRIMARY,
+      text,
+      children,
+      ...rest
+    }: ActionButtonProps,
+    reference,
+  ) => (
+    <button
       ref={reference}
-      v2
-      size="sm"
-      priority={priority === 'secondary' ? 'secondary-neutral' : priority}
+      type="button"
+      className={clsx(
+        'np-action-btn',
+        'np-text-body-default-bold',
+        priority === Priority.TERTIARY
+          ? 'btn-priority-3'
+          : priority === Priority.SECONDARY
+            ? 'btn-priority-2'
+            : 'btn-priority-1',
+        className,
+      )}
+      disabled={disabled}
+      onClick={onClick}
       {...rest}
     >
       {children || text}
-    </Button>
+    </button>
   ),
 );
 

package/src/actionButton/__snapshots__/ActionButton.spec.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButton by default renders the button 1`] = `
+<div>
+  <button
+    class="np-action-btn np-text-body-default-bold btn-priority-1"
+    type="button"
+  >
+    Personal profile
+  </button>
+</div>
+`;

package/src/main.css

@@ -112,6 +112,70 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-action-btn {
+  display: inline-flex;
+  height: 32px;
+  height: var(--size-32);
+  padding: 8px 12px;
+  padding: var(--size-8) var(--size-12);
+  transition: color, background-color 0.15s ease-in-out;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  border-radius: 10px;
+  border-radius: var(--radius-small);
+  align-items: center;
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+  border-radius: 24px;
+  border-radius: var(--radius-large);
+  border: none;
+}
+@media (max-width: 320px) {
+  .np-action-btn {
+    height: 40px;
+    height: var(--size-40);
+  }
+}
+.np-action-btn.btn-priority-2 {
+  background-color: rgba(134,167,189,0.10196);
+  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);
+}
+.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;
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.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;
+}
 .wds-alert__liveRegion {
   display: contents;
 }

package/src/main.less

@@ -1,5 +1,6 @@
 @import "./criticalBanner/CriticalCommsBanner.less";
 @import "./accordion/Accordion.less";
+@import "./actionButton/ActionButton.less";
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";