@transferwise/components 46.140.0 → 46.140.1

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 12:45:11 GMT
+// Generated on Thu, 14 May 2026 16:11:43 GMT
 
 @color-dark-content-primary: #e2e6e8;
 @color-dark-content-secondary: #c9cbce;
@@ -222,7 +222,7 @@
 @font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Wed, 13 May 2026 12:45:11 GMT
+// Generated on Thu, 14 May 2026 16:11:43 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/build/styles/main.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {

package/build/styles/styles/less/core/viewport-themes.css

@@ -1,47 +1,51 @@
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:11 GMT
+ * Generated on Thu, 14 May 2026 16:11:43 GMT
  */
 
 :root {
@@ -144,7 +144,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal {
@@ -328,7 +328,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--forest-green {
@@ -512,7 +512,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--bright-green {
@@ -696,7 +696,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-personal--dark {
@@ -880,7 +880,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform {
@@ -1064,7 +1064,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-platform--forest-green {
@@ -1248,7 +1248,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business {
@@ -1433,7 +1433,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--dark {
@@ -1618,7 +1618,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--forest-green {
@@ -1803,7 +1803,7 @@
 
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Wed, 13 May 2026 12:45:12 GMT
+ * Generated on Thu, 14 May 2026 16:11:44 GMT
  */
 
 .np-theme-business--bright-green {
@@ -4351,48 +4351,53 @@ a.text-inverse:focus {
 
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.140.0",
+  "version": "46.140.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -111,7 +111,7 @@
     "@react-aria/focus": "^3.22.0",
     "@react-aria/overlays": "^3.32.0",
     "@transferwise/formatting": "^2.14.1",
-    "@transferwise/neptune-tokens": "^8.21.0",
+    "@transferwise/neptune-tokens": "^8.23.0",
     "@transferwise/neptune-validation": "^3.3.3",
     "clsx": "^2.1.1",
     "commonmark": "^0.31.2",

package/src/dateLookup/DateLookup.test.story.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 import DateLookup, { type DateLookupProps } from './DateLookup';
 import { Size } from '../common';
 import { withVariantConfig } from '../../.storybook/helpers';
+import { Field } from '../field/Field';
 
 export default {
   component: DateLookup,
@@ -142,3 +143,18 @@ export const Basic400Zoom: StoryObj<typeof DateLookup> = {
     },
   }),
 };
+
+export const Disabled: StoryObj<typeof DateLookup> = {
+  render: () => (
+    <Field label="Start date">
+      <DateLookup
+        disabled
+        clearable={false}
+        value={new Date(2024, 0, 14, 12, 0, 0)}
+        placeholder="Select date"
+        monthFormat="long"
+        onChange={props.onChange}
+      />
+    </Field>
+  ),
+};

package/src/dateLookup/DateLookup.tsx

@@ -322,7 +322,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
         aria-labelledby={id}
         aria-invalid={inputAttributes?.['aria-invalid']}
         aria-describedby={inputAttributes?.['aria-describedby']}
-        className="input-group"
+        className={clsx('input-group', disabled && 'disabled')}
         onKeyDown={this.handleKeyDown}
       >
         <OverlayIdProvider open={open}>