@transferwise/components 0.0.0-experimental-15e023f → 0.0.0-experimental-971af43

package/build/badge/BadgeAssets.js

@@ -50,8 +50,7 @@ function BadgeAssets({
       size: size,
       fixedSize: true,
       style: {
-        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)',
-        color: type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)'
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
       },
       children: icon ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {})
     });

package/build/badge/BadgeAssets.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n          color:\n            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","color","Plus"],"mappings":";;;;;;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,cAAA,CAACG,cAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAiC;AACvCkB,QAAAA,KAAK,EACHlB,IAAI,KAAK,QAAQ,GAAG,kCAAkC,GAAG;OAC3D;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,cAAA,CAACiB,UAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"BadgeAssets.js","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,cAAA,CAACC,kBAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACO,QAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,cAAA,CAACG,cAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,cAAA,CAACU,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,cAAA,CAACG,cAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,cAAA,CAACgB,UAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/badge/BadgeAssets.mjs

@@ -46,8 +46,7 @@ function BadgeAssets({
       size: size,
       fixedSize: true,
       style: {
-        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)',
-        color: type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)'
+        backgroundColor: type === 'action' ? 'var(--color-interactive-accent)' : 'var(--color-background-neutral)'
       },
       children: icon ?? /*#__PURE__*/jsx(Plus, {})
     });

package/build/badge/BadgeAssets.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n          color:\n            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","color","Plus"],"mappings":";;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,GAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC,iCAAiC;AACvCkB,QAAAA,KAAK,EACHlB,IAAI,KAAK,QAAQ,GAAG,kCAAkC,GAAG;OAC3D;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,GAAA,CAACiB,IAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}
+{"version":3,"file":"BadgeAssets.mjs","sources":["../../src/badge/BadgeAssets.tsx"],"sourcesContent":["import { Plus } from '@transferwise/icons';\nimport { Flag } from '@wise/art';\nimport StatusIcon, { StatusIconProps } from '../statusIcon';\nimport Circle from '../common/circle';\nimport Image from '../image';\n\nexport type Props = {\n  status?: StatusIconProps['sentiment'];\n  flagCode?: string;\n  imgSrc?: string;\n  icon?: React.ReactNode;\n  type?: 'action' | 'reference' | 'notification' | 'online';\n  size?: 16 | 24;\n};\n\n/**\n * Common pre-built badge variants.\n */\nexport default function BadgeAssets({\n  status,\n  flagCode,\n  imgSrc,\n  icon = null,\n  type = 'action',\n  size,\n}: Props) {\n  if (status) {\n    return <StatusIcon sentiment={status} size={size} />;\n  }\n  if (flagCode) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Flag code={flagCode} intrinsicSize={size} />\n      </Circle>\n    );\n  }\n  if (imgSrc) {\n    return (\n      <Circle size={size} fixedSize enableBorder>\n        <Image src={imgSrc} alt=\"\" />\n      </Circle>\n    );\n  }\n  if (['action', 'reference'].includes(type)) {\n    return (\n      <Circle\n        size={size}\n        fixedSize\n        style={{\n          backgroundColor:\n            type === 'action'\n              ? 'var(--color-interactive-accent)'\n              : 'var(--color-background-neutral)',\n        }}\n      >\n        {icon ?? <Plus />}\n      </Circle>\n    );\n  }\n  return null;\n}\n"],"names":["BadgeAssets","status","flagCode","imgSrc","icon","type","size","_jsx","StatusIcon","sentiment","Circle","fixedSize","enableBorder","children","Flag","code","intrinsicSize","Image","src","alt","includes","style","backgroundColor","Plus"],"mappings":";;;;;;;AAkBc,SAAUA,WAAWA,CAAC;EAClCC,MAAM;EACNC,QAAQ;EACRC,MAAM;AACNC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA;AAAI,CACE,EAAA;AACN,EAAA,IAAIL,MAAM,EAAE;IACV,oBAAOM,GAAA,CAACC,UAAU,EAAA;AAACC,MAAAA,SAAS,EAAER,MAAO;AAACK,MAAAA,IAAI,EAAEA;AAAK,MAAG;AACtD,EAAA;AACA,EAAA,IAAIJ,QAAQ,EAAE;IACZ,oBACEK,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACO,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEb,QAAS;AAACc,QAAAA,aAAa,EAAEV;OAAK;AAC5C,KAAQ,CAAC;AAEb,EAAA;AACA,EAAA,IAAIH,MAAM,EAAE;IACV,oBACEI,GAAA,CAACG,MAAM,EAAA;AAACJ,MAAAA,IAAI,EAAEA,IAAK;MAACK,SAAS,EAAA,IAAA;MAACC,YAAY,EAAA,IAAA;MAAAC,QAAA,eACxCN,GAAA,CAACU,KAAK,EAAA;AAACC,QAAAA,GAAG,EAAEf,MAAO;AAACgB,QAAAA,GAAG,EAAC;OAAE;AAC5B,KAAQ,CAAC;AAEb,EAAA;EACA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACf,IAAI,CAAC,EAAE;IAC1C,oBACEE,GAAA,CAACG,MAAM,EAAA;AACLJ,MAAAA,IAAI,EAAEA,IAAK;MACXK,SAAS,EAAA,IAAA;AACTU,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EACbjB,IAAI,KAAK,QAAQ,GACb,iCAAiC,GACjC;OACN;AAAAQ,MAAAA,QAAA,EAEDT,IAAI,iBAAIG,GAAA,CAACgB,IAAI,EAAA;AAAG,KACX,CAAC;AAEb,EAAA;AACA,EAAA,OAAO,IAAI;AACb;;;;"}

