@transferwise/components 0.0.0-experimental-7709e0e → 0.0.0-experimental-94569f6

package/build/main.css

@@ -2400,66 +2400,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
+  max-height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -2469,30 +2439,45 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
-  display: grid;
-  grid-row-gap: 8px;
-  grid-row-gap: var(--size-8);
+  display: flex;
+  flex-direction: column;
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-.np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -4208,16 +4193,14 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative,
-.status-circle.error {
+.status-circle.negative {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive,
-.status-circle.success {
+.status-circle.positive {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/inputs/SelectInput.css

@@ -2,66 +2,36 @@
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
+  max-height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -71,30 +41,45 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
-  display: grid;
-  grid-row-gap: 8px;
-  grid-row-gap: var(--size-8);
+  display: flex;
+  flex-direction: column;
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-.np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;

package/build/styles/main.css

@@ -2400,66 +2400,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
-.np-bottom-sheet-v2-backdrop-container--enter,
-.np-bottom-sheet-v2-backdrop-container--leave {
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop-container--enter-from,
-.np-bottom-sheet-v2-backdrop-container--leave-to {
-  opacity: 0;
-}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop--closed {
+  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
+  bottom: env(keyboard-inset-height, 0px);
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  margin-top: 64px;
+  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-top: 64px;
-  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  max-height: 100%;
-}
-.np-bottom-sheet-v2-content--enter,
-.np-bottom-sheet-v2-content--leave {
-  transition-property: transform;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter,
-  .np-bottom-sheet-v2-content--leave {
-    transition-property: opacity;
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content--enter-from,
-  .np-bottom-sheet-v2-content--leave-to {
-    opacity: 0;
-  }
-}
-.np-bottom-sheet-v2-content-inner-container {
   display: flex;
-  height: 100%;
+  max-height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -2469,30 +2439,45 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content:focus {
   outline: none;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content {
+    transition-property: transform;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+  .np-bottom-sheet-v2-content--closed {
+    opacity: 0;
+  }
+}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  padding-top: 0px;
-  display: grid;
-  grid-row-gap: 8px;
-  grid-row-gap: var(--size-8);
+  display: flex;
+  flex-direction: column;
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-.np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -4208,16 +4193,14 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative,
-.status-circle.error {
+.status-circle.negative {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive,
-.status-circle.success {
+.status-circle.positive {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/build/styles/statusIcon/StatusIcon.css

@@ -66,15 +66,13 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative,
-.status-circle.error {
+.status-circle.negative {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive,
-.status-circle.success {
+.status-circle.positive {
   background-color: var(--color-sentiment-positive);
 }

package/build/types/common/hooks/useVirtualKeyboard.d.ts

@@ -0,0 +1,2 @@
+export declare function useVirtualKeyboard(): void;
+//# sourceMappingURL=useVirtualKeyboard.d.ts.map

package/build/types/common/hooks/useVirtualKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useVirtualKeyboard.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,SAajC"}

package/build/types/field/Field.d.ts

@@ -1,16 +1,11 @@
-import { Sentiment } from '../common';
 export type FieldProps = {
     /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
     id?: string | null;
     label: React.ReactNode;
-    /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
     hint?: React.ReactNode;
-    message?: React.ReactNode;
-    /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
     error?: React.ReactNode;
-    sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
     className?: string;
     children?: React.ReactNode;
 };
-export declare const Field: ({ id, label, message: propMessage, sentiment: propType, className, children, ...props }: FieldProps) => import("react").JSX.Element;
+export declare const Field: ({ id, label, hint, error, className, children }: FieldProps) => import("react").JSX.Element;
 //# sourceMappingURL=Field.d.ts.map

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA4CZ,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,oDAAqD,UAAU,gCA8ChF,CAAC"}

package/build/types/inlineAlert/InlineAlert.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Sentiment } from '../common';
 export interface InlineAlertProps {
     id?: string;
@@ -6,5 +6,5 @@ export interface InlineAlertProps {
     className?: string;
     children: ReactNode;
 }
-export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): React.JSX.Element;
+export default function InlineAlert({ id, type, className, children, }: InlineAlertProps): import("react").JSX.Element;
 //# sourceMappingURL=InlineAlert.d.ts.map

package/build/types/inlineAlert/InlineAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,qBAmBlB"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAYlB"}

package/build/types/inputs/_BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BAmGlB"}
+{"version":3,"file":"_BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/inputs/_BottomSheet.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAChC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;YACvE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;KACH,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,aAAa,EACb,KAAK,EACL,eAAe,EACf,OAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,gBAAgB,+BA4FlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7709e0e",
+  "version": "0.0.0-experimental-94569f6",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,12 +93,12 @@
     "rollup": "^4.17.2",
     "storybook": "^8.1.10",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-7709e0e",
-    "@wise/components-theming": "1.3.0"
+    "@wise/components-theming": "1.3.0",
+    "@transferwise/neptune-css": "14.10.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-7709e0e",
+    "@transferwise/neptune-css": "^14.9.6",
     "@wise/art": "^2.7.0",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/common/hooks/useVirtualKeyboard.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export function useVirtualKeyboard() {
+  useEffect(() => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+    if ('virtualKeyboard' in navigator) {
+      (navigator.virtualKeyboard as any).overlaysContent = true;
+    }
+    return () => {
+      if ('virtualKeyboard' in navigator) {
+        (navigator.virtualKeyboard as any).overlaysContent = false;
+      }
+    };
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
+  }, []);
+}

package/src/field/Field.story.tsx

@@ -2,12 +2,10 @@ import { useState } from 'react';
 
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
-import { Sentiment } from '../common';
 
 export default {
   component: Field,
   title: 'Field',
-  tags: ['autodocs'],
 };
 
 export const Basic = () => {
@@ -19,22 +17,43 @@ export const Basic = () => {
   );
 };
 
-export const WithStatusMessages = () => {
+export const WithErrorMessage = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <div>
-      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-      <Field label="Phone number" message="This is a helpful message">
-        <Input value={value} onChange={({ target }) => setValue(target.value)} />
-      </Field>
-    </div>
+    <Field label="Phone number" error="This is a required field">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
+
+export const WithHelp = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Field label="Phone number" hint="This is a helpful message">
+      <Input value={value} onChange={({ target }) => setValue(target.value)} />
+    </Field>
+  );
+};
+
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field label="Phone number" hint="Please include country code" error={error}>
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          if (!value) {
+            setError('This is a required field');
+          } else {
+            setError(undefined);
+          }
+        }}
+      />
+    </Field>
   );
 };