npm - @transferwise/components - Versions diffs - 0.0.0-experimental-a035b8f → 0.0.0-experimental-b223619 - Mend

@transferwise/components 0.0.0-experimental-a035b8f → 0.0.0-experimental-b223619

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/build/main.css +22 -11
package/build/styles/css/neptune.css +22 -11
package/build/styles/less/neptune-tokens.less +3 -2
package/build/styles/main.css +22 -11
package/build/styles/props/neptune-tokens.css +2 -1
package/build/styles/styles/less/neptune.css +22 -11
package/package.json +3 -7
package/src/alert/Alert.story.tsx +1 -33
package/src/button/_stories/Button.story.tsx +0 -9
package/src/main.css +22 -11
package/src/section/Section.story.tsx +8 -2
package/src/statusIcon/StatusIcon.test.tsx +2 -0
package/src/styles/less/neptune.css +22 -11

package/build/main.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/build/styles/css/neptune.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/build/styles/less/neptune-tokens.less CHANGED Viewed

@@ -1,6 +1,6 @@
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 31 Mar 2026 13:02:10 GMT
+// Generated on Fri, 10 Apr 2026 14:46:00 GMT
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -133,6 +133,7 @@
 @radius-small: 10px;
 @radius-medium: 16px;
 @radius-large: 24px;
+@radius-xlarge: 32px;
 @size-4: 4px;
 @size-5: 5px;
 @size-8: 8px;
@@ -221,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 // Do not edit directly, this file was auto-generated.
-// Generated on Tue, 31 Mar 2026 13:02:10 GMT
+// Generated on Fri, 10 Apr 2026 14:46:00 GMT
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/build/styles/main.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/build/styles/props/neptune-tokens.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/build/styles/styles/less/neptune.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-a035b8f",
+  "version": "0.0.0-experimental-b223619",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -69,9 +69,6 @@
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
-    "@monaco-editor/react": "^4.7.0",
-    "monaco-editor": "^0.52.2",
-    "monaco-editor-webpack-plugin": "^7.1.0",
     "@wise/art": "^2.26.0",
     "@wise/eslint-config": "^13.3.0",
     "babel-plugin-formatjs": "^10.5.41",
@@ -84,7 +81,6 @@
     "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",
@@ -112,7 +108,6 @@
     "@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",
@@ -123,7 +118,8 @@
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "virtua": "^0.48.8"
+    "virtua": "^0.48.8",
+    "@transferwise/neptune-tokens": "^8.20.3"
   },
   "publishConfig": {
     "access": "public",

package/src/alert/Alert.story.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
-import React, { useState } from 'react';
+import { 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';
@@ -49,37 +48,6 @@ 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/button/_stories/Button.story.tsx CHANGED Viewed

@@ -1,8 +1,6 @@
 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';
@@ -319,13 +317,6 @@ 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/main.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;

package/src/section/Section.story.tsx CHANGED Viewed

@@ -108,8 +108,14 @@ 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 CHANGED Viewed

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

package/src/styles/less/neptune.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:10 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 :root {
@@ -53,6 +53,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -143,7 +144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal {
@@ -236,6 +237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -392,7 +394,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--forest-green {
@@ -485,6 +487,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -641,7 +644,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--bright-green {
@@ -734,6 +737,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -890,7 +894,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-personal--dark {
@@ -983,6 +987,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1139,7 +1144,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform {
@@ -1232,6 +1237,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1322,7 +1328,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-platform--forest-green {
@@ -1415,6 +1421,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1505,7 +1512,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business {
@@ -1599,6 +1606,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1689,7 +1697,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--dark {
@@ -1783,6 +1791,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -1873,7 +1882,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:00 GMT
  */
 .np-theme-business--forest-green {
@@ -1967,6 +1976,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;
@@ -2057,7 +2067,7 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Tue, 31 Mar 2026 13:02:11 GMT
+ * Generated on Fri, 10 Apr 2026 14:46:01 GMT
  */
 .np-theme-business--bright-green {
@@ -2151,6 +2161,7 @@
   --radius-small: 10px;
   --radius-medium: 16px;
   --radius-large: 24px;
+  --radius-xlarge: 32px;
   --size-4: 4px;
   --size-5: 5px;
   --size-8: 8px;