package/build/types/badge/BadgeAssets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAEA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC1D,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,GACL,EAAE,KAAK,sCAqCP"}
+{"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAEA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC1D,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,GACL,EAAE,KAAK,sCAmCP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-15e023f",
+  "version": "0.0.0-experimental-971af43",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,7 +43,11 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.12.3",
     "@formatjs/cli": "^6.14.1",
+    "@lezer/highlight": "^1.2.3",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
@@ -69,6 +73,7 @@
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
+    "@uiw/react-codemirror": "^4.25.9",
     "@wise/art": "^2.26.0",
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
@@ -81,15 +86,16 @@
     "jsdom-testing-mocks": "^1.16.0",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.14",
+    "react-live": "^4.1.8",
     "rollup": "^4.60.1",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^10.3.4",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
-    "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.27.1",
     "@wise/components-theming": "1.10.1",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/neptune-css": "14.27.1",
+    "@wise/wds-configs": "0.0.0",
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
@@ -107,6 +113,7 @@
     "@react-aria/focus": "^3.21.5",
     "@react-aria/overlays": "^3.31.2",
     "@transferwise/formatting": "^2.14.0",
+    "@transferwise/neptune-tokens": "^8.20.3",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",
@@ -116,8 +123,7 @@
     "lodash.debounce": "^4.0.8",
     "merge-props": "^6.0.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.8",
-    "@transferwise/neptune-tokens": "^8.20.3"
+    "virtua": "^0.48.8"
   },
   "publishConfig": {
     "access": "public",

package/src/alert/Alert.story.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { action } from 'storybook/actions';
 import { ClockBorderless } from '@transferwise/icons';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 
 import { lorem40 } from '../test-utils';
 import { Sentiment, Status } from '../common';
@@ -48,6 +49,37 @@ type Story = StoryObj<typeof Alert>;
 
 export const Basic: Story = {};
 
+export const Sandbox = createSandboxStory({
+  noInline: true,
+  code: `const App = () => {
+  const [dismissed, setDismissed] = React.useState(false);
+
+  if (dismissed) {
+    return (
+      <button onClick={() => setDismissed(false)}>
+        Show alert again
+      </button>
+    );
+  }
+
+  return (
+    <Alert
+      action={{
+        'aria-label': 'Learn more',
+        text: 'Learn more',
+        href: '#',
+      }}
+      message="Payments sent to your bank details **today** might not arrive in time for the holidays."
+      onDismiss={() => setDismissed(true)}
+      type="positive"
+    />
+  );
+};
+
+render(<App />);`,
+  scope: { Alert, React },
+});
+
 export const Variants: Story = {
   render: ({ message }) => {
     const variants = [

package/src/avatarView/AvatarView.story.tsx

@@ -207,7 +207,7 @@ export const Badge: Story = {
                   className="d-flex align-items-center justify-content-center"
                   style={{
                     backgroundColor: 'var(--color-bright-pink)',
-                    color: 'var(--color-dark-maroon)',
+                    color: 'var(--color-interactive-primary)',
                     width: '100%',
                     height: '100%',
                   }}

package/src/avatarView/AvatarView.test.story.tsx

@@ -1,18 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import {
-  Camera,
-  Convert,
-  FastFlag,
-  Graph,
-  Leaf,
-  Money,
-  PlusCircle,
-  Rewards,
-} from '@transferwise/icons';
+import { Graph, Money, PlusCircle, Rewards } from '@transferwise/icons';
 import AvatarView from '.';
 import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
 import Display from '../display';
-import { withVariantConfig } from '../../.storybook/helpers';
 
 const meta: Meta<typeof AvatarView> = {
   component: AvatarView,
@@ -122,100 +112,3 @@ export const ProfileBrokenImageFallback: Story = {
     );
   },
 };
-
-/** Badge types across default and dark themes to verify icon color visibility. */
-export const BadgeVariants: Story = {
-  render: function Render() {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <AvatarView size={32} badge={{ type: 'action' }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={48} badge={{ type: 'action' }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={32} badge={{ type: 'action', icon: <Camera /> }}>
-            <Money />
-          </AvatarView>
-          <AvatarView
-            size={48}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ type: 'action', icon: <Camera /> }}
-          />
-        </div>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <AvatarView size={32} badge={{ type: 'reference' }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={48} badge={{ type: 'reference' }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={32} badge={{ type: 'reference', icon: <Convert /> }}>
-            <Money />
-          </AvatarView>
-          <AvatarView
-            size={48}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{ type: 'reference', icon: <Convert /> }}
-          />
-        </div>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <AvatarView size={32} badge={{ icon: <FastFlag /> }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={48} badge={{ icon: <FastFlag /> }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={32} badge={{ status: 'warning' }}>
-            <Money />
-          </AvatarView>
-          <AvatarView size={48} badge={{ status: 'negative' }}>
-            <Money />
-          </AvatarView>
-        </div>
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <AvatarView
-            size={32}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{
-              asset: (
-                <div
-                  className="d-flex align-items-center justify-content-center"
-                  style={{
-                    backgroundColor: 'var(--color-bright-pink)',
-                    color: 'var(--color-dark-maroon)',
-                    width: '100%',
-                    height: '100%',
-                  }}
-                >
-                  <Leaf />
-                </div>
-              ),
-            }}
-          />
-          <AvatarView
-            size={48}
-            imgSrc="../avatar-square-dude.webp"
-            badge={{
-              asset: (
-                <div
-                  className="d-flex align-items-center justify-content-center"
-                  style={{
-                    backgroundColor: 'var(--color-bright-pink)',
-                    color: 'var(--color-dark-maroon)',
-                    width: '100%',
-                    height: '100%',
-                  }}
-                >
-                  <Leaf />
-                </div>
-              ),
-            }}
-          />
-        </div>
-      </div>
-    );
-  },
-  ...withVariantConfig(['default', 'dark']),
-};

package/src/badge/BadgeAssets.tsx

@@ -51,8 +51,6 @@ export default function BadgeAssets({
             type === 'action'
               ? 'var(--color-interactive-accent)'
               : 'var(--color-background-neutral)',
-          color:
-            type === 'action' ? 'var(--color-interactive-control)' : 'var(--color-content-primary)',
         }}
       >
         {icon ?? <Plus />}

package/src/button/_stories/Button.story.tsx

@@ -1,6 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
 import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
+import { createSandboxStory } from '../../../.storybook/components/sandbox/SandboxEditor';
+import { globalScope } from '../../../.storybook/components/sandbox/sandboxScope';
 import { Flag } from '@wise/art';
 import { lorem10, lorem20 } from '../../test-utils';
 import SentimentSurface from '../../sentimentSurface';
@@ -317,6 +319,13 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   },
 };
 
+export const Sandbox = createSandboxStory({
+  code: `<Button v2 size="md" onClick={() => alert('clicked')}>
+  Click me
+</Button>`,
+  scope: { ...globalScope, Freeze, ArrowRight },
+});
+
 /**
  * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
  * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />

package/src/section/Section.story.tsx

@@ -108,14 +108,8 @@ export const WithListItems = () => {
   return (
     <Section>
       <Header title="Section with list items" />
-      <ListItem
-        title="Item 1"
-        control={<ListItem.Navigation onClick={() => action('Item 1')} />}
-      />
-      <ListItem
-        title="Item 2"
-        control={<ListItem.Navigation onClick={() => action('Item 2')} />}
-      />
+      <ListItem title="Item 1" control={<ListItem.Navigation onClick={() => action('Item 1')} />} />
+      <ListItem title="Item 2" control={<ListItem.Navigation onClick={() => action('Item 2')} />} />
     </Section>
   );
 };

package/src/statusIcon/StatusIcon.test.tsx

@@ -42,7 +42,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   it.each([
     [Sentiment.WARNING, 'alert-icon'],
     [Sentiment.PENDING, 'clock-borderless-icon'],
@@ -61,7 +60,6 @@ describe('StatusIcon', () => {
     },
   );
 
-
   describe('accessible name', () => {
     it.each([
       ['Error', Sentiment.NEGATIVE],